티스토리 뷰
Objects
- one of the JavaScript's data types
- a collection of related data and/or functionality
- Nearly all objects in JavaScript are instances 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);
// with JavaScript magic (dynamically typed language)
// can add properties later
ellie.hasJob = true;
console.log(ellie.hasJob); // true
// can delete properties later
delete ellie.hasJob;
console.log(ellie.hasJob); // undefiend
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]); // obj.key -> undefiend
}
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('ellie', 30);
console.log(person4); // {name: 'ellie', 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 (key in ellie) {
console.log(key); // name, age, hasJob
}
// for (value of iterable)
const array = [1, 2, 4, 5];
for (value of array) {
console.log(value); // 1 2 4 5
}
7. Fun cloning
- Object.assing(dest, [obj1, obj2, obj3 ...])
const user = {name: 'ellie', age: '20' };
const user2 = user;
user2.name = 'coder';
console.log(user); // coder
// old way
const user3 = {};
for (key in user) {
user3[key] = user[key];
}
console.log(user3); // {name: 'coder', age: '20'}
const user4 = {};
Object.assign(user4, user);
console.log(user4); // {name: 'coder', age: '20'}
const user5 = Object.assign({}, user);
// 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
※출처
'JavaScript & TypeScript' 카테고리의 다른 글
8. Array APIs (0) | 2020.11.14 |
---|---|
7. Array, API (0) | 2020.11.14 |
5. class vs object (0) | 2020.11.14 |
4. Arrow Function (0) | 2020.11.13 |
3. operator, if, for loop (0) | 2020.11.13 |
링크
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
TAG
- Spring Security
- 프로그래머스 SQL
- JPA 연관관계 매핑
- dreamcoding
- HTTP 완벽가이드
- 이펙티브자바
- java
- 드림코딩
- ㅇㄷㅇㅈ
- 백준
- GCP
- 이펙티브자바 아이템59
- BOJ
- 프로그래머스
- 김영한 JPA
- 가상 면접 사례로 배우는 대규모 시스템 설계 기초
- js array
- 모던자바스크립트
- 백기선 스터디
- HTTP 완벽 가이드
- 이펙티브자바 스터디
- 킹수빈닷컴
- http
- 김영한 http
- REST API
- 이펙티브자바 아이템60
- js promise
- 패스트캠퍼스 컴퓨터공학 완주반
- js api
- JS 딥다이브
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 |
글 보관함