JavaScript Object.keys() 메서드 완벽 가이드: 객체 키 추출 방법

JavaScript의 Object.keys() 메서드는 객체(Object)에 포함된 키(key)들을 가져와 해당 키들이 담긴 배열을 반환합니다. 반환되는 배열에서 키들의 순서는 원본 객체에 나타난 순서를 그대로 따릅니다.

JavaScript(JS) 객체는 크게 두 가지 요소로 구성됩니다. 바로 키(keys)와 값(values)입니다.

객체를 다루다 보면 해당 객체와 연관된 키 목록을 가져와야 하는 경우가 종종 있습니다. 바로 이럴 때 JavaScript의 Object.keys() 메서드가 유용합니다. 이 메서드를 사용하면 객체 내 모든 프로퍼티 이름(property name)으로 이루어진 배열을 손쉽게 생성할 수 있습니다.

이 글에서는 예제 코드와 함께 Object.keys() 메서드를 사용해 객체에 저장된 키 목록을 반환하는 방법을 살펴보겠습니다. 또한 JavaScript 객체의 기본 구조도 함께 간단히 짚어보겠습니다.

JavaScript 객체 복습

JavaScript에서 객체(Object)는 키를 값에 매핑하는 매핑 데이터 타입입니다. 객체에 저장할 수 있는 값으로는 문자열, 숫자, 불리언(Boolean) 등 다양한 데이터 타입이 있습니다. 다음은 JavaScript 객체의 예시입니다:

const job_description = {
	position: "Sales Assistant",
	floor_worker: true,
	hours_per_week: 38
};

콜론(:) 왼쪽에 있는 단어들이 객체의 키이며, 콜론 오른쪽에 있는 단어들이 값입니다. JavaScript 객체는 Python의 딕셔너리(dictionary)에 해당하는 개념이라고 생각하면 이해하기 쉽습니다.

JavaScript Object.keys() 메서드란?

JavaScript의 Object.keys() 메서드는 JavaScript 객체 또는 JSON 객체 내부의 키들을 반환합니다. 반환된 키들은 객체에 나타난 순서대로 저장됩니다.

Object.keys() 메서드의 기본 문법은 다음과 같습니다:

Object.keys(object_name)

Object.keys() 메서드는 하나의 매개변수를 받습니다. 바로 키를 가져오고자 하는 객체의 이름입니다. 이 메서드는 지정한 객체의 모든 키 이름을 JavaScript 배열 형태로 반환합니다.

주목할 점은 메서드 이름 자체가 Object.keys()라는 것입니다. 이는 keys()가 Object의 정적 메서드이기 때문입니다. 따라서 키를 가져올 객체는 반드시 Object.keys()의 매개변수로 지정해야 하며, keys()를 임의의 객체에 직접 붙여 호출할 수 없습니다. 개별 객체에는 keys() 메서드에 대한 접근 권한이 없기 때문입니다.

Object.keys() 기본 예제

예제를 통해 이 메서드가 실제로 어떻게 동작하는지 살펴보겠습니다.

앞서 우리는 마트에서 근무할 직업 정보를 담은 'job_description'이라는 객체를 만들었습니다. 이 객체에는 JavaScript 불리언 값, 문자열, 정수가 포함되어 있습니다. 이제 이 객체의 키 목록을 가져오고 싶다고 가정해 봅시다.

다음 코드를 사용하면 키 목록을 생성할 수 있습니다:

const job_description = {
	position: "Sales Assistant",
	floor_worker: true,
	hours_per_week: 38
};

var job_keys = Object.keys(job_description);

console.log(job_keys);

위 코드를 실행하면 다음과 같은 결과가 출력됩니다:

["position", "floor_worker", "hours_per_week"]

먼저, 마트에서 채용 중인 직업 정보를 담은 객체를 저장하는 상수 'job_description'을 선언했습니다.

그다음, Object.keys()를 사용해 해당 객체와 연관된 키 목록을 가져오고, 그 결과를 변수 'job_keys'에 할당했습니다. 마지막으로 'job_keys' 배열의 내용을 JavaScript 콘솔에 출력했습니다.

실행 결과를 보면 코드가 세 개의 값을 담은 배열을 반환한 것을 확인할 수 있습니다. 각 값은 객체 내 고유한 키 이름을 나타냅니다.

Object.keys() 활용 예제: 반복문과 함께 사용하기

이번에는 이 메서드를 활용하는 또 다른 예제를 살펴보겠습니다.

객체의 키 목록을 출력하되, 각 키 앞에 "키 이름: "이라는 접두사를 붙이고 싶다고 가정해 봅시다. 다음 코드를 사용하면 됩니다:

const job_description = {
	position: "Sales Assistant",
	floor_worker: true,
	hours_per_week: 38
};

var job_keys = Object.keys(job_description);

for (var key of job_keys) {
	console.log("키 이름: " + key);
}

위 코드를 실행하면 다음과 같은 결과가 출력됩니다:

키 이름: position
키 이름: floor_worker
키 이름: hours_per_week

먼저 콘솔에 출력하고자 하는 키를 가진 'job_description' 객체를 정의했습니다. 그다음 JavaScript의 Object.keys() 메서드를 사용해 객체 내 키 목록을 가져왔습니다.

이어서 'for...of' 반복문을 사용해 'job_description' 객체의 모든 키를 하나씩 순회했습니다.

각 키에 대해 "키 이름: "이라는 문자열과 키 이름을 콘솔에 출력했습니다. 'for...of' 반복문의 동작 원리에 대해 더 자세히 알고 싶다면 JavaScript 반복문 관련 초보자 가이드를 참고해 보세요.

마치며

Object.keys() 메서드는 JavaScript 객체에 저장된 키 목록을 가져옵니다. 반환된 키들은 배열 형태로 저장됩니다. 객체 끝에 keys()를 직접 붙여 호출하는 방식으로는 키를 가져올 수 없으며, 반드시 Object.keys() 문법을 사용해야 한다는 점을 기억하세요.

이 글에서는 JavaScript 객체의 기본 개념과 Object.keys() 메서드의 사용법을 알아보았습니다. 이제 여러분도 전문적인 JavaScript 개발자처럼 Object.keys()를 활용해 객체의 키 목록을 자유롭게 가져올 수 있을 것입니다!