object
- 여러 개의 변수를 보다 쉽게 관리하기 위해 만들어짐
- key, value의 집합체
선언 방법
- let obj1 = {name : '김현우', age : 4} // object literal
- let obj2 = new objClass() // object constructor
cf> javascript의 객체의 요소는 선언 후에 추가, 삭제 가능
단, 이런 방식을 사용할 경우, 추후에 유지보수가 어려워짐
ex) obj1.job = 'student'
delete obj1.job
computed properties
객체의 키 접근 방법
1. console.log(obj1.age) -> 4 // 코딩하는 순간 그에 해당하는 값을 받아오고 싶을 때
2. console.log(obj1['age']) -> 4 (property에 ', 대괄호 넣기) // 정확하게 어떤 키가 필요할 지 모를 때
cf> key는 반드시 string 타입으로 넣기(따라서 2번 방법은 문자열로 넣기)
-> 실시간으로 원하는 키의 값을 받아오고 싶다면 2번 방법으로
-> 정확하게 어떤 키가 필요한지 모를 때, 즉 키가 변수로서의 역할을 할 때(?)
ex) funciton printValue(obj, key){
console.log(obj.key) // 코딩하는 이 시점에 우리는 어떤 key를 받을 지 모름
따라서 obj['key']로 입력해야 함
property value shorthand
es5에서는 객체를 생성하는 함수를 만들려고 할 때
function Person(name, age){
return {
name : name,
age : age
};
}
위와 같은 방식으로 만들었지만, return의 key와 value의 값이 같다면, 이를 생략할 수 있음
즉, return {
name,
age
};
}로 입력해도 같은 결과가 나옴
constructor function // 클래스 이전에 객체만을 만드는 함수
function Person(name, age){ // constructor function은 보통 대문자로 시작함
// this = {}; (생략)
this.name = name;
this.age=age;
//return this;(생략)
}
let user4 = new Person( 'abc', 20)
in operator(key가 object 안에 있는지 확인할 수 있음)
console.log('name' in Person) // true
console.log('random' in Person) // false
cf> 정의하지 않은 키를 접근하게 되면 undefined 출력
for .. in vs for .. of
for(key in obj)
for(key in ellie)
console.log(key) // ellie 객체의 key가 출력
for(value of iterable) // object가 아닌 array, string 등에서 사용됨
const array = [1,2,3,4,5];
for(arr of array){
console.log(arr);
}
cloning(객체 복사)
1. 반복문 이용(과거 방식)
let user1={name : 'ab', age:20};
let user3={};
for(key in user1) //user1의 key가 key 변수에 할당됨
user3[key] = user1[key]
2. Object.assign
- js 내부의 모든 객체는 Object 객체를 상속
- Object.assign(T, U, V, ...)
- T : 복사받을 객체
- U, V, ... : 복사해줄 원본
ex) const user4={};
Object.assign(user4, user1)
or const user4 = Object.assgin({}, user1)
ex2) const fruit1 = {color : 'red'}
const fruit2 = {color : 'blue', size : 'big}
const mixed = Object.assign({}, fruit1, fruit2);
// 같은 key를 가진 객체들이 복사될 경우에는
제일 뒤에 있는 객체의 key의 value가 앞의 value로 복사됨
따라서, const mixed ={color: 'blue', size: 'big} 이 됨
'TIL > JavaScript' 카테고리의 다른 글
| Class (0) | 2022.07.15 |
|---|---|
| 배열 관련 함수 (0) | 2022.05.22 |
| 배열(기초) (0) | 2022.05.21 |
| JavaScript - 조건문, 반복문, 형변환 (0) | 2022.05.08 |
| JavaScript - 함수 (0) | 2022.05.08 |