[JavaScript] Object(객체) 추가, 수정, 삭제, 복제, 접근

반복문에서 배열의 순서가 중요했다면 객체는 순서가 없기 때문에 index number를 기억하지 않고 key 값에 접근할 수 있다.

 

객체에 접근하는 방법

· Object Literal : 중괄호 안에 property(객체 내부의 값)와 method(객체 내부의 함수) 나열

· Dot Notation : 점 표기법으로 '.'(점)을 이용

· Bracket Notation : 대괄호를 이용하여 객체에 접근

 

 

 

Object Literal

function iAmGround() {
  const myself = {
  name: 'JN',
  bloodType: 'A형',
  mbti: 'INTJ',
  favoriteCoffee: '아이스블론드바닐라더블샷마끼아또'
  }
  return myself;
}

console.log(iAmGround())

 

key	value
name	JN
bloodtype	A형
mbti	INTJ
favoritecoffee	아블바더마

 

 

 

Dot Notation

function dotNotation() {
  const testObj = {
    hat: "ballcap",
    shirt: "oxford",
    shoes: "sneakers"
  };
  const hatValue = testObj.hat;
  const shirtValue = testObj.shirt;

  return hatValue + ' ' + shirtValue;
}

console.log (dotNotation())     //ballcap sneakers

 

 

 

Bracket Notation

function bracketNotation() {

  let testObj = {
    "an entree": "steak",
    "my side": "veggies",
    "the drink": "water"
  };

  let entreeValue = testObj["an entree"];
  let drinkValue = testObj["the drink"];
  
  return entreeValue + ' ' + drinkValue;
}

console.log (bracketNotation())    //steak water

**반드시 대괄호로 접근해야 하는 경우**

공백이 포함된 key

숫자로 된 key

 

 

 

 

객체 수정

function updateObject() {

  const myDog = {
    "name": "Goofy",
    "legs": 4,
    "tails": 1,
    "friends": ["freeCodeCamp Campers"]
  };

  myDog.name = "Happy Goofy";

  return myDog.name;
}

console.log (updateObject())     //Happy Goofy

객체 수정_대괄호[]

const myObj = {
  property1: "hello, everyone",
  property2: [1,2,3,4,5],
  property3: {
    childproperty: "hi, everybody"
  }
};

const name = "property1"
myObj[name] = ["hi", "hello"];
console.log(myObj);     //property1: ["hi", "hello"], ···

 

 

 

 

객체 속성 추가

ex.1

function addProperty() {

  const myDog = {
    "name": "Happy Goofy",
    "legs": 4,
    "tails": 1,
    "friends": ["happy", "friend"]
  };

  let bark = "bark";
  myDog[bark] = "woof";
  
  return myDog;
}

console.log (addProperty())

ex.2

const myObj = {
  property1: "hello, everyone",
  property2: [1,2,3,4,5],
  property3: {
    childproperty: "hi, everybody"
  }
};

myObj.property3.siblingproperty = [3, 6, 9];

console.log(myObj);     //property3: {childproperty: "hi, everybody", siblingproperty: [3, 6, 9]}

ex.3 constructor function 함수에 new 키워드로 새로운 객체 추가

const person1 = { name: 'A', age: 3 };
const person2 = { name: 'B', age: 29 };
const person3 = { name: 'C', age: 30 };
const person4 = new person( 'D', 12 );

console.log(person4);

function person(name, age) {
// 생략 this = {};
   this.name = name;
   this.age = age;
// 생략 return this;
}

 

 

 

객체 속성 삭제(delete.tails)

function deleteProperty() {

  const myDog = {
    "name": "Happy Goofy",
    "legs": 4,
    "tails": 1,
    "friends": ["Wecode Bootcamp"],
    "bark": "woof"
  };
  
	delete myDog.tails;

  return myDog;
}

console.log (deleteProperty())

 

 

 

객체 안에 특정 객체에 접근

ex.1

function accessObject() {

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

  const gloveBoxContents = myStorage.car.inside["glove box"];
  
  return gloveBoxContents;
}


console.log (accessObject())     //maps

 

ex.2

function getAnswer() {
    const myProfile = {
      name: 'J',
      address: {
        email: 'j@gmail.com',
        home: 'OOdong'
      },
      'my favorite': {
        food: [{
          name: '샐러드',
          price: 9000
        }, {
          name: '삼겹살',
          price: 15000
        }],
        hobby: ['조깅']
      }
    }
  return myProfile['my favorite'].food[0].name;
}
console.log (getAnswer())   //샐러드

 

 

 

 

객체 복제

const user1 = { name: jay, age: 21 };
const user2 = user;

//Object.assign
const user3 = {}
Object.assign(user3, user1)
console.log(user3)   //{ name: jay, age: 21 }


//Object.assign 같은 의미
const user3 = Object.assign({}, user1);
console.log(user3)   //{ name: jay, age: 21 }

 

 

 

객체 안의 배열에 접근

ex.1

function accessArray() {
  const myPlants = [
    {
      type: "flowers",
      list: [
        "rose",
        "tulip",
        "dandelion"
      ]
    },
    {
      type: "trees",
      list: [
        "fir",
        "pine",
        "birch"
      ]
    }
  ];
  
  const foundValue = myPlants[1].list[1];

  return foundValue;
}

console.log (accessArray())     //pine

ex.2

const objData = {
  name: goofy,
  address: { 
    email: "google@gmail.com",
    home: "서울시 강남구"
  },
  books: {
    year: [2019, 2018, 2006],
    info: [{
      name: "JS Guide",
      price: 9000
    }, {
      name: "HTML Guide",
      price: 19000,
      author: "Kim, gae bal"
    }]
  }
};

const bookName = objData.books.info[1].name;

console.log(bookName);     //HTML Guide

객체 안의 배열에 접근_마침표'.' 또는 대괄호'[]'

const plan = {   
  name: "Basic"
};

console.log(plan.name);     //마침표 사용
console.log(plan["name"]);  //대괄호 사용

대괄호를 사용하면 안에 변수를 넣을 수 있다.

ex.1

const plan = {   
  name: "Basic"
};

const propertyName = "name";

console.log(plan[propertyName]);   //Basic

ex.2

const myObj = {
  property1: "hello, everyone",
  property2: [1,2,3,4,5],
  property3: {
    childproperty: "hi, everybody"
  }
};

const name = "property";

console.log(myObj[name+"1"]);
console.log(myObj[name+"2"]);
console.log(myObj[name+"3"]);
console.log(myObj[name+"3"]["child"+name]);

ex3. 총 판매량, 리뷰수, 좋아요수 구하기

function getData(salesArr, reviewArr, likeArr) {
  let sumAmount = 0;
  let sumReview = 0;
  let sumLike = 0;
  
  for (let i = 0; i < salesArr.length; i++) {
    let amount = salesArr[i][1];
    
    sumAmount += amount;
  }
  
   for (let i = 0; i < reviewArr.length; i++) {
    let review = reviewArr[i][1];
    
    sumReview += review;
  }
  
  for (let i = 0; i < likeArr.length; i++) {
    let like = likeArr[i][1];
    
    sumLike += like;
  }
  
  return {
    sumAmount: sumAmount,
    sumReview: sumReview,
    sumLike: sumLike
  };
}

const a = [["20190401", 34], ["20190402", 23], ["20190403", 29]];     //총 판매량
const b = [["20190328", 3], ["20190401", 0], ["20190403", 1]];        //총 리뷰수
const c = [["20190328", 98], ["20190401", 102], ["20190403", 125]];   //총 좋아요

console.log (getData(a, b, c))     //{ sumAmount: 86, sumReview: 4, sumLike: 325 }