[TIL] Javascript Object

javascript logo

1. Javascript의 객체

◎ 객체는 우리가 변수 혹은 상수를 사용하게 될 때 하나의 이름에 여러 종류의 값을 넣을 수 있게 해 준다.

객체는 이름과 값으로 구성된 프로퍼티들의 집합이라고 할 수 있다.

2. 선언방식

◎ 객체를 선언할 때에는 { } 문자 안에 원하는 값들을 넣어주면 됩니다.

const 객체이름 = {
 property이름1(key) : property값(value),
 property이름2(key) : property값(value)
};

• 객체는 { } (중괄호)로 감싸져 있다.

• 키 :  원하는 값 형태로

• key 이름은 중복될 수 없다.

• key와 value값 사이에 :으로 구분한다.

• key를 추가할 때는 , 를 붙여준다.

• key 값에는 어느 type이나 가능하다.(string, number, array, object, function...)

• key에 해당하는 부분은 공백이 없어야 합니다.

만약 공백이 있어야 하는 상황이라면 " "로 감싸서 문자열로 넣어주면 된다.

const sample = {
 'key with space' : true
};

3. 사용방법

◎ 해당 객체의 key값을 접근하고 싶을 때는 아래와 같다.

객체이름.프로퍼티명
또는, 객체이름["프로퍼티명"]

• . 연산자를 사용하며, 접근하려는 객체명은 왼쪽에, 프로퍼티명은 오른쪽에 위치합니다.

• []를 사용하여, 접근하려는 객체명은 왼쪽에, 프로퍼티명은 " "와 함께 대괄호 안에 작성합니다.

3-1. 대괄호 표현 사용

◎ 보통 .연산자를 사용하여 접근하지만, 특수한 경우는 []를 사용하여 접근합니다.

 

code

대괄호 안에는 변수가 들어갈 수 있습니다.

위의 코드처럼 plan1 객체의 name이라는 프로퍼티에 접근하고 싶을 때, 위와 같이 사용하면 된다.

4. 사용 예시

◎ 영화 어벤저스의 캐릭터 아이언맨과 캡틴 아메카의 정보를 객체 안에 집어 놓는 코드를 구현해보자.

 

code

console을 이용하여 ironMan 객체와 captainAmerica 객체를 출력했을 때 다음과 같은 결과가 나옵니다.

만약 객체 안에 actor 프로퍼티의 값을 불러오고 싶으면 다음과 같이 작성하면 된다.

 

5. 함수에서 객체를 파라미터로 받기

◎ 함수를 새로 만들어서 방금 만든 객체를 파라미터로 받아와서 사용해보자.

 

code

• print 함수에 ironMan객체와 captainAmerica객체를 인자로 넣어 호출한다.

• print 함수에 매개변수 hero를 파라미터로 받아와서 사용한다.

• hero는 ironMan과 captainAmerica 객체이기 때문에 hero.프로퍼티명 으로 그에 해당하는 값을 사용한다.

6. 객체 비구조화 할당

◎ 위의 코드에서 print 함수를 보면 파라미터로 받아온 hero 내부의 값을 조회할 때마다 hero. 를 입력하고 있는데, 객체 비구조화 할당이라는 문법을 사용하면 코드를 더욱 짧고 보기 좋게 작성할 수 있다.

 

code

위의 코드가 객체에서 값들을 추출해서 새로운 상수로 선언해 주는 것이다.

여기서 더 나아가면, 파라미터 단계에서 객체 비구조화 할당을 할 수도 있다.

 

code

위에서 구현했던 코드보다 훨씬 깔끔해진 걸 확인할 수 있습니다.

7. 객체 안에 함수 넣기

◎ 객체 안에 함수도 넣을 수 있다. 다음 코드를 봐보자

 

code

함수가 객체 안에 들어가게 되면, this는 자신이 속해있는 객체를 가리키게 된다.

함수를 선언할 때에는 이름이 없어도 된다.

 

code

하지만 객체 안에 함수를 넣을 때, 화살표 함수(arrow function)로 선언한다면 제대로 작동하지 않는다.

 

code

arrow function this error console

이유는 function으로 선언한 함수는 this가 자신이 속한 객체를 가리키게 되는데, 화살표 함수는 그렇지 않기 때문이다.

화살표 함수와 this에 대해서는 나중에 알아봐 보자.

9. 객체 안에 객체 넣기

◎ 객체 안에는 또 다른 객체를 생성하고 사용할 수 있다.

다음 코드를 봐보자.

 

code

console

objData 객체 안에 address라는 프로퍼가 있고 그의 값은 객체로 되어있다.

console에 objData을 확인해보면 address는 Object로 되어있는 걸 확인할 수 있다.

만약 address 객체 안에 있는 값을 추출하고 싶으면 다음과 같이 하면 된다.

 

console result code

10. 객체 안에 배열 넣기

◎객체 안에 배열도 생성할 수 있다. 다음 코드를 봐보자.

 

code

console

objData객체 안에 language라는 프로퍼티가 있고 값은 배열 형태로 되어있다.

console에 objData을 확인해보면 language는 array로 되어있는 걸 확인할 수 있다.

만약 name이 javascript로 된 값을 추출하려면 아래 코드와 같이 하면 된다.

 

objData안에 language 프로퍼티에 접근하고, language 프로퍼티는 배열 형태로 되어있기 때문에 name이 javascript로 되어있는 0번째 인덱스에 접근하여 가져오면 된다.

※ 참조

https://learnjs.vlpt.us/basics/06-object.html

06. 객체 · GitBook