All'alba vincerò

At dawn, I will win!

Javascript

JS 혼공 - 가비지 컬레션(GC), 메서드, this

나디아 Nadia 2023. 12. 19. 10:21







 

가비지 컬렉션

: 도달하지 못하는 값은 삭제

 

* 도달 가능한 값

: 접근하거나 사용할 수 있는 값

 

* 루트

: 현재 함수의 지역 변수와 매개변수, 중첩 함수의 체인에 있는 함수에서 사용되는 변수와 매개변수, 전역 변수 등

 

- 루트가 참조하거나 루트에서 참조할 수 있는 값은 도달 가능한 값이 된다.

 

 

 

 


 

 

 

 

 

메서드

: 객체 프로퍼티에 행동할 능력을 부여하는 함수

 

 

사용법

: 객체.메서드명 = 함수표현식 or 선언된 함수;

새로 함수 선언
let user = {
  name: "Nadia"
  age: 23
};

user.sayHi = function() { // 함수 선언 --> 객체 프로퍼티 user.sayHi에 함수 할당
  alert("안녕하세요!");
};

user.sayHi(); // 안녕하세요!

--------------------

이미 정의된 함수 사용
let user = {
  name: "Nadia"
  age: 23
};

function sayHi() { // 함수 선언
  alert("안녕하세요!");
};

user.sayHi = sayHi; // 선언된 함수를 메서드로 등록

user.sayHi(); // 안녕하세요!

 

- 메서드 이름은 동사로 짓는다.

 

 

 


 

 

this

: 메서드 내부에서 this 키워드를 사용하면 객체에 접근할 수 있다.

 

 

사용법

: this.프로퍼티 키

 

- this는 점(.) 앞의 객체를 참조한다.

- this는 모든 함수에 사용할 수 있다.

let user = {
  name: "Nadia"
  age: 23
};

sayHi() {
  alert(this.name);
 }
};

user.sayHi(); // Nadia

 

 

 

- 동일한 함수라도 다른 객체에서 호출했다면, this가 참조하는 값이 달라진다.

let user = {name: "John"};
let admin = {name: "Nadia");

function sayHi() {
  alert(this.name);
}

- 별개의 객체에서 동일한 함수 사용 -
user.f = sayHi;
admin.f = sayHi;

- this는 점(.) 앞의 객체를 참조하기 때문에 this의 값이 달라진다. -
user.f(); // John
admin.f(); // Nadia

- 점(.)과 대괄호[]는 동일하게 동작한다. -
admin["f"](); // Nadia

 

 


this가 없는 화살표 함수

: 화살표 함수는 고유한 this를 가지지 않기 때문에, 평범한 외부 함수에서 this 값을 가지고 온다.

 

- 별도의 this가 만들어지는 건 원하지 않고, 외부 컨텍스트에 있는 this를 이용하고 싶은 경우 화살표 함수가 유용하다.

let user = {
  firstName: "보라",
  sayHi() { 
    let arrow = () => alert(this.firstName); // 여기서 this는 user.sayHi()의 this
    arrow();
  }
};

user.sayHi(); // 보라

- 함수 arrow()의 this는 외부 함수 user.sayHi()의 this가 된다.