JAVASCRIPT const, this, hoisting

const란?

▶ const는 JavaScript에서 변수를 선언할 때 사용되는 키워드 중 하나로, 상수를 선언하는 데에 사용됩니다.
const로 선언된 변수는 한 번 할당되면 그 값을 변경할 수 없으며 재할당이 불가능합니다.

//01
const PI = 3.14159;
PI = 3; // 에러: 상수에 새 값을 할당할 수 없습니다.


//02
console.log(myVar); // 에러: Cannot access 'myVar' before initialization
const myVar = 10;

▶ 위의 01 예시에서 PI는 3.14159라는 상수로 선언을 해주었기 때문에 만약 PI에 다른 값을 할당하려고 하면 에러가 발생하게됩니다. 또한, const로 선언된 변수는 반드시 초기화되어야 하고, 초기화되지 않은 const 변수를 선언했을때도 에러가 발생합니다.
▶ 위의 02 예시처럼 const 또한 let과 마찬가지로 블록 스코프를 가지는데, 만약 초기화되지 않은 변수에 접근하려 하면 일시적 사각지대(Temporal Dead Zone)에 해당되어 에러를 발생됩니다.

this란?

▶ this는 JavaScript에서 현재 실행 중인 코드에서 사용되는 특별한 키워드입니다.
이것은 실행 컨텍스트에 따라 다른 값을 갖게 되는데 아래의 예시와 함께 살펴보겠습니다.

1. 전역 컨텍스트(Global Context)

• 전역 범위에서 this는 전역 객체를 가리킵니다. 브라우저 환경에서는 window 객체를, Node.js 환경에서는 global 객체를 참조합니다.
  

2. 함수 내부

• 함수 내부에서 this는 호출 방식에 따라 다르게 동작합니다.
  

• 일반 함수(함수 선언문, 함수 표현식 등)의 경우

function myFunction() {
  console.log(this);
}

myFunction(); // 전역 객체(브라우저에서는 window)

const obj = {
  myMethod: function() {
    console.log(this);
  }
};

obj.myMethod(); // obj 객체

▶ myFunction은 전역 함수이므로 호출 시 this는 전역 객체를 가리킵니다. obj.myMethod는 객체 obj의 메서드로, 이를 호출할 때 this는 obj를 가리킵니다.

3. 객체 리터럴 내부의 메서드

• 객체 리터럴 내부에서 메서드를 정의할 때, 메서드 내부의 this는 해당 메서드를 호출한 객체를 가리킵니다.

const obj = {
  name: 'Alice',
  greet: function() {
    console.log(`Hello, ${this.name}!`);
  }
};

obj.greet(); // Hello, Alice!

▶ 위의 예시에서 this는 메서드가 호출된 객체를 가리킵니다. 따라서 obj.greet()를 호출하면 this.name은 obj 객체의 name 속성을 참조합니다.

4. 생성자 함수

• 생성자 함수에서 this는 생성된 인스턴스를 가리킵니다.

function Person(name) {
  this.name = name;
  this.greet = function() {
    console.log(`Hello, ${this.name}!`);
  };
}

const person1 = new Person('Bob');
person1.greet(); // Hello, Bob!

▶ 위의 예시에서 생성자 함수 Person을 사용하여 객체를 생성할 때 this는 생성된 인스턴스를 가리킵니다. 따라서 person1.greet()에서 this.name은 person1 객체의 name 속성을 참조합니다.

Hoisting이란?

▶ 호이스팅(Hoisting)은 JavaScript에서 변수 및 함수 선언이 해당 스코프의 맨 위로 끌어올려지는 현상을 말하며, 변수와 함수 선언의 호이스팅은 각각 조금씩 다른 동작을 합니다.

1. 변수 호이스팅

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

// 위 코드는 실제로 아래와 같이 동작합니다.

var myVar; // 선언(호이스팅)
console.log(myVar); // undefined
myVar = 10; // 초기화

▶ 변수 선언(var, let, const)은 선언 단계와 초기화 단계로 나뉩니다. 호이스팅은 선언 단계까지만 해당 변수를 끌어올리므로, 초기화는 실제 선언이 위치한 곳에서 이루어집니다. var로 선언한 변수는 선언과 초기화가 함께 이루어지며, undefined로 초기화됩니다.

2. 함수 호이스팅

// 함수 선언문
myFunction(); // Hello!
function myFunction() {
  console.log('Hello!');
}

// 함수 표현식
myFunction(); // TypeError: myFunction is not a function
var myFunction = function() {
  console.log('Hello!');
};

▶ 함수 선언문은 전체 함수가 호이스팅되며, 함수 표현식은 변수만 호이스팅됩니다.
즉, 함수 선언문으로 선언된 함수는 전체가 호이스팅되므로, 함수를 선언하기 전에도 호출할 수 있습니다.
하지만 함수 표현식은 변수만 호이스팅되므로, 변수가 선언되기 전에 함수를 호출하면 에러가 발생합니다.

이렇게 오늘은 const, this, Hoisting에 대해 알아봤는데요,
면접을 준비할 때 나올 수 있는 질문인만큼 미리미리 숙지해서 알아두면 좋겠죠?
그럼 다음엔 또 다른 면접 정보들을 가져와보도록 하겠습니다 😁!