객체 1

원시형 타입(primitive type) : 오직 하나의 데이터만 담을 수 있는 자료형

• number, string, boolean…

 

객체형은 원시형과 달리 다양한 데이터 - 키로 구분된 데이터 집합, 복잡한 개체 - 를 담을 수 있다

 

⭐️객체를 잘 이해하고 있어야 한다

 

객체 리터럴 문법 ⬇️

 

let object = {

key 1 : value 1, // 프로퍼티(property)

key 2 : value 2,

key 3 : value 3,

…

} // 객체 선언 시 가장 많이 쓰는 문법

 

객체 생성자 문법 ⬇️

 

let data = new Object(); 

 

key(문자형만 들어올 수 있다): value(모든 자료형이 허용)

로 이루어진 프로퍼티(property)를 여러개 넣을 수 있다

 

복잡한 서랍장 안에 이름표를 보고 파일을 찾듯, 객체에선 키를 이용해 프로퍼티를 쉽게 찾을 수 있으며 추가나 삭제도 할 수 있다

 

리터럴과 프로퍼티

 

let object = {

key 1 : value 1, // 프로퍼티(property)

key 2 : value 2,

key 3 : value 3,

…

}

 

프로퍼티 키 = 프로퍼티 이름 = 식별자

 

프로퍼티 값 읽기 ➡️ 점 표기법(dot notation)

console.log(object.key 1)

console.log(object.key 2)

 

프로퍼티 추가하기(boolean type)

object.isAdmin = true;

 

let object = {

key 1 : value 1, // 프로퍼티(property)

key 2 : value 2,

key 3 : value 3,

isAdmin : true,

…

}

 

프로퍼티 삭제하기(delete)

delete object.key3;

 

여러단어를 사용했을 경우는 double quote(“”)를 사용해 묶어줘야 한다

ex)

 

let obj = {

key 1 : value 1, // 프로퍼티(property)

key 2 : value 2,

key 3 : value 3,

isAdmin : true,

“likes birds” : true, // 만약 마지막 프로퍼티라면 , 로 끝낼 수 있다

…

}

 

const = [ … ], const = { … } 모두 사용 가능 !!

왜죠? const는 key는 고정하지만 value는 고정하지 않기 때문에 - 변화가 가능 - 

 

대괄호 표기법

여러 단어를 조합해 프로퍼티 키를 만든 경우엔 점 표기법으로 읽을 수 없다

 

obj.likes birds = true // syntax error

 

점(dot)은 유효한 변수 식별자(공백이 없어야 함/숫자로 시작하면 안됨/$,_를 제외한 특수문자가 없어야 함)인 경우에만 사용 가능

 

그래서 대괄호 표기법(square bracket notation)을 사용한다

주의할 건 “”로 묶어줘야 한다

 

obj.[“likes birds”] = true; // set

console.log(obj.[“likes birds”]); // get

delete obj.[“likes birds”] ; // delete

 

모든 표현식의 평가 결과를 프로퍼티 키로 사용할 수 있다

let key = “likes birds”;

 

// obj[“likes birds”] = true; 와 같다

obj[key] = true;

 

계산된 프로퍼티(computed property)

• 프로퍼티 키가 [ ]로 둘러싸여 있는 경우

 

ex)

let fruit = prompt(“어떤 과일을 구매?”, “apple”);

 

let bag = {

[fruit]: 5, // 변수 fruit에서 프로퍼티 이름 동적으로 받아 온다

};

 

console.log(bag.apple) // fruit에 "apple"이 할당되었다면, 5가 출력

 

복잡하게 표기할 수 있기 때문에 상황이 복잡해지면 사용하게 된다

 

단축 프로퍼티

 

function makeUser(name, age) {

  return {

    name: name,

    age: age,

    // ...

  };

}

 

let user = makeUser("John", 30);

alert(user.name); // John

 

변수를 사용해 프로퍼티를 만드는 경우 - 코드를 짧게 줄일 수 있다

 

더 간단한 예시 ⬇️

 

function makeUser(name, age) {

  return {

    name, // name: name 과 같음

    age,  // age: age 와 같음

    // ...

  };

}

 

일반 프로퍼티와 단축 프로퍼티 함께 사용하는 것도 가능하다 ⬇️

 

let user = {

  name,  // name: name 과 같음

  age: 30

};