🔍 객체

하나의 변수안에 여러가지의 정보가 담겨져있을 때 사용하기 적합한 자료구조이다. ex) 주소록

객체 선언 후, 값을 사용하기 위한 방법으로 Dot notation, Bracket notation 2가지가 있으며, key 값이 동적으로 변할 때 즉, 변수일때 반드시 braket notation을 사용해야한다.

//객체 선언
let user = {
    firtName: 'Steve',
    lastName: 'Lee',
    email: 'steve@codestates.com',
    city: 'seoul'
};

//객체 값 사용 - 방법1. Dot notation
user.firtName;   // 'steve'
user.city;       // 'Seoul'

//객체 값 사용 - 방법2. Bracket notation
user['firstName'];  // 'steve'
user['city'];       // 'Seoul'


// example
let tweet = {
    writer: 'stevelee',
    createAt: '2019-09-10 12:03:33',
    content: '프리코스 재밌어요!'
};

// '프리코스 재밌어요!'를 bracket notation으로 조회하는 방법은?(스트링으로 가져옴)
tweet['content'];    // O, ' ' 홑 따옴표 사용
tweet["content"];    // O, " "  쌍 따옴표 사용
tweet[`content`];    // O, `  ` 백틱 사용

tweet[content];      // ReferenceError, 여기에 content는 변수로 취급된다.
//위의 방법이 올바른 방법이 되기 위해서는 let content = ‘content’ 와 같은 방식으로 content라는 변수에 ‘content’라는 문자열이 할당되어 있어야 한다.

✔ Bracktet donation을 사용해야하는 예시

parameter로 객체와 키를 받는 함수가 있고, 이 함수는 주어진 객체와 키를 이용하여 속성값을 찾아 리턴합니다.

function getProperty(obj, propertyName){
  return obj[propertyName];   // bracket donation
}

let person = {
  name: 'Steve',
  age: 16
};

// 매개변수가 늘 달라질 수 있기때문에 bracket으로 리턴해야함
let output = getProperty(person, 'name');
console.log(output);     // 'Steve'

let output2 = getProperty(person, 'age');
console.log(output2);     // 16

✔ dot/bracket notation을 이용해 값 추가, 삭제

let tweet = {
    writer: 'stevelee',
    createAt: '2019-09-10 12:03:33',
    content: '프리코스 재밌어요!'
};

// 값 추가
tweet['category'] = '잡담';
tweet.isPublic = true;
tweet.tags = ['#코드스테이츠', '#프리코스'];

//값 삭제(delete 키워드 사용)
delete tweet.createdAt;

//tweet은 다음과 같게 된다.
/* {writer: 'stevelee', 
content: '프리코스 재밌어요!', 
category: '잡담', 
isPublic: true, 
tags: Array(2)} */

✔ in 연산자를 이용해 키 유무 확인

let tweet = {
    writer: 'stevelee',
    createAt: '2019-09-10 12:03:33',
    content: '프리코스 재밌어요!'
};

'content' in tweet;    // true
'updateAt' in tweet;   // false,  updatedAt가 있음.

✔ 객체의 메소드 참조

let user = {
    FirstName: 'Steve',
    LastName: 'Lee',
    email: 'steve@codestates.com',
    city: 'seoul',
  
  name: function() {
    return this.FirstName + this.LastName;
  }
};

user.name(); // 'SteveLee'

user.name;  // ƒ () { return this.FirstName + this.LastName;}

Reference:

링크텍스트

✔ Q. 두 개의 객체를 입력받아 두 번째 객체의 속성들을 첫 번째 객체에 추가하는 함수 구현

function extend(obj1, obj2) {
   for (let key in obj2) {
    if (!(key in obj1)) { //obj1안에 obj2의 key가 있다면?  obj1과 obj2의 중복key 제거
      obj1[key] = obj2[key]; // obj1 객체 안에 obj2의 key와 값을 추가
    }
  }
}
//key -> 대괄호 없이 쓰면 key 
//[key] -> 대괄호 포함하면 값

Reference: 코드스테이츠