프로퍼티(Property) & 메서드(Method)
객체에 대해 다루게 될때 프로퍼티와 메소드에 대한 이해가 없으면 객체를 이해할 수 없습니다. 객체는 케이스를 이루는 말이고, 실제 객체를 완성하는 구성품들은 데이터를 의미하는프로퍼티와 데이터를 참조하고 조작할 수 있는 동작(behavior)을 의미하는메서드입니다.
🔐(key-pair value) : 자바스크립트의 객체는 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합입니다. 프로퍼티의 값으로 자바스크립트에서 사용할 수 있는 모든 값을 사용할 수 있습니다. 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드라 부릅니다.
이렇게 객체의 의미는 데이터와 동작을 하나의 단위로 구조화할 수 있어 유용함에 있습니다.
property
프로퍼티는 프로퍼티 키로 유일하게 식별할 수 있으며 즉, 키는 프로퍼티를 식별하기 위한 식별자(identifier) 입니다. 프로퍼티 키의 명명 규칙과 프로퍼티 값으로 사용할 수 있는 값은 아래와 같습니다.
프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 symbol 값
프로퍼티 값 : 모든 값
❓ 프로퍼티 키에 문자열이나 symbol 값 이외의 값을 지정하면 암묵적으로 타입이 변환되어 문자열이 된답니다. 그렇다면 프로퍼티에 아무런 값도 할당하지 않으면 어떻게 될까요?
let foo= new Object();
foo.name='foo';
console.log(foo.name);
// foo
foo.name=null;
console.log(foo.name);
// null
delete foo.name;
console.log(foo.name);
// undefined자바스크립트에서 값을 할당하지 않고 변수선언만 할경우 자바스크립트 엔진이 강제적으로
undefined를 할당하기 때문에 key-value pair인 프로퍼티에서는syntax error가 생깁니다.
또, 프로퍼티는undefined나null을 할당한다고 삭제되지 않으므로 프로퍼티의 삭제는delete라는 keyword를 사용하여야 합니다.
method
일련의 동작을 실행한다는 점에서 흔히 함수와 헷갈리는 개념입니다. 하지만 메서드와 함수는 엄연히 다르답니다.
메서드를 수행하기 위해서는 객체를 통해서 해당 메서드를 수행하여야 합니다. 즉, 동작을 수행하는 주체는 객체이니, 객체에게 그 동작을 수행하라고 지시해야 합니다.
함수는 함수자체가 그 동작을 정의한 함수객체이기 때문에 자기 자신을 수행하는 것이고요!
let foo={};
foo.a=1;
foo.b=2;
foo.sum=function() {console.log(foo.a+foo.b);};
foo.sum();
// 3자바스크립트에서의 객체 구성
ECMA Script 에서 객체는 크게 3가지로 구분하고 있다.
1. Built-in Object(자바스크립트 내장객체)
Built-in Object 에는 Global, Object, String, Number, Boolean, Date, Array, Math, RegExp, Error 등 많은 내장객체들이 있다. 이들은 자바스크립트 엔진이 구동되는 시점에서 바로 제공되며 자바스크립트코드 어디에서든 사용이 가능하다.
2. Native Object(브라우져 내장 객체)
Native Object 역시 자바스크립트가 구동되는 시점에서 바로 사용이 가능한 객체 들이다. 하지만 이들은 자바스크립트 엔진이 구성하는 기본객체라고 하기 보단 브라우져 즉 자바스크립트 엔진을 구동하는 녀석들에서 빌드되는 객체 들이다. 자바스크립트 프로그램을 작성하면서 사용하는 브라우져객체모델(BOM)과 문서객체모델(DOM)들이 이에 속한다. 이 Native Object역시 내장객체이며 Built-in Object와 동일하게 자바스크립트 구동시점부터 바로 사용가능 하다. 하지만 이들을 굳이 Native Object 라 분류한 이유는 브라우져마다 이 Native Object 를 사용함에 있어서 그 구성을 달리하는 경우가 있기 때문이다.
3. Host Object(사용자 정의 객체)
Host Object 는 말그대로 사용자가 생성한 객체 들이다. constructor 혹은 객체 리터럴을 통해 사용자가 객체를 정의하고 확장시킨 녀석들이기 때문에 Built-in Object 와 Native Object가 구성된 이후에 구성되어 진다.
객체의 생성
자바스크립트에서 객체를 생성하는 방법은 크게 2가지로 나누어 진다. constructor 를 이용하여 생성하는 방식과 객체 리터럴을 이용하는 것이다. 객체리터럴을 이용한 방식은JSON(Java-Script Object Notation)을 이용하여 표현 한다.
/* constructor 를 사용하여 객체를 생성하는 예 */
var foo = new Object(); //
foo.name='foo';
console.log(foo.name);
> foo
/* JSON 방식을 사용하여 객체 리터럴 */
var foo = {
name : 'foo'
};
console.log(foo.name);
> fooJSON 방식을 이용하면 객체리터럴이기에 단일 객체로만 활용 됩니다. 하지만 constructor 를 이용하면 동일한 구성을 가진 객체를 여러개 만들어 낼수 있습니다.
var emptyObject = {};
console.log(typeof emptyObject); // object
var person = {
name: 'Lee',
gender: 'male',
sayHello: function () {
console.log('Hi! My name is ' + this.name);
}
};
console.log(typeof person); // object
console.log(person); // {name: "Lee", gender: "male", sayHello: ƒ}
person.sayHello(); // Hi! My name is Lee