객체

2020. 11. 3. 00:18·BootCamp_Codestates/Pre Tech 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
'BootCamp_Codestates/Pre Tech Blog' 카테고리의 다른 글
  • Closure
  • Scope
  • 배열
  • 디버깅이란?
JTB
JTB
웹/앱 개발 정보를 공유하고 있습니다.
  • JTB
    JTechBlog
    JTB
  • 전체
    오늘
    어제
    • All About Programming;) N
      • Computer Science
        • Terminology and Concepts
        • Network
        • Operating System
        • Database
        • Data Structure
      • Frontend
        • Javascript Essentials
        • Perfomance Optimization
        • JS Patterns
        • Next.js
        • Flutter
      • Backend
        • Node.js
      • DevOps
        • Docker & Kubernetes
      • Coding Test N
        • LeetCode N
        • Programmers
      • Tech Books & Lectures
        • Javascript_Modern JS Deep d..
        • Network_IT 엔지니어를 위한 네트워크 입문
      • Projects
        • PolyLingo_2025
        • Build Your Body_2024
        • JStargram_2021
        • Covid19 Tracker_2021
        • JPortfolio_2021
      • BootCamp_Codestates
        • TIL
        • TILookCloser
        • Pre Tech Blog
        • IM Tech Blog
        • Daily Issues and DeBugging
        • First Project
        • Final Project
        • Sprint Review
        • Good to Know
        • Socrative Review
        • HTML & CSS
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

    • 글쓰기
    • 관리
  • 공지사항

  • 인기 글

  • 태그

    CPU scheduling algorithm
    Threads and Multithreading
    Binary Tree BFS
    js pattern
    자바스크립트 딥다이브
    How memory manage data
    TCP/IP
    Network
    자바스크립트
    Shared resources
    need a database
    structure of os
    이벤트
    leetcode
    커리어
    딥다이브
    indie hacker
    스코프
    database
    testing
    프론트엔드 성능 최적화 가이드
    polylingo
    JavaScript
    DOM
    모던 자바스크립트 Deep Dive
    Operating System
    Time complexity and Space complexity
    Data Structure
    VoiceJournal
    mobile app
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.5
JTB
객체
상단으로

티스토리툴바