JAVASCRIPT Property

Posted Jun 6, 2024

By HwangInJi 5 min read

프로퍼티(Property)란?

▶ 자바스크립트에서 프로퍼티(Property)는 객체(Object)의 중요한 구성 요소입니다.
객체는 자바스크립트의 핵심 개념 중 하나이며, 다양한 데이터를 구조화하고 조작하는 데 사용되는데 프로퍼티는 이러한 객체의 속성을 정의하며, 각각의 프로퍼티는 키(key)와 값(value)으로 구성됩니다.

프로퍼티의 기본 개념

키와 값
1. 키(key): 프로퍼티의 이름으로, 문자열이나 심볼(Symbol)만 사용할 수 있습니다.

값(value): 프로퍼티에 할당된 데이터로, 어떤 타입이든 가능합니다.

  
const person = {
  name: 'John',
  age: 30
};

위의 예시에서 name과 age는 키이고, ‘John’과 30은 각각의 키에 해당하는 값

프로퍼티의 표기법

점 표기법 (Dot Notation) 객체의 프로퍼티에 접근하거나 값을 변경할 때 주로 사용됩니다.

  
const person = {
  name: 'John',
  age: 30
};

console.log(person.name); // John
person.age = 31;

대괄호 표기법 (Bracket Notation) 프로퍼티 이름이 변수로 제공되거나, 프로퍼티 이름에 공백이나 특수 문자가 포함된 경우 사용됩니다.

  
const person = {
  name: 'John',
  age: 30
};

console.log(person['age']); // 31
const key = 'name';
console.log(person[key]); // John

프로퍼티의 속성

▶ 자바스크립트의 모든 프로퍼티는 실제로 객체의 내부 상태를 제어하는 세 가지 속성을 가집니다:

값 (Value): 프로퍼티가 저장하는 데이터.
쓰기 가능 여부 (writable): 값을 변경할 수 있는지 여부를 나타냅니다.
열거 가능 여부 (enumerable): for…in 루프에서 열거할 수 있는지 여부를 나타냅니다.
구성 가능 여부 (configurable): 프로퍼티의 속성을 변경하거나 프로퍼티를 삭제할 수 있는지 여부를 나타냅니다.

프로퍼티 존재 확인

▶ 객체의 프로퍼티가 존재하는지 확인하는 방법에는 여러 가지가 있습니다.

in 연산자: 객체에 특정 프로퍼티가 있는지 확인합니다.

  
const person = {};
Object.defineProperty(person, 'name', {
  value: 'John',
  enumerable: false
});

console.log('name' in person); // true
console.log('age' in person); // false

hasOwnProperty 메서드: 객체의 자체 프로퍼티(상속받은 프로퍼티는 제외)인지 확인합니다.

  
const person = {};
Object.defineProperty(person, 'name', {
  value: 'John',
  enumerable: false
});

console.log(person.hasOwnProperty('name')); // true
console.log(person.hasOwnProperty('toString')); // false (상속된 프로퍼티)

프로퍼티 삭제

▶ delete 연산자를 사용하여 객체의 프로퍼티를 삭제할 수 있으나, configurable 속성이 true인 경우에만 삭제할 수 있습니다.

  
const person = {};
Object.defineProperty(person, 'name', {
  value: 'John',
  enumerable: false
});

delete person.name;
console.log(person.name); // undefined

결론

▶ 자바스크립트에서 프로퍼티는 객체의 핵심 구성 요소로, 객체의 데이터를 정의하고 조작하는 데 중요한 역할을 합니다.
프로퍼티는 키와 값의 쌍으로 구성되며, 데이터 프로퍼티와 접근자 프로퍼티로 나눌 수 있고 프로퍼티는 다양한 속성을 통해 객체의 동작을 세밀하게 제어할 수 있습니다.
따라서 프로퍼티에 대한 깊은 이해는 자바스크립트로 복잡한 데이터 구조와 로직을 효과적으로 구현하는 데 필수적입니다.

이렇게 오늘은 자바스크립트의 프로퍼티에 대해 알아봤는데요,
면접에서도 충분히 나올 수 있는 질문이기 때문에 미리 공부해두면 좋을 것 같네요! 그렇다면 저는 다음에 또다른 면접에 대비한 내용을 들고오도록 하겠습니다 😁!

자바스크립트