[JS] 객체(Object)

객체(Object) 

: 키로 구분된 데이터 집합이나 복잡한 개체를 저장한다. (서랍장)

let 객체명 = { };

 

• 객체는 순서를 보장하지 않는다 ❌
  - 순서가 중요하면 배열 사용

 

 

 

프로퍼티(property)

: 서랍장 안의 파일 역할

키(key): 값(value)

 

• 프로퍼티의 키는 '프로퍼티 이름', '식별자' 라고도 부른다. (파일의 이름표 역할)
  - 키의  문자형, 심볼형이 아닌 값은 자동으로 문자형으로 변환

let user = { // 객체 user에 두 개의 프로퍼티가 있다. (name, age)
  name = "Nadia",
  age = 24
};

 

 

• 프로퍼티 값 읽기 / 추가

객체명.프로퍼티 키

alert(user.name); // Nadia
alert(user.age); // 24

user.isAdmin = true; // 프로퍼티 값 추가하기 (boolean형)

 

 

• 프로퍼티 삭제
  - delete 연산자 사용

delete user.age; // 프로퍼티 삭제

 

 

• 프로퍼티 이름이 여러 단어인 경우
  - 프로퍼티 이름(키)을 "따옴표"로 묶어줘야 한다.

let user = {
  name: "Nadia",
  age: 24,
  "likes birds": ture // 복수 이름은 따옴표로 묶기
};

 

 

 

 

계산된 프로퍼티

: 객체 생성 시 객체 리터럴 안의 프로퍼티 키가 [대괄호]로 묶여있는 경우

let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");

let bag = {
  [fruit]: 5, // 변수 fruit에서 프로퍼티 이름을 동적으로 받아온다.
};

alert(bag.apple); // fruit에 "apple"이 들어오면 5 출력

• [fruit]는 프로퍼티 이름을 변수 fruit에서 가져오겠다는 것을 의미
• 사용자가 대화창에 apple을 입력하면 bag에는 {apple:5}가 할당됨

위 예시와 동일하게 동작
let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");
let bag = {}; // 객체 리터럴

bag{fruit} = 5; // 객체에 fruit 프로퍼티 생성

 

 

* 프로퍼티 값을 기존 변수에서 받아와 사용하는 경우

function makeUser(name, age) { // 함수 선언
  return {
    name: name,
    age: age,
  };
}

let user = makeUser("Nadia", 24);
alert(user.name); // Nadia

 

 

---

대괄호 표기법

: 프로퍼티 이름이 여러 단어인 경우, 점 표기법을 사용하지 못한다.

• 키가 유효한 변수 식별자가 아닌 경우에 사용
• 대괄호 표기법에서 문자열을 사용할 땐 "따옴표"로 묶어줘야 함

let user = {};

user["likes birds"] = true; // 선언 (프로퍼티 키가 여러 단어)

alert(user["likes birds"]); // true

delete user["likes birds"]; // 프로퍼티 삭제

 

 

 

점 표기법

: 유효한 변수 식별자인 경우에만 사용

(유효한 변수 식별자: 공백 X, 숫자로 시작 X, 특수문자 X ($와 _제외))

user.key = true;

user = {
   ket : true
}

 

 

---

 

객체