[Javascript] 4.1 일반 객체 - 순수 객체(plain object)

* 관련 챕터 : 2.5 자료형

JS의 8 가지 자료형 중 객체형만 원시형이 아니다.

원시형은 하나의 데이터(문자열, 숫자 등)만 담을 수 있어 primitive type으로 불린다.

즉, 원시형이 아닌 객체형은 키로 구분된 데이터 집합/복잡한 entity 등 다양한 데이터를 담을 수 있어 중요하다.

기본 형태

빈 객체를 만드는 방법은 두 가지가 있다.

let user = new Object(); // '객체 생성자' 문법
let user = {'키(이름/식별자):값'};  // '객체 리터럴' 문법, 주로 이 방법 사용

객체는 중괄호에 여러 프로퍼티를 넣을 수 있고, 프로퍼티는 ‘키(문자형):값(모든 자료형)”으로 구성되어 있다.

아래 그림으로 생각하면 이해하기 쉽다.

리터럴과 프로퍼티

특징

• 값 점 표기법(dot notation)으로 읽기
  • alert( user.name );
• 값으로 올 수 있는 자료형
  • 모두 가능
• 여러 단어로 프로퍼티 이름 만들면 따옴표로 묶어줄 것
  • "likes birds": true
• 마지막 프로퍼티 쉼표로 끝나기 가능 ⇒ ‘trailing(길게 늘어지는)’ / ‘hanging(매달리는)’ 쉼표

  • 모든 프로퍼티가 유사한 형태를 보이기 때문에 프로퍼티 추가, 삭제, 이동이 용이

    let user = {
      name: "John",
      age: 30,
    }

‼️ 상수 객체 수정 가능 ‼️

• const로 선언된 객체는 수정 가능하다!

const user = {
  name: "John"
};

user.name = "Pete"; // (*)

alert(user.name); // Pete

• **const는 user의 값을 고정하지만, 그 내용은 고정하지 않는다.** (const는 user=...처럼 전체적으로 설정하려고 할 때만 오류 발생)
  

대괄호 표기법

• 점은 키가 유효한 변수 식별자만 사용 가능
• 유효한 변수 식별자
  • 공백 없음
  • 숫자로 시작하지 않음
  • $와 _를 제외한 특수 문자가 없어야 함
• 키가 유효한 변수 식별자가 아닌 경우 : '대괄호 표기법(square bracket notation)' 사용
  • 키에 어떤 문자열이 와도 동작
  • 대괄호 표기법 안에서 문자열 사용시 문자열을 따옴표로 묶어줘야 한다
  • 문자열 + 모든 표현식의 평가 결과를 프로퍼티 키로 사용 가능

let key = "likes birds";

// user["likes birds"] = true; 와 같습니다.
user[key] = true;

• 변수 key는 런타임에 평가 ⇒ 사용자 입력값 변경 등에 따라 값 변경 사항 반영 가능(코드 유연하게 작성 가능)
  • 점 표기법은 반영 불가
• 객체 만들 때 ⇒ 대괄호로 객체 리터럴 안 프로퍼티 키 둘러싼 경우 계산형 프로퍼티라고 한다.

  let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");
  let bag = {};
  
  // 변수 fruit을 사용해 프로퍼티 이름을 만들었습니다.
  bag[fruit] = 5;

점 표기법 vs 대괄호 표기법

• 대괄호 표기법 : 프로퍼티 이름, 값의 제약 없애줘 더 강력. 하지만 작성이 번거롭다.
  ⇒ 프로퍼티 이름 확정+단순한 이름이면 점 표기법 사용하다가 복잡해지면 대괄호 표기법으로 변경하는 게 흔하다.

프로퍼티 값 단축 구문(property value shorthand)

• 코드 간결해짐
• 한 객체에서 일반 프로퍼티와 단축 프로퍼티를 함께 사용 가능

let user = {
  name,  // name: name 과 같음
  age: 30
};

프로퍼티 이름의 제약사항

• 변수 이름(키)엔 ‘for’, ‘let’, ‘return’ 같은 예약어를 사용하면 안되지만 객체 프로퍼티엔 이런 제약이 없다.
• 모든 문자형, 심지어 Boolean 도 가능!(둘 다 아닌 경우에는 문자열로 자동 형 변환)
• 특별한 경우 : __proto__ ⇒ 자세한 건 프로토타입 상속 단원에서,,

객체 추가 연산자

• delete : 프로퍼티 삭제
  • delete obj.prop
• in : 해당 key를 가진 프로퍼티가 객체 내에 있는지 확인
  • "key" in obj
• ‘for…in’ 반복문 : 프로퍼티 나열
  • for (let key in obj)

객체 정렬 방식

• 정수 프로퍼티(integer property)는 자동 정렬(숫자 순으로 오름차순)
  • 정수 프로퍼티 : 변형 없이 정수에서 왔다 갔다 할 수 있는 문자열. 즉, 정수로 변환하거나 변환한 정수를 다시 문자열로 바꿔도 변형이 없다.
    • 예 : "49"는 정수 프로퍼티
    • 예: '+49’와 '1.2’는 정수 프로퍼티가 아님
• 그 외의 프로퍼티는 객체에 추가한 순서 그대로 정렬

자바스크립트에는 일반 객체 이외에도 다양한 종류의 객체가 있다.

• Array – 정렬된 데이터 컬렉션을 저장할 때 쓰임
• Date – 날짜와 시간 정보를 저장할 때 쓰임
• Error – 에러 정보를 저장할 때 쓰임
• 기타 등등

⇒ 이 아이들은 독립적인 자료형이 아닌 객체에 다양한 기능을 넣어 확장한 또 다른 객체