[TIL] 자바스크립트 공부 4일차

공부 목차

메서드와 this

매서드는 객체에 저장된 정보를 접근해야한다.
그 때 사용할 수 있는게 this라는 것인데,
this는 현재 객체를 나타내며 객체에 접근을 도와줄 수 있다.

let user = {
  name: "John",
  age: 30,

  sayHi() {
    // 'this'는 '현재 객체'를 나타냅니다.
    alert(this.name);
  }

};

user.sayHi(); // John

이런 식으로 this를 이용하면 sayHi가 실행되는 동안엔
this는 user를 나타내는 것이다.

this는 Javascript에서만 존재하는 것은 아니지만,
Javascript의 this는 동작 방식이 다릅니다.
자바스크립트에선 아무 함수에나 this를 적어도 에러가 나지 않고
정상적으로 실행되는데, 이는 this는 런타임에 결정되기 때문입니다.
즉, 메서드의 정의에 상관없이 점 앞의 객체에 따라 자유롭게 결정됩니다.
실수만 하지 않는다면 굉장히 편한 문법이라고 합니다.

new연산자, 생성자 함수

객체를 리터럴을 사용하면 쉽게 만들 수 있지만,
유사 객체를 여러개 만들 땐 불편할 수 있다.
그럴 땐 new연사자를 생성자 함수와 같이 사용하면 쉽게 만들 수 있다.

function User(name) {
  this.name = name;
  this.isAdmin = false;
}

let user = new User("Jack");

alert(user.name); // Jack
alert(user.isAdmin); // false

위 그림처럼 만들 시, this를 이용하면 쉽게만들 수 있습니다.
그리고 생성자 함수를 만들 땐 다른 함수들과 차별점을 두기 위해서
맨 앞즐자는 대문자로 써야합니다.

심볼형

객체 프로퍼티 기는 문자형과 심볼형만 허용하는데,
심볼형을 사용할 때의 이점에 대해 적어보도록 하겠습니다.

심볼은 "유일한 식별자"를 만들 기 위해 사용되고,
사용 방법은

let id = Symbol() 

으로 사용할 수 있습니다. 이 때 id가 새로운 심볼이 되는 것입니다.

숨김프로퍼티

심볼형을 응용한다면 사용할 수 있는 건데
외부 코드에선 접근이 불가능하고 값도 덮어쓸 수 없는 것입니다.

let user = { // 서드파티 코드에서 가져온 객체
  name: "John"
};

let id = Symbol("id");

user[id] = 1;

alert( user[id] ); // 심볼을 키로 사용해 데이터에 접근할 수 있습니다.

위 코드처럼 서드파티 코드(제 3자로써 중간 다리 역할이라고 이해)에서 가져온 객체로 새로운 프로퍼티 값을 추가할 수 없습니다.
하지만 user에 식별자를 부여하여 데이터에 접근할 수 있는 것입니다.

좋은 웹페이지 즐겨찾기