[JavaScript] 5. Object

Literals and properties

object는 key와 value의 집합체이다.
object = {key : value};

// object 생성
const obj1 = {}; // 'object literal' syntax
const obj2 = new Object(); // 'object constructor' syntax

function print(person){
  console.log(person.name);
  console.log(person.age);
}

const ann = {name: 'ann', age: 20}; // 괄호를 이용해 바로 오브젝트 생성
print(ann);

// 자바스크립트는 dinamically type language이기 때문에 아래처럼 뒤늦게 property를 추가할 수 있음
// 가능하면 피하는 것이 좋음!
ann.hasJob = true;
delete ann.hasJob; // 삭제도 가능

Computed properties

const ann = {name: 'ann', age: 20}; 

console.log(ann.name); // dot을 통한 접근
console.log(ann['name']); // computed properties (key는 항상 string type('')으로!)

computed properties는 정확히 어떤 키가 필요한지 모를 때 (런타임에서 결정될 때) 사용
대부분 dot을 사용

function printValue(obj, key){
  console.log(obj[key]);
  // console.log(obj.key); // undefined
}
// key가 동적으로 결정됨
printValue(ann, 'name');
printValue(ann, 'age');

Constructor function

const person1 = {name: 'bob', age: 2}; // 기존
const person2 = Person('steve', 3); // constructor

function Person(name, age){
  this.name = name;
  this.age = age;
}

in operator

해당하는 오브젝트 안에 key가 있는지 없는지 확인

const ann = {name: 'ann', age: 20}; 

console.log('name' in ann); // true
console.log('height' in ann); // false

for..in vs for..of

const ann = {name: 'ann', age: 20}; 

// for..in (key in obj)
for(key in ann){
  console.log(key); // name age
}

// for..of (value of iterable)
const arr = [1,2,3,4];
for(value of arr){
  console.log(value); // 1 2 3 4
}

Cloning

const user1 = {name: 'ann', age: '20'};
const user2 = user1; // user2에 user1의 reference를 대입

user2.name = 'coder';
console.log(user1.name); // coder // user1의 이름도 변경

그렇다면 reference를 복제하는 것 말고 오브젝트를 복제할 수는 없을까?

// old way
const user3 = {};
for(key in user1){
  user3[key] = user1[key];
}

// Object.assign(dest, [obj1, obj2, obj3, ...])
const user4 = Object.assign(user4, user1);

Object.assgin()을 이용해 여러개의 src를 전달해보자

const fruit1 = { color: 'red' };
const fruit1 = { color: 'blue', size: 'big' };
const mixed = Object.assign({}, fruit1, fruit2); // src는 오른쪽으로 가면서 덮어씌워짐!

console.log(mixed.color); // blue
console.log(mixed.size); // size

📁 참고

DreamCoding

---

💛 개인 공부 기록용 블로그입니다. 👻

맨 위로 이동하기