Javascript 개념 정리(3) - 호이스팅과 TDZ

🐤 호이스팅과 TDZ는 무엇일까 ?

 

호이스팅

 

호이스팅이란, 변수와 함수의 메모리 공간을 선언 전에 미리 할당해두는것

변수,함수의 선언부가 위치한 인접 스코프의 시작 지점에서 해당 식별자의 관측이 가능한 현상

 

 - 자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는다.
 - 함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다.
 - 유효 범위: 함수 블록 {} 안에서 유효

JS엔진이 모든 스코프 또는 실행 컨텍스트를 탐색하며 여러 변수 객체에 식별자를 수집한다. 이렇게 실행 시점으로 넘어가기 전에 선언된 식별자에 대한 정보를 이미 알고 있기 때문에 선언 이전에 참조할 수 있게 되는것이다.

 

즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것

 - 실제로 코드가 끌어올려지는 건 아니며, js parser 내주변으로 끌어올려서 처리

 - 실제 메모리에서는 변화가 없음

 

 

호이스팅을 하기전 알면 좋은 것

js엔진에서 변수 생성 단계

자바스크립트 엔진에서 변수는 선언 → 초기화 → 할당을 거쳐 생성됨

선언 단계	변수를 실행 컨텍스트(실행 코드에 제공할 정보 객체)의 변수 객체에 등록한다.
초기화 단계	변수 객체에 등록된 변수를 위한 메모리 공간을 확보한다. (이때, undefined로 초기화됨) 메모리가 할당되면 메모리 참조를 통해 변수에 접근할 수 있다.
할당 단계	사용자가 정의한 값을 변수에 할당해준다.

자바 스크립트 엔진은 코드를 실행하기 전에 실행 컨텍스트에 등록된 변수 객체에 접근할 수 있다.

var의 경우 변수 선언&초기화가 함께 진행되므로, 변수 객체 등록과 동시에 메모리 공간도 할당 받는다.

그렇기 때문에 메모리를 할당받은 상태이므로 호이스팅시 메모리 참조를 통해 변수 접근이 가능하다.

console.log(a);  // 변수 접근 가능  -> undefined
var a;           // 실행 컨텍스트에 등록 & 메모리 할당 받음

console.log(a); // 변수 접근 불가능  -> error
let a;          // 실행 컨텍스트에 등록 & 메모리 할당 못 받음

 

 

호이스팅 대상

var 변수 선언과 함수 선언문에서만 호이스팅이 일어남

 - var 변수/함수의 선언만 위로 끌어 올려지며, 할당은 끌어 올려지지 않음
 - let/const 변수 선언과 함수표현식에서는 호이스팅이 발생하지 않음

호이스팅을 초기화까지 포함하지 않고, 인접 스코프 상단에서 선언부를 관측할 수 있는 현상 이라고 생각한다면

var, function 키워드 뿐만 아니라 let과 const 또한 호이스팅의 대상으로 볼 수 있음

(초기화까지 치면 아니지만 let과 const도 선언한거까지 식별하니까 여기까지 호이스팅이라 봐야하는가는 사람마다 좀 다른것 같음 식별해서 에러를 말해주니까)

 

 

호이스팅 규칙

1. 선언된 함수는 상단에서 참조, 호출이 가능하다.
2. 선언된 var 는 상단에서 참조, 할당이 가능하다.
3. 선언된 let , const 는 상단에서 참조, 할당이 불가능하다.

var로 선언한 변수는 호이스팅시 undefined로 변수를 초기화

선언 이전에 사용하려고 했을 때 var로 선언한 변수는 undefined가 출력

선언 이후에 사용하면 선언한 값이 할당되어서 사용

 

반면 let과 const로 선언한 변수는 호이스팅시 변수를 초기화하지 않음

let,const로 선언한 변수는 에러가 뜸

console.log(a) // undefiend var여서 호이스팅 됬지만 undefiend로 초기화 상태
var a = 1;
console.log(a) // 1     1로 초기화 상태

console.log(b) // Uncaught ReferenceError: b is not defined
let b = 1;

console.log(c); // ReferenceError
const c = '1';

print()  // d

function print() {
  console.log('d')
}

print2()  // error

const print2 = () => {
  console.log('e')
}

그래서 요즘은 var를 안쓰고 let과 const를 사용 하는 이유는

변수 할당의 오류를 바로 알수 있고(오류발생이 보이니까)

var는 선언 전 사용가능해서 이후에 재할당되면 값이 달라지는 문제가 생기기 때문에 잘 사용하지 않음

 

 

함수 호이스팅

함수 호이스팅이 가장 먼저 이루어짐

함수 선언은 호이스팅이 이루어져 함수 보다 위에서 실행해도 작동됨

BUT 함수 표현식은 호스팅 되지 않아 함수 위에서 실행시 에러 발생

 

함수선언이란

// 함수 선언식이란
function calcRectArea(width, height) {
  return width * height;
}
console.log(calcRectArea(5, 6));
// expected output: 30

// 선언은 호이스팅 가능
print()  // a

function print() {
  console.log('a')
}

함수표현식이란

// 함수 표현식이란
const getRectArea = function(width, height) {
  return width * height;
};
console.log(getRectArea(3, 4));
// expected output: 12

// 표현식은 호이스팅 안대서 에러남
print()  // error

const print = () => {
  console.log('a')
}

 

 

결론

 - 선언된 함수는 선언문 상단에서 참조, 호출이 가능하다.

 - var로 선언된 변수는 선언문 상단에서 참조, 할당이 가능하다.

 - let, const로 선언된 변수는 상단에서 참조, 할당이 불가능하다.

 

되도록 var를 사용말고 let, const를 사용

변수든 함수든 선언하고 사용하자

 

 

[JS] 호이스팅(hoisting)

호이스팅에 대한 오해와 진실

Javascript 호이스팅

 

 

 

스코프

 

스코프란, 변수에 접근할 수 있는 범위

식별자 접근 규칙에 따른 유효 범위

 

스코프의 주요 규칙

1. 안쪽 스코프에서 바깥쪽 스코프로 접근할 수 있지만, 반대는 불가능

 - 바깥쪽 스코프에서 선언한 식별자는 안쪽스코프에서 사용 가능

 - 반대로 안쪽 스코프에서 선언한 식별자는 바깥쪽에서 사용 할수 없다.

 

2. 스코프는 중첩이 가능함

 - 함수안에 함수안에 함수 처럼 가장안쪽 함수에서 가장 바깥 함수의 식별자 사용이 가능(중첩)

 

3. 지역변수는 전역변수보다 우선순위가 더 높음

 - 전역 스코프에서 선언한 변수는 전역 변수이다.

 - 지역 스코프에서 선언한 변수는 지역 변수이다.

 - 지역 변수는 전역 변수보다 더 높은 우선순위를 가진다.

 

스코프의 2가지 타입

 - 전역스코프(global)

 - 지역스코프(local)

 

전역스코프

전역에 선언되어있어 어느 곳에서든지 해당 변수에 접근할 수 있음

 

지역스코프

해당 지역에서만 접근할 수 있어 지역을 벗어난 곳에선 접근할 수 없음

ex)함수스코프, 블록스코프

 

함수스코프

함수를 선언하면 함수를 선언 할때마다 새로운 스코프를 생성함수 몸체에 선언한 변수는 해당 함수 몸체 안에서만 접근 가능

var a = 1; // 전역 스코프
function print() { // 지역(함수) 스코프
 var a = 111;
 console.log(a); 
}
print(); // 111
console.log(a); // 1

함수안에서 a = 111이라는 변수를 할당해서 콘솔에 찍고 함수는 사명을 다함(함수 내 지역에서만 유효함)

var a = 1; // 전역 스코프
function print() { // 함수 스코프
 console.log(a);
}
print(); // 1

함수안에서 a를 따로 할당해주진 않았지만, 지역스코프내 할당이 없으면 스코프 체인을 통해 전역스코프에서 변수를 찾음

 

 

블록 스코프

{ } 중괄호로 둘러싸인 부분을 블록

 

 

 

스코프와 var, let, const

const

유효범위 : 블록스코프 / 함수스코프

값 재할당 : 불가능

재선언 : 불가능

 

let

유효범위 : 블록스코프 / 함수스코프

값 재할당 : 가능

재선언 : 불가능

 

var

유효범위 : 함수스코프

값 재할당 : 가능

재선언 : 가능

 

for(let i=0; i<10; i++) { // let사용
  console.log(i); //0,1,2,3,4,...
}
// 전역스코프에서 선언한 변수 i 는 존재하지 않음으로 아래에서 ReferenceErrer을 일으킨다.
console.log(i); // ReferenceErrer

블록 스코프 안에서 let과 const 키워드로 선언한 변수는 스코프 안에서만 참조 가능하다.

for(var i=0; i<10; i++) {  // var 사용
  console.log(i);
}
// var 키워드로 선언한 변수 i 는 지역 스코프에서 선언되었지만 모든 스코프에서 접근 가능하다.
console.log(i); // 9

var 키워드로 선언한 변수는 블록 스코프를 무시하고 스코프 울타리 밖에서도 접근 가능하다. (var는 Only 함수 스코프만 따른다.)

 

그러나 블록 단위로 스코프를 구분했을 때, 훨씬 더 예측 가능한 코드를 작성할 수 있으므로 let 키워드의 사용을 권장

 

 

변수 선언시 주의점

전역객체(window)

Window 객체는 only 브라우저에만 존재하는 객체

브라우저의 창(window)를 의미하는 객체

그런데 별개로 전역 영역을 담고 있음

그래서 함수 선언식으로 함수를 선언하거나 var 키워드로 변수를 선언하면 window 객체에 속함

 

전역변수는 최소화하는 것이 좋음

 - 가장 바깥 스코프에 정의한 변수가 전역변수

 - 어디서든 접근 가능

 - 전역변수를 최소화 하면 의도치 않은 로직에 의한 문제를 줄일 수 있음

 - 특히 선언 없이 선언하면 var로 선언 한것처럼 취급(그럼 여기저기서 계속 바뀔 수 있음) 주의

 

(JavaScript) 스코프(Scope)란?

[JavaScript] 스코프(Scope)와 변수 선언 (var, let, const 키워드 차이점) - 하나몬

 

 

 

TDZ(Temporal Dead Zone)

일시적인 사각지대란 뜻

일시적인 사각지대는 스코프의 시작 지점부터 초기화 시작 지점까지의 구간

 

 

변수 선언 3단계

1. 선언 단계(Declaration phase)

변수를 실행 컨텍스트의 변수 객체에 등록하는 단계. 이 변수 객체는 스코프가 참조하는 대상

 

2. 초기화 단계(Initialization phase)

실행 컨텍스트에 존재 하는 변수 객체에 선언 단계의 변수를 위한 메모리를 만드는 단계. 이 단계에서 할당된 메모리에는 undefined로 초기화

 

3. 할당 단계(Assignment phase)

사용자가 undefined로 초기화된 메모리의 다른 값을 할당하는 단계.

 

위 호이스팅에서 말했지만, var 키워드 변수는 변수 선언전에 선언 단계와 초기화 단계를 동시에 진행

때문에 변수를 선언하기 전에 호출을 해도 undefined로 호출이 되는 호이스팅이 발생

 

let, const는 선언단계와 초기화 단계가 분리되어서 진행

메모리가 할당이 되질 않아 접근할 수 없어 참조 에러(ReferenceError)가 발생

TDZ 라는 것은 변수 선언 및 초기화 하기 전 사이의 사각지대

 

TDZ의 영향을 받는 구문

let, const, class

위 세개는 항상 변수를 선언 후 사용해야함(안그러면 에러남)

// Does not work!

console.log(cat)  // error : ReferenceError
const cat = "야옹"

count; // throws `ReferenceError`
let count = 10;

const myNissan = new Car('red'); // throws `ReferenceError`

class Car {
  constructor(color) {
    this.color = color;
  }
}

------

// Works!

const cat = "야옹"
console.log(cat)  // "야옹"

let count = 10;
count;  // 10

class Car {
  constructor(color) {
    this.color = color;
  }
}

const myNissan = new Car('red');
myNissan.color; // 'red'

 

 

TDZ의 영향을 받지 않는 구문

var, funtion, import

밑에서 선언 하더라도 호이스팅 되어 위에서 사용해도 정상 실행

// Works!

value; // undefined
var value;

hello('Shin') // "Hello Shin :)"

function hello (name) {
  return `Hello ${name} :)`
}
hello('Shin') // "Hello Shin :)"

 

TDZ을 모른 채 자바스크립트 변수를 사용하지 말라

 

 

 

실행 컨텍스트

실행 컨텍스트란, 실행 코드에 제공할 정보들을 모아 놓은 객체

 

JS 코드를 실행하기 위해서 자바스크립트 엔진은 코드에 대한 정보들(변수, arguments 객체, 함수 선언, scope, this 등)을 알고 있어야 함

JS 코드가 실행되면서 실행 컨텍스트가 생성되는데, 자바스크립트 엔진은 코드에 대한 정보들을 실행 컨텍스트 객체 안에 저장함

실행 컨텍스트란 코드가 실행되기 위해 필요한 정보들을 가진 범위를 추상화하기 위해 객체 형태로 나타낸 것

js 코드 실행시 js엔진의 스택에 쌓이게 됨

자바스크립트 엔진에 의해 생성된 실행 컨텍스트는 논리적 스택 구조를 가짐

실행되는 순서대로 콜 스택(call stack)에 쌓였다가, 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 동일한 환경과 순서를 보장

스택은 LIFO(Last In First Out, 후입선출) 구조의 자료 구조

 

 

실행 컨텍스트가 생기는 시점

1. 전역공간

=> JS 코드가 처음으로 실행될 때

2. eval 함수 사용 시

(보안상 취약점이 있고, 인터프리터를 사용하여 느리기 때문에 잘 사용 안하고 지양하는 방법)

3. 함수 사용 시

=> anonymous func() 실행

4. { } 코드 블럭 사용 시

 

// ------------------------ (1)
var a = 1;
function outer() {
   function inner() {
      console.log(a);
      var a = 3;
      // ------------------ (2)
   }
   inner(); // ------------ (3)
   console.log(a);
   // --------------------- (4)
}
outer(); // --------------- (5)
console.log(a);
// ------------------------ (6)

위 코드가 실행 되는 시점에 자바스크립트 엔진 에서는 실행을 위한 실행 컨텍스트의 정보들을 아래와 같이 스택에 먼저 쌓게 됨

코드 실행시 스택이 어떻게 쌓이는지 알아보자

코드 실행시 전역 컨텍스트가 생성 되고 outer() 함수가 실행된다.

outer안에 inner함수가 실행되어 마지막으로 스택에 쌓이고 inner 함수가 먼저 실행되어 가장 먼저 스택에서 빠진다.

그다음 outer 함수가 빠지고, 전역 컨텍스트가 빠지면서 스택에 컨텍스트들이 없어지게 됨

 

※ 참고) 실행 컨텍스트 객체는 자바스크립트 엔진이 활용할 목적으로 생성한 객체

개발자가 코드를 통해서 실행 컨텍스트에 접근할 수는 없음

 

 

실행 컨텍스트의 구조

1. Variable Environment

2. Lexical Environment

3. thisBinding

Variable Environment 와 Lexical Environment 의 내부에는 envrionmentRecord 와 outerEnvironmentReference 의 객체를 가지고 있다는 부분에서 동일

Variable Environment 는 최초의 스냅샷의 개념으로 변경되는 컨텍스트 정보에 대해 업데이트를 하지 않음

 

 

Variable Environment

 - var로 선언된 변수가 메모리에 매핑되고 초기값으로 undefined가 할당

 - 최초 실행 시의 스냅샷을 유지

 

Lexical Environment

 - let, const로 선언된 변수가 메모리에 매핑되고 초기값은 할당되지 않음

 - 함수 선언이 메모리에 매핑되고 함수 전체가 할당

 - let과 const로 선언한 변수를 위한 Block scope를 단위로 함

 

각 실행 컨텍스트를 구성하는 범위를 Scope 이라고 한다면, 현재 Scope에서 선언되지 않는 변수를 호출 한다면 상위에서 찾을 수 있도록 outerEnvironmentReference 가 스코프체인을 구성할 수 있도록 주소를 참조함

 

 

envrionmentRecord

 - 해당 Lexical Environment/Variable Environment의 scope 안에서 생성된 변수, 매개변수, 함수(함수 표현식은 제외) 등의 식별자(Identifier) 정보들을 저장

 - 컨텍스트가 생성될 때 자바스크립트 엔진은 해당 컨텍스트와 관련된 코드를 처음부터 끝까지 순서대로 읽으며 식별자 정보를 수집

 - 전역 실행 컨텍스트의 경우 전역 객체(Global Object: window or global) 안에 위 정보들을 저장

 - 호이스팅이 발생

 

Environment Record 정보를 수집하는 것을 통해서, 자바스크립트 엔진은 해당 컨텍스트의 코드가 실행되기 전에도 코드의 식별자들을 모두 다 알 수 있게 됨(호이스팅)

ThisBingding 값을 포함함

function a (x) {
  console.log(x);
  var a = 1;
  var b = 2;
  function foo() {
    console.log('work');
  };
}

a(1);

위의 코드에서, 실행 컨텍스트의 EnvironmentRecord에는 식별자 x, a, b와 함수 foo가 수집

EnvironmentRecord는 현재 실행될 컨텍스트의 대상 코드 내에 어떤 식별자들이 있는지만을 먼저 수집하기 때문에, 변수를 인식할 때 식별자만 끌어올리고 할당 과정은 원래 자리에 순서대로 남겨둠(호이스팅 개념)

 

outerEnvironmentReference

Lexical scope(or static scope)를 기준으로 상위 scope의 Lexical Environment를 참조

즉, 호출되면서 현재 컨텍스트를 생성한 함수가 선언될 당시 컨텍스트의 LexicalEnvironment를 참조

호출된 함수가 선언될 당시의 Lexical Environment를 참조하는 포인터로, 스코프 체인을 가능하게 함

스코프와 스코프체인이 형성

 

scope chain

 - 식별자의 유효범위를 안에서 바깥으로 차례로 검색해나는 것

 - 이를 가능하게 하는 것이 outerEnvironmentReference이다.

 

 

thisBinding

현재 이 컨텍스트가 어떤 this 를 바인딩하고 있는지 정보를 가지고 있음

실행 컨텍스트는 함수를 호출할 때 생기고 실행 컨텍스트가 생길 때 this 값이 결정되기 때문에, this 값은 함수를 호출할 때 결정됨. 즉, 함수 호출 방식에 따라 this 값이 달라지게 됨

기본적으로 this 를 명시하지 않으면 전역객체를 바라보게 됨

js의 this는 양이 방대하기 때문에 나중에 자세히 기록 예정

 

 

자바스크립트의 실행 컨텍스트 (execution context)

[JS] 실행 컨텍스트(Execution Context)

[JS] 실행 컨텍스트

 

 

 

콜 스택(호출 스택)

호출 스택이란, 프로그램에서 우리가 어디에 있는지를 기본적으로 기록하는 데이터 구조

함수를 실행하면 해당 함수의 기록을 스택 맨 위에 추가(Push)

우리가 함수를 결과 값을 반환하면 스택에 쌓여있던 함수는 제거(Pop)

 

자바스크립트는 단일 스레드 프로그래밍 언어이므로, 단일 호출 스택을 가지고 있음

단일 호출 스택이 있다는 뜻은 한 번에 하나의 일(Task)만 처리할 수 있다는 뜻

 

function multiply(x, y) {
    return x * y;
}
function printSquare(x) {
    var s = multiply(x, x);
    console.log(s);
}
printSquare(5);

엔진이 이 코드를 실행하기 전에는 호출 스택이 비어있다.

가장 아랫줄에 printSquare 함수가 실행되면 이후 단계는 다음과 같다.

 

스택 오버플로우

스택의 사이즈를 초과 했을 때 발생하는 오류(특히 재귀를 호출할때 많이 나옴)

function foo() {
    foo();
}
foo();

호출 스택의 함수 호출 수가 호출 스택의 실제 크기를 초과하게 되고, 브라우저는 다음과 같은 오류를 발생시키는 것으로 함수를 종료

 

 

자바스크립트 - 싱글 쓰레드 언어

즉, 한 번에 한 가지 일 밖에 처리할 수 없다는 것을 의미(like, 멀티 테스킹이 안대는 사람)

 

 

단일 호출 스택의 문제점

자바스크립트에서는 하나의 호출 스택만 있기 때문에, 하나의 함수 처리가 엄청 느려서 다른 함수 실행에 지장을 준다면?

 

예를 들어, 브라우저에서 복잡한 이미지 처리를 한다고 생각해보자. 앞서 배운 호출 스택의 동작 방식을 생각 해볼 때, 이미지 처리 작업 스택을 차지하고 있으면 자바스크립트는 후속 작업들을 처리할 수 없다.

 

즉, 현재 실행하고 있는 함수가 있는 경우에 다른 일을 할 수가 없고, 다른 일들이 블락되게 된다. 이렇게 되면 브라우저에서 오래 걸리는 작업이 실행될 경우, 웹 페이지의 UI는 멈춰버리고, 사용자는 어떠한 행동도 할 수 없다.

 

또한, 브라우저가 호출 스택에서 많은 작업을 처리하기 시작하면 꽤 오랜 시간 동안 응답을 멈출 수 있습니다. 대부분의 브라우저는 이 상황에서 웹 페이지를 종료할지 여부를 묻는 오류 메시지를 표시

 

해결방법

비동기 콜백(Asynchronous callbacks)

우리의 코드 일부를 실행하고 나중에 실행될 콜백(함수)를 제공

비동기 콜백은 즉시가 아닌, 특수한 시점에 실행되므로 console.log와 같은 동기 함수와는 다르게 스택 안에 바로 push 될 필요가 없음

 

 

이벤트 큐(Event Queue)와 비동기 콜백의 처리 과정

자바스크립트 실행환경(Runtime)은 이벤트 큐(Event Queue)를 가지고 있다.

이는 처리할 메시지 목록과 실행할 콜백 함수 들의 리스트

 

비동기가 처리되는 과정

1. 우선 버튼 클릭과 같은 이벤트가 발생하면 DOM 이벤트, http 요청, setTimeout 등과 같은 비동기 함수는 C++로 구현된 web API를 호출하며,

2. web API는 콜백 함수를 이벤트 큐(콜백 큐)에 밀어 넣습니다.

3. 그럼 이벤트 큐는 대기하다가 스택이 텅 비는 시점에 이벤트 루프를 돌리게 됩니다(스택에 넣음).

4. 이벤트 루프의 기본 역할은 큐와 스택, 두 부분을 지켜보다가 스택이 비는 시점에 콜백을 실행시켜 주는 것. 각 메시지와 콜백은 다른 메시지가 처리되기 전에 완전히 처리됩니다.

 

진짜! 쉽게 알아보는 자바스크립트 동작 원리

자바스크립트 호출 스택(Call Stack) 이해하기

 

 

 

자바스크립트 은닉화

은닉화란, 직접적으로 변경되면 안되는 변수에 대한 접근을 막는 것(안정적으로 관리)

객체 간의 상호 의존성, 즉 결합도를 낮추는 효과

 

 

함수를 통해 변수의 대한 접근을 은닉화

(function () {
  var a = 'a';
})();

console.log(a); // a is not defined

 

 

 

🐤 실습 과제

 

콘솔에 찍힐 b 값을 예상해보고, 어디에서 선언된 “b”가 몇번째 라인에서 호출한 console.log에 찍혔는지,

왜 그런지 설명해보세요. 주석을 풀어보고 오류가 난다면 왜 오류가 나는 지 설명하고 오류를 수정해보세요.

let b = 1;

function hi () {

const a = 1;

let b = 100;

b++;

console.log(a,b);

}

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

console.log(b); // 1

hi(); // 1,101

console.log(b); // 101

------

// 첫줄에서 let으로 b는 1이라고 할당(선안및 초기화) 해주었고 
// hi함수 안에서 a, b를 1과 100으로 재 선언및 초기화 해주었다

// 그후 b++로 100에 1을 더한 값이 b가 되었지만 
// 이는 함수 안에서 벌어진 일 밖에 영향을 아직 주진 않았다


// console.log(a)는 함수 안에서는 선언 및 초기화가 되었지만,
// 아직 함수 실행 전이라서 에러가 발생한다.

// console.log(b)는 처음에 할당한 b=1이 될것이고

// hi 함수 를 실행 하면서 a,b가 선 언 및 초기화가 되고 b++이 되고 
// 그 안에서 console.log(a, b) 를 해서 1,101이 찍히고

// 마지막 console.log(b)에서 hi함수로 b의 값이 101로 할당되었기 때문에 101이 찍힌다.