동영상 수강 전 본문 내용 스캔.
동영상 수강 후 본문 내용 스캔.
목차
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"; 코드가 누락된 상태라 에러 안 난 것임.
