[JavaScript] 객체(Object)

1. 객체 리터럴
2. Computed properties
3. Property value shorthand
4. Constructor Function
5. in 연산자 : 프로퍼티 유무 체크
6. for..in vs for..of
7. 즐거운 복제

 

 

1. 객체 리터럴

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

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

const wonju = { name: 'wonju', age: 24};
print(wonju);

// with JavaScript magic (dynamically typed language)
// (1) 속성 추가
wonju.hasJob = false;
console.log(wonju.hasJob);

// (2) 속성 삭제
delete wonju.hasJob;
console.log(wonju.hasJob); // -> undefined

 

 

2. Computed properties

// 함수의 인자로 key값을 받아야 하는 경우 [key] 형태로 사용함
console.log(wonju.name);
console.log(wonju['name']);
wonju['hasJob'] = true;
console.log(wonju.hasJob);

// 사용 예 
function printValue(obj, key) {
    console.log(obj[key]);
}
printValue(wonju, 'name');
printValue(wonju, 'age');

 

 

3. Property value shorthand

4. 생성자 함수

// ====== 3. property value shorthand ======
const person1 = {name: 'bob', age: 2 };
const person2 = {name: 'steve', age: 3 };
const person3 = {name: 'dave', age: 4 };
const person4 = new Person('wonju', 24);
console.log(person4);

// 더 효율적으로 object 만들기 -> by using 생성자 함수


// ====== 4. Constructor Function =======
function Person(name, age) {
    this.name = name;
    this.age = age;
    // return this;
}

 

 

5. in 연산자 -> 프로퍼티 유무 확인

console.log('name' in wonju);
console.log('age' in wonju); 
console.log('random' in wonju); // -> false
console.log(wonju.random); // -> undefined

 

 

 

6. for..in vs for..of

// for (key in obj)
for (key in wonju) {
    console.log(key);
}

// for (value of iterable)
const array = [1, 2, 3, 4];

// (1) 비효율적인 방법
for(let i = 0; i< array.length; i++) {
    console.log(array[i]);
}

// (2) 효율적인 방법 using for..of
for (value of array) {
    console.log(value);
}

 

 

7. Fun cloning

// Object.assign(dest, [obj1, obj2, obj3...])
const user = { name: 'wonju', age: '24'};
const user2 = user;

user2.name = 'coder';
console.log(user); // -> coder


// old way
const user3 = {};
user.name = 'wonju';
for (key in user) {
    user3[key] = user[key];
}
console.clear();
console.log(user3);

// 좋은 방법
const user4 = Object.assign({}, user);
console.log(user4);

// 다른 예
const fruit1 = { color: 'red' };
const fruit2 = { color: 'blue', size: 'big' };
const mixed = Object.assign({}, fruit1, fruit2);
console.log(mixed.color);
console.log(mixed.size);