Achievement Goals

• 배열과 객체의 구조를 이해하고 언제, 어떻게 사용하는지 이해할 수 있다.

  • 배열과 객체의 특징을 구분하여 사용할 수 있다. (순서를 가진다, 의미를 가진다)
  • 배열과 객체의 특징에 따라 실생활에서 언제 쓰는지 이해할 수 있다.

• 객체 속성(property)의 추가, 조회, 변경, 삭제를 자유자재로 할 수 있다.

  • 객체 속성 조회법 두 가지, dot notation과 bracket notation의 차이를 이해한다.
  • 객체 실습 - 2의 tweet.content와 tweet['content']의 차이가 무엇인지 설명할 수 있다.
  • dot notation을 이용한 객체 할당 방식을 능숙하게 다룰 수 있다. obj.a = "hello"
  • 객체 속성 삭제를 위한 delete 키워드를 사용할 수 있다.
  • 객체를 위한 for문 for ... in 문을 이해하고 다룰 수 있다.

• 배열과 객체, 반복문을 응용하여 능숙하게 대량의 정보를 다룰 수 있다.

• 1. 객체란 ?

  • 하나의 변수안에 여러가지 정보가 있을때 사용하기 좋은 것이 객체이다.

    

  • 키와 값 두개로 이루어져 있다.(Key-Value pair)

    

  • 중괄호로 시작을 해준다. 키와값쌍은 ','로 구분해준다.

    

• 2. 객체의 값을 사용하는 방법

  • 방법1 Dot notation

  let user = {
  firstName: 'Steve',
  lastName: 'Lee',
  email: 'steve@codestates.com',
  city: 'Seoul'
  };;
  
  //Dot notation으로 
  //Steve라는 값에 접근 하려면 ?
  user.firstName; //'Steve'
  //Seoul이라는 값에 접근 하려면?
  user.city;// 'Seoul'

  • 방법2 Bracket notation

  let user = {
  firstName: 'Steve',
  lastName: 'Lee',
  email: 'steve@codestates.com',
  city: 'Seoul'
  };;
  
  
  //Bracket notation으로
  //Steve라는 값에 접근 하려면 ?
  user['firstName']; //'Steve'
  //Seoul이라는 값에 접근 하려면?
  user['city'];// 'Seoul'
  //firstname / city 키가 문자열로 들어가서 ''를써야한다.

• tweet['content'] ===(?) tweet[content]

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

->위와 같은 객체가 있다.
-> Bracket notation으로 content라는 키의 값을 가져오려고 하는데

->tweet[content]라고 적었을때는 에러가 발생한다. (에러이유: content가 정의(할당)되지 않았다)
-> 이와 같은 상황은 지금 content를 변수로 취급하고 있기 때문에 발생하는 것이다.
그러기 때문에 , content라는 변수에 'content'라는 문자열을 담아주면 문제가 해결된다.

keyname이라는 변수에'content'라는 문자열을 담아 줫을 경우
-> let keyname = 'content'; (keyname을 content라는 변수에 할당한다.)
tweet[keyname] === tweet['content']와 같아진다.

• 3. Bracket notation을 써야 할때

  • Key값이 동적으로 변할때(변수)

    (dot notation은 변수(key값)를 담을수 없다.)
    문제
    
  • name /age 키의 값이 변한다!! (Bracket notation)
  • 만약 키의 값이 변하지 않고 정해진 경우 (Dot notation도 사용이 가능하다)
    그래서 return obj.propertyName 이라고 하면 나오지 않는다.

    function getProperty(obj, propertyName){
    return obj[propertyName]; // 1번요구사항 : obj['name'] // 2번요구사항 : obj['age']

• 4. dot/bracket notation으로 값을 추가 할수도 있다

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

tweet['category']= '잡담'; //bracket notation으로 문자열을 추가
tweet.isPublic = true; // dot notation 으로 boolean값을 추가
tweet.tags = ['#코드스테이츠', '#프리코스']; // dot notation 으로 배열을 추가

• 5. delete 키워드로 삭제도 가능하다.

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

// createdAt 키-값 쌍을 지울때
delete tweet.createdAt;

// tweet = {
 wrtier: 'stevelee',
 content: '프리코스 재밌어요!'
};

• 6. in 연산자를 이용해 해당하는 키가 있는지 확인할수 있다.

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

'content' in tweet; // true
'updatedAt' in tweet; // false

출처: 코드스테이츠