JavaScript 변수, 함수 정의 및 사용

"Hoisting"

---

Hoisting ?

본격적인 포스팅에 앞서 Hoisting(호이스팅)이라는 개념을 먼저 이해하는 것이 중요하다. 

• 어원: Hoisting `명사` 끌어 올리기, 들어올려 나르기 

Hoisting(호이스팅)은 변수 선언과 함수 선언이 코드 실행 전에 자바스크립트 엔진에 의해 최상단으로 끌어 올려지는 현상을 말한다. 자바스크립트 코드가 작성된 순서대로 실행되는 것처럼 보이지만, 실제로는 선언과 초기화가 미리 처리되기 때문에 예상치 못한 동작을 경험할 수 있다.

 

코드가 실행되기 전에 변수 선언과 함수 선언이 코드의 최상단으로 이동된다. 이는 선언만 이동되며, 변수의 값 할당은 호이스팅 되지 않는다.

JavaScript 호이스팅은 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상을 뜻합니다. https://developer.mozilla.org/ko/docs/Glossary/Hoisting

 

자바스크립트 변수, 함수 정의 및 사용

자바스크립트 변수 선언 방법 : var → let, const

ES6 (ESMAScript, 자바스크립트 버전) 이전에는 변수를 선언할 때 `var`만 사용했다. ES6 이후로는 `let`과 `const`가 도입되면서 `let`과 `const`로 선언할 수 있다.

• `let`: 가변 변수 선언 시 - 예) `let heroLevel =1` 레벨이 올라감에 따라 변경되는 레벨값
• `const`: 불변 변수 선언 시 - 예)`const TOTAL_MONTHS = 12` 고정된 12라는 값

	재선언	재할당	스코프
var	O: 재선언 시 덮어쓰기	O	함수
let	X: 방어	O: 가변 변수	블록
const	X: 방어	X: 불변 변수	블록

 

• `var` : 재선언과 재할당이 가능하고 함수 스코프를 가진다. 선언한 변수를 어디서든 참조할 수 있지만, 이로 인해 오류가 발생할 수 있다.
  • 호이스팅 발생: 선언과 동시에 초기화가 이루어진다. 값이 할당되지 않으면 undefined로 초기화된다.
• `let`: 재선언은 불가능하지만 재할당은 가능하다. 블록 스코프를 가진다.
  
  • 호이스팅 발생: 선언은 호이스팅되지만, 초기화는 호이스팅되지 않는다. 그래서 선언 전에 변수를 사용하면 Reference Error가 발생한다.
• `const`: 재선언과 재할당 모두 불가능한 상수 변수. 블록 스코프를 가진다.
  • 호이스팅 발생: 마찬가지로 선언은 호이스팅되지만, 초기화는 호이스팅 되지않는다. 선언 전에 변수를 사용하면 Reference Error가 발생한다.

따라서 var, let, const는 모두 호이스팅이 발생한다.

console.log(a); // undefined
var a = 10;

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;

+) 함수(Function)도 Hoisting

함수 선언도 Hoisting의 영향을 받는다. 함수 선언은 코드 상에서 어디에 있든 호이스팅되기 때문에 함수 호출이 선언보다 앞서도 문제 없이 동장한다.

hoistedFunction(); // 정상적으로 호출됨

function hoistedFunction() {
  console.log("This function is hoisted");
}

 

그러나 함수 표현식은 변수처럼 동작한다. 즉, 함수 표현식은 선언이 호이스팅되지만, 할당된 값은 호이스팅되지 않는다.

hoistedExpression(); // TypeError: hoistedExpression is not a function

var hoistedExpression = function() {
  console.log("This is a function expression.");
};

 

스코프(Scope): 변수에 대한 접근 영역

 

스코프(Scope)란, 코드에서 변수를 어디에서 선언하고, 또 어디서 접근할 수 있는지를 결정하는 규칙이다.

스코프는 함수 스코프와 블록 스코프로 나눌 수 있다. 이 두 스코프는 변수를 사용할 수 있는 범위를 다르게 정의하기 때문에 자바스크립트 코드 작성 시 큰 영향을 끼친다.

 

• 함수 스코프 (Function Scope)

함수 스코프는 함수가 생성될 때 해당 함수 내부에서만 유효한 스코프. 이는 함수 내에서 선언된 변수는 함수 밖에서는 접근할 수 없음을 뜻한다. 변수가 함수 내에만 한정되므로 외부에서 그 변수에 접근하거나 수정할 수 없다.

fucntion function_scope() {
  var message = 'Hello'; // 함수 스코프 내에서만 유효
  console.log(message); // 'Hello' 출력
}

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

위 코드에서 `message` 변수가 함수 내부에 선언되었기 때문에 함수 바깥에서는 사용할 수 없다.

 

• 블록 스코프 (Block Scope)

블록 스코프는 중괄호 `{}`로 감싸진 블록 내에서만 유효한 스코프. 블록 스코프는 `let`이나 `const` 키워드를 사용할 때 적용되며, 해당 블록 외부에서는 변수를 참조할 수 없다. `if`, `for`, `while` 등의 제어문 또는 함수 내의 코드 블록에서도 각각의 스코프가 존재한다.

if (true) {
  let blockVariable = 'I am inside block';
  console.log(blockVariable); // 'I am inside block' 출력
}

console.log(blockVariable); //  RenferenceError: blockVariable is not defined

`blockVariable`은 블록 내에서만 선언되었기 때문에, 블록 밖에서는 사용할 수 없다.

 

Literal 리터럴이란 무엇긴가?

리터럴(Literal)은 코드에서 값을 표현하는 방법을 의미한다. 즉, 개발자가 직접 작성한 값 그 자체를 말한다.

• 숫자 리터럴: `0`, `3.14`, `100`
• 문자열 리터럴: `hello`, "world"
• 함수 리터럴: `function() {}`, `() => {}`
• 객체 리터럴: `{ name: 'SangHyun', age: 28 }`

리터럴은 데이터를 직접 코드에 적어 넣는 것을 뜻하며 변수에 값을 할당하거나 비교하는 데 사용된다.

---

 

ℹ️참고

[ASAC 6기 강의자료]

 

https://developer.mozilla.org/ko/docs/Glossary/Hoisting

호이스팅 - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN