Scope
: 변수와 함수가 유효한 범위, JS에서는 주로 함수 스코프와 블록 스코프가 사용된다!
함수 스코프
함수 내에서 선언된 변수는 함수 내에서만 유효하다
function foo() {
var x = 'local';
console.log(x); // x
}
foo();
console.log(x); // 유효한 x가 없음! reference error
if(true) {
var secret = '12345';
}
console.log(secret); // 12345 if문은 함수가 아니기 때문에 { } 영향 X
블록 스코프
{ } 로 감싸진 블록 내에서만 유효하다! let, const는 블록 스코프를 지원한다.
{
let y = 'block scoped';
console.log(y); // block scoped
}
console.log(y); // reference error
스코프 체인
변수를 찾을 때 현재 스코프에서 먼저 찾고, 없으면 상위 스코프로 이동하여 변수를 찾는 방식
클래스
constructor
클래스 인스턴스를 초기화하기 위한 특수 메소드
method
클래스 내부에 정의된 함수
instance method
인스턴스를 통해 호출되는 메소드
static method
클래스 자체에서 호출되는 메소드, static 키워드 사용
상속
다른 클래스를 상속받아 새로운 클래스를 만들 수 있다. 이렇게 생성된 자식 클래스는 부모 클래스로부터 속성과 메소드를 물려받을 수 있다.
extends 키워드 사용
this 바인딩 규칙
기본 바인딩
독립함수 호출에서 this는 전역 객체를 가리킨다.
엄격 모드에서는 undefined
브라우저 환경에서 setTimeout 콜백의 this
setTimeout의 콜백함수는 this가 window를 가리킨다. (브라우저 환경)
setTimeout의 메서드로 호출되거나, 같은 컨텍스트에서 실행되는 것이 아니라 독립적으로 호출되기 때문에 기본 바인딩이되는 것이다!
암묵적 바인딩
객체의 메소드 호출에서 this는 메소드를 호출한 객체를 가리킨다!
명시적 바인딩
필요에따라 call, apply, bind로 this를 명시할 수 있다.
// call
function greet() {
console.log(`Hello, my name is ${this.name}`);
}
const user = {
name: 'Bob',
};
greet.call(user); // Hello, my name is Bob
// apply
function greet(greeting, punctuation) {
console.log(`${greeting}, my name is ${this.name}${punctuation}`);
}
const user = {
name: 'Alice'
};
greet.apply(user, ['Hi', '!']); // Hi, my name is Alice!
// bind
function greet() {
console.log(`Hello, my name is ${this.name}`);
}
const user = {
name: 'Charlie'
};
const boundGreet = greet.bind(user);
boundGreet(); // Hello, my name is Charlie
new binding
new 키워드로 생성자 함수를 호출할 때, 생성자 함수의 내부의 this는 새로 생성되는 객체를 가리킨다.
function User(name) {
this.name = name;
}
const user1 = new User('Charlie');
console.log(user1.name);
'JavaScript' 카테고리의 다른 글
[JS] Destructuring, Spread Operator, Rest Operator (0) | 2024.08.08 |
---|---|
[JS] 자바스크립트 실행 컨텍스트 (0) | 2024.08.02 |
[JS] 클래스 상속 / 클로저 (0) | 2024.07.29 |
[JS] 참조타입의 변형을 막는 방법 (freeze, seal) (0) | 2024.07.25 |
[JS] 배열이 조건을 만족하는지 확인하기 (every, some) (0) | 2024.07.25 |