JavaScript에서 객체(Object)는 흔히 해시(hash) 또는 연관 배열이라고 불리며, 키(key)와 값(value)의 쌍으로 데이터를 저장합니다. 객체에 담긴 모든 키를 한눈에 확인하고 싶다면 Object.keys() 메서드를 사용하는 것이 가장 간단하고 효율적인 방법입니다.
Object.keys()는 인자로 전달받은 객체의 고유 열거 가능 속성 이름들을 문자열 배열 형태로 반환합니다. 별도의 반복문 없이도 객체의 전체 키 목록을 즉시 얻을 수 있어 매우 유용합니다.
예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript에서 해시 키 찾기</h1>
<div style="color: green;" class="result"></div>
<button class="Btn">DISPLAY</button>
<h3>위 버튼을 클릭하면 해시 키가 표시됩니다</h3>
<script>
let resEle = document.querySelector(".result");
let obj = {
firstName: "Rohan",
lastName: "Sharma",
age: 22,
};
document.querySelector(".Btn").addEventListener("click", () => {
resEle.innerHTML += "object keys are " + Object.keys(obj);
});
</script>
</body>
</html>
코드 설명
- obj: firstName, lastName, age 세 개의 키를 가진 객체(해시)입니다.
- Object.keys(obj): 객체 obj가 가진 모든 키를 배열 형태로 반환합니다.
- 클릭 이벤트: 'DISPLAY' 버튼을 클릭하면 반환된 키 배열이 초록색 결과 영역(.result)에 출력됩니다.
출력 결과
위 코드를 실행하면 다음과 같은 초기 화면이 나타납니다.
'DISPLAY' 버튼을 클릭하면 아래와 같이 객체의 키들이 화면에 표시됩니다.
참고로 위 예제에서는 innerHTML += 을 사용했기 때문에 버튼을 클릭할 때마다 결과가 기존 내용 뒤에 계속 누적되어 추가됩니다. 한 번만 갱신되도록 하려면 += 대신 = 을 사용하면 됩니다.