JS 기초 강의(ES5+) - # Objects(7)
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
-
const obj1 = {}; // 'object literal' syntax const obj2 = new Object(); // 'object constructor' syntax function print(person) { console.log(person.name); console.log(person.age); } const ellie = { name: 'ellie', age: 4 }; print(ellie); // -> [ellie] // -> [4]
-
(dynamically typed language), can add properties later
ellie.hasJob = true; // 이렇게 동적으로 추가 가능 but 유지보수 힘듦. console.log(ellie.hasJob); // -> [ture]
- can delete properties later
delete ellie.hasJob; console.log(ellie.hasJob); // -> [undefined]
2. Computed properties
-
키는 무조건 스트링 타입으로 (key should be always string)
console.log(ellie.name); // -> [ellie] console.log(ellie['name']); // -> [ellie] ellie['hasJob'] = true; console.log(ellie.hasJob); // -> [true] function printValue(obj, key) { console.log(obj[key]); } printValue(ellie, 'name'); // -> [ellie] printValue(ellie, 'age'); // -> [4]
3. Property value shorthand (키와 밸류의 이름이 동일하면 생략 가능)
const person1 = { name: 'bob', age: 2 }; const person2 = { name: 'steve', age: 3 }; const person3 = { name: 'dave', age: 4 }; const person4 = new Person('elile', 30); console.log(person4); // -> [Person {name: "elile", age: 30}]
4. Constructor Function
function Person(name, age) { // this = {}; (생략) this.name = name; this.age = age; // return this; (생략) }
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
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 value of array) { console.log(value); }
7. cloning
-
Object.assign(dest, [obj1, obj2, obj3...])
const user = { name: 'ellie', age: '20' }; const user2 = user; console.log(user); // -> [{name: "ellie", age: "20"}]
-
예전 방법
const user3 = {}; for (let key in user) { user3[key] = user[key]; } console.log(user3); // -> [{name: "ellie", age: "20"}]
-
요즘 방법
const user4 = Object.assign({}, user); console.log(user4); // -> [{name: "ellie", age: "20"}]
-
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]
Author And Source
이 문제에 관하여(JS 기초 강의(ES5+) - # Objects(7)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@mslee5240/JS-기초-강의ES5-정리7저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)