js 스코프 및 화살표 함수

스코프(Scope)

 

스코프란 변수와 함수의 생명 주기와 접근 가능성을 정의하는 규칙입니다. 
JavaScript에는 여러 종류의 스코프가 있습니다

 

 

 

 

전역 스코프 (Global Scope)

 

let globalVar = "나는 전역 변수입니다!";

function showGlobalVar() {
    console.log(globalVar); // "나는 전역 변수입니다!" 출력
}

showGlobalVar();

 

전역 스코프는 코드의 어디에서든 접근할 수 있는 범위입니다. 

전역 변수는 전역 스코프에 속합니다.

 

 

 

 함수 스코프 (Function Scope)

 

 

function myFunction() {
    let localVar = "나는 함수 내부 변수입니다!";
    console.log(localVar); // "나는 함수 내부 변수입니다!" 출력
}

myFunction();
console.log(localVar); // ReferenceError: localVar is not defined

 

 

함수 스코프는 함수 내에서만 유효한 범위입니다. 

함수 내부에서 선언된 변수는 함수 외부에서 접근할 수 없습니다.

 

 

 

블록 스코프 (Block Scope)

 

if (true) {
    let blockVar = "나는 블록 변수입니다!";
    console.log(blockVar); // "나는 블록 변수입니다!" 출력
}

console.log(blockVar); // ReferenceError: blockVar is not defined

 

ES6에서 도입된 블록 스코프는 {} 중괄호로 묶인 코드 블록 내에서만 유효한 범위입니다. 

let과 const를 사용하여 선언된 변수는 블록 스코프를 가집니다.

 

 

 

화살표 함수 (Arrow Function)

 

const 함수이름 = (매개변수1, 매개변수2) => {
    // 실행할 코드
    return 반환값; // 선택 사항
};

const add = (a, b) => a + b; // 단일 표현식인 경우 중괄호와 return을 생략할 수 있습니다.
console.log(add(2, 3)); // 5 출력

 

화살표 함수는 ES6에서 도입된 함수 표현식의 간결한 문법입니다.

 

this 바인딩

 

function Person() {
    this.age = 0;

    setInterval(function() {
        this.age++; // 여기서 this는 전역 객체를 가리킵니다.
        console.log(this.age);
    }, 1000);
}

const p = new Person(); // NaN 출력

 

화살표 함수는 일반 함수와 달리 자신의 this를 가지지 않습니다. 

대신, 화살표 함수는 상위 스코프의 this를 참조합니다. 이는 특히 콜백 함수에서 유용합니다.

 

 

일반 함수

 

unction Person() {
    this.age = 0;

    setInterval(function() {
        this.age++; // 여기서 this는 전역 객체를 가리킵니다.
        console.log(this.age);
    }, 1000);
}

const p = new Person(); // NaN 출력

 

 

화살표 함수

 

function Person() {
    this.age = 0;

    setInterval(() => {
        this.age++; // 여기서 this는 Person 객체를 가리킵니다.
        console.log(this.age);
    }, 1000);
}

const p = new Person(); // 1, 2, 3... 출력

 

 

생성자 함수로 사용 불가: 화살표 함수는 new 키워드로 호출할 수 없습니다.
arguments 객체 없음: 화살표 함수는 arguments 객체를 가지지 않습니다. 

대신, 나머지 매개변수(...args)를 사용할 수 있습니다.