함수 스코프 & 블럭 스코프

스코프

변수가 정의된 범위 또는 컨텍스트를 나타냄.

스코프는 코드에서 변수, 함수, 객체 등을 접근할 수 있는 유효 범위를 결정하며, 변수의 가시성과 생명 주기를 관리함.

1. 전역 스코프 (Global Scope)

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

전역 변수는 모든 함수와 블록에서 접근할 수 있습니다.

하지만 어디에서나 접근하고 수정이 가능하기 때문에 오염되기 쉽다.


javascriptCopy code
var globalVar = 'I am global';

function foo() {
  console.log(globalVar); // 'I am global'
}

foo();
console.log(globalVar); // 'I am global'

2. 함수 스코프 (Function Scope)

함수 스코프는 함수 내부에서 정의된 변수와 함수가 함수 내부에서만 접근할 수 있는 범위.

함수 스코프는 함수가 호출될 때마다 생성됨.


javascriptCopy code
function foo() {
  var functionVar = 'I am local to the function';
  console.log(functionVar); // 'I am local to the function'
}

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

3. 블록 스코프 (Block Scope)

블록 스코프는 코드 블록({}) 내부에서 정의된 변수와 함수가 블록 내부에서만 접근할 수 있는 범위.

let과 const 키워드로 선언된 변수는 블록 스코프를 갖습니다.


javascriptCopy code
if (true) {
  let blockVar = 'I am local to the block';
  console.log(blockVar); // 'I am local to the block'
}

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

스코프 체인 (Scope Chain)

스코프 체인은 변수나 함수가 참조될 때 JavaScript가 이를 찾기 위해 탐색하는 경로.

스코프 체인은 내부 스코프에서 외부 스코프로 거슬러 올라가면서 변수를 찾음.


javascriptCopy code
var globalVar = 'I am global';

function outer() {
  var outerVar = 'I am local to outer function';

  function inner() {
    var innerVar = 'I am local to inner function';
    console.log(globalVar); // 'I am global'
    console.log(outerVar); // 'I am local to outer function'
    console.log(innerVar); // 'I am local to inner function'
  }

  inner();
  console.log(innerVar); // ReferenceError: innerVar is not defined
}

outer();

위 예제에서 inner 함수는 자신의 스코프(innerVar), 부모 스코프(outerVar), 그리고 전역 스코프(globalVar)를 순차적으로 참조할 수 있다.

그러나 부모 함수인 outer 함수는 자식 함수의 스코프(innerVar)를 참조할 수 없음.

클로저 (Closure)

클로저는 함수와 그 함수가 선언될 때의 렉시컬 스코프(Lexical Scope)를 기억하는 특성을 말함.

클로저를 사용하면 외부 함수의 변수에 접근할 수 있다.


javascriptCopy code
function outer() {
  var outerVar = 'I am local to outer function';

  return function inner() {
    console.log(outerVar); // 'I am local to outer function'
  };
}

const innerFunction = outer();
innerFunction(); // 'I am local to outer function'

let 보다 const인 이유

const는 재할당이 되지 않지만 객체의 내부 값을 바꾸거나 배열의 내부 값을 바꾸는 행위는 재할당이 아니기 때문에 충분히 가능하다.

뭐 이거야 상황에 따라 사용하기 때문에 되도록이면 const를 쓰라는 말인듯


const person = {
	name: 'asd',
	age: 22,
}

person.name = 'ddd'; //가능