자바스크립트 객체 & 프로퍼티 Objects, Properties

자바스크립트에서 객체를 선언할 때는 const 키워드를 사용합니다. 이렇게 객체에는 많은 정보를 담고 있는 데, 키와 밸류 값으로 이루어진 딕셔너리 형태입니다.

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

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

자바스크립트 프로퍼티란, 객체 안에 선언된 키와 밸류로 이루어진 한 쌍을 의미합니다.

위의 person 객체를 예시로 한다면, 프로퍼티(속성)와 프로퍼티 값(속성 값)은 다음과 같습니다.

프로퍼티(속성)	프로퍼티 값(속성 값)
firstName	John
lastName	Doe
age	50
eyeColor	blue

반응형

그렇다면, 객체 속성에는 어떻게 접근할 수 있을까요?

객체명.프로퍼티명 또는 객체명["프로퍼티명"] 으로 접근이 가능합니다.

person.lastName;
person["lastName"];

한 가지 더 중요한 부분은 객체 함수입니다. 객체 함수란 객체 안에 포함된 함수를 가리킵니다. 메소드(함수)는 객체 안에서 수행되는 일종의 동작과 같습니다. 아래와 같이, 객체 프로퍼티의 값으로 메소드가 올 수 있습니다.

프로퍼티(속성)	프로퍼티 값(속성 값)
fullName	function() {   return this.firstName + " " + this.lastName; }

객체가 선언되고, 메소드를 포함할 때 메소드 안에서 필요한 프로퍼티에 this 키워드를 사용해서 접근할 수 있습니다. this의 의미는 말 그대로 person 객체를 가리킵니다. 아래의 예문과 같이, 객체 안에는 여러 프로퍼티가 있는데, 이 프로퍼티에 접근하기 위해, fullName 프로퍼티의 메소드에서 this 키워드를 사용하였습니다.

const person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

프로퍼티가 메소드를 지닌 경우, 이 메소드에 어떻게 접근할 수 있을까요?

이는 매우 간단합니다. 객체명.메소드명 으로 접근이 가능합니다.

 

아래의 예문과 같이, person 객체가 선언되었다면, 바로 콤마 뒤에 메소드명을 적어서 해당 메소드에 접근할 수 있습니다. 이때, 괄호 및 안의 인자값을 빼먹지 않도록 주의하시기 바랍니다!

name = person.fullName();
name = person.fullName; //메소드의 리턴값이 아닌 메소드 자체를 할당.

자바스크립트에서 새로운 객체를 선언할 때는 new 키워드를 사용합니다. 이때, 문자열, 숫자, 논리값을 리턴하는 Boolean은 new 키워드로 사용해 객체로 선언하지 말아야 합니다. 이는 프로세스 속도를 저하시키고, 코드를 복잡하게 만들기 때문입니다.

const Person = new Person();

//피해주세요!
x = new String();        
y = new Number();        
z = new Boolean();

추가적으로 생성자 프로퍼티(constructor)는 모든 자바스크립트 변수에 대한 생성자 함수를 반환합니다. 생성자 프로퍼티를 확인해서 해당 객체가 배열인지 또는 배열 함수인지 알 수 있습니다.

1. 생성자 프로퍼티의 리턴값
"John".constructor                // Returns function String()  {}
(3.14).constructor                // Returns function Number()  {}
false.constructor                 // Returns function Boolean() {}
[1,2,3,4].constructor             // Returns function Array()   {}
{name:'John',age:34}.constructor  // Returns function Object()  {}
new Date().constructor            // Returns function Date()    {}
function () {}.constructor        // Returns function Function(){}

2. 생성자 프로퍼티로 배열인지 확인
function isArray(myArray) {
  return myArray.constructor.toString().indexOf("Array") > -1;
}

3. 생성자 프로퍼티로 배열 함수인지 확인
function isArray(myArray) {
  return myArray.constructor === Array;
}