[Javascript] 자바스크립트 Object.values 메서드 이해하기

Object.values 메서드란?

Obejct.values() 메서드는 메서드를 호출할 때 파라미터로 전달한 객체가 가지는 프로퍼티들의 프로퍼티 값들만 묶어서 배열로 반환해주는 메서드이다.

Object.keys()와 거의 비슷하다고 볼 수 있다. 메서드 이름 따라 keys는 key들을 모아서 배열로, Object.values는 value들을 모아서 배열로 만들어 주는 메서드라고 생각하면 되겠다.

 

문법

Object.values(obj);

Object.values 메서드의 기본 문법도 keys메서드와 동일하게 그냥 이름 그대로 Object 객체에 values 메서드를 호출하고 파라미터로 프로퍼티 값을 알아내고자 하는 객체를 전달해주면 된다.

const myObject = {
    name: '싹쓰리',
    enName: 'SSAK3',
    members: ['유두래곤', '린다G', '비룡'],
    genre: 'Dance & pop',
    agency: 'MBC',
    making: '놀면뭐하니?'
}

const myValues = Object.values(myObject);

console.log(myValues);
// (6) ["싹쓰리", "SSAK3", Array(3), "Dance & pop", "MBC", "놀면뭐하니?"]

Object.values() 메서드도 역시, 객채가 가지고 있는 메서드를 사용하는 것이 아니라, Object라는 내장 객체의 메서드로 사용하고, 파라미터로 우리가 만든 객체를 집어넣어줘야 하기 때문에 myObject.values()처럼 사용하지 않도록 주의해야 한다.

const myObject = {
    name: '싹쓰리',
    enName: 'SSAK3',
    members: ['유두래곤', '린다G', '비룡'],
    genre: 'Dance & pop',
    agency: 'MBC',
    making: '놀면뭐하니?'
}

const myValues = myObject.values();

console.log(myValues);

역시 일반적으로 우리가 생성한 객체에 values라는 메서드는 존재하지 않는다.

 

배열에도...?

const myArray = ['유고스타', '유산슬', '유라섹', '유르페우스', '유DJ뽕디스파뤼', '유샘', '닭터유', '유두래곤'];

const myValues = Object.values(myArray);

console.log(myValues);
// (8) ["유고스타", "유산슬", "유라섹", "유르페우스", "유DJ뽕디스파뤼", "유샘", "닭터유", "유두래곤"]

배열도 객체이기 때문에 배열도 얼마든지 활용할 수 있다.

하지만 배열에 사용할 경우에는 어차피 같은 배열이 반환되기 때문에, 큰 의미는 없다.

const myArray = ['유고스타', '유산슬', '유라섹', '유르페우스', '유DJ뽕디스파뤼', '유샘', '닭터유', '유두래곤'];

const myValues = Object.values(myArray);

console.log(myValues);
// (8) ["유고스타", "유산슬", "유라섹", "유르페우스", "유DJ뽕디스파뤼", "유샘", "닭터유", "유두래곤"]

console.log(myArray === myValues);
// false

그런데 만약 배열을 복사하려는 목적이였다면 어느 정도 의미가 있을 수는 있겠다.

Object.values메서드에 의해 복사된 배열이 반환되기 때문에, 서로 다른 주소 값을 가지게 되고 위 코드의 마지막 줄에서 확인할 수 있듯 두 배열을 가지고 일치 비교하게되면 false 값이 나오는 걸 확인할 수 있다.