[실전 리액트 프로그래밍] 변수

☑️ 변수를 정의하는 새로운 방법

1) var

• var는 함수 스코프를 가지는데 함수가 아닌 프로그램 바깥에 정의하면 전역 변수가 되기도 한다. 이러한 특성때문에 var는 블록 스코프 안에서 정의되었을 때 해당 코드가 다 실행된 이후에도 변수가 사라지지 않고 계속 남아있는 문제가 발생한다. 두번째로 var로 정의된 변수는 그 변수가 속한 스코프의 최상단으로 끌어올려진다. 이를 호이스팅이라 부르는데 이로 인해 변수가 할당되기 전에 코드를 실행해도 에러없이 사용할 수 있어 직관적이지 않은 사용이 버그로 이어질 수 있다. 다른 특이한 점은 함수 안에서 키워드를 사용하지 않고 변수에 값을 할당하면 그 변수 역시 전역 변수가 된다는 점이다.

2) let/const

• let과 const는 블록 스코프를 갖는다. 함수 스코프의 단점 대부분이 블록 스코프에는 없기 때문에 var 변수 키워드에 비해서 버그 발생 가능성이 현저하게 낮아진다. let, const 키워드로 정의된 변수도 var 키워드로 정의된 변수처럼 호이스팅이 발생하지만 변수를 정의하기 전에 사용하려고 하면 일시적 사각지대에 있기 때문에 참조 에러가 발생하여 의도치 않은 동작을 예방한다. 일시적 사각지대는 다음과 같은 상황에서 중요한 역할을 한다.

  자바스크립트의 특징인 호이스팅에 따라 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려지는데 3번 코드 위치에서 변수 호이스팅이 이뤄지지 않았다면 참조 에러는 발생하지 않고 1번 변수의 값이 출력되었을 것이다. 하지만 일시적 사각지대로 인해서 2번 코드는 reference error를 반환한다. 만약 var 키워드로 변수를 정의했다면 참조 에러가 발생하지 않았을 것이다.

const foo = 1; // --- 1️⃣
{
  console.log(foo); // reference error! --- 2️⃣
  const foo: 2; // --- 3️⃣
}

☑️ 함수, 변수 선언의 우선순위

1) Variable assignment takes precedence over function declaration
2) Function declarations take precedence over variable declarations

변수 할당이 함수 선언보다 우선적이며 함수 선언이 변수 선언보다 우선적이다.
(변수 할당 > 함수 선언 > 변수 선언)

// 1) 변수 할당 > 함수 선언
var double = 22;

function double(num) {
  return (num*2);
}

console.log(typeof double); // Output: number

// 2) 함수 선언 > 변수 선언
var double;

function double(num) {
  return (num*2);
}

console.log(typeof double); // Output: function

다만, 함수 선언식은 호이스팅 되지만 함수 표현식은 호이스팅에 영향을 받지 않기 때문에 함수 표현식으로 코드를 작성하는 것이 좋다.

// 1) 함수 선언식
function 함수명() {
  // 코드
}

// 2) 함수 표현식
const 함수명 = function() {
 // 코드
}

출처

실전 리액트 프로그래밍-이재승
Understanding Hoisting in JavaScript