✏️모던자바스크립트 Deep Dive 12~14장

이주영·2024년 3월 18일

12장 함수

12.1 함수란?

수학의 함수는 입력을 받아 출력을 내보내는 일련의 과정을 정의한 것이다.

function add(x,y) {
  return x + y;
}

add(2,5);

프로그래밍 언어의 함수는 일련의 과정을 문으로 구현하고 코드 블록으로 감싸 하나의 실행 단위로 정의한 것이다.
이때 함수 내부로 입력을 전달받는 변수를 매개변수, 입력을 인수, 출력을 반환값이라고 한다.
함수는 함수 정의를 통해 생성한다. 하지만 함수 정의만으로 함수가 실행되는 것은 아니다.
인수를 매개변수를 통해 함수에 전달하면서 함수의 실행을 명시적으로 지시해야 한다. (함수 호출)

12.2 함수를 사용하는 이유

함수는 실행 시점을 개발자가 결정할 수 있고 재사용이 가능하다.
코드의 중복을 억제하고 재사용성을 높이는 함수는 유지보수의 편의성을 높이고 실수를 줄여 코드의 신뢰성을 높일 수 있다.
함수는 객체 타입의 값이라 이름을 붙여줄 수 있다. 적절한 함수 이름은 코드의 가독성을 향상시킨다.

12.3 함수 리터럴

함수 리터럴은 function 키워드, 함수 이름, 매개변수 목록, 함수 몸체로 구성된다.

함수 리터럴의 구성 요소

함수 이름 - 식별자 네이밍 규칙을 준수해야 한다, 함수 몸체 내에서만 참조할 수 있는 식별자, 생략 가능
매개변수 목록 - 소괄호로 감싸고 쉼표로 구분, 각 매개변수에는 함수를 호출할 때 지정한 인수가 순서대로 할당, 함수 몸체 내에서 변수와 동일하게 취급되기 때문에 식별자 네이밍 규칙 준수
함수 몸체 - 함수가 호출될 때 실행될 문들을 하나의 실행 단위로 정의한 코드 블록

함수는 객체이지만 일반 객체와 다르게 호출할 수 있다. 또 함수 객체만의 고유한 프로퍼티를 갖는다.

12.4 함수 정의

함수 정의 방법

함수 선언문

function add(x,y) {
  return x + y;
}

함수 표현식

var add = function(x,y) {
  return x + y;
}

Function 생성자 함수

var add = new Function('x', 'y', 'return x + y');

화살표 함수

var add = (x,y) => x + y;

12.4.1 함수 선언문

함수 선언문은 함수 리터럴과 형태가 동일하지만 함수 리터럴은 함수 이름이 생략 가능하고, 함수 선언문은 함수 이름을 생략할 수 없다.
함수 선언문은 표현식이 아닌 문이기 때문에 undefined가 출력된다. 함수 선언문은 표현식이 아닌 문이기 때문에 변수에 할당할 수 없다.

var add = function add(x,y) {
  return x + y;
}

console.log(add(2,5));
// 7

하지만 함수 선언문이 변수에 할당되는 것처럼 보인다.
이렇게 동작하는 이유는 자바스크립트 엔진이 코드의 문맥에 따라 동일한 함수 리터럴을 표현식이 아닌 문인 함수 선언문으로 해석하는 경우와, 표현식인 문인 함수 리터럴 표현식으로 해석하는 경우가 있기 때문이다.
즉 함수 이름이 있는 기명 함수 리터럴은 함수 선언문 또는 함수 리터럴 표현식으로 해석될 가능성이 있다는 의미이다.
ex) { }은 블록문일 수도 있고 객체 리터럴일 수도 있다.

함수 선언문과 함수 리터럴 표현식은 함수 객체를 생성한다는 점에서 동일하지만 호출에 차이가 있다.
함수 리터럴에서 함수 이름은 함수 몸체 내에서만 참조할 수 있는 식별자이기 때문에 함수 몸체 외부에서는 함수를 호출할 수 없다.
자바스크립트 엔진은 생성된 함수를 호출하기 위해 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고, 거기에 함수 객체를 할당한다.

                  함수이름
var add = function add(x,y) {
  return x + y;
}
           식별자
console.log(add(2,5));
// 7

함수는 함수 이름으로 호출하는 것이 아니라 함수 객체를 가리키는 식별자로 호출한다.

12.4.2 함수 표현식

변수에 할당할 수도 있고 프로퍼티의 값이 될 수도 있고 배열의 요소가 될 수도 있는 값의 성질을 갖는 객체를 일급 객체라 하고 자바스크립트 함수는 일급 객체이다.
그렇기 때문에 함수 리터럴로 생성한 함수 객체를 변수에 할당할 수 있다. 이런 함수 정의 방식을 함수 표현식이라고 한다.
함수 리터럴의 함수 이름은 생략 가능하고 이런 함수를 익명 함수라 한다.
함수 선언문은 표현식이 아닌 문이고 함수 표현식은 표현식인 문이다.

12.4.3 함수 생성 시점과 함수 호이스팅

함수 선언문으로 정의한 함수는 함수 선언문 이전에 호출할 수 있지만 함수 표현식으로 정의한 함수는 함수 표현식 이전에 호출할 수 없다.
함수의 생성 시점이 다르기 때문인데, 함수 선언문은 런타임 이전에 자바스크립트 엔진에 의해 먼저 실행된다. (런타임 이전에 객체가 먼저 생성)
그리고 자바스크립트 엔진은 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고 생성된 함수 객체를 할당한다.
이렇게 함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 함수 호이스팅이라고 한다.

함수 호이스팅과 변수 호이스팅은 런타임 이전에 먼저 실행되어 식별자를 생성한다는 점에서는 동일하다.
하지만 var 키워드로 선언된 변수는 undefined로 초기화되고, 함수 선언문을 통해 생성된 식별자는 함수 객체로 초기화된다.
함수 표현식은 변수에 할당되는 값이 함수 리터럴인 문이다. 그래서 함수 표현식은 변수 선언문과 변수 할당문을 한 번에 기술한 축약 표현과 동일하게 동작한다.
변수 선언은 런타임 이전에 실행되어 undefined로 초기화되지만, 변수 할당문의 값은 런타임에 평가되어 함수 표현식의 함수 리터럴도 할당문이 실행되는 시점에 평가되어 함수 객체가 된다.

12.4.4 Function 생성자 함수

Function 생성자 함수로 함수를 생성하면 클로저를 생성하지 않는 등 함수 선언문이나 함수 표현식을 생성된 함수와 다르게 동작한다.

12.4.5 화살표 함수

ES6에서 도입된 화살표 함수는 function 키워드 대신 =>를 사용해 간략하게 함수를 선언할 수 있다. 화살표 함수는 항상 익명 함수로 정의한다.
화살표 함수는 생성자 함수로 사용할 수 없고, 기존 함수와 this 바인딩 방식이 다르고, prototype 프로퍼티가 없고, arguments 객체를 생성하지 않는다.

12.5 함수 호출

함수는 함수를 가리키는 식별자와 한 쌍의 소괄호인 함수 호출 연산자로 호출한다.
함수를 호출하면 현재의 실행 흐름을 중단하고 호출된 함수로 실행 흐름을 옮긴다. 이때 매개변수에 인수가 순서대로 할당된다.

12.5.1 매개변수와 인수

함수를 실행하기 위해 필요한 값을 함수 외부에서 내부로 전달해야 할 때, 매개변수(인자)를 통해 인수를 전달한다. 인수는 값으로 평가될 수 있는 표현식이어야 한다.
함수는 매개변수의 개수와 인수의 개수가 일치하는지 체크하지 않고, 일치하지 않는 경우에 인수가 할당되지 않은 매개변수의 값은 undefined이다.
매개변수보다 인수가 더 많은 경우에 초과된 인수는 무시된다. 버려지는 것이 아니라 암묵적으로 arguments 객체의 프로퍼티로 보관된다.

function add(x,y) {
  console.log(arguments);
  // Arguments(3) [2, 5, 10, callee: f, symbol(Sylmbol.iterator): f]
  
  return x + y;
}

add(2, 5, 10)

12.5.2 인수 확인

타입스크립트 같은 정적 타입을 선언할 수 있는 자바스크립트 상위 확장을 도입해 컴파일 시점에 부적절한 호출을 방지해주는 것도 방법이다.
auguments 객체를 통해 인수 개수를 확인할 수도 있다. 또는 인수가 전달되지 않은 경우 단축 평가를 사용해 매개변수에 기본값을 할당할 수도 있다.
매개변수의 기본값은 매개변수에 인수를 전달하지 않았을 경우와 undefined를 전달한 경우에만 유효하다.

12.5.3 매개변수의 최대 개수

매개변수는 순서에 의미가 있어 매개변수가 많아지면 함수를 호출할 때 전달할 인수의 순서를 고려해야 한다. 만약 순서가 변경되면 함수의 호출 방법도 바뀌어 유지보수성이 나빠진다.
함수의 매개변수는 적을수록 좋다. 매개변수의 개수가 많다는 것은 함수가 여러 가지 일을 한다는 의미이므로 이상적인 함수는 한 가지 일만 하고 가급적 작게 만들어야 한다.

12.5.4 반환문

함수는 return 키워드와 표현식으로 이루어진 반환문을 사용해 실행 결과를 함수 외부로 반환할 수 있다.

function multiply(x,y) {
  return x + y; // 반환문
}

var result = multiply(3, 5);
console.log(result); // 15

반환문은 두 가지 역할을 한다.

함수의 실행을 중단하고 함수 몸체를 빠져나가기 때문에 반환문 이후에 다른 문이 존재하면 그 문은 실행되지 않고 무시된다.
반환문은 return 키워드 뒤에 오는 표현식을 평가해 반환한다. (명시적으로 지정하지 않으면 undefined 반환)

12.6 참조에 의한 전달과 외부 상태의 변경

원시 값은 값에 의한 전달, 객체는 참조에 의한 전달 방식으로 동작한다.
매개변수도 함수 몸체 내부에서 변수와 동일하게 취급되어 타입에 따라 값에 의한 전달, 참조에 의한 전달 방식을 그대로 따른다.
원시 타입 인수는 값 자체가 복사되어 매개변수에 전달되기 때문에 함수 몸체에서 재할당해도 원본이 훼손되지 않는다.
객체 타입 인수는 참조 값이 복사되어 매개변수에 전달되기 때문에 함수 몸체에서 참조 값을 통해 객체를 변경할 경우 원본이 훼손된다. 즉, 함수 외부에서 함수 내부로 전달한 참조 값에 의해 원본 값이 변경되는 부수 효과가 발생한다.

이렇게 함수가 외부 상태를 변경하면 상태 변화를 추적하기 어려워진다. 이런 문제의 해결 방법 중 하나는 객체를 불변 객체로 만들어 사용하는 것이다. 이렇게 객체 상태 변경을 원천봉쇄하고 상태 변경이 필요한 경우에는 깊은 복사를 통해 새로운 객체를 생성하고 재할당을 통해 교체한다.
외부 상태를 변경하지 않고 의존하지 않는 함수를 순수 함수라 한다. 순수 함수를 통해 프로그램의 안정성을 높이려는 프로그래밍 패러다임을 함수형 프로그래밍이라고 한다.

12.7 다양한 함수의 형태

12.7.1 즉시 실행 함수

함수 정의와 동시에 호출되는 함수를 즉시 실행 함수라고 한다. 이 함수는 한 번만 호출된다.

(function () {
  var a = 3;
  var b = 5;
  return a * b;
}());

즉시 실행 함수는 익명 함수를 사용하는 것이 일반적이다.
그리고 반드시 그룹 연산자 (...)로 감싸야 한다.
그룹 연산자로 함수를 묶어주는 이유는 먼저 함수 리터럴을 평가해서 함수 객체를 생성하기 위해서이다.

즉시 실행 함수도 일반 함수처럼 값을 반환하고 인수를 전달할 수 있다.

var res = (function (a, b) {
  return a * b;
}(3, 5));

console.log(res); // 15

12.7.2 재귀 함수

함수가 자기 자신을 호출하는 것을 재귀 함수라 한다.
반복되는 처리를 위해 사용한다.

function countdown(n) {
  if(n < 0) return;
  console.log(n);
  countdown(n - 1); 
}

countdown(10);

재귀 함수는 자신을 무한 재귀 호출하기 때문에 멈출 수 있는 탈출 조건을 만들어야 한다.
재귀 함수는 반복되는 처리를 반복문 없이 구현할 수 있다는 장점이 있지만, 무한 반복에 빠질 위험이 있고 에러를 발생시킬 수 있어 반복문보다 재귀 함수를 사용하는 것이 더 직관적으로 이해하기 쉬울 때만 사용하는 것이 좋다.

12.7.4 콜백 함수

함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백 함수라 하고, 매개 변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수를 고차 함수라 한다.
중첩 함수가 외부 함수를 돕는 헬퍼 함수의 역할을 하는 것처럼 콜백 함수도 고차 함수에 전달되어 헬퍼 함수의 역할을 한다.
중첩 함수는 고정되어 있어 교체하기 힘들지만 콜백 함수는 함수 외부에서 고차 함수 내부로 주입하기 때문에 자유롭게 교체할 수 있다는 장점이 있다.
즉, 고차 함수는 콜백 함수를 자신의 일부분으로 합성한다.
고차 함수는 매개변수를 통해 전달받은 콜백 함수의 호출 시점을 결정해 호출한다.
즉, 콜백 함수는 고차 함수에 의해 호출되고 이때 고차 함수는 필요에 따라 콜백 함수에 인수를 전달할 수 있다.
콜백 함수가 고차 함수 내부에만 호출된다면 콜백 함수를 익명 함수 리터럴로 정의하면서 바로 고차 함수에 전달하는 것이 일반적이다.

repeat(5, function(i) {
  if(i % 2) console.log(i);
}); // 1 3

콜백 함수로서 전달된 함수 리터럴은 고차 함수가 호출될 때마다 평가되어 함수 객체를 생성한다.
콜백 함수를 다른 곳에서도 호출할 필요가 있거나, 콜백 함수를 전달받는 함수가 자주 호출되면 함수 외부에서 콜백 함수를 정의한 후 함수 참조를 고차 함수에 전달하는 것이 효율적이다.

var logOdds = function(i) {
  if(i % 2) console.log(i);
};

repeat(5, logOdds); // 1 3

콜백 함수는 함수형 프로그래밍 패러다임 뿐만 아니라 비동기 처리에 활용되는 중요한 패턴이다.
또 배열 고차 함수에서도 사용된다.

var res = [1, 2, 3].map(function(item) {
  return item * 2;
});

console.log(res); // [2, 4, 6]

12.7.5 순수 함수와 비순수 함수

어떤 외부 상태에 의존하거나 변경하지 않는, 부수 효과가 없는 함수를 순수 함수라 하고, 외부 상태에 의존하거나 변경하는, 부수 효과가 있는 함수를 비순수 함수라 한다.
순수 함수는 동일한 인수가 전달되면 언제나 동일한 값을 반환하는 함수이다.
외부 상태에는 전역 변수, 서버 데이터, 파일, Console, DOM 등이 있다.
만약 외부 상태에 의존하지 않고 함수 내부 상태에만 의존한다고 해도 그 내부 상태가 호출될 때마다 변화하는 값(ex) 현재 시간 )이면 순수 함수가 아니다.
반대로 함수의 외부 상태에 따라 반환값이 달라지는 함수를 비순수 함수라 한다. 비순수 함수의 특징은 순수 함수와 달리 함수의 외부 상태를 변경하는 부수 효과가 있다는 것이다.
함수 내부에서 외부 상태를 직접 참조하지 않더라도 매개변수를 통해 객체를 전달받으면 비순수 함수가 된다.

함수가 외부 상태를 변경하면 상태 변화를 추적하기 어렵기 때문에 함수 외부 상태의 변경을 지양하는 순수 함수를 사용하는 것이 좋다.
함수형 프로그래밍은 순수 함수와 보조 함수의 조합을 통해 외부 상태를 변경하는 부수 효과를 최소화하여 불변성을 지향하는 프로그래밍 패러다임이다.

13장 스코프

13.1 스코프란?

스코프는 모든 프로그래밍 언어의 기본이며 중요한 개념이다.
함수의 매개변수는 함수 내부에서만 참조할 수 있고 함수 외부에서 참조할 수 없다. 이것은 매개변수를 참조할 수 있는 유효범위인 스코프가 함수 내부로 한정되기 때문이다.
변수는 코드의 가장 바깥 영역 뿐만 아니라 코드 블록이나 함수 내에서도 선언할 수 있다. (코드 블록이나 함수 중첩 가능)
변수는 자신이 선언된 위치에 의해 다른 코드가 변수 자신을 참조할 수 있는 범위가 결정된다.
변수 뿐만 아니라 모든 식별자는 자신이 선언된 위치에 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정되는데, 이것을 스코프라 한다.
스코프 = 식별자가 유효한 범위

var x = 'global';

function foo() {
  var x = 'local';
  console.log(x);
}

foo();

console.log(x);

코드의 가장 바깥 영역과 foo 함수 내부에 같은 이름의 x 변수를 선언했고 두 군데에서 x 변수를 참조한다. 이때 자바스크립트 엔진은 어떤 변수를 참조할지 결정하는데 이것을 식별자 결정이라 한다.
자바스크립트 엔진은 스코프를 통해 어떤 변수를 참조할지 결정하는데, 스코프란 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙이라고도 할 수 있다.
위의 코드에서 가장 바깥 영역에 선언된 x 변수는 어디서든 참조할 수 있지만, foo 함수 내부에서 선언된 x 변수는 foo 함수 내부에서만 참조할 수 있다. 이때 두 변수는 식별자 이름이 동일하지만 스코프가 다른 별개의 변수이다.
식별자는 어떤 값을 구별할 수 있어야 하므로 유일해야 한다. 따라서 식별자인 변수 이름은 중복될 수 없고 하나의 값은 유일한 식별자에 연결되어야 한다.
프로그래밍 언어에서는 스코프를 통해 식별자인 변수 이름의 충돌을 방지해 같은 이름의 변수를 사용할 수 있게 한다.

13.2 스코프의 종류

13.2.1 전역과 전역 스코프

전역이란 코드의 가장 바깥 부분을 말하는데, 전역에 변수를 사용하면 전역 스코프를 갖는 전역 변수가 되어 어디서든 참조할 수 있다.

13.2.2 지역과 지역 스코프

지역이란 함수 내부를 말하는데 지역에 변수를 선언하면 지역 스코프를 갖는 지역 변수가 되어, 자신이 선언된 지역과 하위의 중첩 함수에서만 참조할 수 있다.

13.3 스코프 체인

함수 내부에서 함수가 정의된 것을 '함수의 중첩'이라 하고, 함수 내부에서 정의된 함수를 '중첩 함수', 중첩 함수를 포함하는 함수를 외부 함수라고 한다.
함수는 중첩될 수 있으므로 함수의 지역 스코프도 중첩될 수 있다. 이것은 스코프가 함수의 중첩에 의해 계층적인 구조를 갖는다는 것을 의미한다.
즉, 중첩 함수의 지역 스코프는 중첩 함수를 포함하는 외부 함수의 지역 스코프와 계층적 구조를 갖는다. 이때 외부 함수의 지역 스코프를 중첩 함수의 상위 스코프라고 한다.
모든 스코프는 하나의 계층적 구조로 연결되어 있고, 모든 지역 스코프의 최상위 스코프는 전역 스코프이다. 이렇게 스코프가 계층적으로 연결된 것을 스코프 체인이라고 한다.

13.3.1 스코프 체인에 의한 변수 검색

자바스크립트 엔진은 스코프 체인을 따라 변수를 참조하는 코드의 스코프에서 시작해 상위 스코프로 이동하며 선언된 변수를 검색한다.
이것은 상위 스코프에서 유효한 변수는 하위 스코프에서 자유롭게 참조할 수 있지만 하위 스코프에서 유효한 변수를 상위 스코프에서 참조할 수 없다는 것을 의미한다.
상속을 통해 부모의 자산을 자식이 자유롭게 사용할 수 있지만 자식의 자산을 부모가 사용할 수 없는 것과 같은 개념이다.

13.3.2 스코프 체인에 의한 함수 검색

// 전역 함수
function foo() {
  console.log('global function foo);
}

function bar() {
  // 중첩 함수
  function foo() {
    console.log('local function foo);
  }
  foo();
}

bar();

이렇게 foo 함수를 호출하면 자바스크립트 엔진은 함수를 호출하기 위해 함수를 가리키는 식별자 foo를 검색한다.
이렇게 함수도 식별자에 할당되기 때문에 스코프를 갖는다.

13.4 함수 레벨 스코프

지역은 함수 내부이고 지역은 지역 스코프를 만든다. 이것은 코드 블록이 아닌 함수에 의해서만 지역 스코프가 생성된다는 의미이다.
대부분의 프로그래밍 언어들은 함수 몸체 뿐만 아니라 모든 코드 블록(if, for, while, try/catch)이 지역 스코프를 만든다. 이러한 특성을 블록 레벨 스코프라고 한다.
하지만 var 키워드로 선언된 변수는 오직 함수의 코드 블록(함수 몸체)만을 지역 스코프로 인정하고 이것을 함수 레벨 스코프라고 한다.

13.5 렉시컬 스코프

var x = 1;

function foo() {
  var x = 10;
  bar();
}

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

foo();
bar();

이 코드의 실행 결과는 bar 함수의 상위 스코프가 무엇인가에 따라 결정된다.
함수가 어디서 호출되었는지에 따라 상위 스코프를 결정하면 bar 함수의 상위 스코프는 foo 함수의 지역 스코프와 전역 스코프이다.
이런 방식을 동적 스코프라고 한다.
함수를 정의하는 시점에는 어디서 함수가 호출될지 알 수 없기 때문에 함수 호출 시점에 동적으로 상위 스코프를 결정하기 때문에 동적 스코프라고 한다.
함수를 어디서 정의했는지에 따라 상위 스코프를 결정하면 bar 함수의 상위 스코프는 전역 스코프이다.
이런 방식을 렉시컬 스코프 또는 정적 스코프라고 한다.
함수 정의가 평가되는 시점에 상위 스코프가 정적으로 결정되기 때문에 정적 스코프라고 한다.
대부분의 프로그래밍 언어는 렉시컬 스코프를 따른다.
자바스크립트도 렉시컬 스코프를 따르므로 함수를 어디서 호출했는지가 아닌 함수를 어디서 정의했는지에 따라 상위 스코프를 결정한다. 함수가 호출된 위치는 상위 스코프 결정에 어떤 영향도 주지 않고 함수의 상위 스코프는 언제나 자신이 정의된 스코프이다.
함수 정의가 실행되어 생성된 함수 객체는 함수가 호출될 때마다 함수의 상위 스코프를 참조할 필요가 있기 때문에 정적으로 결정된 상위 스코프를 기억한다.

14장 전역 변수의 문제점

14.1 변수의 생명 주기

14.1.1 지역 변수의 생명 주기

변수는 선언에 의해 생성되고 할당을 통해 값을 갖고 언젠가 소멸한다. 변수에 생명 주기가 없다면 한번 선언된 변수는 프로그램을 종료하지 않는 한 영원히 메모리 공간을 점유한다.
전역 변수의 생명 주기는 애플리케이션의 생명 주기와 같다. 하지만 함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성되고 함수가 종료하면 소멸한다.
즉, 지역 변수의 생명 주기는 함수의 생명 주기와 일치한다.
대부분 이렇지만 지역 변수가 함수보다 오래 생존하는 경우도 있다.
변수는 하나의 값을 저장하기 위해 확보된 메모리 공간 자체, 메모리 공간을 식별하기 위해 붙인 이름인데, 변수의 생명 주기는 메모리 공간이 확보된 시점부터 해제되어 가용 메모리 풀에 반환되는 시점까지이다.
할당된 메모리 공간은 더이상 아무도 참조하지 않을 때 가비지 콜렉터에 의해 해제되어 가용 메모리 풀에 반환된다.
즉, 누군가가 메모리 공간을 참조하고 있으면 확보된 상태로 남아있게 된다. 이것은 스코프도 마찬가지이다.
호이스팅은 스코프를 단위로 동작한다.
전역 변수의 호이스팅은 전역 변수의 선언이 전역 스코프의 선두로 끌어 올려진 것처럼 동작해서 전역 변수는 전역 전체에서 유효하다.
지역 변수의 호이스팅은 지역 변수의 선언이 지역 스코프의 선두로 끌여 올려진 것처럼 동작해서 지역 변수는 함수 전체에서 유효하다.
즉, 호이스팅은 변수 선언이 스코프의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 말한다.

14.1.2 전역 변수의 생명 주기

전역 코드는 함수 호출같이 전역 코드를 실행하는 특별한 진입점이 없고 코드가 로드되자마자 곧바로 해석되고 실행된다.
함수는 함수 몸체의 마지막 문 또는 반환문이 실행되면 종료하지만, 전역 코드에는 반환문을 사용할 수 없으므로 마지막 문이 실행되어 더 이상 실행할 문이 없을 때 종료한다.
브라우저 환경에서의 전역 객체는 window이므로 부라우저 환경에서 var 키워드로 선언한 전역 변수는 전역 객체 window의 프로퍼티이다.
전역 객체 window는 웹페이지를 닫기 전까지 유효하다.
즉, var 키워드로 선언한 전역 변수의 생명 주기는 전역 객체의 생명 주기와 일치한다.

14.2 전역 변수의 문제점

암묵적 결합

전역 변수를 선언한 이유는 코드 어디서든 참조하고 할당할 수 있는 변수를 사용하겠다는 것인데, 이것은 모든 코드가 전역 변수를 참조하고 변경할 수 있는 암묵적 결합을 허용하는 것이다.
변수의 유효 범위가 클수록 코드 가독성이 나빠지고 상태가 변경될 위험도 높아진다.

긴 생명 주기

전역 변수는 생명 주기가 길어 메모리 리소스도 오랜 기간 소비한다.
또 var 키워드는 변수의 중복 선언을 허용하므로 생명 주기가 긴 전역 변수는 변수 이름이 중복될 가능성이 있다.

스코프 체인 상에서 종점에 존재

이것은 가장 마지막에 검색된다는 것이기 때문에 전역 변수의 검색 속도가 가장 느리다.

네임스페이스 오염

자바스크립트는 파일이 분리되어 있어도 하나의 전역 스코프를 공유한다. 다른 파일 내에서 동일한 이름으로 명명된 전역 변수나 전역 함수가 같은 스코프에 존재할 경우 예상치 못한 결과를 가져올 수 있다.

14.3 전역 변수의 사용을 억제하는 방법

14.3.1 즉시 실행 함수

함수 정의와 동시에 호출되는 즉시 실행 함수는 한 번만 호출되기 때문에 모든 코드를 즉시 실행 코드로 감싸면 모든 변수는 즉시 실행 함수의 지역 변수가 된다.

14.3.2 네임스페이스 객체

전역에 네임스페이스 역할을 할 객체를 생성하고 전역 변수처럼 사용하고 싶은 변수를 프로퍼티로 추가한다.

var MYAPP = {};

MYAPP.name = 'Lee';

console.log(MYAPP.name); // Lee

14.3.3 모듈 패턴

모듈 패턴은 클래스를 모방해서 관련있는 변수와 함수를 모아 즉시 실행 함수로 감싸 하나의 모듈을 만든다. 모듈 패턴은 자바스크립트 클로저를 기반으로 동작한다.
모듈 패턴의 틍직은 전역 변수의 억제는 물론 캡슐화까지 구현할 수 있다는 것이다.
캡슐화는 객체의 상태를 나타내는 프로퍼티와 프로퍼티를 참조하고 조작할 수 있는 동작인 메서드를 하나로 묶는 것을 말한다.
캡슐화는 객체의 특정 프로퍼티나 메서드를 감출 목적으로 사용되기도 하는데 이것을 정보 은닉이라고 한다.

14.3.4 ES6 모듈

ES6 모듈은 파일 자체의 독자적인 모듈 스코프를 제공해 이것을 사용하면 전역 변수를 사용할 수 없다.
script 태그에 type="module" 어트리뷰트를 추가하면 로드된 자바스크립트 파일은 모듈로서 동작한다.

이주영

이전 포스트

✏️모던자바스크립트 Deep Dive 10~11장

다음 포스트