WEEK 3 객체

객체?

여러종류의 데이터를 묶음으로 관리하는 데이터 타입

객체 리터럴(object literal) 방식을 주로 사용 : 중괄호 {...}를 이용해 객체를 선언

//객체?
let myself = {name: 'jh', location: {country: 'Korea', city: 'Seoul'}, dogs:['지호', '여름']};

//배열?
let arr = ['jihyun', 'kim', 'seoul'];

‼️ Key-value 쌍이 하나의 property

‼️ value에 또다른 object가 올 수 있음

‼️ array와 차이점? 객체는 index가 없고 프로퍼티의 순서까지 저장하지는 않는다.

---

객체에 저장된 데이터에 접근하기

✔️ key를 이용하여 접근

• Dot Notation → 객체변수명.key

console.log(myself.name); //'jh'
console.log(myself.location); // {country: 'Korea', city: 'Seoul'}

• Bracket Notation →객체변수명['key']

console.log(myself['location']); // {country: 'Korea', city: 'Seoul'}
console.log(myself['dogs']); // ['지호', '여름']

• Dot Notation vs Bracket Notation

  Dot Notation
  프로퍼티 식별자로 영어, 숫자, '_', '$' 가능
  변수, 띄어쓰기, 숫자로 시작 불가능

  Bracket Notation
  프로퍼티 식별자로 문자나 변수
  띄어쓰기, 숫자로 시작 가능

let animals = {
	dog_1:'jiho',
	rabbit_2: 'tosil',
	ferret_3: 'gomi'
}

let cute = 'ferret_3'; // 변수에 key 할당

console.log(animals.cute) // undefined
console.log(animals[cute]) // 'gomi'

/* Dot notation => object안의 key라고 받아들임
	 object안에 해당 key 있으면 해당 key를 찾아 value 출력
   object안에 해당 key 없으면 undefined

	 Bracket Notation => 변수 사용 가능
	 object[변수] => object안에서 변수에 할당된 해당 key를 찾아 value 출력 */

출처) MDN

🌿 스터디 키워드

• 객체란 무엇이며 필요한 이유

  객체란? 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합

  필요한 이유? 다양한 타입의 데이터를 순서없이 저장했을 때, index number없이 키값으로 불러올 수 있다.

• 객체에서 property, key, value

  프로퍼티(property): ‘키(key): 값(value)’ 쌍으로 구성

  let obj = {

  Key1: value1,

  }

• 객체에 접근하는 두 가지가 있는 이유

  일반적으로 Dot notation 사용

  ⇒ js에서 식별자로 허용되지 않는 문자가 들어간 속성 이름('한글', '1Group')을 사용해야 하는 경우에는 Bracket notation 사용

• 객체의 값을 추가,수정, 삭제하는 방법

    let jjeojukco = {
    	member: 6,
    	date: ['Wednesday', 'Friday'],
    	todo: 'westudy',
    }

    // 추가
    	1. jjeojukco.isDeveloper = true;
    	2. jjeojukco['isDeveloper'] = true;
    	3. Object.assign(jjeojukco, {isDeveloper: true});
    	4. jjeojukco = {...jjeojukco, isDeveloper: true};
    	5. jjeojukco = {...jjeojukco, ...{isDeveloper: true}};
    	6. let newProp = {isDeveloper: true}
    		 jjeojukco = {...jjeojukco, ...newProp};

    console.log(jjeojukco); // {
      date: ["Wednesday", "Friday"],
      isDeveloper: true,
      member: 6,
      todo: "westudy"
    }

    //수정
    	1. jjeojukco.isDeveloper = false;
    	2. jjeojukco['isDeveloper'] = false;

    console.log(jjeojukco); // {
      date: ["Wednesday", "Friday"],
      isDeveloper: false,
      member: 6,
      todo: "westudy"
    }

    //삭제
    	1. delete jjeojukco['member'];
    	2. delete jjeojukco.member;

    console.log(jjeojukco); // {
      date: ["Wednesday", "Friday"],
      isDeveloper: false,
      todo: "westudy"
    }

• 객체와 배열이 섞인 복잡한 객체 만들어서 접근하는 방법

  배열은 인덱스로 접근, 객체는 dot notation이나 bracket notation으로 접근

    let myPlants = [
        {
          type: "flowers",
          list: [
            "rose",
            "tulip",
            "dandelion"
          ]
        },
        {
          type: "trees",
          list: [
            "fir",
            "pine",
            "birch"
          ]
        }
      ];

    console.log(myPlants[1].list[2]); //"birch"

• 배열의 타입이 객체인 이유

  배열은 인덱스를 프로퍼티 키로 가지며 length 프로퍼티를 갖는 특수한 객체
  배열의 요소는 프로퍼티값

    let arr = ["one", "two", "three"];

    console에서 arr 
    0: "one"
    1: "two"
    2: "three"
    length: 3 // length프로퍼티를 가짐