자바스크립트의 객체

April 09, 2020

자바스크립트의 객체

이전 포스트에서 언급했던 것과 같이 자바스크립트에서 null과 undefined를 제외한 모든 것은 객체로 표현될 수 있다. 그만큼 객체의 활용과 객체의 특성에 대해서 제대로 이해하는 것이 중요하다.

객체의 생성

자바스크립트에서는 객체를 생성하는 방법이 크게 세가지가 있다. 첫번째는 Object() 객체 생성자 함수를 이용하는 방법, 두번째는 객체 리터럴을 이용하는 방법, 세번째는 생성자 함수를 이용하는 방법이다

Object()생성자 함수

   //player라는 이름의 빈 객체 생성
   var player = new Object();
   
   //player 객체 프로퍼티 생성
   player.name = 'Mason Mount';
   player.position = 'Midfielder';
   player.back_number = 19;
   
   console.log(typeof player); // (결과) object
   console.log(player); // (결과) {name: 'Mason Mount', position: 'Midfielder', back_number: 19 }

객체 리터럴

   var player = {
   	name : 'Mason Mount',
   	position : 'Midfielder',
   	back_number : 19 
   };
   
   console.log(typeof player); // (결과) object
   console.log(player); // (결과) {name: 'Mason Mount', position: 'Midfielder', back_number: 19 }

생성자 함수 (함수를 통한 객체 생성)

   var minus = new Function('x','y','return x-y'); //minus라는 함수 객체 선언
   console.log(minus(4,3)); //(출력값) 1

객체 프로퍼티 접근/출력/삭제

객체에는 프로퍼티가 존재하는데 프로퍼티는 기본 데이터 형식이 들어갈 수도 있고, 객체가 들어갈 수도 있고, 함수가 들어가서 메소드로 사용될 수도 있다. 이렇게 객체에서는 새로운 프로퍼티를 생성/삭제할 수도 있고, 프로퍼티에 접근하여 값을 읽거나 변경할 수 있다. 객체의 프로퍼티에 접근하는 방법에는 두가지 방법이 있다.

대괄호([ ])를 통한 접근법

대괄호 표기법 시 접근하려는 프로퍼티 이름을 꼭 문자열로 만들어야 한다.
마침표(.)를 통한 접근법

   var player = {
   	name : 'Mason Mount',
   	position : 'Midfielder',
   	back_number : 19 
   };
   
   //프로퍼티 읽기
   console.log(player.name);  // (출력값) Mason Mount
   console.log(player['name']); // (출력값) Mason Mount
   console.log(player.score); // (출력값) undefined
   
   //프로퍼티 수정
   player.position = 'Defender';
   console.log(player.position); // (출력값) Defender
   console.log(player['position']); // (출력값) Defender
   
   //프로퍼티 동적 생성
   player.score = 9;
   console.log(player.score); // (출력값) 9
   
   //대괄호 표기법만 사용해야하는 경우
   player['market-value'] = '20m';
   console.log(player['market-value']); // (출력값) 20m
   console.log(player.market-value); // (출력값) NaN

프로퍼티 동적생성 - 존재하지 않는 프로퍼티에 값을 할당할 경우 새로운 프로퍼티가 동적으로 할당된 이후에 값이 할당된다.
NaN은 수치 연산을 해서 비정상적인 값을 얻지 못할 때 출력된다.

프로퍼티를 하나씩 출력할 수도 있지만, for in 문을 사용하면 객체에 포함된 모든 프로퍼티를 루프를 통해 출력 할 수 있다.

var player = {
	name : 'Mason Mount',
	position : 'Midfielder',
	back_number : 19 
};

var i;
for (i in player) {
    console.log(i, player[i]);
}

// (출력값) name 'Mason Mount'
//         position Midfielder
//         back_number 19

객체 프로퍼티를 삭제하는 경우에는 delete 연산자를 이용해서 삭제할 수 있다. 하지만 **객체의 프로퍼티만 삭제할 수 있고, 객체 자체를 삭제하지는 못한다. **

var player = {
	name : 'Mason Mount',
	position : 'Midfielder',
	back_number : 19 
};

delete player.name;
console.log(player.name); // (출력값) undefined; 

delete player;
console.log(player.position); // (출력값) midfielder;

객체비교

동등연산자(==)를 사용하여 두 개의 객체를 비교할 때, 객체의 프로퍼티 값이 아닌 참조값을 비교한다.

var num1 = 100;
var num2 = 100;

var objA = { value: 100 };
var objB = { value: 100 };
var objC = objB;

console.log(num1 == num2); // (출력값) true
console.log(objA == objB); // (출력값) false
console.log(objB == objC); // (출력값) true

위 예시를 보면 objA와 objB의 비교는 둘의 참조값이 다르기 때문에 false의 결과를 얻게 된다. objB와 objC의 비교의 경우 위의 할당 과정에서 objC에 objB의 참조값이 할당되었기 때문에 true의 결과를 얻게 된 것이다.

### 출처

> 1. INSIDE JAVASCRIPT (한빛미디어, 송형주,고현준 지음)

> 2. 인프런 ‘Javascipt 핵심 개념 알아보기 - JS Flow’

Written by@[Ykss]

고이게 두지 않고 흘려보내는 개발자가 되자.

GitHub Instagram LinkedIn