'참조 타입'에 해당하는 글 1건

앞선 내용에서 자바스크립트의 기본 데이터 타입들을 정리했었는데 이번에는 참조 타입에 대해서 정리해보자.

 

참초 타입(객체 타입)이란?

- 자바스크립트에서 숫자, 문자열, 불린값, undefined, null 같은 기본 타입을 제외한 모든 값은 객체.

  따라서 배열, 함수, 정규표현식 등도 모두 자바스크립트에서는 객체로 표현.

- 자바스크립트에서의 객체는 단순히 이름(key):값(value) 형태의 프로퍼트들을 저장하는 컨테이너.

- 기본 타입의 경우 하나의 값만을 가지는데 비해, 참조 타입인 객체는 여러 개의 프로퍼티들을 포함할 수 있음.

- 기본 타입의 값을 포함하거나, 다른 객체를 가리킬 수도 있음.

 

객체 생성 방법

- Object() 생성자 함수 이용

// Object()를 이용해서 foo 빈 객체 생성
var foo = new Object();

// foo 객체 프로퍼티 생성
foo.name = 'foo';
foo.age = 30;
foo.gender = 'male';

console.log(typeof foo); // (출력값) object 
console.log(foo); // (출력값) { name: 'foo', age: 30, gender: 'male' }

- 객체 리터럴 방식 이용

// 객체 리터럴 방식으로 foo 객체 생성 
var foo = {
     name : 'foo',
     age : 30,
     gender : 'male'
};
console.log(typeof foo); // (출력값) object 
console.log(foo); // (출력값) { name: 'foo', age: 30, gender: 'male' }

- 생성자 함수 이용

 

객체의 프로퍼티에 접근하는 방법

- 대괄호([]) 표기법

var foo = {
     name : 'foo',
     nick-name : 'foo2',
     major : 'computer science'
};

console.log(foo['name']); // (출력값) foo
console.log(foo[name]); // (출력값) undefined
console.log(foo['nick-name']) // (출력값) foo2

대괄호 표기법 사용시 대괄호 안에 프로퍼티 이름을 문자열 형태로 사용해야 함.

만약 프로퍼티 이름을 문자열 형태로 쓰지 않을 경우 undefined로 출력되는 것을 볼 수 있음.

또한 접근하는 프로퍼티가 표현식이나 예약어일 경우 대괄호 표기법만을 이용해서 접근해야 함.

예를 들어서 위에서 볼 수 있는 nick-name이라는 프로퍼티의 경우 마침표 표기법을 쓸 경우 NaN의 값이 출력됨.

 

- 마침표(.) 표기법

var foo = {
     name : 'foo',
     nick-name : 'foo2',
     major : 'computer science'
};

console.log(foo.name); // (출력값) foo
console.log(foo.nick-name) // (출력값) NaN

 

객체 프로퍼티 삭제

자바스크림트에서는 delete 연산자를 이용해 객체의 프로퍼티를 삭제할 수 있음.

delete 연산자는 객체의 프로퍼티를 삭제할 뿐, 객체 자체를 삭제하지는 못함.

var foo = {
     name : 'foo',
     major : 'computer science'
};

console.log(foo.name); // (출력값) foo
delete foo.name;
console.log(foo.name) // (출력값) undefined
delete foo;
console.log(foo.major); // (출력값) 'computer science

 

[출처] 인사이드 자바스크립트

 

· 자브스크립트 데이터 타입1

 

 

'프로그래밍 > Java script' 카테고리의 다른 글

함수도 객체다!  (0) 2019.05.29
함수 생성 방법  (0) 2019.05.29
자바스크립트 데이터 타입1  (0) 2018.08.04
자바스크립트(JavaScript)란?  (0) 2018.07.21

WRITTEN BY
김치치즈스마일
세계정복!

,