[JavaScript] 자바스크립트 object 개념

오늘은 자바스크립트에서 object에 대한 개념과 출력하는 방법, 그리고 객체의 속성을 지우는 방법에 대해 알아보는 시간을 가져보자.

 

1. 자바스크립트에서 object란?

---

자바스크립트에서 객체(Object)는 데이터를 저장하고 조작하는 데 사용되는 핵심 데이터 유형 중 하나이다. 객체는 속성(property)과 메서드(method)를 포함할 수 있는 컨테이너로, 이러한 속성과 메서드는 객체의 상태와 동작을 정의한다. 객체는 중괄호 {}로 둘러싸인 키-값 쌍의 집합으로 정의되며, 이 키-값 쌍은 객체의 속성으로 사용된다.

객체 생성 예제 코드 1

// 빈 객체 생성
let person = {};

// 객체에 속성 추가
person.name = "Jack Snider";
person.age = 29;

객체를 생성할 때 위와 같이 처음으로 빈 객체를 중괄호 {}로 변수에 선언하고 객체의 목적에 맞는 속성을 추가할 수 있다.

 

객체 생성 예제 코드 2

let person = {
  name: "Jack Snider",
  age: 29
};

또는 객체를 처음 생성할 때 초기 속성을 포함하여 같이 정의할 수 있다.

 

 

2. 자바스크립트 object 객체 속성 접근 및 출력

---

객체를 생성하고 속성을 정의했으므로, 객체의 속성 값을 출력하는 방법을 살펴보자. 자바스크립트에서 객체의 속성 값을 가져오려면 다음과 같이 점 표기법 또는 대괄호 표기법을 사용할 수 있다.

 

예제 코드

// 점 표기법을 사용하여 객체의 속성 값 가져오기
console.log(person.name); // "Jack Snider"
console.log(person.age);  // 29

// 대괄호 표기법을 사용하여 객체의 속성 값 가져오기
console.log(person["name"]); // "Jack Snider"
console.log(person["age"]);  // 29

위의 두 방법은 모두 동일하게 객체의 속성을 가져오는 방법이다. 일반적으로 점 표기법을 사용하는 것이 가시성이 더 좋다고 생각하지만 동적으로 속성을 접근해야 할 때면 문자열을 사용하는 괄호 표기법이 유용할 수 있다.

 

또한 객체의 메서드는 함수로 정의되며 객체 내에서 특정 동작을 수행할 때 호출된다. 객체의 메서드를 호출하려면 다음과 같이 메서드 이름과 괄호를 사용한다.

 

예제 코드

let person = {
  name: "Jack Snider",
  age: 29,
  greet: function() {
    console.log("안녕하세요, " + this.name + "입니다.");
  }
};

person.greet(); // "안녕하세요, Jack Snider입니다."

객체의 속성에 익명 함수로 초기화하여 위의 예제와 같이 사용할 수 있다.

 

익명 함수에 대해 더 알아보기 

[JavaScript] 자바스크립트 익명 함수(Anonymous Function)

 

3. 객체의 속성 지우기

---

자바스크립트에서 객체의 속성을 제거하는 방법은 delete 연산자를 사용하는 것이다. delete 연산자는 객체의 속성을 제거하는 데 사용된다. 

 

예제 코드

var person = {
  name: "Jack Snider",
  age: 29,
  city: "New York"
};

// 객체의 속성 제거
delete person.age;

console.log(person);

delete 연산자를 사용하여 person 객체의 age 속성을 제거하였다. console.log(person)를 호출하면 수정된 객체가 출력된다.

 

console.log(person) 출력 결과

{
  name: "Jack Snider",
  city: "New York"
}

 

delete 연산자를 사용하여 객체의 속성을 제거할 때 주의해야 할 몇 가지 사항이 있다.

 

delete 연산자 사용 시 주의 사항

---

1. delete 연산자는 객체의 속성만 제거하고, 객체 자체는 수정하지 않는다.

 

2. delete 연산자를 사용하여 제거할 수 없는 속성은 다음과 같다.

• 객체의 프로토타입 체인에 있는 속성

• configurable 속성이 false로 설정된 속성

 

3. delete 연산자는 제거하려는 속성을 정확하게 지정해야 한다. 잘못된 속성 이름을 사용하면 에러가 발생하지 않고 무시된다.

 

4. delete 연산자는 단순히 속성을 제거하는 것이며, 해당 속성에 대한 할당된 메모리 공간을 해제하지 않는다. JavaScript 엔진이 필요한 경우 자동으로 메모리를 관리한다.

 

5. 객체 속성을 확인하기 전에 해당 속성이 존재하는지 확인하는 것이 좋다. hasOwnProperty() 메서드나 in 연산자를 사용하여 확인할 수 있다.