객체 Object 2

Object 의 기본 문법

let fasterShip = {
  'Fuel Type': 'Turbo Fuel',
  color: 'silver'
}

Object 쓰는 문법에서 꼭 기억할 점

• 한 세트의 key : value 를 쓰고 나서 반드시 , 콤마로 구분해준다!
• 마지막 세트의 key : value 를 쓰고 나서 ; 세미콜론을 쓰지 않는다! (쓰면 에러 난다)

---

Object 의 Property 에 접근하는 방법 1 - Dot Notation

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

---

Object 의 Property 에 접근하는 방법 2 - Bracket Notation

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

bracket notation [] 를 이용해서 object (객체)의 property (key) 에 접근할 수 있다.

key 중에 숫자, 띄어쓰기, 특수문자가 있는 key 에 접근할때는 반드시 bracket notation 을 사용해야한다.

---

e.g.1

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

let returnAnyProp = (objectName, propName) => objectName[propName];
returnAnyProp(spaceship, 'homePlanet'); // Returns 'Earth'
// homePlanet 이라는 key 는 string이 아니고 특수 문자도 없으므로 그냥 괄호안에 ' ' 안에 바로넣으면 작동하지만, Active Mission은 어디 다른 변수에 넣어줘야됨. 

returnAnyProp() 을 사용할때 dot notation 즉, (objectName.propName) 을 사용하면 컴퓨터는 'propName'의 key 를 찾으려고 할 것이다. value 를 얻으려면 bracket notation 을 써야한다.

---

e.g.2

let spaceship = {
  'Fuel Type': 'Turbo Fuel',
  'Active Mission': true,
  homePlanet: 'Earth',
  numCrew: 5
};

let mis = "Active Mission"
  let returnAnyProp = (objectName, propName) => objectName[propName];
  returnAnyProp(spaceship, mis);
// 이렇게 다른 변수에 넣어주니 작동했다. 

---

e.g.3

// 다른방식 

let propName =  'Active Mission';
let isActive = spaceship[propName];
console.log(isActive);
// Active Mission 을 propName 에 담고 []을 사용해서 Active Mission의 value값을 isActive 에 담았다.  

새로운 property name 과 value를 추가하는 법을 정리하자면,

// 방식 1 - property name 에 띄어쓰기, ' ' 등이 들어가는 경우 
objectName['Property Name'] = 'New Property Value';

// 방식 2
objectName.propName = 'New Prop Value';

object 내에 존재하는 property name 과 value를 없애는 법은,

// 방식 1 - property name 에 띄어쓰기, ' ' 등이 들어가는 경우 
delete objectName['Property Name'];

// 방식 2
delete objectName.propName;

---

Object - Bracket Notation 의 호출, Nested Objects

let spaceship = {
  passengers: null,
  telescope: {
    yearBuilt: 2018,
    model: "91031-XLT",
    focalLength: 2032 
  },
  crew: {
    captain: { 
      name: 'Sandra', 
      degree: 'Computer Engineering', 
      encourageTeam() { console.log('We got this!') },
     'favorite foods': ['cookies', 'cakes', 'candy', 'spinach'] }
  },
  engine: {
    model: "Nimbus2000"
  },
  nanoelectronics: {
    computer: {
      terabytes: 100,
      monitors: "HD"
    },
    'back-up': {
      battery: "Lithium",
      terabytes: 50
    }
  }
};

let capFave = spaceship.crew.captain["favorite foods"][0];

favorite foods의 첫번째 (cookies) 를 선택하고 싶으면 . dot notation 과 bracket을 연결해서 쭉 타고내려가면 된다.

---

e.g.2

let spaceship = {
  passengers: [{name: 'Space Dog'}], 
  telescope: {
    yearBuilt: 2018,
    model: "91031-XLT",
    focalLength: 2032 
  },
  crew: {
    captain: { 
      name: 'Sandra', 
      degree: 'Computer Engineering', 
      encourageTeam() { console.log('We got this!') },
     'favorite foods': ['cookies', 'cakes', 'candy', 'spinach'] }
  },
  engine: {
    model: "Nimbus2000"
  },
  nanoelectronics: {
    computer: {
      terabytes: 100,
      monitors: "HD"
    },
    'back-up': {
      battery: "Lithium",
      terabytes: 50
    }
  }
}; 

let capFave = spaceship.crew.captain['favorite foods'][0];

let firstPassenger = spaceship.passengers[0];

spaceship.passengers = [{1:'Tom'}, {2:'Jerry'}, {3:'Jane'}];

위의 다른사람이 쓴 예시처럼
objectname.method = [ {key:value}, {key: value} ]
이렇게 된 구조가 아닌가 싶다.