[JS] 10. 기초 문법: 객체

웹/JavaScript

[JS] 10. 기초 문법: 객체

nyJae 2022. 7. 15. 15:10

자바스크립트에서 객체란 비 원시 자료형 중 하나로 키/이름과 값으로 구성된 프로퍼티(property)의 정렬되지 않은 집합을 의미합니다.

[생성 방법]

① new 키워드

let 객체명 = new Object();

② 객체 리터럴 방식 (더 많이 사용)

let 객체명 = { (객체)프로퍼티 };

* 객체 프로퍼티(property): 객체 내부의 속성

↳ 콜론( : )을 이용해 key: value 형식으로 작성합니다.

let a = {
  key1: "value1",    //멤버
  key2: 123,
  key3: true,
  key4: undefined,
  key5: [1, 2],
  key6: function () {}  //메서드
};

console.log(a);

* 멤버와 메서드: 객체를 다루는 방법이라는 뜻에서 객체 안의 함수 프로퍼티를 메서드라고 하고, 함수가 아닌 나머지 프로퍼티들은 멤버라고 합니다.

콘솔 출력 화면

[프로퍼티 접근 방식]

객체 프로퍼티 값에 접근하는 방식은 두 가지가 있습니다.

① 접 표기법

let a = {
  name: "별안간 공대생",
  age: 1,
  say: function () {
    return "안녕하세요";
  }
};

//점 표기법
console.log(a.name); //별안간 공대생 출력
console.log(a.say()); //안녕하세요 출력

② 괄호 표기법

let a = {
  name: "별안간 공대생",
  age: 1,
  say: function () {
    return "안녕하세요";
  }
};

//괄호 표기법
console.log(a.name); //별안간 공대생 출력
console.log(a["say"]()); //안녕하세요 출력

* 반드시 괄호 안에 프로퍼티의 키를 문자열 형태로 입력해야 합니다. 문자열 형식으로 입력하지 않으면 이것을 변수로 인식합니다.

보통은 점 표기법을 더 많이 사용하지만, 동적인 매개변수를 전달 받는 상황이나 특정 키에 접근하는데 그 키가 고정되지 않은 상황에서는 괄호 표기법을 사용합니다.

let a = {
  name: "별안간 공대생",
  age: 1
};

function getPropertyValue(key) {
  return a[key];
}

console.log(getPropertyValue("name"));

[객체 생성 이후에 프로퍼티를 추가/수정/삭제하는 방법]

프로퍼티 추가하기

let a = {
  name: "별안간 공대생",
  age: 1
};

a.country = "한국";
a["status"] = "학생";

프로퍼티 값 수정하기

const a = {
  name: "별안간 공대생",
  age: 1
};

a.name = "@@별안간 공대생@@";
a["age"] = 100;

그런데 여기서 객체 a는 상수로 선언되어 있습니다. 상수는 프로그램 실행 도중 값을 변경할 수 없지만 위 코드는 오류 없이 정상적으로 실행됩니다.

프로퍼티 값을 수정하는 것은 a가 가지는 객체는 수정하는 행위이지 a라는 상수 자체를 수정하는 행위가 아니기 때문입니다.

아래의 코드에서는 a에 대입 연산을 하여 a라는 상수 자체를 수정하여 오류가 발생합니다.

const a = {
  name: "별안간 공대생",
  age: 1
};

a = {
  age: 100;
};    // *오류 발생

프로퍼티 삭제하기

① delete 키워드

const a = {
  name: "별안간 공대생",
  age: 1
};

delete a.age;

delete를 사용하는 방법은 객체와 프로퍼티 간의 연결을 끊을 뿐, 실제로 메모리에서는 프로퍼티 값이 지워지지 않습니다.

② null 값 대입하기 (권장)

const a = {
  name: "별안간 공대생",
  age: 1
};

a.name = null;
a["age"] = null;

null 값을 대입하면 삭제하는 것과 똑같은 효과를 볼 수 있습니다.

delete와 달리 메모리에서도 프로퍼티 값을 지울 수 있기 때문에 프로퍼티를 삭제할 때는 null 값을 대입하여 삭제하는 것이 좋습니다.

[메서드에서 같은 객체 내의 프로퍼티에 접근하기]

자기 자신 객체를 의미하는 this라는 키워드를 이용하여 함수 프로퍼티인 메서드에서 같은 객체에 속한 다른 프로퍼티에 접근할 수 있습니다.

let a = {
  name: "별안간 공대생",
  age: 1,
  say: function () {
    return `안녕하세요, ${this.name}입니다.`;   //this.name은 a.name과 같음
  }
};

console.log(a["say"]()); //'안녕하세요, 별안간 공대생입니다.'출력

[프로퍼티 존재 여부 확인하기]

"키워드명" in 객체명

위와 같은 문장처럼 in 연산자를 이용하면 객체에 해당 프로퍼티가 존재하는지를 확인할 수 있습니다.

in 연산자는 프로퍼티 존재 여부를 판단하여 참/거짓을 반환합니다.

let a = {
  name: "별안간 공대생",
  age: 1
};

console.log("name" in a);   //true 출력
console.log("gender" in a);   //false 출력