[Codecamp-Week4] Object.keys( ), values( ), entries( ), assign( )

·2022년 7월 30일
0
post-custom-banner

Javascript의 method는 배워도 배워도 끝이 없는 느낌ㅠ
이번엔 객체에 대한 method를 배웠다
객체 method가 이렇게 다양할 줄이야...
객체 method인 keys, values, entries, assign에 대해 살펴보자!
(알고리즘 테스트 할 때 자주 써먹을 수 있을 듯한 느낌!)

1. Object.keys( )

1) Object.keys( ) 란?

Object.keys( )는 객체의 만 담은 배열을 반환한다.

2) Object.keys( ) 살펴보기

input이라는 객체가 있다고 가정해보자!

const input = {
	writer: "철수",
    password: "1234",
    title: "안녕하세요",
    contents: "반갑습니다"
}

input 객체를 선언한 후, Object.keys( )를 사용하면 다음과 같이 키만을 담고 있는 배열을 가져온다.

Object.keys(inputs)

// ['writer', 'password', 'title', 'contents']

2. Object.values( )

1) Object.values( ) 란?

Object.values( )는 객체의 만 담은 배열을 반환한다.

2) Object.values( ) 살펴보기

위와 마찬가지로 input 객체를 선언한 후, Object.values( )를 사용하면 다음과 같이 값만을 담고 있는 배열을 가져온다.

Object.values(inputs)

// ["철수", 1234, "안녕하세요", "반갑습니다"]

3. Object.entries( )

1) Object.entries( ) 란?

Object.entries( )는 객체의 [키, 값] 쌍을 담은 배열을 반환한다.

2) Object.entries( ) 살펴보기

input 객체를 선언한 후, Object.entries( )를 사용하면 다음과 같이 키, 값이 쌍을 이룬 배열을 가져온다.

Object.entries(inputs)

// [["writer", "철수"], ["password", 1234], ["title", "안녕하세요"], ["contents", "반갑습니다"]]

4. Object.assign( )

1) Object.assign( ) 란?

Object.assign( )는 객체의 모든 열거 가능한 자체 속성을 복사해서 새로운 객체에 붙여넣는다.
위에서 언급한 세 가지 method와 달리 Object.assign( )은 배열을 return하는 것이 아닌 하나의 새로운 객체를 return한다.

Object.assign( target, ...sources )

말로는 뭔가 어려운 느낌이 들지만 코드를 통해 살펴보자.

2) Object.assign( ) 살펴보기

아래의 예제를 살펴볼 경우, 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>

profile
개발을 개발새발 열심히➰🐶
post-custom-banner

0개의 댓글