본문 바로가기
프론트엔드/HTML & CSS & Javascript

자바스크립트 JavaScript | 객체(Object) 및 접근 방법

by YUNI Heo 2024. 3. 9.
반응형

 

⭕ 자바스크립트 JavaScript | 객체(Object) 및 접근 방법

➡️ 객체(Object)

객체(Object)는 키와 값을 한 쌍으로 갖는 컬렉션입니다. 자바스크립트에서 객체는 매우 중요한 데이터 타입 중 하나로, 다양한 방법으로 속성에 접근할 수 있습니다.

let person = {
  name: "Alice",
  age: 30
};

 

➡️ Dot Notation (점 표기법): object.key

  • 가장 일반적인 방법으로, 점(.)을 사용하여 객체의 속성에 접근합니다.
  • 키가 유효한 식별자일 경우(공백이나 특수 문자가 없는 경우) 사용할 수 있습니다.
  • 직관적이고 간결하여 가독성이 좋습니다.
console.log(person.name); // Alice

 

➡️ Bracket Notation (대괄호 표기법): object[key]

  • 대괄호 안에 속성의 이름을 문자열로 전달하여 접근합니다.
  • 키가 변수에 저장되어 있거나, 유효한 식별자가 아닐 때(공백, 특수 문자, 숫자로 시작하는 경우 등) 사용됩니다.
  • 동적으로 속성의 이름을 결정할 때 유용합니다.
let property = "age";
console.log(person[property]); // 30

 

➡️ 정의되지 않은 속성에 접근

  • 객체에서 존재하지 않는 속성에 접근하려고 하면, JavaScript는 undefined 값을 반환합니다. 이는 프로그램 내에서 예기치 않은 오류를 발생시킬 수 있는 잠재적 원인이 됩니다.
  • undefined에 대해 속성 접근 연산(. 또는 [])을 수행하려고 하면, JavaScript는 TypeError를 발생시킵니다. 이 오류 메시지는 해당 값이 객체가 아니라서 속성을 읽을 수 없음을 알려줍니다.
console.log(person.height); // undefined

try {
  console.log(person.height.value); // 이 시도는 TypeError를 발생시킵니다.
} catch (e) {
  console.log("Error: " + e.message); // Error: Cannot read properties of undefined (reading 'value')
}

 

반응형