객체란? (🔑Study Keyword)

🗣객체란?

하나의 변수에 여러 속성을 지정할 수 있도록 해주는 자바스크립트의 참조형 데이터 타입 중 하나이다.
아래 이미지처럼 key(속성이름) value(속성 값) property(속성)으로 연결되어 있으며, 배열과 달리 순서가 중요하지 않다.

객체를 만들기 위해서는 평소처럼 변수를 선언한 다음, 중괄호{...}로 key-value의 속성 쌍을 묶어주면 된다.

🗣 객체가 필요한 이유는?

• 자바스크립트는 객체 기반의 스크립트 언어이며, 자바스크립트를 이루고 있는 거의 모든것이 객체이다. 원시타입(Primitives)을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체이기 때문에 자바스크립트에서 객체는 필수 불가결한 존재다.

• 객체는 데이터를 의미하는 프로퍼티(Property)와 데이터를 참조하고 조작할 수 있는 동작을 의미하는 메소드(Method)로 구성된 집합이다. 객체는 데이터(프로퍼티)와 그 데이터에 관련되는 동작(메소드)을 모두 포함할 수 있기 때문에 데이터와 동작을 하나의 단위로 구조화할 수 있어 유용하다.

• 관련 있는 정보들을 서로 연결하는 데에 객체를 활용하면, 데이터(Value)와 문자열(Key)을 연관 지어서 저장할 수 있기 때문에 코드를 유지 보수할 때에도 매우 편리하다.

  • 간단한 코드에서는 이를 쉽게 느낄 수 없겠지만, 코드가 복잡해지고 데이터가 많아질수록 유지 보수가 훨씬 편리해진다는 걸 느낄 수 있을 것이다.

🗣 property, key, value

1. property

   객체는 프로퍼티의 집합이다. 프로퍼티는 key(키) : value(값)의 형식으로 객체 안의 콤마(,)로 구분되어 할당된다.

2. key

   속성명이라고 생각하면 된다. 그리고 문자열만 가능하지만 따옴표(’ ‘)는 필요없다. 하지만 컴퓨터가 모르는 언어 (예를 들면 한국어)라면 따옴표가 필요하고 띄어쓰기가 있는 경우에도 필요하다.

3. value

   속성값이라고도 부르며, 어떤 값이든지 (문자열, 숫자 ,객체, 함수 등) 아무거나 상관 없다.
   객체에 함수를 정의할 경우, 속성값이라고 하지 않고 메소드(method)라고 부른다.

🗣 객체의 데이터에 접근 방법

1. Dot Notation (점 표기법)

let abc = {
	a: 'a',
	b: 'b',
	c: 'c'
}
console.log(abc.a); //a 출력
console.log(abc.b); //b 출력
console.log(abc.c); //c 출력

► 객체.프로퍼티 형식으로 값에 접근이 가능

2. Bracket Notation(괄호 표기법)

let abc = {
	a: 'a',
	b: 'b',
	c: 'c'
}
console.log(abc['a']); //a 출력
console.log(abc['b']); //b 출력
console.log(abc['c']); //c 출력

► 객체['프로퍼티 이름(키)'] 형식으로 접근이 가능

🌎 여기서 잠깐!!!

Dot Notation vs Bracket Notation
이 두가지에는 큰 차이점이 존재한다.
bracket notation에는 dot notation이 갖지 못하는 중요한 용도가 있다 바로 변수의 활용이다.
밑에 예시를 보면서 더 정확하게 설명해보자!

우선 myself 객체를 생성하고 ▼

let myself={
  name : 'Code Kim',
  location : {
  	country : 'south korea',
  	city : 'Seoul'
},
  age : 30
  cats : ['냥순','냥돌'],
}
    

myself에 있는 cats 키값으로 변수를 생성하고 ▼

let myKey = 'cats'

두가지 접근법으로 접근해보자면▼

console.log(myself['cata']) // ["냥순","냥돌"]
console.log(myself[myKey]) // ["냥순","냥돌"]
console.log(myself.myKey) // undefined

→ 이렇듯 괄호표기법은 변수를 활용하여 객체를 접근할수 있지만 점표기법으로는 변수활용하지 못한다.
💡 이렇게 큰 차이점이 있기에 두가지 접근방법을 알아둬야할 필요가 있다!!