Javascript 자바스크립트 Object / 오브젝트 정리 / for in 구문 오브젝트 정리

Java Script(오브젝트)

Creating Object Literals

Key는 스트링이지만, 아무 문자가 없으면 key를 생략할 수 있다.(확인필요)

Key는 변수이름? 아래 예시의 경우 빈공간(스페이스 바)을 가지고 있어서 “”안에 표시해야한다.

// An object literal with two key-value pairs 
//아래의 코드는 2개의 properties를 가지고 있다. 1)Fuel type 2) color
let spaceship = {
  'Fuel Type': 'diesel',
  color: 'silver'
};

Accessing Properties

. 으로 spaceship이라는 오브젝트에 접근할 수 있다. 점을 찍고 property name(key)를 작성하여 호출한다.

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

두 번째로 키의 값에 접근하는 방법으로는 bracket notation이 있다.

중괄호 [ ] 를 활용하는 것인데,

아래처럼 오브젝트이름 [키이름] 이런 식으로 작성한다.

띄어쓰기, 숫자, 특수문자가 존재하는 key에 접근하기 위해서는 이 방법을 ‘반드시’ 써야한다.

• 완벽히 이해는 못했지만

  예시
  
  let spaceship = {
    'Fuel Type' : 'Turbo Fuel',
    'Active Mission' : true,
    homePlanet : 'Earth', 
    numCrew: 5
   };
  
  let propName =  'Active Mission';
  
  const isActive = spaceship['Active Mission'];
  console.log(spaceship[propName]);
  
  //위처럼 propName이라고 하는 기 설정된 변수를 활용하여 호출할 수 있다는 점? 
  

• object를 호출할때 함수 내에서 parameter를 받아서 쓸 때는 중괄호를 사용하면 파라미터를 받아서 쓸수가 있는데. 점으로 사용하면 그 파라미터를 쓸 수 가 없는 것 같음

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

Property Assignment

위에서 사용된 . 혹은 중괄호 방법을 사용해서 기 설정된 오브젝트의 키 밸류를 업데이트 (추가 혹은 변경) 할 수 있다.

const로 선언된 오브젝트의 경우에, 재할당(reassign)하는 것은 불가능 하지만 선언된 object의 내부 properties를 변경하거나 추가하는 것은 가능하다. 이부분은 다른 챕터의 const와도 닿아있는 것 같다.

const Dog= {type: 'animal' .
speed: '3km/h' };
Dog= {type: 'mammal'}; // TypeError: Assignment to constant variable.
Dog.type = 'mammal'; // Changes the value of the type property
Dog.speed = '3km/h'; // Creates a new key of 'speed' with a value of 'Mach 5'

delete 명령어를 사용하면 , 오브젝트에서 특정 property를 지울 수 도 있다.

const Dog= {type: 'animal'};
 
delete dog.type; //dog 오브젝트의 type property를 지운다. 

dog.smell = 'stinky' // dog 오브젝트에 smell:'stinky' 가 추가된다. 

Method

object 내부에 위치한 ‘함수’를 method라고 한다. 즉 오브젝트 내부에 저장되어있는 다른 변수들은 properties가 되고, object 가 하는 ‘행동’은 메소드가 된다.

const Dog= {
  Bark: function () { 
    ****console.log('Woof Woof Woof!' }
};

//위 처럼 작성할 수도 있고 , ES6에서는 method 작성시 콜론과 function keyword를 안써도 된다 

const Dog= {
  Bark () { 
    ****console.log('Woof Woof Woof!' }
};

Dog.Bark() // 이렇게 호출가능 출력: 'Woof Woof Woof!'

Nested Objects

오브젝트 안에 또 다른 오브젝트, 또 다시 그 안에 오브젝트 등 중첩되게 설정하는 것이고

호출은 다수의 . , [] 를 이용해서 할 수 있다.

const Dog= {

type: 'animal' ,
speed: { slowtypedog : '3km/h', "fast type dog" : '10km/h'} 

};

//호출

Dog.speed.slowtypedog 
Dog.speed[fast type dog]

어레이 형식으로 오브젝트를 포함할 수도 있다.

passengers: [{name: 'James', age: 23}, {name:'Jonna', age: 25}]

Pass By Reference

오브젝트들은 pass by reference 된다고 한다. 그 말은 예를 들면, 함수에 parameter로 object를 던져준다고 생각했을 때 , 함수가 인식하는 것은 object 그 자체가 아니라 object가 저장된 메모리의 주소라는 것이다. 코드카데미에서는 ‘그래서 결국 함수 내에서 object를 변경하게 되면 object가 const로 선언되었어도 영구적으로 바뀐다 ‘ 고하는데 이해가 아직은 잘 안 간다.

const Dog= {
  home  : 'Doghouse',
  color : 'brown'
};
 
let paintIt = obj => {
  obj.color = 'light gold'
};
 
paintIt(Dog);
 
Dog.color // Returns 'light gold'

 

Looping Through Objects

object를 활용한 반복문은 for…in을 사용하면 된다. 아래는 mdn 링크

링크

아래는 예시

• 주의할점 for (변수 in 오브젝트) {} 예시에서 보면 여기서 매 오브젝트를 거쳐 할당되는 ‘변수’는 type string으로 변환되어 할당되게 된다. 따라서 밑에 예시에서 처럼 강아지의 이름을 뽑아내고 싶으면 dog.breed[dogMember].이름 처럼 호출해야한다. 점 노테이션( dot notation) 점 앞에 오는 대상이 string이면 호출이 안되기 때문이다.

let dog= {
  breed: {
    치와와: { 
      이름: 'Lily', 
      특기: '밥먹기', 
      bark() { console.log('멍멍!') } 
    },
    'German shepard': { 
      name: 'Dan', 
      특기: '물기', 
      bark() { console.log('멍멍!') } 
    },
    골든리트리버: { 
      name: 'Clementine', 
      특기: '엎드리기', 
      bark() { console.log('멍멍!') } 
    진돗개: {
      name: 'Shauna', 
      특기: '점프하기', 
      bark() { console.log('멍멍!') } 
    }
  }
}; 
 
// for...in
for (let dogMember in dog.breed) {
  console.log(`${dogMember}: ${dog.breed[dogMember].이름}`);
}

---

요약

• 오브젝트는 키-밸류 값을 저장한다
• 매 키 -밸류 값은 property라고 부른다. property가 함수일 때는 method라고 부른다.
• 오브젝트 리터럴은 콤마로 구분된 중괄호로 싸인 키 밸류 값으로 이루어져있다.
• . 과 중괄호를 사용해서 오브젝트에 요소를 더하거나 편집할 수 있다.
• 메소드를 오브젝트 리터럴에 익명함수를 활용하거나 ES6의 메소드 문법(간소화된버전)을 사용해서 추가할 수 있다.
• 복잡하고 , 중첩된 오브젝트를 연쇄 연산자 (. , [])를 활용해서 접근할 수 있다.
• 오브젝트는 변경이 가능하다. const로 선언되었더라도 property를 변경할 수 있다.
• 오브젝트는 pass by reference이다. 함수에 전달된 오브젝트를 변경하더라도, 오브젝트가 영구히 변경된다.
• for…in을 활용해서 오브젝트를 반복할 수 있다.

 

오브젝트는 좀 어려워서 추가 학습이 필요해보입니다.

노션으로 정리했습니다.