[자바스크립트] Object

1. Literals and properies

 

Primitive Type

변수 하나에 값 하나만 담을 수 있다.

 

const name = 'David';

const age = 5;

print(name, age);

function print(name, age) {

    console.log(name);

    console.log(age);

}

 

이렇게 하나하나씩 각각 적어야 하는데,

인자가 많아지게 되면 낱개로 추가해야 하는 것이 많아져 관리하기도 힘들고 로직을 정리하기도 힘듦.

 

그래서

 

const david = { name: 'David', age: 5 };

 

이렇게 하나의 오브젝트로 관리하면

 

print(david);

fuction print(person) {

    console.log(person.name);

    console.log(person.age);

}

 

이렇게 간단하게 연관지어 관리할 수 있다.

 

오브젝트를 만드는 방법으로는

const obj1 = {};                      // 중괄호 이용해 만들 수 있다. 'object literal' syntax.

const obj2 = new Object();   // new를 이용해 클래스를 템플릿으로 이용해서 만들 수 있다. 'object constructor' syntax.

 

자바스크립트에서는 클래스가 없어도 괄호를 이용해서 바로 오브젝트를 생성할 수 있다. 

const david = { name: 'David', age: 5 };

 

 

자바스크립트는 dinamically type languege. 동적으로 타입이 런타임(Runtime: 프로그램이 동작하고 있을 때)에 결정됨.

다른 언어와 달리 자바스크립트에서 오브젝트 만들어 놓은 뒤에 뒤늦게 property를 추가하거나 삭제할 수 있다. 

이렇게 너무 동적으로 코딩하면 나중에 유지보수가 힘들고, 생각지도 못한 오류가 발생할 수 있기때문에 피해야 한다.

 

 

오브젝트는 키와 밸류의 집합체이다.

object = { key : value };

key: 우리가 접근할 수 있는 변수. property.

value: 그 property가 가지고 있는 값.

 

 

2. Computed properties

console.log(david.name);     -  . dot 문법을 적용해서 가져올 수 있기도 하고,

console.log(david['name']);   - computed properies. 배열에서 값을 받아오는 방식.

                                                key는 항상 string타입('키')으로 지정해서 받아와야 한다.

->동일(두 로그 모두 밸류 David로 동일하게 나옴)

 

computed properies는 정확하게 어떤 키가 필요한지 모를 때, 즉 런타임에서 결정 될 때 사용

 

function printValue(obj, key) {

    console.log(obj[key]);

}

printValue(david, 'name');    ->David

printValue(david, 'age');       -> 5

나중에 동적으로 키에 관련된 밸류를 받아와야 할 때 유용하게 사용할 수 있다.

 

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('david', 30);

 

function makePerson(name, age) {

    return (

        name, // 키와 밸류의 이름이 동일하다면 생략가능 (name: name, age: age)

        age

    )

}

이전 자바스크립트에 클래스가 없을 때 이런 식으로 오브젝트를 만들었다.

 

4. Constructor function

다른 계산을 하지 않고 순수하게 오브젝트를 생성하는 함수는 대문자로 시작하고 리턴대신 this.사용

 

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

function Person(name, age) {

    // ( this = {}; )생략. 자바스크립트가 알아서 오브젝트 생성.

    this.name = name;     // return대신 this. 사용

    this.age = age;

    // ( return this; )생략.

    )

}

 

 

5. in operator: property existence check (key in obj)

console.log('name' in david);       ->true

console.log('random' in david);    ->false

console.log(david.random);         ->undefined

 

 

6. for..in   vs    for..of

for (key in obj)

console.clear();

for (key in david) {

    console.log(key);

}

david오브젝트 안에 있는 모든 키가 출력됨.

 

for (value of iterable)

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

for (let i = 0; i < array.length ; i++) {

    console.log(array[i]);

}

이걸 더 쉽게

 

for (value of array) {

    console.log(value);

}

 

 

7. Cloning

const user = { name: 'david', age : '20' };

const user2 = user;

일 때, user가 가르키는 reference가 있고 그게 david, 20을 가리킴.

또, user2가 가르키고 있는 다른 ref가 있고 그게 위와 동일한 david, 20을 가리킴.

이 때

user2.name = 'coder'; 하고(데이빗을 코더로 할당, 변경)

console.log(user)하면 {name:"coder", age: "20"}으로 바뀜.

이런 식으로 말고 오브젝트를 복제하려면

 

// old way

const user3 = {};

for (key in user) {

    user3[key] = user[key];

}

console.log(user3)

 

// 다른방법

const user4 = {};

Object.assign(user4, user);  // assign<T, U>(target: T, source: U): T & U; ....

줄여서

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

console.log(user4)

 

// 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

assign은 뒤에 덧붙여지는 property가 앞의 값을 계속 덮어씌움.