Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- 자바스크립트 딥다이브
- peerdependencies
- 자바스크립트
- Babel과 Webpack
- const
- 디스트럭처링
- Property Attribute
- 인터넷 장비
- 비전공이지만 개발자로 먹고삽니다
- package management
- Set과 Map
- 이미지 갤러리 최적화
- 블로그 서비스 최적화
- 브라우저의 렌더링 과정
- 전역변수의문제점
- 올림픽 통계 서비스 최적화
- 제너레이터와 async/await
- 프로퍼티 어트리뷰트
- 딥다이브
- 스코프
- 빌트인 객체
- 이벤트
- 자바스크립트 패턴
- 프로그래머스
- DOM
- ES6함수 추가기능
- 모던 자바스크립트 Deep Dive
- 프론트엔드 성능 최적화 가이드
- var 사용금지
- 커리어
Archives
- Today
- Total
Dev Blog
객체 본문
Achievement Goals
객체 기초, 퀴즈, 실습
- 배열 및 객체 구조를 이해하고 어떻게 사용하는 지 이해할 수 있다.
- 배열과 객체의 특징을 구분하여 사용할 수 있다. (순서를 가진다, 의미를 가진다)
- 배열과 객체의 특징에 따라 실생활에서 언제 쓰여야 하는지 이해할 수 있다.
- 객체 속성(property)의 추가, 조회, 변경, 삭제를 자유자재로 할 수 있다.
- 객체 속성 조회법 두 가지, dot notation과 bracket notation의 차이를 이해한다.
- 객체 실습 - 2 에서 나오는 tweet.content와 tweet['content']의 차이가 무엇인지 확실히 이해한다.
- obj.a = "hello" 와 같은 이질적인 객체 할당 방식을 능숙하게 다룰 수 있다.
- 객체 속성 삭제를 위한 delete 키워드를 사용할 수 있다.
- 객체를 위한 for문 for ... in 문의 기본을 이해하고 다룰 수 있다.
- 배열과 객체, 반복문을 응용하여 능숙하게 대량의 정보를 다룰 수 있다.
객체는 키(key)와 값(value) 쌍(key-value pair)으로 이루어져 있다.
let user = {
firstName: 'Kim',
lastName: 'Lee',
email: 'steve@codestates.com',
city: 'Seoul'
};
key: firstName, lastName, email, city
value: Kim, Lee, steve@codestates.com, Seoul
객체 값 사용 방법
1. 속성에 접근하기
1. Dot notation: 객체이름.Key => Value. user.firstName; //'Kim', user.city; //'Seoul'
객체의 속성을 가져오는 것.
2. Bracket notation: 객체이름[Value] => Value. user['firstName'];//'Kim, user['city']; //'Seoul'
' ' 반드시 기입할 것!!!
※주의할점
tweet[content]
undefined
-> 따옴표가 없으면 content를 변수로 취급하기 때문에 undefined error 가 출력된다. //reference Error
즉, bracker notation 을 쓸 때는, bracket 안쪽의 문자열 형식으로 전달해야 한다.
생각해보기
2. 속성 변경하기
: bracker notation으로 값을 변경할 수 있다.
객체이름[Key] = Value;
문제예시
3. dot/bracket notation 으로 값 추가하기
객체이름[Key] = Value; 객체이름.Key = Value;
4. 값 삭제하기
delete 객체이름.Key; delete 객체이름[Key]
5. in 연산자로 해당키 존재여부 확인하기
Key in 객체이름
'BootCamp_Codestates > Pre Tech Blog' 카테고리의 다른 글
Closure (0) | 2020.11.08 |
---|---|
Scope (0) | 2020.11.03 |
배열 (0) | 2020.11.02 |
디버깅이란? (0) | 2020.10.28 |
반복문 (0) | 2020.10.28 |
Comments