JS Object의 property에 접근하기

Joah·2022년 5월 29일
0

Javascript

목록 보기
3/16
post-thumbnail

Object의 property 값에 접근하기 {key:value}

객체의 property의 value에 접근하기 위해서는 2가지 방법을 사용할 수 있다.



1. Dot Notaion 점 표기법

마침표(.) 연산자를 사용하며, 접근하려는 객체명은 왼쪽에, 프로퍼티 명은 오른쪽에 위치한다.

const ellie = {
	name: "Ellie",
  	position: ["server", "busser"],
  	age: 32,
  	fulltime: false
}
  • 변수 ellie에서 Ellie의 나이를(age) 알고 싶다.
ellie.age
//32

ellie.age → 'ellie라는 변수에 age라는 key에 접근해서 해당 key의 value값을 얻어내라'


  • 그럼 Ellie의 직책을 알아보기 위해서는?
ellie.position
//["server", "busser"]

ellie.position → 'ellie라는 변수에 position이라는 key에 접근해서 해당 key의 value값을 얻어내라'


  • Ellie가 fulltime으로 일하는지 아닌지 궁금하다면?
ellie.fulltime
//false

ellie.fulltime → 'ellie라는 변수에 fulltime이라는 key에 접근해서 해당 key의 value값을 얻어내라'




2. Bracket Notation 대괄호 표기법

대괄호를 사용하여, 접근하려는 객체명은 왼쪽에, 프로퍼티 명은 쌍따옴표("")와 함께 대괄호 안에 작성한다.

const ellie = {
	name: "Ellie",
  	position: ["server", "busser"],
  	age: 32,
  	fulltime: false
}
  • 변수 ellie에서 Ellie의 나이를(age) 알고 싶다.
ellie["age"]
//32

ellie["age"] → 'ellie라는 변수에 age라는 key에 접근해서 해당 key의 value값을 얻어내라'


  • 그럼 Ellie의 직책을 알아보기 위해서는?
ellie["position"]
//["server", "busser"]

ellie["position"] → 'ellie라는 변수에 position이라는 key에 접근해서 해당 key의 value값을 얻어내라'


  • Ellie가 fulltime으로 일하는지 아닌지 궁금하다면?
ellie["fulltime"]
//false

ellie["fulltime"] → 'ellie라는 변수에 fulltime이라는 key에 접근해서 해당 key의 value값을 얻어내라'




점 표기법과 대괄호 표기법의 차이점!

위의 예시로 봐서는 값에 접근하는 방법의 두가지 표기법은 별 차이가 없어보인다...

딱 봐도 점 표기법으로 접근하는 것이 편해보이는데 대괄호는 언제 사용하는걸까?

대괄호 표기법에서 대괄호 안에 변수가 들어갈 수 있다.

const shannon = {
	name: "Shannon",
  	position: ["chief", "supervisor"],
  	age: 29,
  	fulltime: false
}

let herName = "name"
let herAge = "age"

console.log(shannon[herName])
// "Shannon"
console.log(shannon[herAge])
// 29
profile
Front-end Developer

0개의 댓글