728x90
반응형
자바스크립트 7. 오브젝트 넌 뭐니? | 프론트엔드 개발자 입문편 (JavaScript ES6)
- Objects
- one of the JavaScript's data types.
- a collection of related data and/or functionality.
- Nearly all objects in JavaScript ar instances of Object
- object = { key: value };
1. Literals and properties
const name = 'ellie';
const age = 4;
print(name, age);
function print(name, age) {
console.log(name);
console.log(age);
}
const ellie = {name: 'ellie', age: 4}
function print(person) {
console.log(person.name);
console.log(person.age);
}
const obj1 = {}; // object literal syntax
const obj2 = new Object(); // object constructor syntax
print(ellie);
- 뒤늦게 정보 추가 가능
- 너무 동적으로 코딩하면 나중에 유지보수가 힘들고, 생각지 못한 에러 가능하기때문에 피하는걸 추천
- width JavaScript magic (dynamically typed language)
- ca add properties later
ellie.hasJob = true;
console.log(ellie.hasJob);
- 뒤늦게 삭제도 가능
- can delete properties later
delete ellie.hasJob;
2. Computed properties
- key should be always string
console.log(ellie.name); // 코딩하는 순간 키에대한 정보를 받아올 때 사용
console.log(ellie['name']); // 정확하게 어떤 키가 필요한지 모를때, 런타임에서 결정될 때 사용, 동적으로 키에 관련된 value 받아올 때 유용하게 사용가능
ellie['hasJob'] = true;
console.log(ellie.hasJob);
function printValue(obj, key) {
console.log(ob[key]);
}
printValue(ellie, 'name');
printValue(ellie, 'age');
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 {
name,
age
}
}
4. Constructor function
- 순수하게 object를 생성하는 함수는 보통 대문자로 시작하도록
- return 대신에 this.ㅁㅁ 같이 작성
function Person(name, age) {
// this = {}; 생략
this.name = name;
this.age = age;
// return this; 생략
}
const person5 = new Person('ellie', 30);
5. in operator: property existence check (key in obj)
- 해당하는 obj안에 key가 있는지 확인
console.log('name' in ellie);
console.log('age' in ellie);
console.log('random' in ellie);
console.log(ellie.random);
6. for..in vs for..of
- for (key in obj)
console.clear()
for (key in ellie) {
console.log(key);
}
// for (value of iterable)
const array = [1, 2, 4, 5];
for (value of array) {
console.log(vlaue);
}
7. Fun cloning
- Object.assign(dest, [obj1, obj2, obj3...])
const user = {name: 'ellie', age: '20'};
const user2 = user;
user2.name = 'coder';
console.log(user.name);
// old way
const user3 = {};
for (key in user) {
user3[key] = user[key];
}
console.log(user3);
// new way
const user4 = {};
Object.assign(user4, user);
const user5 = Object.assign{}, user);
console.log(user4);
// another example
const fruit1 = {color: 'red'};
const fruit2 = {color: 'blue', size: 'big'};
const mixed = Object.assign({}, fruit1, fruit2); // 뒤에 붙을수록 앞쪽의 property에 덮어쓴다.
console.log(mixed.color);
consooe.log(mixed.size);
https://www.youtube.com/watch?v=1Lbr29tzAA8&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=10&t=0s
728x90
반응형
'typescript' 카테고리의 다른 글
자바스크립트 8. 배열 제대로 알고 쓰자. 자바스크립트 배열 개념과 APIs 총정리 (0) | 2020.06.22 |
---|---|
Typescript - class (0) | 2020.06.19 |
자바스크립트 6. 클래스와 오브젝트의 차이점(class vs object), 객체지향 언어 클래스 정리 (0) | 2020.06.16 |
자바스크립트로 공백제거(replace, trim) (0) | 2020.06.15 |
type 정보들 (0) | 2020.06.10 |
댓글