Hi

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

WEB(웹)

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

SharingWorld 2018. 6. 20. 13:48

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

기본 타입을 제외한 모든 값은 객체다.

배열, 함수, 정규표현식 모두 결국 자바스크립트 객체로 표현

자바스크립트에서 객체는 단순히 '이름(key):값(value)' 형태의 프로퍼티들을 저장하는 컨테이너, 해시라는 자료구조와 상당히 유사.

참조타입인 객체는 여러개의 프로퍼티드릉ㄹ 포함. 객체의 프로퍼티는 기본 타입의 값을 포함하거나, 다른 객체를 가리킬 수도 있다.

프로퍼티를 메소드라 부른다.

  1. 객체 생성 기존 객체지향 언어에서의 객체 개념과는 약간 다르다. 클래스라는 개념이 없고, 별도의 생성방식.
  • Object() 생성자 함수 이용 내장 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' }
     
  • 생성자 함수 이용

객체 프로퍼티 읽기/쓰기/갱신

객체의 프로퍼티에 접근 2가지 방법

  • 대괄호 [] 표기법
  • 마침표 . 표기법
// 객체 리터럴 방식을 통한 foo 객체 생성
var foo = {
	name : 'foo',
	major : 'computer science'
};

// 객체 프로퍼티 읽기
console.log(foo.name);	// foo
console.log(foo['name']);	// foo
console.log(foo.nickname);	// undefined

// 객체 프로퍼티 갱신
foo.major = 'electronics engineering';
console.log(foo.major);	// electronics engineering
console.log(foo['major']);	// electronics engineering

// 객체 프로퍼티 동적 생성
foo.age = 30;
console.log(foo.age);	// 30

// 대괄호 표기법만을 사용해야 할 경우
foo['full-name'] = 'foo bar';
console.log(foo['full-name]); // foo bar
console.log(foo.full-name); // NaN
console.log(foo.full);	// undefined
console.log(name);	//undefined

NaN (Not a Number) : 수치 연산을 해서 정상적인 값을 얻지 못할 때 출력 되는 값

for in 문과 객체 프로퍼티 출력

객체에 포함된 모든 프로퍼티에 대해 루프를 수행할 수 있다.

// 객체 리터럴을 통한 foo 객체 생성
var foo = {
	name: 'foo';
	age: 30;
	major: 'computer science'
};

// for in 문을 이용한 객체 프로퍼티 출력
var prop;
for (prop in foo) {
	console.log(prop, foo[prop]);
}

출력 결과

name foo
age 30
major 'computer science'

객체 프로퍼티 삭제

delete 연산자를 이용해 즉시 삭제 - 객체의 프로퍼티를 삭제할 뿐, 객체 자체를 삭제하지는 못한다.

// 객체 리터럴을 통한 foo 객체 생성
var foo = {
	name: 'foo';
	nickname: 'babo'
};

console.log(foo.nickname); // babo
delete foo.nickname; // nickname 프로퍼티 삭제
console.log(foo.nickname); // undefined

delete foo; // foo 객체 삭제 시도. (그러나 안됨)
console.log(foo.name);	// foo


'WEB(웹)' 카테고리의 다른 글

(javascript) 프로토타입  (0) 2018.06.20
(javascript) 참조 타입의 특성  (0) 2018.06.20
(javascript) 기본 타입  (0) 2018.06.20
(jquery) 속성값 가져오기  (0) 2018.06.19
jquery 선택자에 css 스타일 주기  (0) 2018.06.19