객체 리터럴(Object Literal)

객체는 여러개의 데이터를 한 변수에 저장할 수 있는 자료형
객체는 키(key)를 통해 대응하는 값(value)에 접근 할 수 있는 key-value 쌍으로 이루어져 있다.
객체의 0개 이상의 프로퍼티 집합

info

객체 vs 객체 리터럴

공통점
- 자바스크립트의 데이터 구조로 사용되며, key-value 쌍을 이용하여 데이터를 저장
차이점
- 객체
  - 함수, 배열, 정규표현식은 객체의 일종
  - 다양한 생성자 함수나 클래스를 통해 생성될 수 있는 모든 인스턴스를 포함
  - 복잡한 구조 및 상속 구조를 필요로 하는 경우에 적합
- 객체 리터럴
  - 중괄호 {}를 사용하여 객체를 직접 선언하고 초기화하는 방식
  - 간단한 구조의 객체를 생성할 때 사용

객체와 객체 리터럴
// 객체 선언
const obj = new Object();
obj.name = "JJamVa";
obj.age = 27;

// 객체 리터럴 선언
const objLiteral = {
  name: "JJamVa",
  age: 27,
};

객체 리터럴의 특징

생성

객체의 리터럴 표현은 중괄호 {}를 사용하여 생성. 객체는 key-value 쌍으로 이루어져 있으며, 각 key와 value는 콜론(:)으로 구분.
key와 value 쌍을 합쳐서 속성(attribute) 혹은 프로퍼티(property)라 표현.
속성의 값이 함수인 경우에는 메소드라고 부름.

const obj = {
  name: "JJamVa",
  age: 27,
  from: "seoul",
  language: function () {
    console.log("Java Script!!!");
  }, //메소드

  // function 없이도 메소드 선언 가능
  // language(){
  //     console.log("Java Script!!!");
  // }
};

tip

key값 생성 시, 주의 사항

따옴표가 필요할 경우
- 공백이 포함될 경우
- 숫자로 시작될 경우
- 특수문자가 포함될 경우(_,$를 제외)
- 빈문자열
따옴표가 필요하지 않는 경우
- 특수 문자 포함(_,$)
- 예약어(권장 x)
- 숫자 리터럴
대괄호가 필요한 경우
- 동적 key

const obj = {
  "my name": "JJam", // 공백
  "27age": 27, // 숫자로 시작
  "my-school": "here", // 특수 문자가 포함
  _live: "korea", // 특수문자
  function: true, // 예약어
  1000: 1000, // 숫자 리터럴
  ["my" + "major"]: "FE", // 동적 키
};

caution

const obj = {
  name: "짬바",
  major: "FE",
  name: "JJamVa",
};

console.log(obj); // {name: "JJamVa", major: "FE"}

위와 같이 같은 속성의 key값을 선언 시, 맨 마지막에 입력된 key값에 대한 value로 선언이 된다.

속성값 접근

객체의 속성값에 접근하기 위한 방법
- 객체명.속성: 점 표기법(dot notation)
- 객체명["속성"]: 대괄호 표기법(bracker notation)

const myInfo = {
  name: "JJamVa",
  song: "아리랑",
};

console.log(`${myInfo.name}가 부른 노래는 ${myInfo.song} 입니다.`);
// JJamVa가 부른 노래는 아리랑 입니다.
console.log(`${myInfo["name"]}가 부른 노래는 ${myInfo["song"]} 입니다.`);
// JJamVa가 부른 노래는 아리랑 입니다.

caution

const obj = {
  100: "age",
  "my-name": "park",
  $my$name:"홍",
};

console.log(obj.100)// Syntax error (식별자가 숫자 타입)
console.log(obj."100")// Syntax error (점 표기법에 따옴표 사용)
console.log(obj[100])// 'age' (대괄호 표기법 타입이 문자형으로 변환)
console.log(obj["100"])// 'age'

console.log(obj.my-name)// NaN (obj.my라는 변수(undefind) - name 변수(undefind))
console.log(obj."my-name")// Syntax Error (점 표기법에 따옴표 사용)
console.log(obj[my-name])// ReferenceError(my - name으로 undefined로 변수를 참조)
console.log(obj["my-name"])// park

console.log(obj.$my$name)// 홍 (점 표기법에 (_, $)은 접근 가능)
console.log(obj."$my$name")// Syntax Error (점 표기법에 따옴표 사용)
console.log(obj[$my$name])// Syntax Error(not defined) (변수 참조 undefined로 접근)
console.log(obj["$my$name"])// 홍

점 표기법으로 객체에 접근 시, 따옴표, 특수 기호($, _ 제외), 문자열을 제외한 다른 타입으로는 접근이 불가능
따옴표 + 대괄호을 이용하여 객체 접근에 가장 유연하고 안전한 방법

객체 추가

객체 추가 하는 방법
- 점 표기법: 객체이름.속성 = 새로운 값
- 대괄호 표기법: 객체이름["속성"] = 새로운 값

const myInfo = {
  name: "hong",
};

myInfo.age = 10;
myInfo["major"] = "FE";
console.log(myInfo); // {name: 'hong', age: 10, major: "FE"}

객체 삭제

객체를 삭제하기 위해서는 delete를 사용
- 점 표기법: delete 객체이름.속성
- 대괄호 표기법: delete 객체이름["속성"]

const lion = {
  name: "mutsa",
  face: "scare",
  leg: 4,
};

delete lion.name; // true
delete lion["leg"]; //true
console.log(lion); // {face: "scare"}

객체 존재 확인

객체 안에 존재 여부를 확인 하기 위해 '속성' in 객체이름을 사용

var youtube = {
  username: "JJamVa",
  cash: true,
  startTime: "2023-08-09",
};

console.log("username" in youtube); //true
console.log("name" in youtube); //false

객체의 key, value값 출력 (`for in`)

객체의 반복을 위해 만들어진 기능.
객체 안의 속성들에 접근하여 어떤 키,값을 가지고 있는 지 확인. 조건에 따라 값을 수정 후 사용.

const profile = {
  name: "JJamVa",
  age: 27,
  company: "mutsa",
};

for (let i in profile) {
  //i로 profile의 프로퍼티 수 만큼 반복한다. i의 값은 profile의 속성
  console.log(`${i} : ${profile[i]}`);
}
// name : JJamVa
// age : 27
// company : mutsa

tip

for … in 문 안에서 속성들은 반드시 순서대로 반복되지 않는다.
처리 순서가 중요하다면 for...in보다는 일반적인 반복문 사용을 권장.

객체 리터럴의 특징​

생성​

속성값 접근​

객체 추가​

객체 삭제​

객체 존재 확인​

객체의 key, value값 출력 (for in)​