JavaScript & Node.js
#.8 Object
Haksae
2022. 1. 9. 15:36
1. Object
- one of the JS’s data types
- a collection of related data and / or functionality
- Nearly all objects in JS are instances of object
- primitive 데이터 타입은 변수 하나 당 값을 하나만 할당이 가능
- argument가 많아지면 관리하기 힘들고, 로지컬하게 코드를 만들기 어렵기 때문에, object 사용
1. Literals and Properties
💡 object = { key : value}; 오브젝트는 키와 밸류의 집합체이다. 오브젝트는 키(우리가 접근할 수 있는 변수, 프로퍼티)와 그 키가 가지고 있는 값을 가진다.
- object literal syntax
- const object명 = {}
- JS는 클래스가 없어도 오브젝트를 생성할 수 있음
- object constructor syntax
- const object명 = new 클래스명();
- class를 상속하여 오브젝트 생성
function print(person) {
console.log(person.name);
console.log(person.age);
}
const haksae = {name: 'haksae', age: 20};
print(haksae); // haksae
// 20
haksae.Job = 'student'
console.log(haksae.Job) // student
delete haksae.age;
console.log(haksae.age) // undefined
- JS는 동적 언어라서 뒤늦게 property를 추가 및 삭제 가능. 하지만 비추
2. Computed properties (계산된 속성)
- key(properties) should be always 'string' type
- object[’key]
console.log(haksae.name); // dot을 통해
console.log(haksae['name']); // Computed properties; 배열 형식으로도 접근이 가능
//동일하게 출력
haksae['Job'] = 'student' // 이 방식으로도 위와 같이 추가 가능
- dot vs computed property
- dot을 사용하는 경우 : 코딩하는 순간 그 키에 해당하는 값을 받아오고 싶을 때
- computed property : 정확하게 어떤 키가 필요한지 모를 때, runtime에서 결정될 때 받을 때 쓴다.
- 동적으로 키의 밸류를 받아와야할 때 유용하게 쓸 수 있음
//위와 연결
// dot
function printValue(obj, key) {
console.log(obj.key);
}
printValue(haksae, 'name'); // undefined
//computed property
function printValue(obj, key) {
console.log(obj[key]);
}
printValue(haksae, 'name'); // hakksae 출력
3. Property value shorthand
- property 값을 줄 떄 좀 더 짧게 코딩하는 법
const person1 = { name: 'tommy', age: 20 };
const person2 = { name: 'mary', age: 22 };
const person3 = makePerson('haksae', 30);
function makePerson(name,age) {
return {
name // 원래 name: name, 이지만
age // 키와 밸류의 이름이 같다면 생략 가능
};
}
- object를 필요할 때 마다 만들면, 동일한 키와 밸류를 반복해야하는 문제점
- 함수를 이용하면 value만 전달해도 오브젝트를 만드는 것을 만듦
- 예전에 JS에 클래스 개념이 없던 시절에는 이런 식으로 작성했음
4. Constructor function
- 순수하게 오브젝트를 생성하는 함수들은 위와 같이 사용하지 않음
- 대문자로 작성하고 this 사용함
const person3 = new Person('haksae', 30);
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 haksae);
- 해당하는 오브젝트 안에 키가 있는지 확인하는 것
6. for... in, for... of
- for(key in obj) : 모든 키를 부를 때 쓴다.
for(key in haksae) {
console.log(key); // haksae안에 있는 모든 키들을 순차적으로 출력 name, age, Job
}
- for (value of iterable)
- 순차적으로 값을 출력해준다.
const array = [1 2, 4, 5];
for (value of array) {
console.log(value);
} // 1 2 4 5 가 순차적으로 출력된다.
7. cloning
- object.assign(dest, [obj1, obj2, obj3 ...])
- JS에 있는 기본적으로 탑재되어있는 오브젝트 중에 하나
- 모든 오브젝트는 이를 상속 받는다.
const user = {name: 'haksae', age: '20' };
const user2 = user; // 개별 referencesms 생성하되, 같은 userd와 변수값을 할당함
user2.name = 'coder'; // 이렇게하면 user의 name도 변경됨
// old way
const user3 = {};
for (key in user) { // 순차적으로 user의 property를 user3에게 할당
user3[key] = user[key];
}
console.log(user3);
// object.assign
const user4 = {};
Object.assign(user4, user);
or
const user4 = 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); // bule 출력
console.log(mixed.size); // big 출력
출처 : 드림코딩엘리 https://www.youtube.com/channel/UC_4u-bXaba7yrRz_6x6kb_w