본문 바로가기

WEB/JavaScript

JS의 데이터 타입 2 (객체)

자바스크립트의 참조 타입(객체 타입)

자바스크립트에서 기본 타입을 제외한 모든 값은 객체다. 따라서 자바스크립트에서는 함수(값으로 취급), 정규표현식, 배열 등도 객체로 표현된다.

자바스크립트의 객체는 '키(Key): 값(Value)' 형태로 된 프로퍼티들의 집합으로 볼 수 있다. 객체에서 프로퍼티들은 추가, 수정, 삭제될 수 있다. 프로퍼티들은 키(Key)를 통해 구분되고, 프로퍼티의 키 값은 문자열(String)이나 심볼(Symbol)로만 구성된다. 그리고 값(Property Values)은 기본타입과 참조타입 어떤 타입의 값이라도 될 수 있다.

객체 생성

자바스크립트에서 객체를 생성하는 방법은 크게 세 가지가 있다.

  1. 자바스크립트 내장 Object() 객체 생성자 함수 이용하기
  2. 객체 리터럴 이용하기
  3. 생성자 함수 이용하기

Object() 생성자 함수 이용하기

자바스크립트 표준 내장 객체에는 Object() 객체 생성자가 있다. new 키워드와 함께 객체를 생성할 수 있다.

객체 리터럴 방식 이용하기

리터럴이란 데이터를 표현하는 방식이라고 생각하면 된다. 따라서 객체 리터럴은 객체를 표현하는 방식을 말한다.

객체 리터럴은 중괄호({})를 통해서 객체를 생성한다. 중괄호 안에 Key: Value 형태로 객체의 프로퍼티를 표현할 수 있다. 만약 적지 않으면 빈 객체가 생성된다.

생성자 함수 이용하기

자바스크립트에서는 함수를 통해서 객체를 만들 수 있는데, 이를 생성자 함수라고 한다.

함수에 관해서는 나중 포스팅에서 자세하게 다룰 예정이다.

객체 프로퍼티 접근법

객체 프로퍼티에 접근할 때 사용하는 두 가지 방법이 있다.

  1. 대괄호 표기법([])
  2. 마침표 표기법(.)

대괄호 표기법을 사용할 때에는 객체['프로퍼티 키'] 형식으로 프로퍼티에 접근한다. 마침표 표기법을 사용할 때에는 객체.프로퍼티 키 형식으로 프로퍼티에 접근한다.

프로퍼티 키에 연산자(-,+,/,*,= 등)가 들어가 있으면 마침표 표기법이 아닌 대괄호 표기법을 사용해서 프로퍼티에 접근해야 한다.

그리고 대괄호 표기법을 사용할 때 대괄호 안에 ['name'] 처럼 문자열이 아니라 [name] 이렇게 프로퍼티 키를 넣는다면 자바스크립트에서는 대괄호 안의 키를 toString() 메서드를 사용해서 문자열로 변환한다.

위의 예를 보면 객체 a의 b 프로퍼티에 접근하려고 했지만 아직 할당되지 않은 변수 b가 호출되어 toString() 메서드를 통해서 문자열 'undefined'로 변환되었고, a[b]는 a['undefined']로 변환되었다. 또 c 프로퍼티를 호출하려 했지만 문자열 'j'로 할당된 변수 c가 호출되고 toString() 메서드를 통해서 변수 c는 문자열 'j'로 변환되었고 a[c]는 a['j']로 변환되었다. 그래서 출력값은 각각 k와 j가 된다.

객체 프로퍼티 삭제

자바스크립트에서는 객체의 프로퍼티를 delete 연산자를 통해서 삭제할 수 있다. 객체 프로퍼티를 삭제할 때에는 대괄호 표기법과 마침표 표기법 모두 사용할 수 있다.

'WEB > JavaScript' 카테고리의 다른 글

JS의 데이터 타입 4 (함수)  (0) 2018.05.06
JS의 데이터 타입 3 (프로토타입)  (0) 2018.05.02
JS의 데이터 타입 1 (기본 타입)  (0) 2018.04.22
변수의 유효범위(스코프 scope)  (0) 2018.02.17
동기와 비동기  (0) 2017.11.29