객체타입(object) 자료형

켄·2023년 1월 19일

자바스크립트엔 여덟 가지 자료형이 있습니다.
이 중 일곱 개는 오직 하나의 데이터(문자열, 숫자 등)만 담을 수 있어 '원시형(primitive type)'이라 부릅니다.

객체형은 원시형과 달리 다양한 데이터를 담을 수 있습니다.

객체를 만드는 방법

<script>
let user = {};  // '객체 리터럴' 문법
let user = new Object(); // '객체 생성자' 문법
</script>

객체는 중괄호 {…}를 이용해 만들 수 있습니다. 주로 이 방법을 사용합니다.

프로퍼티 property

<script>
let user = {     // 객체
  name: "John",  // 키: "name",  값: "John" // 1번 프로퍼티
  age: 30        // 키: "age", 값: 30 // 2번 프로퍼티
};
</script>

중괄호 안에는 ‘키(key): 값(value)’ 쌍으로 구성된 프로퍼티(property) 를 여러 개 넣을 수 있습니다.
키엔 문자형, 값엔 모든 자료형이 허용됩니다.

<script>
let user = {
  name: "John",
  age: 30,
  "likes birds": true
};
</script>

likes birds처럼 띄어쓰기가 있거나, 여러 단어를 조합해 프로퍼티 이름을 만든 경우엔 프로퍼티 이름을 따옴표로 묶어줘야 합니다.

점 표기법(dot notation)

프로퍼티 값을 읽는 방법

<script>
// 프로퍼티 값 얻기
alert( user.name ); // John
alert( user.age ); // 30
</script>

불린형 프로퍼티를 추가하는 방법

<script>
user.isAdmin = true; // user 객체에 key: isAdmin, value: true을 추가
</script>

프로퍼티를 삭제하는 방법

<script>
delete user.age; // user 객체의 age 키를 삭제
</script>

상수(const) 객체는 수정될 수 있습니다.
<script>
const user = {
  name: "John"
};

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

alert(user.name); // Pete로 수정이 되었습니다
</script>
const는 user의 값을 고정하지만, 그 내용은 고정하지 않습니다.

const는 user=...를 전체적으로 설정하려고 할 때만 오류가 발생합니다.

프로퍼티(user.name)은 수정됩니다.

대괄호 표기법

여러 단어를 조합해 프로퍼티 키를 만든 경우엔, 점 표기법을 사용해 프로퍼티 값을 읽을 수 없습니다.

<script>
// 문법 에러가 발생합니다.
user.likes birds = true
</script>

'점’은 키가 '유효한 변수 식별자’인 경우에만 사용할 수 있습니다.

공백이 없어야 합니다.

숫자로 시작하지 않아야 합니다.

$와 _를 제외한 특수 문자가 없어야 합니다.

대괄호 표기법(square bracket notation)'을 사용하면 키에 어떤 문자열이 있던지 상관없이 동작합니다.

<script>
let user = {};

// set
user["likes birds"] = true;

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

// delete
delete user["likes birds"];
</script>

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

<script>
let user = {}; // user는 객체
let value = "likes birds"; // value는 likes birds

// ["likes birds"] 대신 변수 이름[value]를 사용해도 됩니다.
user[value] = true; // 	객체 user에 변수 value(likes birds)를 키로 사용했습니다.
</script>

예시: ( 점 표기법으론 불가능합니다.)

<script>
let user = {
  name: "John",
  age: 30
};

let value = prompt("사용자의 어떤 정보를 얻고 싶으신가요?", "name");

// 변수로 접근
alert( user[value] ); // John (프롬프트 창에 "name"을 입력한 경우, age는 30 출력)
// value를 key로 사용했습니다.
</script>

계산된 프로퍼티

객체를 만들 때 객체 리터럴 안의 프로퍼티 키가 대괄호로 둘러싸여 있는 경우
계산된 프로퍼티(computed property) 라고 부릅니다.

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

let bag = {
  [fruit]: 5, // 변수 fruit에서 프로퍼티 이름을 사용자가 입력한 값으로 받아 옵니다.
};

alert( bag.apple ); // 사용자가 "apple"을 입력했다면, 5가 출력됩니다.
</script>

<script>
let fruit = prompt("어떤 과일을 구매하시겠습니까?");
let bag = {};

// 변수 fruit을 사용해 프로퍼티 이름을 만들었습니다.
bag[fruit] = 5;

/// 결과값
alert(bag); // { apple: 5 }
alert(bag.fruit); // undefined
alert(bag[fruit]); // 5

</script>

위 아래 모두 같은 동작을 합니다.
아래 코드가 더 깔끔합니다.

대괄호 안에는 복잡한 표현식이 올 수도 있습니다.

<script>
let fruit = 'apple';
let bag = {
  [fruit + 'Computers']: 5 // bag.appleComputers = 5
};
</script>

대괄호 표기법은 프로퍼티 이름과 값의 제약을 없애주기 때문에 점 표기법보다 훨씬 강력합니다.

단축 프로퍼티

<script>
function makeUser(name, age) {
  return {
    name: name, // *
    age: age, // *
  };
}

let user = makeUser("John", 30);
alert(user.name); // John
</script>

키와 값이 변수의 이름과 동일한 경우 단축 구문(property value shorthand)을 이용하면 코드를 짧게 줄일 수 있습니다.
일반 프로퍼티와 단축 프로퍼티를 함께 사용할 수도 있습니다.

<script>
function makeUser(name, age) {
  return {
    name, // name: name 과 같음
    age,  // age: age 와 같음
  };
}
</script>

짧게 줄여진 코드

프로퍼티 이름

변수 이름엔 ‘for’, ‘let’, ‘return’ 같은 예약어를 사용하면 안됩니다.
예약어: 이미 문법적인 용도로 사용되고 있기 때문에 식별자로 사용할 수 없는 단어들.

객체 프로퍼티엔 이런 제약이 없습니다.

예시로 키에 숫자 0을 넣으면 문자열 "0"으로 자동변환됩니다.

<script>
let obj = {
  0: "test" // "0": "test"와 동일합니다.
};

// 숫자 0은 문자열 "0"으로 변환되기 때문에 두 얼럿 창은 같은 프로퍼티에 접근합니다,
alert( obj["0"] ); // test
alert( obj[0] ); // test (동일한 프로퍼티)
</script>

‘in’ 연산자로 프로퍼티 존재 여부 확인하기

⚠️in 왼쪽엔 반드시 프로퍼티 이름이 와야 합니다. 프로퍼티 이름은 보통 따옴표로 감싼 문자열입니다.
따옴표를 감싸지 않으면 제대로 동작하지 않습니다.

문법:

<script>
"key" in object // object.key 가 존재하나요?
</script>

예시:

<script>
let user = { name: "John", age: 30 };

alert( "age" in user ); // user.age가 존재하므로 true가 출력됩니다.
alert( "blabla" in user ); // user.blabla는 존재하지 않기 때문에 false가 출력됩니다.
</script>

‘for…in’ 반복문

for..in 반복문을 사용하면 객체의 모든 키를 순회할 수 있습니다.
for..in은 for(;;) 반복문과는 완전히 다릅니다.

문법:

반복 변수명은 자유롭게 정할 수 있습니다. 'for (let prop in obj)'같이 key 말고 다른 변수명을 사용해도 됩니다.

<script>
for (key in object) {
  // 각 프로퍼티 키(key)를 이용하여 본문(body)을 실행합니다.
  
}
</script>

예시:

<script>
let user = {
  name: "John",
  age: 30,
  isAdmin: true
};

for (let byeonsu in user) { //for문처럼 반복 변수(looping variable)를 선언함(let byeonsu)
  // 키
  alert( byeonsu );  // name, age, isAdmin
  // 키에 해당하는 값
  alert( user[byeonsu] ); // John, 30, true
}
</script>

객체 정렬 방식

정수 프로퍼티(integer property)는 자동으로 정렬됩니다

<script>
let codes = {
  "49": "독일", 
  "41": "스위스",
  "44": "영국",
  // ..,
  "1": "미국"
};

for (let code in codes) {
  alert(code); // 1, 41, 44, 49 순으로 프로퍼티가 자동 정렬됨. key가 정수임
}
</script>

정수 프로퍼티(integer property)란?
정수: 자연수, 자연수의 음수, 0을 통칭하는 말


문자열 "49"는 정수로 변환하거나 
변환한 정수를 다시 문자열로 바꿔도 변형이 없기 때문에 정수 프로퍼티입니다. 
'+49’와 '1.2’는 정수 프로퍼티가 아닙니다.
<script>
// 함수 Math.trunc는 소수점 아래를 버리고 숫자의 정수부만 반환합니다.
alert( String(Math.trunc(Number("49"))) ); // '49'가 출력됩니다. 기존에 입력한 값과 같으므로 정수 프로퍼티입니다.
alert( String(Math.trunc(Number("+49"))) ); // '49'가 출력됩니다. 기존에 입력한 값(+49)과 다르므로 정수 프로퍼티가 아닙니다.
alert( String(Math.trunc(Number("1.2"))) ); // '1'이 출력됩니다. 기존에 입력한 값(1.2)과 다르므로 정수 프로퍼티가 아닙니다.
</script>

작성 순서대로 출력 하려면 키가 정수로 취급되지 않도록 작성하면 됩니다. 각 키 앞에 "+"를 붙여봅시다.

<script>
let codes = {
  "+49": "독일",
  "+41": "스위스",
  "+44": "영국",
  // ..,
  "+1": "미국"
};

for (let code in codes) {
  alert( +code ); // 49, 41, 44, 1
}
</script>