본문 바로가기
프론트엔드/자바스크립트

자바스크립트 객체

by iks15174 2021. 6. 14.

객체란?

자바스크립트는 객체(Object)기반의 프로그래밍 언어이며, 원시 값을 제외한 나머지 값은 모두 객체이다. 자바스크립트의 원시 값은 string, number, bigint, Boolean, undefined, symbol 6가지가 존재한다. 객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키(key)와 값(value)으로 구성된다. 프로퍼티의 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드라 부른다.

var person = {
    name : 'JIHO',
    age : 24,
    country : 'KOREA',
    getName(){
        return this.name;
    },
    getAge(){
        return this.age;
    },
    getCountry(){
        return this.country;
    }
}

 

위의 예시는 person이라는 객체를 생성한 것이다. 자바스크립트에서는 { } 안에 객체의 프로퍼티와 메서드를 정의하여 객체를 생성할 수 있다. 위와 같은 방법은 객체 리터럴을 사용한 방법이라고 한다. 그 외의 객체를 생성하는 방법에는 Object 생성자 함수, 생성자 함수, Object create 메서드가 있다. person 객체에 name, age, country라는 프로퍼티를 정의하였고 getName(), getAge(), getCountry()라는 메서드를 정의하였다.

 

console.log(person.name); //JIHO

console.log(person['name']); //JIHO

console.log(person.getName()); //JIHO

console.log(person['getName']()); //JIHO

이번에는 생성된 객체의 프로퍼티와 메서드에 접근하는 방법에 대해 알아 보겠다.

먼저 프로퍼티에 접근하는 방법이다. 객체.프로퍼티을 통해 프로퍼티에 접근하는 마침표 표기법과 객체['프로퍼티']을 통해 접근하는 대괄호 표기법이 있다. 대괄호 표기법을 사용하는 경우 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야 한다. 대괄호 표기법에서 대괄호 안의 따옴표로 감싸지 않은 이름을 프로퍼티 키로 사용하면 자바스크립트 엔진은 식별자(변수)로 해석한다. 만약 위의 예시에서 person[name]으로 접근하려 했다면 자바스크립트 엔진은 name이라는 식별자를 찾고 그 식별자에 할당된 값을 키로 갖는 프로퍼티에 접근할 것이다. 이번 예시에서는 name이라는 식별자를 정의하지 않았기 때문에ReferenceError: name is not defined

라는 에러가 발생한다.

메서드도 결국은 프로퍼티이기 때문에(value가 함수인 프로퍼티를 메서드라 한다.) 접근 방법은 똑같다.

 

그렇다면 메서드 안에 사용된 this는 무엇일까?

var person = {
    name : 'JIHO',
    age : 24,
    country : 'KOREA',
    getName(){
        return this.name;
    },
    getAge(){
        return this.age;
    },
    getCountry(){
        return this.country;
    },
    whatIsThis(){
        return this;
    }
}

console.log(person.whatIsThis());
/*
{
  name: 'JIHO',
  age: 24,
  country: 'KOREA',
  getName: [Function: getName],
  getAge: [Function: getAge],
  getCountry: [Function: getCountry],
  whatIsThis: [Function: whatIsThis]
}
*/

위의 예시는 person 객체에 whatIsThis() 라는 메서드를 추가한 것이다. 이 메서드는 this를 리턴하고 그것을 console.log를 통해 출력한 결과이다. 결과를 살펴보면 this는 person 객체를 가리키는 것을 알 수 있다. 메서드 내부의 this는 메서드를 호출한 객체, 즉 메서드를 호출할 때 메서드 이름 앞의 마침표(.) 연산자 앞에 기술한 객체를 의미한다. 위의 예시에서는 person.whatIsThis() 에서 마침표 앞의 객체가 person이기 때문에 whatIsThis 메서드 내부의 this는 person 객체를 의미한다.

 

'프론트엔드 > 자바스크립트' 카테고리의 다른 글

함수의 scope  (0) 2021.06.21
함수2  (0) 2021.06.17
함수1  (0) 2021.06.16