자바스크립트 7. 오브젝트 넌 뭐니? | 프론트엔드 개발자 입문편 (JavaScript ES6)

자바스크립트 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