반응형
⭕ 자바스크립트 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')
}
반응형
'프론트엔드 > HTML & CSS & Javascript' 카테고리의 다른 글
자바스크립트 JavaScript | 비동기 처리 (73) | 2024.03.09 |
---|---|
자바스크립트 JavaScript | 구문과 표기법: 전개 구문 (Spread Syntax), 객체 리터럴 표기법, 구조 분해 할당 (Destructuring Assignment) (71) | 2024.03.09 |
자바스크립트 JavaScript | 함수 및 반환 방법 (69) | 2024.03.09 |
자바스크립트 JavaScript | 예외 처리: try-catch-finally 구문 (69) | 2024.03.09 |
자바스크자바스크립트 JavaScript | 문자열 처리: 템플릿 리터럴(Template Literal) (70) | 2024.03.09 |
자바스크립트 JavaScript | 기본 구성 요소: 변수, 함수, 조건문, 삼항연산자, 반복문, 배열 (70) | 2024.03.09 |
HTML 태그: 웹 개발의 기본, 태그의 중요성과 활용법 (0) | 2023.11.07 |
HTML 코딩을 위한 환경 설정: 에디터 선택과 비주얼 스튜디오 코드 소개 (0) | 2023.11.07 |