[JS-엘리] JS 7강 - 오브젝트 넌 뭐니? | (JavaScript ES6)

동영상 수강 전 본문 내용 스캔.

동영상 수강 후 본문 내용 스캔. 

목차 

 

00:39 mdn object

01:00 1. Literals and properties

05:20 2. Computed properties

08:58 3. Property value shorthand

10:07 4. Constructor function

11:56 5. in operator 

12:47 6. for..in vs. for..of

15:02 7. Fun cloning 

 

00:39

mdn object

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object

01:00

1. Literals and properties

 

// Objects

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

// 선언 방법 2가지

const obj1 = {}; // 'object literal' syntax

const obj2 = new Object(); // 'object constructor' syntax

/*

// 비효울적인 코드

const name = 'ellie';

const age = 4;

print(name, age);

function print(name, age) {

    console.log(name);

    console.log(age);

}

*/

// 효율적인 코드

function print(person) {

    console.log(person.name);

    console.log(person.age);

}

const ellie = { name: 'ellie', age: 4 };

print(ellie);

// with JavaScript magic (dynamically typed language)

// can add/delete properties later

// 추가 (can add properties later)

ellie.hasJob = true;

console.log(ellie.hasJob);

// 삭제 (can delete properties later)

delete ellie.hasJob;

console.log(ellie.hasJob);

결과보기

05:20

2. Computed properties

 

// 2. Computed properties

// Key should be always string

console.log(ellie.name); // 코딩 순간 key가 정해져 있을 때

console.log(ellie['name']); // 코딩 순간 key가 정해져 있지 않을 때

ellie['hasJob'] = true;

console.log(ellie.hasjob); // undefined (※ 엘리 님 영상에선 true 찍힘.)

console.log(ellie['hasJob']); // true

function printValue(obj, key) {

    // console.log(obj.key); // X

    console.log(obj[key]); // O

}

printValue(ellie, 'name');

printValue(ellie, 'age');

 

결과보기

08:58

3. Property value shorthand

Object 생성 함수 만들기 : Object 생성 시 key 반복적으로 적는 번거로움 해결 가능. 

 

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

function makePerson(name, age) {

    return { 

       // key와 value 동일 시, 축약 가능.    

        name, // name:  name,

        age, // age: age,

    }

} 

 

결과보기

PS. 위 파란색 부분은 아래 constructor function 함수 이용해 간단히 표현 가능.

10:07

4. Constructor function

 

// 4. Constructor function

// Object 생성 함수는 5강에서 설명한 class처럼 Template 역할.

// 위 파란색 코드를 더 간결하게 표현하기.

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

console.log(person4);

function Person(name, age) {

    // this = {};  // 생략 가능. 주로 생략.

    this.name = name;

    this.age = age;    

    // return this; // 생략 가능. 주로 생략.

}

 

결과보기

11:56 

5. in operator

Object 안에 key가 존재하는지 여부 체크

 

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

 

결과보기

12:47

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

Object의 key・value 출력

 

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

// for (key in obj)

for (let key in ellie) {

    console.log(key);

}

// for (value of iterable)

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

// 무식한 방법

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

    console.log(array[i]);

}

// 현명한 방법

for (let value of array) {

    console.log(value);

}

 

결과보기

PS1. "use strict"; 모드 사용 시, 핑크색 let 키워드 빠지면 에러 남.

PS2. 영상에선 "use strict"; 코드가 누락된 상태라 에러 안 난 것임.

15:02 

7. Fun cloning

[객체 복사]

 

// 7. Fun cloning

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

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

const user2 = user;

user2.name = 'coder';

console.log(user);

결과보기

 

console.clear();

// old way

user2.name = 'ellie';

const user3 = {};

for (let key in user) {

    user3[key] = user[key];

}

console.log(user3);

결과보기

 

console.clear();

// new way1

const user4 = {};

Object.assign(user4, user);

console.log(user4);

결과보기

 

 

console.clear();

// new way 2

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

console.log(user4);

결과보기

 

console.clear();

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

결과보기

 

PS1. "use strict"; 모드 사용 시, 핑크색 let 키워드 빠지면 에러 남.

PS2. 영상에선 "use strict"; 코드가 누락된 상태라 에러 안 난 것임.