JS - 09_Object

송철진·2022년 9월 22일

@property JavaScript key object value

Object

Assignment

0. 왜 객체를 써야할까요?

01. 객체 생성하기

02. 객체 속성 접근(Dot Notation)

03. 객체 속성 접근(Bracket Notation)

Object

객체: 참조형 데이터 타입의 한 종류, 여러종류의 데이터를 묶음으로 관리
배열에 있는 데이터는 element(요소),
객체에 있는 데이터는 property(프로퍼티). property = key + value
dot notation, bracket notation의 차이점

Dot notation:

프로퍼티 식별자는 알파벳 문자, 숫자, _ , $의 조합만 될 수 있다
프로퍼티 식별자는 숫자로 시작할 수 없다
프로퍼티 식별자는 변수를 포함할 수 없다
예) OK — obj.prop_1, obj.prop$
예) Not OK — obj.1prop, obj.prop name

Bracket notation:

프로퍼티 식별자는 문자열(string)이나 문자열을 참조하는 변수(variable)를 갖는다. 변수, 띄어쓰기(space), 숫자로 시작하는 문자열을 사용할 수 있다
예) OK — obj["1prop"], obj["prop name"]
key는 기본적으로 string인데 자바스크립트는 따옴표 없이도 쓸 수 있게 되어 있음. 그래서 Bracket을 쓸 때는 따옴표를 써줘야 함.

let animals = {
	bird: ["펭귄", "타조", "닭"],
  	dog: "진돗개"
}
let myPet = 'bird';
console.log(animals['bird']);
console.log(animals[myPet]);	// bracket N.은 변수를 쓸 수 있다
console.log(animals.myPet);		// dot N.을 변수를 쓸 수 없다
								// 없는 key에 접근했기에 undefined가 나온다

let animals = {
	bird: ["펭귄", "타조", "닭"],
  	dog: "진돗개",
  	myPet: "애완동물이 없어요"		// myPet이라는 동일한 이름의 key가 존재할 경우
}
let myPet = 'bird';
console.log(animals['bird']);
console.log(animals[myPet]);	
console.log(animals.myPet);		// dot N.은 변수가 아닌 key를 출력한 것이다

Assignment

0. 왜 객체를 써야할까요?

객체란 무엇일까요?

객체는 자바스크립트 데이터 타입 중의 하나입니다. 영어로는 object라고 표현합니다.
key값과 value값을 쌍으로 이루어져 있고, 배열과는 다르게 순서가 중요하지 않습니다.

예를 들어 다음과 같은 배열이 있다고 생각해봅시다.
let person1 = ['곽철용', 'AB형', 'ENFP', '바닐라라떼']
위의 배열에는 특정 사람의 이름과 혈액형, MBTI, 좋아하는 커피에 대한 정보가 담겨있습니다.
우리가 원하는 정보를 얻기 위해서는 해당 배열에 있는 Index number를 기억해야 합니다.

또 다른 사람이 있다고 생각해봅시다.
let person2 = ['아이스아메리카노', 'INTP', '홍혁팔', 'O형']
person2는 person1의 정보와 다른 순서로 값이 뒤섞여 있습니다.
사람이 두 명일 때는 괜찮지만, 100명이라면 어떻게 될까요? 자료를 처리하기 힘들어지겠죠?
그래서 나온 개념이 바로 객체입니다.

객체만들기

객체를 생성할 때는 {} 안에 key와 value를 쌍으로 묶어서 만들어 줍니다.
key값이 여러개일 때는 쉼표(,)로 구분해줍니다.
객체를 만드는 방법은 여러가지인데 그 중에 아래와 같이 중괄호를 이용해 만드는 방식을 Object Literal이라고 합니다.
let person1 = {
  name: '곽철용',
  bloodType: 'AB형',
  mbti: 'ENFP',
  favoriteCoffee: '바닐라라떼'
}
객체로 표현하면 순서가 없기 때문에 index number를 기억하지 않아도 됩니다.
우리가 원하는 정보의 key값만 알면 정보에 접근할 수 있습니다.

myself라는 이름의 객체가 있습니다.
본인의 이름, 혈액형, mbti, 좋아하는 커피를 토대로 객체를 만들어보세요!

key 값으로는 name, bloodType, mbti, favoriteCoffee를 입력해주세요!
key 값에 오타가 발생하면 채점에 문제가 생길 수 있습니다.

function iAmGround() {
  let myself = {
   // key와 property로 채워주세요.
    name: '송철진',
    bloodType: 'A',
    mbti: 'INTJ',
    favoriteCoffee: 'Americano'
  
  }
  return myself;
}
console.log(iAmGround())
module.exports = { iAmGround };

01. 객체 생성하기

myDog 객체를 만들어주세요.
myDog가 갖고 있는 property는 3개 입니다.

"name" >>> (string)
"legs" >>> (number)(다리 개수)
"tails" >>> (number)(꼬리 개수)

property 값으로는 위의 데이터 타입만 지켜지면 원하는 값으로 할 수 있습니다.

function object() {
  // 아래에 코드를 작성해주세요.
  let myDog = {
    name: "멍멍이",
    legs: 4,
    tails: 1
  }
  // 아래의 코드는 수정하지마세요.
  return myDog;
}
console.log(object())
module.exports = { object }

02. 객체 속성 접근(Dot Notation)

dotNotation 함수를 작성해주세요.
마침표 연산자(.)를 사용하여 객체의 property 값에 접근해주세요.
변수 hatValue의 값으로 "hat" property의 value값을 할당해주세요.
변수 shirtValue의 값으로 "shirt" property의 value값을 할당해주세요.

function dotNotation() {
  // 아래의 코드는 수정하지 마세요.
  let testObj = {
    "hat": "ballcap",
    "shirt": "jersey",
    "shoes": "cleats"
  };

  // 아래의 코드를 수정해주세요.
  let hatValue = testObj.hat;
  let shirtValue = testObj.shirt;    
  
  // 아래의 코드는 수정하지 마세요.
  return hatValue + ' ' + shirtValue;
}
console.log(dotNotation())
module.exports = { dotNotation }

03. 객체 속성 접근(Bracket Notation)

bracketNotation 함수를 작성해주세요.
대괄호([])를 사용하여 객체의 property 값에 접근해주세요.
변수 entreeValue의 값으로 "an entree" property의 value값을 할당해주세요.
변수 drinkValue의 값으로 "the drink" property의 value값을 할당해주세요.

function bracketNotation() {
  // 아래의 코드는 수정하지 마세요.
  let testObj = {
    "an entree": "hamburger",
    "my side": "veggies",
    "the drink": "water"
  };

  // 아래의 코드를 수정해주세요.
  let entreeValue = testObj["an entree"];
  let drinkValue = testObj["the drink"];
  
  // 아래의 코드는 수정하지 마세요.
  return entreeValue + ' ' + drinkValue;
}
console.log(bracketNotation())
module.exports = { bracketNotation };

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

objectVariables 함수를 작성해주세요.
16을 값으로 하는 playerNumber 변수를 선언해주세요.
대괄호를 사용해 testObj의 playerNumber 프로퍼티에 접근하여 player 변수의 값으로 해당 번호의 선수가 올 수 있게 해주세요.

function objectVariables() {
  // 아래의 코드는 수정하지 마세요.
  let testObj = {
    12: "Namath",
    16: "Montana",
    19: "Unitas"
  };

  // 아래의 코드를 수정해주세요.
  let playerNumber = 16;       
  let player = testObj[playerNumber];  

  return player;
}
console.log(objectVariables())
module.exports = { objectVariables };

05. 객체 수정

updateObject 함수를 작성해주세요.
myDog 객체의 "name" property를 업데이트해주세요.
"name" key의 값을 "Coder"에서 "Happy Coder"로 바꿔주세요.
dot notation / bracket notation 둘 중 아무거나 사용해도됩니다.

function updateObject() {
  // 아래의 코드는 수정하지 마세요.
  let myDog = {
    "name": "Coder",
    "legs": 4,
    "tails": 1,
    "friends": ["freeCodeCamp Campers"]
  };

  // 아래에 코드를 작성해주세요.
  myDog.name = "Happy Coder";
  // 또는 myDog["name"] = "Happy Coder";
  
  // 아래의 코드는 수정하지 마세요.
  return myDog.name;
}
console.log(updateObject())
module.exports = { updateObject };

06. 객체 속성 추가

addProperty 함수를 작성해주세요.
myDog 객체에 "bark" 프로퍼티를 추가해주세요.
"bark" 프로퍼티는 "woof"라는 값을 갖습니다.

function addProperty() {
  // 아래의 코드는 수정하지마세요.
  let myDog = {
    "name": "Happy Coder",
    "legs": 4,
    "tails": 1,
    "friends": ["Wecode Bootcamp"]
  };
  
  // 아래에 코드를 작성해주세요.
  myDog["bark"] = "woof";
  // 또는 myDog.bark = "woof";
  
  // 아래의 코드는 수정하지마세요.
  return myDog;
}
console.log(addProperty())
module.exports = { addProperty };

07. 객체 속성 삭제

myDog 객체에서 "tails" 속성을 삭제해주세요.

Example)

let ourDog = {
 "name": "Camper",
 "legs": 4,
 "tails": 1,
 "friends": ["everything!"],
 "bark": "bow-wow"
};

delete ourDog.bark;

function deleteProperty() {
  // 아래의 코드는 수정하지마세요.
  let myDog = {
    "name": "Happy Coder",
    "legs": 4,
    "tails": 1,
    "friends": ["Wecode Bootcamp"],
    "bark": "woof"
  };
  
  // 아래에 코드를 작성해주세요.
  delete myDog.tails;
  // 또는 delete myDog["tails"];
  // 아래의 코드는 수정하지마세요.
  return myDog;
}
console.log(deleteProperty())
module.exports = { deleteProperty };

08. 객체 안의 객체 접근

accessObject 함수를 작성해주세요.
myStorage 객체의 속성에 접근하여 glove box 프로퍼티의 값을 변수 gloveBoxContents에 대입해주세요.
함수의 리턴값은 glove box 프로퍼티의 값이 되어야 합니다.

function accessObject() {
  // 아래의 코드를 수정하지마세요.
  let myStorage = {
    "car": {
      "inside": {
        "glove box": "maps",
        "passenger seat": "crumbs"
       },
      "outside": {
        "trunk": "jack"
      }
    }
  };
  
  // 아래의 코드를 수정해주세요.
  let gloveBoxContents = myStorage.car.inside["glove box"];
  // 또는 
  // let gloveBoxContents = myStorage["car"]["inside"]["glove box"];
  
  // 아래의 코드를 수정하지마세요.
  return gloveBoxContents;
}
console.log(accessObject())

module.exports = { accessObject };

09. 객체 안의 배열 접근

accessArray 함수를 작성해주세요.
함수의 리턴값이 "pine" 이 될 수 있도록 해주세요.

function accessArray() {
  //아래의 코드는 수정하지마세요.
  let myPlants = [
    {
      type: "flowers",
      list: [
        "rose",
        "tulip",
        "dandelion"
      ]
    },
    {
      type: "trees",
      list: [
        "fir",
        "pine",
        "birch"
      ]
    }
  ];  
  // 아래에 코드를 작성해주세요.
  let foundValue = myPlants[1].list[1];
  
  // 아래의 코드를 수정하지마세요.
  return foundValue;
}
console.log(accessArray())
module.exports = { accessArray };