Object 정리

Object

Object는 '객체'로 번역되는 단어로, string, number, boolean 등과 같은 하나의 데이터 종류이다.

객체를 통해서는 구조를 만들어 정보를 저장할 수 있어
정보의 재활용성과 가독성을 좋게 하는 효과가 있다.

Object 만드는 방법 및 불러오는 방법

let spaceship = {
  homePlanet: 'Earth',
  'Flight Path': ['Venus', 'Mars', 'Saturn']
};
spaceship.homePlanet; // Returns 'Earth',
spaceship['Flight Path']; // Returns ['Venus', 'Mars', 'Saturn']

변수(let)를 만들고 이름(spaceship)을 붙인다.
중괄호 내에 콜론 앞뒤로 내용을 입력한다. 콜론 왼쪽은 key, 오른쪽은 value이다.

변수이름.key이름 혹은 변수이름[key이름]을 입력하면 값(value)이 호출된다.

대괄호 내의 인자들은 각각 index 값을 가진다. 따라서 index 값을 통해 불러올 수 있다.

['A', 'B', 'C'][0]; // Returns 'A'

Object value 변경하는 방법

let spaceship = {
  homePlanet: 'Earth',
  'Flight Path': ['Venus', 'Mars', 'Saturn']
};

spaceship['Flight Path'] = ['Venus', 'Mars', 'Sun']
//혹은
spaceship['Flight Path'][2] = 'Sun'

console.log(spaceship);
// Output: 'Flight Path': ['Venus', 'Mars', 'Sun']

Object 내에 함수를 삽입할 수 있다.

const alienShip = {
  invade () { 
    console.log('Hello! We have come to dominate your planet. 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.'

Nested Objects

부모태그와 자식태그처럼 Object 내에 Object를 계속해서 만들 수 있다.

const spaceship = {
     telescope: {
        yearBuilt: 2018,
        model: '91031-XLT',
        focalLength: 2032 
     },
    crew: {
        captain: { 
            name: 'Sandra', 
            degree: 'Computer Engineering', 
            encourageTeam() { console.log('We got this!') } 
         }
    },

Object 내에 있는 Object 불러오는 방법

마침표 혹은 대괄호를 통해 원하는 정보의 라인을 이어준다.

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

새로운 변수 및 함수를 통해 Object value 변경

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

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

paintIt(spaceship);

spaceship.color // Returns 'glorious gold'

for...in 구문 통해 원하는 정보 추출하기

let spaceship = {
    crew: {
    captain: { 
        name: 'Lily', 
        degree: 'Computer Engineering', 
        cheerTeam() { console.log('You got this!') } 
        },
    'chief officer': { 
        name: 'Dan', 
        degree: 'Aerospace Engineering', 
        agree() { console.log('I agree, captain!') } 
        },
    medic: { 
        name: 'Clementine', 
        degree: 'Physics', 
        announce() { console.log(`Jets on!`) } },
    translator: {
        name: 'Shauna', 
        degree: 'Conservation Science', 
        powerFuel() { console.log('The tank is full!') } 
        }
    }
}; 
// for...in
for (let crewMember in spaceship.crew) {
  console.log(`${crewMember}: ${spaceship.crew[crewMember].name}`)
};

// Output:
captain: Lily
chief officer: Dan
medic: Clementine
translator: Shauna