[JS] Javascript #6 Summary

Javascript #6 Summary

• 드림코딩 by 엘리: 자바스크립트 7. 오브젝트 넌 뭐니? | 프론트엔드 개발자 입문편 (JavaScript ES6)
  
  
  Caution
  
  강의를 듣고 제가 기억하기 쉽게 기록하여 변형된 내용이 있을 수 있습니다.
  오류가 있거나 해당 글에 문제가 있을 경우 피드백 부탁드립니다.

object

• one of the JavaScript’s data types.

• a collection of related data and/or functionality.

• Nearly all objects in JavaScript are instnaces of Object.

• Form: { key: value };

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

const bruce ={ name: 'bruce', age: 7 };
print(bruce);

>>> bruce
>>> 7

object 를 선언하는 법

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

Dynamically typed language

• with JavaScript magic can add or delete properties later

const bruce ={ name: 'bruce', age: 7 };

// Add a property
bruce.hasJob = true;
console.log(bruce.hasJob);

// Delete a property
delete bruce.hasJob;
console.log(bruce.hasJob);

>>> true
>>> undefined

Computed properties

• key should be always string type

• 동적으로 key 값의 value 를 call 할 때 사용

const bruce ={ name: 'bruce', age: 7 };

console.log(bruce.name);  // 코딩하는 그 순간 해당 key 값의 value 를 call 할 때
console.log(bruce['name']);  // computed property

>>> bruce
>>> bruce

Example

const bruce ={ name: 'bruce', age: 7 };

function printValue(obj, key) {
    console.log(obj[key]);
}
printValue(bruce, 'name')

>>> bruce

Property value shorthand

function makePerson(name, age) {
    return {  // key 와 value 의 이름이 동일하다면 아래와 같이 생략가능 (property value shorthand)
        name,  // === name: name,
        age,  // === age: age,
    };
}

const person1 = { name: 'bob', age: 2 };
const person2 = { name: 'steve', age: 3 };
const person3 = { name: 'dave', age: 4 };

const person4 = makePerson('bruce', 7);
console.log(person4);

>>> { name: 'bruce', age: 7 }

Constructor Function

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

const person1 = { name: 'bob', age: 2 };
const person2 = { name: 'steve', age: 3 };
const person3 = { name: 'dave', age: 4 };

const person4 = new Person('bruce', 7);
console.log(person4);

>>> { name: 'bruce', age: 7 }

in operator

• property existence check (key in obj)

const bruce ={ name: 'bruce', age: 7 };

console.log('name' in bruce);
console.log('age' in bruce);
console.log('random' in bruce);
console.log(bruce.random);

>>> true
>>> true
>>> false
>>> undefined

for..in vs for..of

const bruce ={ name: 'bruce', age: 7 };

for (key in bruce) {
    console.log(key);
}

>>> name
>>> age

const array = [1, 2, 4, 5];

for (value of array) {
    console.log(value);
}

>>> 1
>>> 2
>>> 4
>>> 5

Cloning (with assign method)

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

const user = { name: 'bruce', age: 7 };
const user2 = user;  // user 와 user2 는 같은 메모리를 참조하는 상태

const user3 = {};
// 직접 copy 한 값을 user3 에 할당
for (key in user) {
    user3[key] = user[key];
}
console.log(user3);

>>> { name: 'bruce', age: 7 }

with assign method

const user4 = Object.assign({}, user);
console.log(user4);

>>> { name: 'bruce', age: 7 }

Another example of assign method

• 뒤에 나오는 객체는 이전의 객체가 동일한 property 를 가지고 있다면 덮어씌운다.

const fruit1 = { color: 'red' };
const fruit2 = { color: 'blue', size: 'big' };
const mixed = Object.assign({}, fruit1, fruit2);  // fruit2 가 fruit1 의 color 를 덮어씌운다.

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

>>> blue
>>> big