자바스크립트 객체(Object)

객체(Object)

자바스크립트는 객체지향의 개념을 지원하는 객체지향 프로그래밍 언어입니다.

그래서 자바스크립트에는 객체(Object)라는 개념이 존재합니다.

객체는 우리가 보고 인지할 수 있는 하나의 대상을 말하는 것으로서 이 객체는 속성과 동작을 가집니다.

 

객체도 변수 입니다. 하지만 객체는 일반 변수와 다르게 많은 값을 포함할 수 있습니다.

var car = {type:"Fiat", model:"500", color:"white"};

위의 코드를 보면 car라는 변수에 type, model, color라는 속성에 각각 Fiat, 500, white 라는 속성값을 할당한 것을 볼 수 있습니다. 그리고 각 값들을 "속성 이름 : 속성값"의 형태로 사용되고 있는 것을 확인할 수 있습니다.

 

 

객체 정의

자바스크립트에서 객체를 정의할 때에는 다음과 같은 구조로 정의합니다.

var person = {firstName:"길동", lastName:"홍", age:30, eyeColor:"black"};

여기서 공백이나 줄바꿈은 가독성을 좋게하는 방향으로 마음대로 설정하면 됩니다.

즉, 위의 코드와 아래의 코드는 서로 같은 내용입니다.

var person = {
  firstName: "길동",
  lastName: "홍",
  age: 30,
  eyeColor: "black"
};

 

 

객체 속성(Properties)

위의 예시에서 볼 수 있듯이 자바스크립트의 객체에서 "이름 : 값"의 쌍을 속성이라고 부릅니다.

var person = {
  firstName: "길동",
  lastName: "홍",
  age: 30,
  eyeColor: "black"
};

즉, 위의 코드는 다음과 같이 해석할 수 있습니다.

속성	속성값
firstName	길동
lastName	홍
age	30
eyeColor	black

 

객체의 속성에 접근

객체의 속성에 접근하기 위해서는 다음 2가지 방법을 사용할 수 있습니다.

var x = objectName.propertyName;

var x = objectName["propertyName"];

 

 

객체의 메소드(method)

객체는 속성뿐만 아니라 행위, 동작을 기술하는 method 또한 가질 수 있습니다. 즉, 객체가 메소드를 가진다면

그 메소드는 해당 객체가 수행할 수 있는 행위, 동작의 개념이라고 이해하면 됩니다.

 

객체의 메소드를 정의하기 위해서는 다음과 같이 함수의 이름을 속성, 함수의 정의를 속성값으로 저장합니다.

var person = {
  firstName: "길동",
  lastName : "홍",
  id       : 1234,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

위의 코드를 보면 메소드 정의부에 this 라는 키워드가 사용된 것을 볼 수 있는데 이 this 키워드는 해당 메소드가 속한 객체의

속성값임을 나타냅니다. this.firstName의 의미는 "내가 속한 객체에서 firstName이라는 속성의 속성값" 임을 의미합니다.

위의 예시에서는 this 가 큰 의미를 가지지 않지만 나중에 이 this는 아주 중요하게 활용되니 잘 기억하기 바랍니다.

 

 

객체의 메소드에 접근

객체의 메소드에 접근하기 위해서는 다음과 같이 구문을 사용합니다.

objectName.methodName()

함수와 동일하게 ( ) 연산자 없이 메소드 이름만으로 접근하면 해당 메소드의 정의가 반환됩니다.

 

 

string, number, boolean을 객체로 선언하지 말 것!

다음과 같이 키워드 new를 사용해서 변수를 선언하면 변수가 객체로 선언됩니다.

var x = new String();
var y = new Number();
var z = new Boolean();

하지만 string, number, boolean을 객체로 선언하는 경우 코드가 복잡해지고 실행속도가 느려지기 때문에 권장되지 않습니다.