[TIL] 2021.03.14 JS로 많은 데이터다루기_lesson 객체

나라리야·2021년 3월 14일
1

TIL_codestates

목록 보기
9/12
post-thumbnail

Achievement Goals(학습목표)

객체 기초, 퀴즈, 실습
배열 및 객체 구조를 이해하고 어떻게 사용하는 지 이해할 수 있다.
배열과 객체의 특징을 구분하여 사용할 수 있다. (순서를 가진다, 의미를 가진다)
배열과 객체의 특징에 따라 실생활에서 언제 쓰여야 하는지 이해할 수 있다.

객체 속성(property)의 추가, 조회, 변경, 삭제를 자유자재로 할 수 있다.
객체 속성 조회법 두 가지, dot notation과 bracket notation의 차이를 이해한다.
객체 실습 - 2 에서 나오는 tweet.content와 tweet['content']의 차이가 무엇인지 확실히 이해한다.
obj.a = "hello" 와 같은 이질적인 객체 할당 방식을 능숙하게 다룰 수 있다.
객체 속성 삭제를 위한 delete 키워드를 사용할 수 있다.
객체를 위한 for문 for ... in 문의 기본을 이해하고 다룰 수 있다.

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

객체(Object)

만약 회원 주소록을 만든다고 가정한다면 회원정보에는 이름, 이메일, 사는지역 등등 많은 한사람에 대한 정보로 많은 내용이 필요할 것입니다. 여기에 또다른 회원을 추가해야한다면 불필요하게 여러개의 변수로 정보를 각각 선언해주는데, 이 각 변수는 이름으로 구분할 수 있을 뿐 어떠한 관계도 없다는 것을 알 수 있을 것 입니다.

만약 배열을 사용한다면? , 여러정보를 한 변수안에 넣을 수는 있지만 각 인덱스 요소가 어떤 정보를 가지고있는지 알 수가 없습니다. 거기다 가독성도 떨어질 것 입니다.

그런데 객체는 이러한 여러정보를 하나로 묶는데 아주 적합합니다.
객체는 키와 값 쌍(key-value pair)으로 이루어져있는데
아래의 예시를 보면

let user = {
firstName : 'Steve',
lastName : 'Lee',
email: 'oooo@gmail.com',
city: 'Seoul'
};

// 키,값 사이는 콜론(:)으로 구분한다. 
//키(key) : 값(value)
//

이런식으로 한 변수안에 여러 키과 값으로 정보를 구성할 수 있다.

객체의 값을 사용하는 방법은 두가지가 있다.

1. Dot.notation (.이후에 키를 넣는다 )

ex) user.firstName ;  //'Steve' 
    user.city ; //'Seoul' 

2. Bracket notation ([]안에 키를 넣는다)

ex) user['firstName']; //'Steve'
    user['city']; //'Seoul'

// 대괄호안에 키가 문자열로 들어간다

만약 Bracket notation을 사용할때 키를 문자열로 넣지않으면 에러가 발생한다.
정의되지 않은 변수를 참조할 때 발생하는 에러

Bracket notation을 써야할 때는 키값이 동적으로 변할 때 !

객체를 추가하거나 삭제하고 싶을 때 !

예시) 
let tweet = {
writer : 'stevelee',
createdAt : '2021-03-12',
content : '짱이다'
};


객체 추가 시 

tweet.isPublic = true;  
or 
tweet['isPublic'] = true;

// 추가 후 객체 조회 시 
let tweet = {
writer : 'stevelee',
createdAt : '2021-03-12',
content : '짱이다',
isPublic : true
};

객체 삭제시 (delete)

delete tweet.createdAt;  // createAt키와 값을 지웁니다.
        
// 삭제 후 객체 조회 시 
let tweet = {
writer : 'stevelee',
content : '짱이다',
isPublic : true
};

in 연산자를 이용해 해당 키가 있는지 확인할 수 있다!

예시) 
let tweet = {
writer : 'stevelee',
createdAt : '2021-03-12',
content : '짱이다'
};

'content' in tweet; // true 
'updatedAt' in tweet; // false 
profile
Code의 美를 추구하는 개발자 🪞

0개의 댓글