자바스크립트 객체 _1_(feat.자바스크립트를 깨우치다)

자바스크립트 객체에 대한 개념이 부실해서 책을 보는중, 정리하면 좋겠다 싶어서 기본부터 정리해본다.

자바스크립트 객체 만들기

자바스크립트에서는 객체가 왕이라고 한다.

거의 모든 것들이 객체이거나 객체처럼 동작하기 때문.

객체는 속성들의 그릇일 뿐이며 속성은 이름과 값을 가진다는 사실을 기억해야 한다.

이름있는 값을 가진 속성들의 그릇이라는 개념은 자바스크립트에서 여러값을 표현하기 위해 묶음을 만들 때 사용한다.

//kkul(꿀) 객체 만들기..
var kkul = new Object();

//kkul(꿀) 객체를 속성으로 채우기 (점 표기법으로 사용)
kkul.living = true;
kkul.age = 2;
kkul.gender = 'boy';

console.log(kkul);   // 객체를 로그에 출력 {living = true, age = 2, gender='boy'}

kkul 객체는 객체를 만들고 객체에 이름을 주고 객체 속성을 부여해서 자바스크립트 객체로 표현한 하나의 값이다.

여기까지 보면 kkul 객체는 정적인 정보일 뿐이지만, 동작을 수행하도록 메소드(method) 속성을 추가함으로 생명을 준다.

메소드 속성은 어떤 동작을 수행하는 속성이다. 자바스크립트에서 메소드란 Function() 객체를 포함한 속성이며, 이 Function() 객체는 자신을 포함한 객체에 어떤 동작을 수행하도록 만들어진다.

var kkul = new Object();   //Object() 객체 만들기
kkul.living = true;
kkul.gender = 'boy';
kkul.getGender = function() {return kkul.gender;};
console.log(kkul.getGender());     //'boy'가 출력된다.

자바스크립트에서는 kkul 객체(와 같은 객체)를 가리켜 Object() 객체라고 부른다.

Object()생성자 함수를 호출하여 빈 객체를 만들고 이를 사용해 kkul객체를 생성했었다. 생성자 함수는 미리 정해진 객체를 만들어 내는 템플릿으로 이해하면 좋을것 같다. 

Object() 생성자 함수를 이용해서 kkul를 만들었지만, 내장되어 있지 않은 Cat() 생성자 함수를 정의하고, 고양이(kkul) 객체를 만들 수 있다.

// Cat() 객체를 만들기 위해 Cat 생성자 함수를 정의
var Cat = function(living, age, gender) {

  this.living = living;
  this.age = age;
  this.gender = gender;
  this.getGender = function() {return this.gender;};
};

/Cat 객체의 인스턴스를 만들고 kkul 이라는 변수에 저장
var kkul = new Cat(true, 2, 'boy');
console.log(kkul);

여기서 Cat() 생성자는 다른 Cat() 객체를 만들 때도 사용할 수 있는, 생산공장(factory)으로 사용되었다.

생성자 함수의 역할은 같은 값과 동작을 공유하는 개체를 여러개 만드는 것에 있다.

new 키워드를 사용하면 자바스크립트가 생성자 함수 내에 있는 this의 값을 새로 만들어진 객체로 설정함으로써 생성자 함수는 특수한 동작을 수행하게 된다. 특수한 동작을 한 생성자 함수는 기본값(null, undefined, 0, 빈 문자열 등 false는 아니지만 false처럼 사용할 수 있는 값)이 아닌 새로 만든객체 (this)를 반환한다. 생성자 함수가 반환한 새 객체는 객체를 만든 생성자 함수의 인스턴스(instance)라 부른다.

자바스크립트 네이티브 / 내장 객체 생성자

자바스크립트 언어에는 9개의 네이티브(내장) 객체 생성자가 포함되어 있다. 이러한 객체를 사용해 언어를 구성하는데, 여기서 '구성하다(construct)' 라는 말은 이러한 객체들이 자바스크립트 코드에서 객체값을 표현하기 위해 사용되었음은 물론, 자바스크립트의 여러기능도 조화롭게 이루고 있다.

Number()

String()

Boolean()

Object()

Array()

Function()

Date()

RegExp()

Error()

리터럴을 사용한 값 생성하기

위와 같이 new Cat() 같은 방법을 사용하지 않아도 대부분의 네이티브 객체값을 만들 수 있는 '리터럴(literal)'이라는 축약 표현이 있다.

var myNumber = new Number(30);   //객체
var myNumberLiteral = 30;    //원시 숫자값, 객체가 아님
var myString = new String('female');   //객체
var myStringLiteral = 'female';   //원시 문자열값, 객체가 아님
var myBoolean = new Boolean(false);   //객체
var myBooleanLiteral = false;   //원시 불리언값, 객체가 아님

var myObject = new Object();
var myObjectLiteral = {};

var myArray = new Array('foo', 'bar');
var myArrayLiteral = ['foo','bar'];

var myFunction = new Function("x", "y", "return x*y");
var myFunctionLiteral = function(x, y) {return x*y};

보통은 리터럴을 사용하면 new 연산자를 사용한 것과 동일한 효과를 볼 수 있으며 훨씬 더 편리하다.

그러나 30, 'female', false, null. undefined와 같은 값은 더 이상 단순화 할 수 없기 때문에, 원시적(primitive)라고 하며, 이러한 값을 가리켜 원시값이라 한다.

숫자는 숫자이고, 문자열은 문자열이며, 불리언은 true 또는 false일테고 null과 undefined은 단순히 null 과 undefined이라는 뜻이다.

'new' 키워드를 사용하지 않고 원시값을 만들면 객체가 만들어지지 않는다.