JavaScript Objects

자바스크립트 오브젝트

 

오브젝트(Objects)는 배열(Arrays)과 비슷하다.

배열은 인덱스(indexes)로 데이터(data)에 접속하고 수정하지만,

오브젝트는 프로퍼티(properties)를 이용한다.

 

오브젝트는 구조화된 데이터를 저장하는데 유용하다.

.i.e. 구조화된 고양이 데이터

var cat = {
    "name" : "Whiskers",
    "legs" : 4,
    "tails" : 1,
    "enemies" : ["Water", "Dogs"]
};

전 프로퍼티가 다 스트링(string) 이다.

 

밑에 처럼 숫자가 프로퍼티가 될 수도 있고, 한단어로 사용하면 따옴표를 안써도 된다.

var anotherObject = {
  make: "Ford",
  5: "five",
  "model": "focus"
};

 

 

오브젝트에 접근하는 방법은 두 가지

. 노테이션

프로퍼티의 이름을 알고 있을 때 사용한다.

var myObj = {
  prop1: "val1",
  prop2: "val2"
};
var prop1val = myObj.prop1; // val1
var prop2val = myObj.prop2; // val2

 

[] 노테이션

프로퍼티의 이름에 공간(Space) 있을 때 사용한다.

var myObj = {
  "Space Name": "Kirk",
  "More Space": "Spock",
  "NoSpace": "USS Enterprise"
};
myObj["Space Name"]; // Kirk
myObj['More Space']; // Spock
myObj["NoSpace"];    // USS Enterprise

변수의 값을 사용할 때도 []노테이션을 쓴다.

1

var dogs = {
  Fido: "Mutt",  Hunter: "Doberman",  Snoopie: "Beagle"
};
var myDog = "Hunter";
var myBreed = dogs[myDog];
console.log(myBreed); // "Doberman"

2

var someObj = {
  propName: "John"
};
function propPrefix(str) {
  var s = "prop";
  return s + str;
}
var someProp = propPrefix("Name"); // someProp now holds the value 'propName'
console.log(someObj[someProp]); // "John"

 

오브젝트를 만들고 나서 언제든지 바꿀 수 있다.

. 노테이션 or [] 노테이션 아무거나 사용하자

 

var ourDog = {
  "name": "Camper",
  "legs": 4,
  "tails": 1,
  "friends": ["everything!"]
};

ourDog.name = "Happy Camper";

// Setup
var myDog = {
  "name": "Coder",
  "legs": 4,
  "tails": 1,
  "friends": ["freeCodeCamp Campers"]
};

console.log(myDog["name"] = "Happy Coder");

 

추가하는 것도 같은 방법

var myDog = {
  "name": "Happy Coder",
  "legs": 4,
  "tails": 1,
  "friends": ["freeCodeCamp Campers"]
};

// Only change code below this line.

myDog.bark = "woof";

//or
//myDog["bark"] = "woof";

지우기도 같은 방법

var myDog = {
  "name": "Happy Coder",
  "legs": 4,
  "tails": 1,
  "friends": ["freeCodeCamp Campers"],
  "bark": "woof"
};

delete myDog["tails"];

 

 

Switch Case 대신 Object로 저장할 수 있다.

바꾸기 전

// Setup
function phoneticLookup(val) {
  var result = "";

  switch(val) {
    case "alpha":
      result = "Adams";
      break;
    case "bravo":
      result = "Boston";
      break;
    case "charlie":
      result = "Chicago";
      break;
    case "delta":
      result = "Denver";
      break;
    case "echo":
      result = "Easy";
      break;
    case "foxtrot":
      result = "Frank";
  }

  return result;
}

phoneticLookup("charlie");

 

바꾼 후

function phoneticLookup(val) {
  var result = "";

  var nato = {
    alpha: "Adams",
    bravo: "Boston",
    charlie: "Chicago",
    delta: "Denver",
    echo: "Easy",
    foxtrot: "Frank"
  };
  result = nato[val];
  return result;
}

console.log(phoneticLookup("charlie"));

 

 

프로퍼티가 있는지 확인할 때

.hasOwnProperty(프로퍼티 이름);

var myObj = {
  gift: "pony",
  pet: "kitten",
  bed: "sleigh"
};

//프로퍼티가 있는지 확인하는 함수, 있으면 프로퍼티 값을, 없으면 not found를 출력
function checkObj(checkProp) {
  // Your Code Here
  if (myObj.hasOwnProperty(checkProp)){
    return myObj[checkProp];
  } 
  else {
    return "Not Found";
  }
}

console.log(checkObj("as"));

 

하위 프로퍼티에 액세스 하기

. 노테이션이나, [] 노테이션 사용 가능

var myStorage = {
  "car": {
    "inside": {
      "glove box": "maps",
      "passenger seat": "crumbs"
     },
    "outside": {
      "trunk": "jack"
    }
  }
};

var gloveBoxContents = myStorage.car.inside["glove box"]; // Change this line
console.log(gloveBoxContents);

 

 

[] 노테이션을 이용 번호로도 액세스 가능

var ourPets = [
  {
    animalType: "cat",
    names: [
      "Meowzer",
      "Fluffy",
      "Kit-Cat"
    ]
  },
  {
    animalType: "dog",
    names: [
      "Spot",
      "Bowser",
      "Frankie"
    ]
  }
];
ourPets[0].names[1]; // "Fluffy"
ourPets[1].names[0]; // "Spot"