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

Object.keys() 메서드란?

객체를 만들다 보면 상황에 따라서는 객체의 key값만 가지고 오고 싶을 때도 있다. 

Object.keys() 메서드는 객체(typeof 연산자로 확인했을 때 object가 반환되는)의 프로퍼티들 중에서 key값, 다른 말로 프로퍼티 네임들만 묶어서 배열로 반환하는 메서드이다. 

 

문법

Object.keys(obj);

Object.keys 메서드의 기본 문법은 그냥 메서드 그대로 Object 객체에 keys 메서드를 호출하고 파라미터로 Key값을 알아내고자 하는 객체를 전달해주면 된다.

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

const myKeys = Object.keys(myObject);

console.log(myKeys);
// (6) ["name", "enName", "members", "genre", "agency", "making"]

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

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

const myKeys = myObject.keys();

console.log(myKeys);

일반적으로 생성한 객체에는 keys라는 메서드는 존재하지 않는다.

 

배열에도..!

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

const myKeys = Object.keys(myArray);

console.log(myKeys);
// (8) ["0", "1", "2", "3", "4", "5", "6", "7"]

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

배열에 사용할 경우에는 대상이 되는 배열의 각 인덱스가 담긴 배열이 리턴된다.