[codecademy JavaScript] 9장. Objects

9-1-1. 객체 [객체 리터럴 생성]

자바스크립트는 객체기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 모든 것은 객체이다. 객체란 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입으로 키-값를 쌍으로 저장할 수 있는 구조이다.

괄호({ })를 사용하여 객체 리터럴을 지정한다. 키의 이름를 작성 하고 콜론과 값을 차례로 작성하여 키-값 쌍을 만든다. 객체 리터럴에서 키-값 쌍은 쉼표(,)로 구분한다. 프로퍼티는 객체의 속성을 나타내는 접근 가능한 이름과 활용 가능한 값을 가지는 특별한 형태이다. 특정 객체가 가지고 있는 정보를 품고 있어 그 객체가 가진 정보에 직접적으로 접근할 수 있게 한다.

 

 

9-1-2. 객체 [프로퍼티 접근 – 도트 연산자(.)]

두 가지 방법으로 객체의 속성에 접근할 수 있다. 첫 번째 방법은 도트 연산자(.)를 사용하는 것이다.

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

위 코드처럼 도트 연산자를 사용하여 내장 객체 및 데이터 인스턴스의 속성과 메서드에 접근할 수 있다. 도트 연산자를 사용하여 객체의 이름을 쓰고, 도트 연산자, 속성 이름(키)을 쓴다. 이때 존재하지 않는 속성에 접근하려고 하면 undefined가 반환된다.

 

 

9-1-3. 객체 [프로퍼티 접근 – 대괄호 연산자([ ])]

객체의 속성에 접근할 수 있는 두 번째 방법은 대괄호 연산자([ ])를 사용하는 것이다. 대괄호 연산자를 사용하여 개체의 속성에 접근하려면 속성 이름(키)을 문자열로 전달한다. 숫자, 공백 또는 특수 문자가 포함된 키에 액세스할 때 대괄호 연산자를 사용해야 한다. 대괄호 연산자를 사용하면 대괄호 안의 변수를 사용하여 개체의 키를 선택할 수 있다.

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

위 코드처럼 대괄호 표기법을 사용하여 내장 객체 및 데이터 인스턴스의 속성과 메서드에 접근할 수 있다. 대괄호 표기법을 사용하여 객체의 이름을 쓰고, [‘속성 이름(키)’]을 쓴다. 이때 존재하지 않는 속성에 접근하려고 하면 undefined가 반환된다.

 

 

9-1-4. 객체 [프로퍼티 할당]

객체는 정의 후 변경 가능하다. 도트 연산자, 또는 대괄호 연산자, 할당 연산자를 사용하여 객체에 새 키-값 쌍을 추가하거나 기존 속성을 변경할 수 있다.

프로퍼티가 이미 객체에 존재하는 경우 이전에 할당됐던 값이 새로운 값으로 재할당된다. 해당 이름의 프로퍼티가 없는 경우 새 프로퍼티가 개체에 추가된다. delete연산자를 사용하여 개체에서 프로퍼티를 삭제할 수 있다.

const spaceship = {
mission: 'Explore the universe'
};
delete spaceship.mission;  // Removes the mission property

 

 

9-1-5. 객체 [메소드]

객체에 저장된 데이터가 함수일 때 그것을 메소드라고 부른다. 메소드는 객체가 가지고 있는 동작이기 때문에 메소드를 수행하기 위해서는 객체를 통해서 해당 메소드를 수행해야 하며 그 동작을 수행하는 주체는 객체이다. console은 자바스크립트 내장 객체이고 log()는 console의 메서드이다. 마찬가지로 Math 역시 자바스크립트 내장 객체이며 floor()는 Math의 메서드이다. 쉼표로 구분된 키-값 쌍을 만들어 객체에 메소드를 만들 수 있다. 키는 메서드의 이름 역할을 한다.

const hi1= {
  invade: function () {
    console.log('Hello')
  }
};
const hi2= {
  invade() {
    console.log('Hello')
  }
};
hi1.invade(); hi22.invade();

쉼표로 구분된 키-값 쌍을 만들어 객체 리터럴에 메서드를 만든다. 키는 메서드의 이름이며 값은 함수 식이다. hi2는 ES6에 도입된 구문으로 콜론과 function 키워드를 생략한 것이다. 메서드는 객체 이름에 도트 연산자를 적고 그 뒤에 메서드 이름과 괄호를 적어 호출된다.

 

 

9-1-6. 객체 [중첩 객체]

객체는 프로퍼티로 다른 객체를 가질 수 있는데, 이를 중첩 객체라고 한다. 실무에서 사용되는 객체는 거의 중첩되어 있다.

const spaceship = {
    crew: {
        captain: {
            name: 'Sandra',
            degree: 'Computer Engineering', }
    },
    engine: {
        model: 'Nimbus2000'
     },
     nanoelectronics: {
         computer: {
            terabytes: 100,
            monitors: 'HD'
         },
        'back-up': {
           battery: 'Lithium',
           terabytes: 50
         }
    }
};
spaceship.nanoelectronics['back-up'].battery; // Returns 'Lithium'

위 코드는 spaceship 객체 안에 crew, engine, nanoelectronics 객체를 생성한다. 또 crew 객체에 captain 객체를 생성하고, nanoelectronics 객체 밑에 computer, 'back-up' 객체를 생성한다. 연산자를 연결하여 중첩 프로퍼티에 접근할 수 있다. 도트 연산자(.)와 대괄호 연산자([ ]) 중 어떤 연산자를 사용하여 접근하는 것이 적합한지 주의해야 한다.

 

 

9-1-7. 객체 [참조 전달]

객체는 참조로 전달된다. 이것은 객체에 할당된 변수를 함수에 인수로 전달할 때, 매개변수 이름이 해당 객체를 보유하는 메모리의 공간을 의미하는 것이다. 따라서 객체 속성을 변경하는 함수는 실제 객체 정보를 변경한다.

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

위 코드에서 객체에 할당된 변수 spaceship.color를 인수로 전달하여 함수 내부에서 재할당하여 실인수값이 변화하였다.

 

 

9-1-8 객체 [객체를 통한 반복]

반복문은 조건이 충족될 때까지 코드를 반복하는 프로그래밍 도구이다. 자바스크립트에서 for...in 구문을 사용하여 객체를 반복할 수 있다. for…in을 사용하면 객체의 각 요소를 반복한다.

let spaceship = {
  crew: {
    captain: {
      name: 'Lily',
    },
    'chief officer': {
      name: 'Dan',
    },
    medic: {
      name: 'Clementine',
      degree: 'Physics' },
    translator: {
      name: 'Shauna'
    }
  }
};
for (let crewMember in spaceship.crew) {
  console.log(`${crewMember}: ${spaceship.crew[crewMember].name}`); 
  // captain: Lily\nchief officer: Dan\nmedic: Clementine\ntranslator: Shauna
}

위 코드에서 for…in 안의 변수 crewMember는 spaceship.crew의 값을 갖는다. 가진 값을`${crewMember}`을 사용하여 객체의 name 프로퍼티의 값을 반복하여 출력한다.

 

9-2-1 고급 객체 [this 명령어]

자바스크립트의 객체는 데이터와 기능을 저장하는 데이터 타입이다.

const goat = {
  dietType: 'herbivore',
  diet() {
    console.log(dietType);
  }
};
goat.diet(); // Output will be "ReferenceError: dietType is not defined"

위 코드에서 goat 객체 안의 diet() 메소드가 goat의 프로퍼티 dietType에 자동으로 접근하지 못하여 오류가 발생한다. 이때 this 명령어를 사용하여 접근할 수 있다.

diet() {
  console.log(this.dietType);
 }

diet() 선언 부분을 this.dietType으로 수정한다면 dietType에 접근할 수 있으며 실행 시 herbivore이 출력된다.

 

 

9-2-2 고급 객체 [화살표 함수와 this 명령어]

메소드에서 this 명령어를 사용하면 this 값이 호출 객체이다. 그러나 화살표 함수를 메서드에 사용하면 복잡해진다.

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

출력 결과를 통해 got.diet()가 정의되지 않았음을 알 수 있다. .diet() 메서드는 화살표 함수를 사용하여 정의된다. 화살표 함수는 호출 객체가 아닌 함수 자체에 연결된다. 위의 코드 조각에서 this 값은 전역 객체 또는 전역 범위에 존재하는 객체이며, dietType 프로퍼티가 없다. 따라서 정의되지 않은 값을 반환한다. 메서드에서 this 명령어를 사용할 때 화살표 함수 정의를 피해야 한다.

 

 

9-2-3 고급 객체 [프라이버시]

프로퍼티 접근 및 업데이트는 객체 사용에서 필수적이다. 그러나 외부에서 객체의 프로퍼티에 접근하고 업데이트하는 것을 원하지 않는 경우가 있다. 특정 언어에는 객체에 대한 개인 정보가 내장되어 있으나 자바스크립트에서는 제공하지 않는다. 따라서 관례적으로 프로퍼티 이름 앞에 언더바(_)을 두어 프로퍼티를 변경하지 말라는 의도를 표시한다.

 

 

9-2-4 고급 객체 [getter 메서드]

getter는 개체의 내부 속성을 가져오고 반환하는 메서드이다.

const person = {
  _firstName: 'John',
  _lastName: 'Doe',
  get fullName() {
    if (this._firstName && this._lastName)
      return `${this._firstName} ${this._lastName}`;
  }
}
person.fullName; // 'John Doe'

get 명령어 다음에 함수를 정의한다. 이후 person 객체 내부의 메서드 fullName를 호출한다. 일반적으로 getter 메서드는 괄호(( ))를 이용하여 호출할 필요가 없다. 구문적으로는 프로퍼티에 접근하는 것처럼 보인다. 이렇게 getter 메서드를 사용하면 프로퍼티를 가져올 때 데이터에 대한 작업을 수행할 수 있다. 또, 조건을 사용하여 다른 값을 반환할 수 있고 this 명령어를 사용하여 객체의 프로퍼티에 접근할 수 있다.

 

 

9-2-5 고급 객체 [setter 메서드]

setter는 객체 내의 기존 프로퍼티 값을 재할당하는 메서드이다. getter 메서드와 같이 setter 메서드도 괄호(( ))를 이용하여 호출할 필요가 없다.

const person = {
  _age: 37,
  set age(newAge){
      this._age = newAge;
    }
  }
};
person.age = 40;
console.log(person._age); // Logs: 40

 

 

9-2-6 고급 객체 [팩토리 함수]

객체 내의 기존 속성 값을 재할당하는 팩토리 함수 메서드를 만들 수 있다. 특정 프로퍼티를 저장하는 객체를 만들고 싶을 때 각 프로퍼티를 개별적으로 만들 수도 있지만 팩토리 함수를 사용하여 더 쉽게 만들 수 있다.

const monsterFactory = (name, age, energySource, catchPhrase) => {
  return {
    name: name,
    age: age,
    energySource: energySource,
    scare() {
      console.log(catchPhrase);
    }
  }
};
const ghost = monsterFactory('Ghouly', 251, 'ectoplasm', 'BOO!');

monsterFactory 팩토리 함수를 통해 ghost 객체를 빠르게 만들 수 있다.

 

 

9-2-7 고급 객체 [간단한 프로퍼티 값 지정]

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

위 함수와 아래 함수는 동일하게 작동한다. 간단하게 할당하여 키 입력을 줄일 수 있다.

 

 

9-2-8 고급 객체 [구조화되지 않은 할당]

구조화되지 않은 할당을 통하여 키 입력을 절약할 수 있다. 비구조적 할당에서는 괄호({ })로 묶인 객체의 키 이름으로 변수를 만들고 객체에 할당한다.

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

위 함수와 아래 함수는 동일하게 작동한다. 간단하게 할당하여 키 입력을 줄일 수 있다.

 

 

9-2-8 고급 객체 [내장 객체 메서드]

객체에 대한 내장 메소드를 활용할 수도 있다. .hasOwnProperty()와 .valueOf() 등 더 많은 객체 인스턴스  메소드가 존재한다. 또한 Object.assign(), Object.entries()와 같은 유용한 객체 클래스 메소드도 있다.

 

 

 

 

동동