1. 암시적 스코프?

스코프와 렉시컬 스코프 그에 따른 클로저에 대해서는 앞에서 꽤 알아봤다.
우리가 알고 있는 스코프는 파일 자체에 글로벌 스코프, 함수를 선언하면서 생기는 함수 스코프 등 직관적으로 발생하는 스코프는 익숙하다.
그런데 우리가 생각하지 못한 곳에서도 스코프가 발생하는 경우가 있고 이를 암시적 스코프라고 부른다.

2. 매개변수 스코프

매개변수는 많이 들어봤을거다.
우리가 함수를 선언하면서 원하는 값을 해당 함수에서 처리하고 싶을 때 함수가 받는 값을 말한다.
일반적으로 변수, 함수등을 매개변수로 사용하면 상관이없지만 기본값이 있는 매개변수, ...을 사용하는 나머지 매개변수, 비구조화 매개변수와 같은 경우에는 매개변수 자체가 하나의 스코프가 된다.
예시를 보자.

function returnId (id, default = () => id) {
  var id = 5; 
  console.log(deafalt());
}

returnId(3);

위의 코드는 기본값으로 함수 표현식이 사용되고 var를 사용해서 변수 재선언이 사용된 경우이다.
만약 매개변수가 스코프가 존재하지 않고 하나의 retunId의 함수 스코프만 있다면 매개변수의 id와 var id = 5의 id는 같은 변수가 되고, 변수 재선언이 발생하면서 returnId(3)의 결과는 5가 될 것이다.

하지만 매개변수가 하나의 스코프로 인정되고 렉시컬 스코프에 따라서 default() 함수의 id는 매개변수의 id를 참조하게 된다.
var id = 5의 id와 매개변수의 id는 별도의 id로 인식이 되고 매개변수의 id의 값은 5로 변하지 않고 default() 함수가 반환하는 값은 매개변수 di의 값인 3을 반환한다.

하지만 조금 예외인 경우도 있다.

function returnId(id, defaultId = () => id) {
  var id;
  
  console.log(`지역 변수 'id' : ${id}`);
  console.log(`매개변수 'id' : ${default()}`);
  
  id = 5;
  
  console.log(`지역 변수 'id' : ${id}`);
  console.log(`매개변수 'id' : ${default()});
}

위의 결과가 어떻게 나올지 이전 예시를 생각하면서 예측해보자.
나는 undefined -> 3 -> 5 -> 3을 예측했다.
매개변수 스코프를 정상적으로 이해했다면 맞게 풀이를 한 것이다.
하지만 아쉽게도 결과는 달랐다.
결과는 3 -> 3 -> 5 -> 3이 나오게 된다.
그 이유는 매개변수 스코프에 대한 이해가 잘못된 것이 아니라 JS의 업데이트 과정에서 과거 코드와의 호환 문제로 매개변수와 이름이 같은 지역 변수가 있는 경우 JS가 임의로 undefined로 초기화 하는게 아니라 매개변수의 값으로 초기화하기 때문이다.

이 내용은 이러한 방식의 코드를 지향하라는게 아니라 지양하고 조심하기 위함이다.
이를 방지하기 위해서는 매개변수와 같은 식별자를 사용한 지역 변수를 선언해서 매개변수를 섀도잉하는 행위를 하지 말아야 한다.