[JS]객체 _ 객체속성 접근/수정/추가/삭제 & 객체안의 객체 및 배열에 접근

하서율·2022년 7월 4일
0

JS

목록 보기
17/19

▪️ 객체속성접근

3가지 방법

1. Dot Notation

2. Bracket Notation

3. 변수를 사용한 객체 속성 접근

1 & 2 번째 방법

let testObj = {
  "hat": "ballcap",
  "shirt": "jersey",
  "shoes": "cleats"
};
//1번째 방법 (Dot Notation)
let hatValue = testObj.hat;          //  ballcap
//2번째 방법 (Bracket Notation)
let shirtValue = testObj['shirt'];   //  jersey

3번째 방법

let testObj = {
  12: "Namath",
  16: "Montana",
  19: "Unitas"
};
let playerNumber = 16;    // 프로퍼티(16)에 'playerNumber' 이라는 변수 선언  
let player = testObj[playerNumber];  // === testObj[16] 값과 같음
//player = Montana



▪️ 객체 수정

myDog객체내의 'name':Coder의 value를'name':Happy Coder으로 수정

let myDog = {
  "name": "Coder",
  "legs": 4,
  "tails": 1,
  "friends": ["freeCodeCamp Campers"]
};
myDog.name = 'Happy Coder'   //' name '의 value를 다시 지정.
console.log(myDog.name);     // Happy Coder ⭕️ Coder ❌



▪️ 객체속성 추가

myDog객체에 'bark':'woof' 속성 추가하기

let myDog = {
  "name": "Happy Coder",
  "legs": 4,
  "tails": 1,
  "friends": ["Wecode Bootcamp"]
};
myDog.bark = "woof"      
console.log(myDog);  
//추가한결과: 
//{"bark": "woof"      
// "name": "Happy Coder",
// "legs": 4,
// "tails": 1,
// "friends": ["Wecode Bootcamp"]
};



▪️ 객체 삭제

myDog객체에서 "tails": 1 속성 삭제

let myDog = {
  "name": "Happy Coder",
  "legs": 4,
  "tails": 1,//삭제 대상
  "friends": ["Wecode Bootcamp"],
  "bark": "woof"
};
delete myDog.tails  // tails 프로퍼티 삭제
console.log(myDog)
//{  "name": "Happy Coder",
//   "legs": 4,
//   "friends": ["Wecode Bootcamp"],
//   "bark": "woof"
// }



▪️ 객체내의 객체 속성에접근

myStorage 객체내의 inside 객체glove box프로퍼티의 값을 변수 gloveBoxContents에 대입

let myStorage = {
  "car": {
    "inside": {
      "glove box": "maps",  // 값(maps)을 gloveBoxContents 변수로 저장
      "passenger seat": "crumbs"
     },
    "outside": {
      "trunk": "jack"
    }
  }
};
let gloveBoxContents = myStorage.car.inside['glove box']
console.log(gloveBoxContents); // maps



▪️ 객체내의 배열 접근

myPlants 배열객체내의 배열에서 pine값 찾아내기

let myPlants = [
  {
    type: "flowers",
    list: [
      "rose",
      "tulip",
      "dandelion"
    ]
  },
  {
    type: "trees",
    list: [
      "fir",
      "pine",
      "birch"
    ]
  }
];
foundValue = myPlants[1].list[1]
console.log(foundValue)  //pine
profile
매일 매일 기록하기

0개의 댓글