one of the JS's data types
a collection of related data and/or functionality.
Nearly all objects in JS are instances of Object.
object = {key:value};
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);
1. Literals and properties
const obj1= {}; //'object literal' syntax
const obj2= new Object(); //'object construnctor' syntax
with JS magin(dynamically typed language) can add properties later
ellie.hasJob = true;
console.log(ellie.hasJob);
can delete properties later
delete ellie.hasJob;
console.log(ellie.hasJob);
2. Computed properties_ key should be always string
console.log(ellie.name); //즉시입력
console.log(ellie['name']); //정확한 정보를 모를때, running중 설정될때
ellie['hasJob'] = true;
console.log(ellie.hasJob);
//ex)
function printValue(obj,key){
console.log(obj[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 = new Person('ellie',30);
console.log(person4);
4. Constructor Function
function Person(name, age){
return{
name,
age,
};
//↓
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)
console.clear() //이전data삭제
console.clear() //이전data삭제
for(key in ellie){
console.log(key);
}
for(value of iterable)
const array = [1,2,4,5];
//for(let i = 0; i<array.length; i++){ 대신
for(value of array){
console.log(value);
}
7. Fun cloning
//Object.assign(dest, [ob1,obj2, obj3..])
const user = {name: 'ellie', age:'20'};
const user2 = user;
user2.name = 'coder';
console.log(user); //{name: 'coder', age:'20'};
//old way
const user3 ={ };
for(key in user){
user3[key]=user[key];
}
console.clear();
console.log(user3);
assign<T, U> (target: T, source: U): T & U;
const user4 = {};
Object.assign(user4, user);
console.log(user4);
//간략히
const user4 = Object.assign({}, user);
console.log(user4);
another example
const fruit1 = {color:'red'};
const fruit2 = {color:'blue', size:'big'};
const mixed =Object.assign({},fruit1, fruit2); //뒤값이 덮어씌움
console.log(mized.color); //blue
console.log(mized.size); //big
반응형
'JS > [드림코딩] 엘리 (완)' 카테고리의 다른 글
09강. Array APIs (0) | 2020.07.20 |
---|---|
08강. Array (0) | 2020.07.11 |
06강. class vs object, 객체지향 언어 클래스 정리 (0) | 2020.07.02 |
05강. Arrow function, 함수의 선언과 표현 (0) | 2020.07.01 |
04강. 코딩의 기본, operator, if, for loop, 코드리뷰 팁 (0) | 2020.07.01 |