[코드스테이츠 Day 11] 객체

Strawberry Oolong Tea·2021년 9월 6일
0

TODAY I LEARNED

목록 보기
20/51
post-thumbnail
post-custom-banner

객체 Object

  • key: value의 쌍으로 묶은 데이터를 여러 개 모은 복합 데이터
  • 객체에 포함된 데이터 하나(이름과 값의 쌍; key: value)를 가리켜 객체의 프로퍼티라고 한다.
// 변수에 할당할 경우
let colorNameOfRainbow = 'Red';
let hexCodeOfColor = '#ff0000';

let colorNameOfRainbow2 = 'Orange';
let hexCodeOfColor2 = '#ff6600';

// 배열에 할당할 경우
let colorOfRainbow = ['Red', '#ff0000'];

// 객체에 할당할 경우
let colorOfRainbow = {
  // key: value
  colorName: 'Red', // ,(comma)로 구분한다.
  hexCode: '#ff0000'
};

객체의 값을 조회하는 방법

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

Dot notation

let colorOfRainbow = {
  colorName: 'Red',
  hexCode: '#ff0000'
}

// Object.키 이름
colorOfRainbow.colorName; // 'Red'
colorOfRainbow.hexCode; // '#ff0000'

Bracket notation (square bracket)

let colorOfRainbow = {
  colorName: 'Red',
  hexCode: '#ff0000'
}

// Object['키 이름']
colorOfRainbow['colorName']; // 'Red'
colorOfRainbow['hexCode']; // '#ff0000'

// 변수 colorName을 선언한 적이 없으므로 에러 발생
colorOfRainbow[colorName]; // Uncaught ReferenceError: colorName is not defined

notation 방식에 따라 그 값과 의미가 다르다.

colorOfRainbow['colorName'] === colorOfRainbow.colorName // true
colorOfRainbow['colorName'] === colorOfRainbow[colorName] // false
colorOfRainbow.colorName === colorOfRainbow[colorName] // false

키 값이 동적으로 변할 때, 키 값이 변수일 때
다음과 같이 사용할 수 있다.

// 키 값이 동적으로 변할 때, 키 값이 변수일 때
colorOfRainbow[dynamicKey];

for in 반복문과 in 연산자 사용

for in 반복문을 통해서 객체의 속성을 조회할 수 있다.

const obj = {a: 'b', c: 'd'};

for (let key in obj) {
  console.log(key); // a, c
}

for (let key in obj) {
  console.log(obj[key]); // b, d
}

in 연산자는 명시된 속성이 객체에 존재하면 true를 리턴한다.
속성 in 객체명

const favorite = {fruit: 'strawberry', book: 'Demian'};
'fruit' in favorite // true
'food' in favorite   // false
profile
Der Vogel kämpft sich aus dem Ei 🥚🐣 목표를 위해 끊임없이 자신의 세계를 깨뜨릴 수 있는 용감한 개발자가 되고 싶습니다.
post-custom-banner

0개의 댓글