[Javascript] Codecademy 8. Objects

8. Objects

8-1. Objects

객체를 빼놓고 자바스크립트를 논하는 것은 불가능할 정도로, 객체는 자바스크립트의 많은 곳에 스며들어 있습니다. 객체를 배우지 않더라도 이미 자바스크립트를 사용하고 있었으니까요! 자바스크립트에서 다루는 데이터 유형은 총 7개인데, 이 중 6개는 기본 데이터 유형인 String, number, boolean, null, undefined, symbol입니다. 그리고 마지막 유형은 이번에 다룰 Object, 객체입니다.

---

8-1-1. Creating Object Literals (객체 리터럴 만들기)

객체는 다른 자바스크립트 유형과 마찬가지로 변수에 할당할 수 있습니다. 객체 리터럴을 지정하기 위해서는 아래와 같이 {}, 중괄호를 사용합니다.

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

 

현재는 객체 안에 아무것도 정의되어있지 않습니다. 객체 안에 데이터를 채우려면 키-값을 쌍으로 작성해야 합니다. 키는 값이 있는 메모리 위치를 가리키는 것, 즉 변수 이름과 같습니다. 키 값은 함수 등의 객체를 모두 포함하여, 언어의 모든 데이터 유형일 수 있습니다.

let spaceship = {
  'Fuel Type': 'diesel',
  color: 'silver'
};

객체 안에 데이터를 작성한 모습입니다. 우리는 키의 이름, 또는 식별자를 작성하고 ('Fuel Type', color), 콜론을 작성하고 (:), 값을 입력하여 ('diesel', 'silver') 키-값 쌍을 만들 수 있습니다. 객체 안의 각 키-값 쌍은 위와 같이 쉼표 (,)로 구분합니다. 키는 보통 문자열로 작성하지만, 식별자 네이밍 규칙을 준수한다면 이용하여 따옴표를 생략할 수도 있습니다.

 

8-1-2. Accessing Properties (속성 접근하기)

객체의 속성에 접근할 수 있는 방법은 두 가지가 있습니다. 첫 번째는 점 표기법입니다.

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

spaceship이라는 객체에서 homePlanet이라는 속성에 접근하기 위하여 객체 이름과 키 이름 사이에 .을 작성하였습니다. 이때, 해당 객체에 존재하지 않는 속성에 접근하려고 하면 'undefined'가 반환됩니다..

 

8-1-3. Bracket Notation (괄호 표기법)

객체의 속성에 접근하는 두 번째 방법은 괄호 표기법, []을 사용하는 것입니다. 우리는 배열을 인덱싱할 때 괄호 표기법을 사용했었습니다. 이것과 같은 원리로, 객체의 속성에 접근할 때도 괄호 표기법을 사용할 수 있습니다. 숫자, 공백 또는 특수문자가 있는 키에 접근할 때는 꼭 괄호 표기법을 사용해야 합니다. 그렇지 않다면, 오류가 발생할 수도 있습니다.

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

let returnAnyProp = (objectName, propName) => objectName[propName];
 
returnAnyProp(spaceship, 'homePlanet'); // Returns 'Earth'

괄호 표기법은 위와 같은 상황에서 특히 유용하게 사용할 수 있습니다. 

 

8-1-4. Property Assignment (속성 할당)

한번 객체를 정의하고 나면, 객체를 업데이트하는 것은 자유로워집니다. 점(.) 표기법, 괄호[] 표기법과 할당 연산자(=) 등을 사용하여 객체에 새로운 키-값 쌍을 추가할 수도 있고, 기존의 속성을 변경할 수도 있습니다.

출처: codecademy

위와 같이 괄호 표기법과 할당 연산자를 모두 활용하여 값을 변경할 수도 있고, 점 표기법으로 키 값에 접근하여 값을 변경하는 것도 가능합니다. 단, 속성 할당 시 다음과 같은 사례가 발생할 수 있습니다.

- 객체에 속성이 이미 있는 경우, 해당 속성이 가진 값이 새로운 값으로 변경됩니다.

- 같은 이름의 속성이 없으면, 새 키-값 쌍이 객체에 추가됩니다.

const로 선언된 객체는 재할당할 수 없지만, 새로운 속성을 추가하고 해당 속성을 변경할 수 있습니다. 

또한, delete를 이용하여 객체에 있는 속성을 없앨 수도 있습니다.

 

8-1-5. Method (메서드)

객체에 저장된 데이터가 함수일 때를 메서드로 부릅니다. 속성이 객체가 갖고 있는 것이라면, 메서드는 객체가 하는 행동을 의미합니다. 혹시 객체 메서드가 익숙하다면, 정확하게 보았습니다. console은 전역 자바스크립트 객체이고, .log()는 해당 객체의 메서드입니다. 

우리는 쉼표로 구분된 키-값 쌍을 만들어서, 객체 안에 메서드를 포함할 수 있습니다. 키는 메서드의 이름 역할을 하고, 값은 함수 식의 역할을 합니다.

const alienShip = {
  invade () { 
    console.log('Hello! We have come to dominate your planet')
    console.log('Instead of Earth, it shall be called New Xaculon.')
  }
};

alienShip.invade(); // Prints 'Hello! We have come to dominate your planet. 
//Instead of Earth, it shall be called New Xaculon.'

객체 메서드는 객체 이름에 점 연산자를 추가하고, 메서드 이름과 괄호를 추가하여 호출할 수도 있습니다.

 

8-1-7. 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
         }
    }
};

위 코드를 바탕으로 이야기를 해 보겠습니다. 여기 우주선 한 대가 있습니다. 이 우주선 안에서 우리는 한 승무원, captine의 이름을 알아보려고 합니다. 그러기 위해서는 spaceship이라는 객체 안에 있는, crew라는 객체 안에 있는, captine 객체의 name 키의 속성에 접근하면 됩니다. 이 방법을 쉽게 하기 위해서, 중첩된 속성에 접근하도록 연산자를 연결할 수도 있습니다. 

 

8-1-8. 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 매개변수 이름을 spaceship에 있는 color이라는 공간으로 해석합니다. 이 과정을 통해, spaceship의 color는 glorious gold로 바뀌었습니다. 이러한 참조를 통하여 우리는 객체의 속성을 변경할 수 있습니다.

 

8-1-9. Looping Through Objects (객체를 이용한 반복문)

반복문은 조건이 충족될 때까지 코드를 반복하는 프로그래밍 도구입니다. 자바스크립트는 for... in 상태를 통하여 객체를 통해 반복할 수 있게 합니다. 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"

(참고 사이트: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in) 

for (속성 in 객체) {     행동     } 의 방법으로 객체를 이용한 반복문을 작성할 수 있습니다.

 

---

8. Objects

8-2. Advanced Objects

---

8-2-1. The this Keyword (this 키워드)

객체는 데이터와 기능의 모음집입니다. 이 기능을 객체 메소드에 저장할 수 있습니다. 

const goat = {
  dietType: 'little goat',
  makeSound() {
    console.log('baaa');
  }
};

위 코드에서, goat에게는 .makeSound() 메서드가 있습니다. 이 메서드를 이용하면 콘솔에 Baaaa를 인쇄할 수 있습니다. 이제, this 키워드를 이용하여 염소를 다이어트 시켜보겠습니다.

const goat = {
  dietType: 'little goat',
  makeSound() {
    console.log('baaa');
  },
  diet() {
    console.log(this.dietType);
  }
};
 
goat.diet(); 
// Output: little goat

this 키워드를 이용하면 호출된 객체의 속성에 대한 접근이 가능합니다. 위 예시에서, 호출하는 객체는 염소입니다. 우리는 this를 이용하여 염소 객체 자체에 접근하고, 염소를 다이어트시킵니다(!). 이후, 점 표기법을 이용하여 염소의 속성을 알아볼 수 있었습니다.

 

8-2-2. Arrow Functions and this (화살표 함수와 this)

메소드에서 this 키워드를 사용하면 this의 값이 호출된 객체가 됩니다. 그러나, 화살표 기능을 메소드에 사용하려면 조금 복잡해집니다.

const goat = {
  dietType: 'herbivore',
  makeSound() {
    console.log('baaa');
  },
  diet: () => {
    console.log(this.dietType);
  }
};
 
goat.diet(); // Prints undefined

위와 같이 사용하면, goat.diet();가 정의되지 않은 것을 확인할 수 있습니다. 화살표 함수는 기본적으로 이 값을 호출 객체가 아닌, 함수 자체에 연결합니다. 위 코드에서 this. 값은 전역 객체 또는 전역 범위에 존재하는 객체이며, 해당하는 diettype 속성이 없습니다. 따라서, undefined라는 결과가 출력됩니다.

 

화살표 함수에 대해 더 알아보려면 하단 링크를 참고해도 좋습니다.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Arrow function expressions - JavaScript | MDN

 

8-2-3. Privacy (비공개)

속성에 접근하고 속성을 업데이트하는 것은 객체를 사용하는 데에 있어서 필수적입니다. 그렇지만, 우리가 원하지 않는 다른 곳에서 객체의 속성에 접근하는 경우가 있습니다. 객체는 이럴 경우를 방지하여, 객체의 속성을 비공개할 수 있습니다. 특정 언어에는 객체에 대한 정보가 내장되어 있지만, 자바스크립트에는 이 기능이 없습니다. 오히려 자바스크립트 개발자들은 다른 개발자들에게 속성과 상호작용할 수 있는 명명 규칙을 따릅니다. 

 

속성을 변경하지 않기 위해 사용하는 첫 번째 방법은 속성 이름 앞에 밑줄을 치는 것입니다.

const bankAccount = {
  _amount: 1000
}

위 코드에서 amount는 더이상 변경될 수 없습니다.

 

8-2-4. Getters (얻기)

Getters는 객체의 내부 속성을 가져와서 반환하는 메서드입니다. 하지만 이것은 값을 반환하는 역할 외에는 할 수 없습니다.

const person = {
  _firstName: 'John',
  _lastName: 'Doe',
  get fullName() {
    if (this._firstName && this._lastName){
      return `${this._firstName} ${this._lastName}`;
    } else {
      return 'Missing a first name or a last name.';
    }
  }
}
 
// To call the getter method: 
person.fullName; // 'John Doe'

Getters는 다음과 같은 특징이 있습니다.

- Getter는 속성을 가져올 때 데이터에 대한 작업을 수행할 수 있습니다

- Getter는 조건을 사용하여 다른 값을 반환할 수 있습니다

- Getter는 이를 사용하여 호출 객체의 속성에 접근할 수 있습니다

- 이 코드를 다른 개발자들이 더 쉽게 이해할 수 있게 합니다.

 

한 가지 주의해야 할 점은, 속성이 getter 함수와 동일한 이름을 공유할 수 없다는 것입니다. 만약 그럴 경우, 메서드를 호출하면 무한 호출 오류가 발생합니다. 이를 해결하기 위해서는 속성 이름 앞에 밑줄을 추가하면 됩니다.

 

8-2-5. Setters (설정하기)

Getter 메서드와 더불어, 기존 속성의 값을 재할당하는 Setter 메서드를 만들 수도 있습니다.

const person = {
  _age: 37,
  set age(newAge){
    if (typeof newAge === 'number'){
      this._age = newAge;
    } else {
      console.log('You must assign a number to age');
    }
  }
};

person.age = 40;
console.log(person._age); // Logs: 40
person.age = '40'; // Logs: You must assign a number to age

위 코드에서 age는 앞에 _이 붙음으로서 변경을 불가능하게 하였습니다. 그러나 set이라는 이름의 함수로 setter 메서드를 정의하면, _age가 37에서 40으로 변경되는 것을 확인할 수 있습니다.

 

Getter와 마찬가지로 Setter에서도 입력 확인, 속성에 대한 작업을 수행할 수 있고 객체 사용 방법에 대한 명확한 의도를 표시하는 등의 장점이 있습니다. 또한 Setter 메서드를 이용하면 밑줄로 시작된 속성을 직접 재할당할 수 있습니다.

 

8-2-6. Factory Functions (팩토리 함수)

지금까지는 객체를 개별적으로 생성했지만, 객체의 여러 인스턴스를 빠르게 생성하고자 하는 경우도 있습니다. 이럴 때 우리는 팩토리 함수를 사용합니다. 실제 공장을 생각해 보면, 한 품목의 여러 복사본을 빠르고 대규모로 제작합니다. 우리는 이처럼 팩토리 함수를 활용할 수 있습니다.

 

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

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라는 함수를 통하여 ghost 객체를 빠르게 제작할 수 있는 것을 확인할 수 있습니다. 이 함수로 우리는 수많은 몬스터를 한 번에 만들 수 있고, 전 세계를 정복할 수 있을 것입니다!

 

8-2-7. Property Value Shorthand (속성 값 요약)

팩토리 함수에서는 키 이름이 할당한 매개 변수 이름과 동일하더라도, 각 속성에 키와 값을 할당해야만 했습니다. 만약 우리가 더 많은 속성을 포함해야 한다면, 이 과정은 복잡하고 헷갈릴 수 있습니다. 이런 것을 방지하기 위해서 우리는 속성 값 요약이라는 기술을 사용하여 키 입력을 줄일 수 있습니다.

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

다음과 같은 방법으로 사용할 수 있습니다. 속성 할당을 반복할 필요가 없다는 것을 알아 두세요!

 

8-2-8. Destructured Assignment (비구조화된 할당)

우리는 종종 객체에서 키-값 쌍을 추출하여 변수로 저장하는 경우가 있습니다. 

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

vampire 객체를 하나 만들어 봅시다. 뱀파이어에게는 이름과, 거주지와, 선호도가 속성으로 지정되어 있습니다. 거주지 속성을 다음과 같은 방식으로 추출할 수 있습니다.

const residence = vampire.residence; 
console.log(residence); // Prints 'Transylvania'

const { residence } = vampire; 
console.log(residence); // Prints 'Transylvania'

위 코드와 아래 코드는 모두 같은 결과값을 출력합니다. 그러나, 비구조적 할당에서는 중괄호 {}로 쌓여있는 객체 키 이름을 사용하여 변수를 생성하고, 객체를 할당할 수 있습니다. 이런 방식으로 우리는 객체 안에서 중첩된 속성을 사용할 수도 있습니다.

 

8-2-9. Built-in Object Methods (기본 제공 객체 메서드)

이전에는 자신만의 방법을 가진 객체를 만들어 왔습니다. 그 방법뿐만 아니라, 우리는 내장되어있는 기본 제공 메서드를 이용하여 객체를 만들 수도 있습니다. 예를 들면 .hasOwnProperty(), .valueOf(), Object.assign(), Object.entries(),  Object.keys() 등의 객체 인스턴스 메서드입니다. 하단 링크에서 우리는 더 다양한 메서드를 볼 수 있습니다.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object#Methods

Object - JavaScript | MDN

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object#Methods_of_the_Object_constructor

Object - JavaScript | MDN

 

Corner React Starter #1

Editor PEEP