#자바스크립트 스터디 3 - 객체 메소드(assign, keys 등), Symbol 데이터

컴퓨티드 프로퍼티 (Computed property)

let a = 'age';

const user = {
    name : 'Mike',
    [a] : 30; // [a] 에는 선언되었던 변수의 값이 들어간다. 이게 컴퓨티드 프로퍼티
}

 

객체 메소드

1. Object.assign() : 객체 복사

//Object.assign() : 객체 복제

const user = {
    name : 'Mike',
    age : 30
}

const newUser = Object.assign({}, user);
//빈 객체에 복사가 된다. 
//{}에 초기값을 넣어줄 수 있다. 
//newUser과 user은 동일한 객체가 아님!! 

const newUser2 = Object.assign({gender = 'male'}, user);
//gender가 추가되어 복사가 된다.
//총 3개의 프로퍼티 갖게 됨

 

2. Object.keys() : 키 배열 반환

//Object.keys() : 키 배열 반환

const user = {
    name : 'Mike',
    age : 30,
    gender : 'male',
}

Object.keys(user);//name을 키로 배열로 반환한다.

 

3. Object.values() : 값 반환

//Object.values() : 값 배열 반환

const user = {
    name : 'Mike',
    age : 30,
    gender : 'male',
}

Object.values(user);//name을 키로 배열로 반환한다.

4. Object.entries() : 키/값 배열 반환

//Object.entriew() : 키/값 배열 반환

const user = {
    name : 'Mike',
    age : 30,
    gender : 'male',
}

Object.entries(user);
//키와 값을 쌍으로 묶어서 배열 반환한다.
//["name", "Mike"]
//["age", 30]
//["gender", male]

5. Object.fromEntries() : entries()의 반대로, 배열을 입력하면 키와 값의 객체로 바꿔줌

//Object.fromEntries() : 키/값 객체 반환

const arr = [
    ["name", "Mike"],
    ["age", 30],
    ["gender", 'male']
]

Object.fromEntries(arr); //키 값 객체로 반환

 

property key : 심볼형

//Symbol

const id = Symbol('id'); // '' 안에 있는 것은 설명이다. 
const user = {
    name : 'Mike',
    age : 30,
    [id] : 'myid'
}

Object.keys(user); // Symbol로 된 키는 패스한다.

숨겨져 있는 Symbol 데이터는 어디다가 쓸까? 

특정 위치에 원본 객체를 해치지 않고 속성을 추가할 수 있다. 

//Symbol

const user = {
    name : 'Mike',
    age : 30,
}

const id = Symbol('id'); // '' 안에 있는 것은 설명이다. 
user[id] = 'myid'; //선언되어있는 id를 user객체에 원본 건드리지 않고 속성 추가 

console.log(user);

심볼 설명 보는 법 (전역 & 일반)

//전역 Symbol.for()
//하나의 심볼만 보장
//없으면 만들고 있으면 가져옴
//symbol 함수는 매번 다른 symbol 값을 생성하지만
//symbol.for 메소드는 하나를 생성한 뒤 키를 통해 같은 symbol을 공유한다. 

const id1 = Symbol.for('id');
const id2 = Symbol.for('id'); 
//id1 === id2 동일하다. true

Symbol.keyFor(id1) //"id" 값을 얻게 됨
//전역 심볼이 아닌 경우에는 Symbol.description(user)

 

사용 예시

const user ={
    name : "M",
    age : 30,
};


//내가 작업한 것, for 문에도 걸리지 않으며, 다른사람이 작업한 원본을 해치지 않는다. 
//user.showName = function () (); 
const showName = Symbol('show name');
user[showName] = function() { 
    console.log(this.name);
};

user[showName]();

for(let key in user){
    console.log(`His ${key} is ${user[key]}.`);
} // for문에서는 Symbol 데이터를 스킵함