[Codecademy-Javascript] 9장 Objects

Introduction

JavaScript의 7개 데이터 유형으로 문자열, 숫자, 부울, null, 정의되지 않음, 기호, 객체가 있습니다. 일곱 번째 유형인 객체를 사용하여 코드를 보다 복잡한 가능성에 개방합니다.

객체

객체 리터럴 생성

객체를 변수에 할당할 수 있습니다. 중괄호를 사용하여 객체 리터럴{}을 지정합니다.

let spaceship = {};

정렬되지 않은 데이터로 객체를 채우고 데이터는 '키-값'으로 구성됩니다. 키는 값은 보유하는 메모리의 위치를 가리키는 변수 이름과 같습니다. 키의 이름 또는 식별자를 작성 하고 콜론과 값을 차례로 작성하여 키-값 쌍을 만듭니다 .

속성 액세스

객체의 속성에 접근하는 방법은 2가지입니다.

(1) 점 표기법

객체의 이름을 쓰고 그 다음에 점 연산자, 속성 이름(키)를 작성합니다.

(2) 대괄호 표기법

배열을 인덱싱하고 숫자, 공백 또는 특수 문자가 포함된 키에 액세스할 때 대괄호 표기법을 사용해야 합니다.

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

대괄호 표기법을 사용하면 대괄호 안의 변수를 사용하여 객체의 키를 선택할 수도 있습니다.

let propName =  'Fuel Type';
console.log(spaceship[propName]) // Returns 'Turbo Fuel'

속성 할당

점 표기법 또는 대괄호 표기법 및 할당 연산자 = 를 사용하여 객체에 새 키-값 쌍을 추가하거나 기존 속성을 변경할 수 있습니다.

속성이 객체에 이미 존재하는 경우 이전에 보유했던 값이 새로 할당된 값으로 대체됩니다. 또는 해당 이름의 속성이 없는 경우 새 속성이 객체에 추가됩니다.
delete 연산자를 사용하여 객체에서 속성을 삭제할 수 있습니다.

const spaceship = {
  'Fuel Type': 'Turbo Fuel',
  homePlanet: 'Earth',
  mission: 'Explore the universe' 
};

delete spaceship.mission;  // Removes the mission propertyconst spaceship = {

메서드

메서드란 객체에 저장된 데이터가 함수일 때 부릅니다. 속성은 객체가 가지고 있는 것이고 메서드는 객체가 행동하는 것입니다.

const alienShip = {
  invade () { 
    console.log('Hello!')
  }
};
alienShip.invade();  //Prints 'Hello!'

중첩 객체

객체는 속성으로 다른 개체를 가질 수 있으며, 이 속성은 더 많은 객체의 배열인 속성을 가질 수 있습니다.

const spaceship = {
    crew: {
        captain: { 
            name: 'Sandra', 
            degree: 'Computer Engineering', 
            encourageTeam() { console.log('We got this!') } 
        }
    }
}; 

spaceship.crew.captain.name;  //Returns 'Sandra'

참조로 전달

객체에 할당된 변수를 함수에 인수로 전달할 때 컴퓨터가 매개변수 이름을 해당 객체를 보유하는 메모리의 공간을 가리키는 것으로 해석한다는 것을 의미합니다. 결과적으로 객체 속성을 변경하는 함수는 실제로 객체를 영구적으로 변경합니다.

const spaceship = {
  homePlanet : 'Earth',
  color : 'silver'
};

let paintIt = obj => {
  obj.color = 'glorious gold'
};

paintIt(spaceship);

spaceship.color // Returns 'glorious gold'

루프

for...in구문 을 사용하여 객체를 반복할 수 있습니다.

// for...in
for (let crewMember in spaceship.crew) {
  console.log(`${crewMember}: ${spaceship.crew[crewMember].name}`);
}

팩토리 함수

팩토리 함수는 객체를 반환하고 여러 객체 인스턴스를 만드는 데 재사용할 수 있는 함수입니다. 팩토리 함수에는 사용자가 반환되는 객체를 정의할 수 있는 매개변수도 있습니다.

const monsterFactory = (name, age, energySource, catchPhrase) => {
  return { 
    name: name,
    age: age, 
    energySource: energySource,
    scare() {
      console.log(catchPhrase);
    } 
  }
};

const ghost = monsterFactory('Ghouly', 251, 'ectoplasm', 'BOO!');
ghost.scare(); // 'BOO!'

객체를 만들기 위해 필요한 인수로 호출하고 반환 값을 변수에 할당할 수 있습니다. monsterFactory 객체를 활용하면 매번 새로운 객체 리터럴을 생성할 필요가 없습니다.

Property Value Shorthand

property value shorthand는 구조 분해를 통해 매개 변수 할당을 반복하지 않아도 됩니다.

const monsterFactory = (name, age) => {
  return { 
    name,
    age 
  }
};

구조 분해 할당

객체에서 키-값 쌍을 추출하고 변수로 저장하기를 원할 때는 구조 분해 할당을 사용합니다.

const vampire = {
  name: 'Dracula',
  residence: 'Transylvania',
  preferences: {
    day: 'stay inside',
    night: 'satisfy appetite'
  }
};

// const residence = vampire.residence; 
const { residence } = vampire;  //구조 분해 할당
console.log(residence); // Prints 'Transylvania' 
const { day } = vampire.preferences; 
console.log(day); // Prints 'stay inside'

구조 분해 할당에서 중괄호로 묶인 객체 키 이름을 변수로 만들고 객체에 {}를 할당합니다.