Object

Object

• one of the JavaScript's data types
• a collection of related data and/or functionality
• Nearly all objects in JavaScript are instances of Object
• object = { key : value };

 

1. Literals and properties

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

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

const ellie = {name: 'ellie', age: 4};
print (ellie);    // ellie\n4

// with JavaScript magic (dynamically typed language)
// can add properties later
ellie.hasJob = true;
console.log(ellie.hasJob);    // true

// can delete properties later
delete ellie.hasJob;
console.log(ellie.hasJob);    // undefined

 

2. 계산된 properties

• key should be always string

console.log(ellie.name);    // 코딩할 때 해당 값을 받아오고 싶을 때(보통은 이렇게 씀)
console.log(ellie['name']);    // 정확하게 어떤 값인지 모를 때, 실시간으로 원하는 값을 받고 싶을 때
ellie['hasJob'] = true;
console.log(ellie.hasJob);    // true

function printValue(obj, key) {
  console.log(obj[key]);    // 동적으로 키 값을 받아와야 할 때 유용하게 쓸 수 있음
}
printValue(ellie, 'name');
printValue(ellie, 'age');

 

3. Property value shorthand

const person1 = {name : 'bob', age: 2};
const person2 = {name : 'steve', age: 3};
const person3 = {name : 'dave', age: 4};
const person4 = makePerson('ellie', 30};

console.log(person4);    // {name: 'ellie', age: 30}

function makePerson(name, age) {
  return {
    name,
    age,
  };
}

 

4. Constructor Function

const person4 = new Person('ellie', 30);

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

 

5. in operator

• property existence check (key in obj)

console.log('name' in ellie);    // true
console.log('age' in ellie);    // true
console.log('random' in ellie);    // false
console.log(ellie.random);    // undefined

 

6. for .. in vs for .. of

console.clear();    // console.log 출력 값들을 지울 수 있음

// for (key in obj)    key 값들을 모두 불러오기
for (key in ellie) {
  console.log(key);    // name age hasJob
}

// for (value of iterable)    value 값들을 순차적으로 불러오기
const array = [1, 2, 4, 5];
for (value of array) {
  console.log(value);    // 1 2 4 5
}

 

7. Fun cloning

• Object.assign(dest, [obj1, obj2, obj3...])

const user = {name: 'ellie', age: '20'};
const user2 = user;
console.log(user);

// old way
const user3 = {};
for (key in user) {
  user3[key] = user[key];
}
console.log(user3);    // {name: 'ellie', age: '20'}

// new way
const user4 = Object.assign({}, user);
console.log(user4);    // {name: 'ellie', age: '20'}

// another example
const fruit1 = {color: 'red'};
const fruit2 = {color: 'blue', size: 'big'};
const mixed = Object.assign({}, fruit1, fruit2);    // 뒤에 위치한 배열의 값으로 덮어씌움
console.log(mixed.color);    // blue
console.log(mixed.size);    // big