[JavaScript] 08. Objects 객체

자바스크립트에서 강력한 도구는 객체입니다. 그 객체에 대해 배워봅시다.

---

📌 Objects /  객체

📚 Introduction to Objects / 객체 소개

자바프로그래밍의 모든 기초는 객체입니다. 객체는 자바스크립트의 강력한 도구이자 핵심적인 개념입니다.

자바 스크립트에는 7가지 기본 데이터 유형이 있으며 그 중 6가지는 기본 데이터 유형(문자열, 숫자, 부울, null, 정의되지 않음 및 기호)입니다. 일곱 번째 유형인 객체를 사용하면 실제 사물을 모델링하거나 개체를 사용하여 웹을 가능하게 하는 데이터 구조를 구축할 수 있습니다.

• 객체는 다음 그림처럼 각각의 사물을 의미합니다.
• 객체마다 고유한 특징을 가지며 이 사실은 객체 스스로 변경할 수 있습니다.
• 객체는 또다른 객체를 자신만의 성질로 가질 수도 있습니다.

---

📚 Creating Object Literals / 객체 리터럴 만들기

객체를 변수에 할당하여 만들 수 있습니다. 객체 리터럴을 만들기 위해서 { } 를 이용합니다.

let spaceship = {}; // spaceship is an empty object

 위 코드의 객체는 비어있습니다. 객체는 키-값 쌍으로 자신의 성질을 표현할 수 있습니다.

• 키는 값이 있는 메모리 위치를 가리키는 것으로 변수의 이름과 같이 작동합니다.
• 키 값은 객체를 포함하여 자바스크립트에서 제공하는 모든 데이터 유형이 가능합니다.

 

• 현재 코드에서는 spaceship 이라는 객체를 만들었습니다.
• 위 객체는 Fuel Type 이라는 키와, color 라는 키를 저장합니다. 또한 키와 쌍을 연결할 수 있습니다.
• properties(속성)는 다음과 같이 키-값 쌍을 말합니다.

---

📚 Accessing Properties / 속성 접근하기

객체의 속성에 접근하기 위한 방법은 1) 점 표기법과 2) 괄호 표기법이 있습니다.

먼저 점 표기법에 대해 배워보겠습니다. 우리는 length와 같이 점으로 각 객체 및 데이터의 속성 과 메서드에 접근해본 적이 있습니다. 속성 점 표기법을 사용하면 객체 이름과 점 연산자, 속성 이름(키) 로 접근할 수 있습니다.

let spaceship = {
  homePlanet: 'Earth',
  color: 'silver'
};
spaceship.homePlanet; // Returns 'Earth',
spaceship.color; // Returns 'silver',
spaceship.favoriteIcecream; // Returns undefined

• 객체에 존재하지 않는 값에 접근하면 undefined가 리턴됩니다.

---

📚 Bracket Notaion / 괄호 표기법

괄호 표기법은 배열의 인덱스 번호를 이용해 요소에 접근한 방법과 동일합니다.

위의 그림처럼 숫자, 공백 혹은 특수 문자가 포함된 키에 액세스할 때는 대괄호 표기법을 사용해야 합니다 .

let spaceship = {
  'Fuel Type': 'Turbo Fuel',
  'Active Duty': true,
  homePlanet: 'Earth',
  numCrew: 5
};
spaceship['Active Duty'];   // Returns true
spaceship['Fuel Type'];   // Returns  'Turbo Fuel'
spaceship['numCrew'];   // Returns 5
spaceship['!!!!!!!!!!!!!!!'];   // Returns undefined

---

📚 Property Assignment / 속성 할당

객체를 선언할 때 속성 값을 할당한 후, 키 값을 통해 다시 속성 값을 재할당할 수 있습니다.

• 점 표기법과 대괄호 표기법을 사용하면 값에 접근할 수 있습니다.
• 객체에 속성이 있는 경우 해당 속성이 가진 새로운 값으로 변경됩니다.
  같은 이름의 속성이 없으면 새 키-값 쌍이 객체에 추가됩니다.
• const 로 선언된 객체는 재할당할 수는 없지만 새로운 속성을 추가하고 속성을 변경할 수는 있습니다.

---

📚 Methods / 메서드

객체에 저장된 함수를 메서드라고 부릅니다. 우리가 자주 부르던 메서드는 자바스크립트가 객체로 이루어져있고, 그에 해당하는 함수를 메서드라고 불렀기 때문입니다.

예를 들어 console은 자바스크립트 전역 객체이고 .log() 는 해당 객체의 메서드입니다.

 

const alienShipOne = {
  invade: function () { 
    console.log('Hello! We have come to dominate your planet.')
  }
};

const alienShipTwo = {
  invade () { 
    console.log('Hello! We have come to dominate your planet.')
  }
};

alienShipOne.invade(); // Prints 'Hello! We have come to dominate your planet.'
alienShipTwo.invade(); // Prints 'Hello! We have come to dominate your planet.'

• 메서드는 위의 코드처럼 익명함수로도 작성할 수 있습니다.
• 객체의 메서드는 객체를 부르고 점 메서드 이름으로 호출할 수 있습니다.

---

📚 Nested Objects / 중첩 객체

앞서 소개한 것 처럼 객체는 또 다른 객체를 속성으로 가질 수 있습니다. 이처럼 객체가 중첩되어 작성된 것을 중첩 객체라고 합니다.

const spaceship = {
     telescope: {
        yearBuilt: 2018,
        model: '91031-XLT',
        focalLength: 2032 
     },
    crew: {
        captain: { 
            name: 'Sandra', 
            degree: 'Computer Engineering', 
            encourageTeam() { console.log('We got this!') } 
         }
    },
    engine: {
        model: 'Nimbus2000'
     },
     nanoelectronics: {
         computer: {
            terabytes: 100,
            monitors: 'HD'
         },
        'back-up': {
           battery: 'Lithium',
           terabytes: 50
         }
    }
}

• spaceship 이라는 중첩된 객체를 선언했습니다.
• spaceship이라는 객체는 telescope, crew, engine 이라는 객체를 가집니다.
• spaceship 객체 속 nanoelectronics는 computer, back-up이라는 객체ㄹ를 또 가집니다.

---

📚 Pass By Reference / 참조 통과

객체는 참조로 전달됩니다. 그러므로 객체에 할당된 변수를 인수로 함수에 전달하면 매개변수 이름을 객체가 있는 메모리 공간을 가리키는 것으로 해석합니다. 때문에 객체 속성을 변경하는 함수는 원본 객체를 변화시킵니다.

const spaceship = {
  homePlanet : 'Earth',
  color : 'silver'
};
 
let paintIt = obj => {
  obj.color = 'glorious gold'
};
 
paintIt(spaceship);
 
spaceship.color // Returns 'glorious gold'

• paintIt 함수에 spaceship 객체를 전달하였고 객체의 color 속성값을 변경할 수 있습니다.
• 참조를 통해서 객체를 변경하면 함수 외부에서도 변경된 객체값을 확인할 수 있습니다.

---

📚 Looping Through Objects / 객체를 이용한 반복문

반복문은 조건이 충족될 때까지 코드를 반복하는 도구입니다. 자바스크립트는 for in 상태를 ㅗㅌㅇ해 객체의 값을 반복적으로 참고할 수 있습니다.

const object = { a: 1, b: 2, c: 3 };

for (const property in object) {
  console.log(`${property}: ${object[property]}`);
}

// expected output:
// "a: 1"
// "b: 2"
// "c: 3"