[Javascript] 객체

이 글의 목적

📌 javascript에서 key : value 형태로 이루어진 객체를 많이 사용합니다. 객체에 구조와 사용 방법에 대해서 알아봅시다.

객체

---

1.객체란

1. 객체의 형태
key와 value 쌍으로 이루어진 데이터타입로
{...}안에 key : value 형태로 집어넣습니다.

여기서 우리는 key와 value를 프로퍼티라고 부릅니다.

let user = {     // 객체
  name: "John",  // 키: "name",  값: "John"
  age: 30        // 키: "age", 값: 30
};

• 첫 번째 프로퍼티 - name과 John
• 두 번째 프로퍼티 - age와 30

객체는 서랍장과 같습니다. 내 파일을 열면 나의 이름, 나이가 나와있고, 그렇게 수백개 혹은 수만개의 자료들을 쌓을 수 있습니다. key값과 value값을 알 수 있어 가독성 또한 좋습니다.

원하는 프로퍼티 값 얻기

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

원하는 프로퍼티 삭제

delete user.age;

여러 단어를 조합해 만든 프로퍼티는 따옴표 처리
likes + birds 는 "likes birds"로 처리한다.

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // 복수의 단어는 따옴표로 묶어야 합니다.
};

따옴표 처리한 객체의 변수는 []대괄호 표기법
'대괄호 표기법(square bracket notation)'

let user = {};

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

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

// delete
delete user["likes birds"];

프로퍼티

---

key를 활용하여 원하는 프로퍼티를 추출할 수 있게끔 구현할 수 있다.

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

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

// 변수로 접근
alert( user[key] ); // John (프롬프트 창에 "name"을 입력한 경우)

계산된 프로퍼티(computed property)
프로퍼티 키가 대괄호로 둘러싸여 있는 경우, 이를 계산된 프로퍼티라고 부릅니다.

• 객체를 아래와 같이 [fruit]로 정해 가변적으로 바꿀 수 있습니다.

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

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

alert( bag.apple ); // fruit에 "apple"이 할당되었다면, 5가 출력됩니다.

• 객체를 비워두고, 마지막에 가변적인 변수를 []대괄호를 이용해 추가할 수 있습니다.

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

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

프로퍼티 함축하기
프로퍼티의 이름과 값이 동일하면 함축이 가능합니다.
이를 프로퍼티 값 단축 구문(propery value shorthand)라고 합니다.

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

프로퍼티 이름의 제약사항

변수에는 예약어를 사용하면 안되지만, 프로퍼티는 가능하다.

// 예약어를 키로 사용해도 괜찮습니다.
let obj = {
  for: 1,
  let: 2,
  return: 3
};

alert( obj.for + obj.let + obj.return );  // 6

in 연산자로 프로퍼티 존재 여부 파악하기
javascript에서는 존재하지 않는 프로퍼티에 접근하려 해도 에러가 발생하지 않습니다.
모두 undefined 로 반환하기 때문입니다.

1. noSuchProperty 메서드를 이용하여 확인하기

let user = {};

alert( user.noSuchProperty === undefined ); // true는 '프로퍼티가 존재하지 않음'을 의미합니다.

2. in을 사용하기

"key" in object

3. 객체의 값이 undefined의 경우를 대비하여, 아래처럼 검사해줍니다.

let obj = {
  test: undefined
};

alert( obj.test ); // 값이 `undefined`이므로, 얼럿 창엔 undefined가 출력됩니다. 그런데 프로퍼티 test는 존재합니다.

alert( "test" in obj ); // `in`을 사용하면 프로퍼티 유무를 제대로 확인할 수 있습니다(true가 출력됨).

객체 순회하기

---

for in 반복문
아래처럼 for..in 반복문을 사용해서 객체의 모든 키를 순회할 수 있ㅅ브니다.
아래 예시를 실행하면 객체 user의 모든 프로퍼티가 출력됩니다.

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

for (let key in user) {
  // 키
  alert( key );  // name, age, isAdmin
  // 키에 해당하는 값
  alert( user[key] ); // John, 30, true
}

객체 프로퍼티 동작

프로퍼티에는 순서가 있을까?
반복문을 실행하면 어떤 순서로 순회할까?

객체는 '특별한 방식으로 정렬'됩니다.

• 정수 프로퍼티 : 자동으로 정렬 (1부터 오름차순으로 차례대로)
• 그 외 프로퍼티 : 객체에 추가한 순서 그대로 정렬

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

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

위의 예시로 for..in 반복문을 실행하면

• 정수 프로퍼티에 인해서 1번인 미국부터 41,44,49 차례대로 정렬됩니다.

참조에 의한 객체 복사

객체와 원시 타입의 근본적인 차이 중 하나는 객체는 ‘참조에 의해(by reference)’ 저장되고 복사된다는 것입니다.

let message = "Hello!";
let phrase = message;

예를 들면) 두개의 독립된 변수에 각각 문자열 Hello!가 저장이 됩니다.
객체의 동작방식은 이와 다릅니다.

변수엔 객체가 그대로 저장되는 것이 아닌, 객체가 저장되어 있는 '메모리 주소'인 객체에 대한 '참조값' 이 저장됩니다.
이 말이 무슨 말이냐면

• 객체는 메모리 내에 따로 저장되고 실행됩니다.
• 따라서, 객체가 할당된 변수를 복사할 땐 객체의 참조 값이 복사되고 객체는 복사되지 않습니다.

let user = { name: 'John' };

let admin = user;

admin.name = 'Pete'; // 'admin' 참조 값에 의해 변경됨

alert(user.name); // 'Pete'가 출력됨. 'user' 참조 값을 이용해 변경사항을 확인함

admin의 name을 수정하더라도 user의 name이 수정된 채로 출력되는 것을 볼 수 있습니다.

객체 복사, 병합과 Object.assign

객체가 할당된 변수를 복사하면 동일한 객체에 대한 참조 값이 하나 더 만들어진다는 걸 배웠습니다.
그런데 객체를 복제하고 싶다면 어떻게 해야 할까요?

• 아래와 같이 for...in을 통해서 clone이라는 객체 안에 모두 복사할 수 있습니다.

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

let clone = {}; // 새로운 빈 객체

// 빈 객체에 user 프로퍼티 전부를 복사해 넣습니다.
for (let key in user) {
  clone[key] = user[key];
}

// 이제 clone은 완전히 독립적인 복제본이 되었습니다.
clone.name = "Pete"; // clone의 데이터를 변경합니다.

alert( user.name ); // 기존 객체에는 여전히 John이 있습니다.

• 그리고 Object.assign을 사용하는 방법도 있습니다.

dest객체를 목표로하여 src1, src2, scr3을 dest객체에 모두 병합시켜 줍니다.

Object.assign(dest, [src1, src2, src3...])

예시는 아래와 같습니다.

let user = { name: "John" };

let permissions1 = { canView: true };
let permissions2 = { canEdit: true };

// permissions1과 permissions2의 프로퍼티를 user로 복사합니다.
Object.assign(user, permissions1, permissions2);

// now user = { name: "John", canView: true, canEdit: true }

중첩 객체 복사

중첩 안에 중첩이 있는 경우는 어떻게 해야 할까요? 이를 중첩 객체라고 합니다.

let user = {
  name: "John",
  sizes: {
    height: 182,
    width: 50
  }
};

alert( user.sizes.height ); // 182

아래와 같이 객체 속의 객체를 변경하기 위해서는
객체.key.key 값을 통해 깊은 복사(deep cloning)를 해주어야 합니다.

let user = {
  name: "John",
  sizes: {
    height: 182,
    width: 50
  }
};

let clone = Object.assign({}, user);

alert( user.sizes === clone.sizes ); // true, 같은 객체입니다.

// user와 clone는 sizes를 공유합니다.
user.sizes.width++;       // 한 객체에서 프로퍼티를 변경합니다.
alert(clone.sizes.width); // 51, 다른 객체에서 변경 사항을 확인할 수 있습니다.