#JavaScript Grammar_스코프 및 화살표 함수

# 스코프(Scope)란? 

- 프로그래밍에서 변수와 함수의 유효 범위를 나타내는 개념

- 변수가 어디서부터 어디까지 유효한지, 즉 어디에서 변수를 참조할 수 있는지를 결정함. 

- 코드 냐에서 변수와 함수의 가시성과 접근성을 관리하며 변수의 이름이 충돌하지 않도록 도와줌.

 

1) 전역스코프(Global Scope)

프로그램 전체에서 변수와 함수를 접근할 수 있는 범위를 나타냄.

전역 스코프에서 선언된 변수는 프로그램이 실행되는 동안 살아있으며 어디서든 사용할 수 있음. 

let x = 10; // 전역 변수

function printX() {
    console.log(x);
}

console.log(x); // 결과: 10
printX(); // 결과: 10

 

2) 지역스코프(Local Scope)

주로 함수 내에서 사용되며 해당 함수 내에서 변수와 함수를 접근할 수 있는 범위를 나타냄.

함수 내에서 선언된 변수는 해당 함수 내에서만 유효하며 외부에서는 접근할 수 없음. 

function printX() {
    let x = 10; // 지역 변수
    console.log(x);
}

printX(); // 결과: 10

 

3) 블록스코프(Block Scope)

중괄호 `{ }`로 둘러싸인 코드 블록안에 변수를 선언했을 때 해당 변수가 블록 내에서만 유효한 범위를 가짐. 

블록은 중괄호 `{ }`로 둘러쌓인 코드 영역을 의미함. 

주로 조건문 (`if`,`for`, `while` 등)내에서 변수를 선언할 대 사용됨 .

if (true) {
    let x = 10; // 블록 스코프 내에서 선언된 변수
    console.log(x); // 결과: 10
}

console.log(x); // 결과: ReferenceError - x는 더 이상 정의되지 않았습니다.

 

---

 

# 화살표 함수(Arrow Functions)란?

- ECMAScript6(ES6)부터 도입된 함수 선언 방식 중 하나로,함수를 간결하게 정의할 수 있는 문법. 

- 함수를 선언하는 데 사용되며, 주로 익명 함수(anonymous function)나 간단한 함수를 정의할 때 많이 활용함. 

 

#화살표 함수의 주요 특징

1. 간결한 문법: 화살표 함수는 코드를 간결하게 작성할 수 있으며, 특히 한줄로 함수를 정의할 때 유용함.

2. `this`의 동작: 화살표 함수는 자체의 `this`를 가지지 않고, 부모 스코프의 `this`를 상속받음. 이로 인해 함수 내부에서 `this`를 사용할 때 발생하는 일반 함수와 다른 동작을 함. 

3. 매개변수: 화살표 함수는 매개변수가 하나인 경우 괄호를 생략 가능하며 매개변수가 없는 경우 괄호를 사용함.  

 

1) 기본적인 화살표 함수(Basic Aroow Function)

화살표 함수를 사용하여 함수를 선언할 수 있음. 이러한 함수는 간결하게 작성됨.

`return`키워드를 사용하여 값을 반환할 수 있음. 

let add = (x, y) => {
    return x + y;
};
console.log(add(2, 3)); // 결과: 5

 

2) 한줄로 된 화살표 함수(Single-Line Arrow Function)

함수 내부에 `return`문이 한줄로 작성될 경우, 중괄호와 `return` 키워드를 생략할 수 있음. 

let arrowFunc01 = (x, y) => x + y;
console.log(add(2, 3)); // 결과: 5

- but 객체에 여러개가 들어있으면 중괄호를 생략할 수 없음.

let arrowFunc02 = (x, y) => {
    console.log();
    console.log();
    console.log();
    return x + y
};  
//한줄로 사용 불가능

 

3) 매개변수가 하나인 화살표 함수(Arrow Function with Single Parameter)

매개변수가 하나인 경우, 괄호를 생략할 수 있음. 

let arrowFunc03 = (x) => x; //매게변수가 한개일 땐 
let arrowFunc03 = x => x; //이렇게도 사용가능!

let square = x => x * x;
console.log(square(3)); // 9

---

화살표 함수는 주로 간단한 함수에서 사용되며, 다른 함수 내에서 콜백 함수나 이벤트 핸들러로 사용될 때 특히 유용함. 하지만 주의해야 할 점은 화살표 함수는 자체의 this를 가지지 않고, 부모 스코프의 this를 상속받기 때문에 함수 내에서 this를 사용할 때 주의가 필요.