3day - 데이터 타입과 연산자(2)

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

자바스크립트는 기본 타입(숫자, 문자열, 불린값, null, undefined)을 제외한 모든 값은 객체라고 한다.

그러니 전 시간에 배열, 함수, 정규표현식 등도 모두 객체에 포함된다.

객체는 단순히 '이름(key) : 값(value)' 형태의 프로퍼티들을 저장하는 

컨테이너,폴더 라고 생각하면 된다. 

기본 타입은 하나의 값만을 가지는데 비해 참조 타입인 객체는 여러 개의 프로퍼티들을 포함할 수 있다. 객체의 프로퍼티는 기본 타입의 값을 포함하거나 다른 객체를 가리킬 수 있다.

프로퍼티의 성질의 따라 객체의 프로퍼티는 함수로 포함할 수 있으며 이러한 프로퍼티를 메서드라고 한다.

2-2-1)객체 생성

JAVA, C++은 기존 객체 지향 언어에서의 객체 개념과 자바스크립트의 객체 개념의 생성 방법이나 상속방법에 대해서는 약간 다르다.

JAVA에서는 클래스를 정의하고 클래스의 인스턴스를 생성하는 과정에서 객체가 만들어지는 반면

자바스크립트는 클래스라는 개념이 없고 객체 리터럴이나 생성자 함수 등의 별도의 생성 방식이 있다.

자바스크립트는 객체를 생성하는 방법 3가지가 있다.

1.기본제공 Object(); 객체 생성자 함수를 이용하는 방법

2.객체 리터럴을 이용하는 방법

3.생성자 함수를 이용하는 방법

1.Object() 생성자 함수 이용

객체를 생성할 때, 내장 Object() 생성자 함수를 제공한다.

var foo = new Object();
 
foo.name = 'foo';
foo.age = 30;
foo.gender = 'male';
 
console.log(typeof foo); // 출력값 Object
console.log(foo) // 출력값 Object {name: "foo", age: 30, gender: "male"}

Object(); 생성자를 함수를 이용해서 foo라는 빈객체를 만들고 name, age, gender 프로퍼티를 추가하고 typeof와 foo 값을 출력해 보았다.

2.객체 리터럴 방식 이용

다른 책을 보면서 공부도 하고있지만 처음에 이 리터럴 이라는 용어가 무척 생소했다.

근데 이 책에서는 표기법이라고 생각하면 된다고 나와 있어서 그나마 이해에 도움이 되었다.

객체 리터럴 == 객체를 생성하는 표기법

객체 리터럴은 자바스크립트의 강력한 문법이다.

중괄호( { } )를 이용해서 생성하고 중괄호 안에 아무것도 적지 않으면 빈 객체가 생성된다.

"프로퍼티 이름":"프로퍼티 값" 형태로 표기하면 해당 프로퍼티가 추가된 객체를 생성 한다.

프로퍼티 이름은 문자열이나 숫자가 올수 있다.

프로퍼티 값으로는 자바스크립트의 값을 나타내는 어떠한 표현식도 올수 있고 이 값이 함수일 경우 이걸 메서드라고 한다.

var foo = {
    name : 'foo',
    age : 30,
    gender : 'male'
};
 
console.log(typeof foo); // 출력값 Object
console.log(foo) // 출력값 Object [ name : 'foo', age : 30, gender : 'male' ]

3.생상자 함수 이용

자바스크립트는 함수를 통해서 객체를 생성할 수 있고 이 객체를 생성하는 함수를 생성자 함수라고 부른다. 이건 4장에서 살펴본단다.

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

객체는 새로운 값을 가진 프로퍼티를 생성하고 이 생성된 프로퍼티에 접근해서 해당 값을 읽거나 또는 원하는 값으로 값을 갱신할 수 있다.

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

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

2. 마침표 ( . ) 표기법

var foo = {
    name : 'foo',
    major : 'computer science'
}
 
 
//읽기(1)
console.log(foo.name);  //출력값 foo
console.log(foo['name']);  //출력값 foo
console.log(foo.nickname);  //출력값 undefined
 
//갱신(2)
foo.major = 'electronics engineering'
console.log(foo.major);  //출력값 electronics engineering
console.log(foo['major']) //출력값 electronics engineering
 
//객체 프로퍼티 동적 생성(3)
foo.age = 30;
console.log(foo.age); //출력값 30
 
//대괄호 표기법만을 사용해야 할 경우(4)
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) 값

NaN은 수치 연산을 해서 정삭적인 값을 얻지 못할 떄 출력되는 값이다 1 - 'hello'라는 연산의 결과는 NaN이다.

2-2-3)for in 문과 객체 프로퍼티 출력

for in 문을 사용하면 객체에 포함된 모든 프로퍼티에 대해 루프를 수행할 수 있다.

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
marjor 'computer science'

예제를 보면 for in 문이 수행되면 prop 변수에 foo 객체의 프로퍼티가 하나씩 할당된다.

console.log(prop(name, age, major), foo[prop('foo', 30, 'computer science')]);

2-2-4)객체 프로퍼티 삭제

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

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

다음에는 참조타입의 특성을 알아보자.