[강의노트][드림코딩] Object 심화

드림코딩 자바스크립트 오브젝트 심화 강의 노트

 

Object

- One of the javascript data type

- a collection of related data and/or functionality

- nearly all objects in javascript  are instance of Object

- object 는 key & value 의 집합체

- key = 접근 가능한 property

const leo = {

    name: 'leo',

    age: 32,

    hobby: 'soccer'

}

function print(person){

    console.log(person.name);

    console.log(person.age)

}

print(leo)

1. Literals & properties 

- Object 만드는 방법 두가지

1) Object literal syntax

const obj1 = {

    field1:"value"

}

2) Object constructor syntax

const obj2 = new Object({

    field1: "vlaue"

})

console.log(obj1);

console.log(obj2);

leo.hasJob = true;

console.log(leo);

RunTime(프로그램이 동작하고 있을 때) 중 동적으로 key & value 추가 가능 - 권장사항은 아님

delete leo.hasJob;

console.log(leo);

2. Computed properties - 실시간으로 runtime에서 key값이 결정될 때  사용

console.log(leo.name);

console.log(leo['name']); //property(key)는 string type 으로 기재 필요

leo['hasJob'] = true;

console.log(leo['hasJob']);

function printValue(obj, key){

    // console.log(obj.key);

    console.log(obj[key]);

}

printValue(leo, 'name');

3. Property value shorthand

const person1 = {name: 'Bob', age: 12}

const sonja = new Person("Sonja", 45);

console.log(sonja.name)

const doki = new Person("Doki", 22);

console.log(doki.age)

4. Constructor function

function Person(name, age){

    //this = {};

    this.name;

    this.age;

    // return this;

}

순수하게 object를 만들기 위해 사용하는 함수는 대문자로 시작 - 사실상 Class와 동일

return{

     name, // name : name

     age // age : age

}

 5. in operator

console.log('name' in  leo); // true

6. for...in vs for...of

for (key in obj)

for (a in leo){

    console.log(a);

}

leo라는 object의 key 값들이 a에 할당되며 진행

for (valeu of iterable)

const array1 = [1, 2, 3, 4, 5,6];

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

    console.log(array1[i]);

}

for(v of array1){

    console.log(v)

}

7. Cloning

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

const user = {name : 'John', age : 20}

const user2 = user;

console.log(user===user2);

user2.age = 88;

console.log(user.age);

console.log(user2.age)

// old way

const user3 = {};

for (key in user){

    user3[key] = user[key];

}

console.log(user3)

user3.name = 'Eric';

console.log(user);

console.log(user3);

// new way

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

user4.name = 'Mozarzh'

user4.age = '152'

console.log(user);

console.log(user4);

// assign 관련 example

const fruit1 = {color : 'red'};

const fruit2 = {color : 'blue', size : 'big'}

const fruitMixed = Object.assign({}, fruit1, fruit2);

console.log(fruitMixed);