Javascript의 method는 배워도 배워도 끝이 없는 느낌ㅠ
이번엔 객체에 대한 method를 배웠다
객체 method가 이렇게 다양할 줄이야...
객체 method인 keys, values, entries, assign에 대해 살펴보자!
(알고리즘 테스트 할 때 자주 써먹을 수 있을 듯한 느낌!)
Object.keys( )는 객체의 키만 담은 배열을 반환한다.
input이라는 객체가 있다고 가정해보자!
const input = {
writer: "철수",
password: "1234",
title: "안녕하세요",
contents: "반갑습니다"
}
input 객체를 선언한 후, Object.keys( )를 사용하면 다음과 같이 키만을 담고 있는 배열을 가져온다.
Object.keys(inputs)
// ['writer', 'password', 'title', 'contents']
Object.values( )는 객체의 값만 담은 배열을 반환한다.
위와 마찬가지로 input 객체를 선언한 후, Object.values( )를 사용하면 다음과 같이 값만을 담고 있는 배열을 가져온다.
Object.values(inputs)
// ["철수", 1234, "안녕하세요", "반갑습니다"]
Object.entries( )는 객체의 [키, 값] 쌍을 담은 배열을 반환한다.
input 객체를 선언한 후, Object.entries( )를 사용하면 다음과 같이 키, 값이 쌍을 이룬 배열을 가져온다.
Object.entries(inputs)
// [["writer", "철수"], ["password", 1234], ["title", "안녕하세요"], ["contents", "반갑습니다"]]
Object.assign( )는 객체의 모든 열거 가능한 자체 속성을 복사해서 새로운 객체에 붙여넣는다.
위에서 언급한 세 가지 method와 달리 Object.assign( )은 배열을 return하는 것이 아닌 하나의 새로운 객체를 return한다.
Object.assign( target, ...sources )
말로는 뭔가 어려운 느낌이 들지만 코드를 통해 살펴보자.
아래의 예제를 살펴볼 경우, source 객체는 변동이 없는 반면 target 객체에 source 객체가 덮어씌워진 것을 볼 수 있다.
따라서 Object.assign( )의 return값은 target이다.
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);
console.log(target);
// { a: 1, b: 4, c: 5 }
console.log(source);
// { b: 4, c: 5}
console.log(returnedTarget);
// { a: 1, b: 4, c: 5 }
Object.assign( )은 target, source 객체 두 개뿐인 경우만이 아닌, 여러 개의 인수를 합치는 것도 가능하다.
const o1 = { a: 1 };
const o2 = { b: 2 };
const o3 = { c: 3 };
const obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1); // { a: 1, b: 2, c: 3 }
<참조 : https://ko.javascript.info/keys-values-entries, https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign>