javascript) 호이스팅과 ES6 변경점 알아보기 - 1

 

 

javascript) 호이스팅과 ES6 변경점 알아보기

 

1. let, const (호이스팅)

2. 함수 선언식 개선(=> 화살표함수)

3. 템플릿 리터럴

 

(그외... 클래스, 구조분해할당, 전개연산자, forEach, map, reduce는 따로 공부하기)

 

 

 

 

 

자바스크립트 버전 ES5의 문제들

1.중복 선언 허용

2.호이스팅 문제

 

 

 

호이스팅

javascript에서 변수와 함수의 선언문이 먼저 실행되는 기능.

자바스크립트 ES6버전부터 let,const 로 선언된 변수들은 호이스팅은 적용되지만 초기화 전에 접근할 수 없다. 

 

 

 

변수와 함수가 동일하게 호이스팅이 적용되는가?

변수는 선언문만 실행되어 선언 이전에 출력하면 undefiend로 처리되지만,

함수는 선언문+초기화까지 실행되어 선언 이전에 실행하면 정상적으로 실행된다.

 

 

 

예제)

// 변수예제
console.log(myVar); // undefined
var myVar = 5;
console.log(myVar); // 5


// 함수예제
sayHello(); // "Hello, world!"
function sayHello() {
  console.log("Hello, world!");
}

 

 

 

 

왜 변수와 달리 함수만 초기화과정까지 호이스팅되는가?

function키워드로 할당된 함수는 선언, 초기화, 할당이 내부적으로 동시에 진행되기 때문이다.

반면 변수는 선언과 초기화를 하나의 구문으로서 작성해도 내부적으로는 선언과 초기화가 별도로 이루어진다

 

 

예제)

// 변수 선언과 초기화
var tmp = "this is world";


//실제 내부적으로 이루어지는 과정
var tmp;
tmp = "this is world";

 

 

 

 

 

 

왜 let, const로 선언한 변수는 호이스팅되지 않도록 막았는가? (호이스팅을 막는 법= let, const로 함수, 변수 선언하기)

호이스팅으로 초기화되지 않은 변수들을 개발자가 참조할 수 없도록 하기위해서이다.

코드의 예측가능성을 높이기위해 TDZ의 개념이 적용된 것이다.

즉, 원래는 초기화되지 않은 변수에 접근하는 것이 비정상적인 것이기 때문이다.

그리고 자바스크립트의 창시자의 피셜로 호이스팅 자체가 의도된 것이아닌 버그로 생긴 현상이다. 그래서 이를 해결하고자 ES6버전에서 해결하였다.

 

 

 

 

 

 

자바스크립트는 인터프리터 언어인데 어떻게 호이스팅이 일어날 수 있는가?

(런타임에서 한줄 씩 읽는 것이 인터프리터 언어인데 어떻게 밑에서 선언하고 초기화한 변수가 메모리에 올라와 있는가?)

자바스크립트 엔진은 파싱과 실행이라는 2단계를 거쳐 코드를 실행하기 때문이다.

 

 

 

 

 

 

const와 let 

 

둘다 기본적으로 중복선언 문제(var)를 막기 위해 나온 것들이다.

그래서 둘다 재선언은 불가능하다.

그리고 둘다 블록스코프{}를 가진다

 

 

let

변수(변하는 값) 선언 (재할당O)

선언과 값 정의를 따로할 수있다

블록스코프{}를 가진다

 

 

 

const

상수(변하지 않는 값) 선언 (재할당X)

선언시 바로 값을 넣어줘야한다.

블록스코프{}를 가진다

 

 

 

 

 

선언 vs 초기화 vs 할당

 

선언

변수 이름을 정의하는 것
변수에 값을 주지는 않는다.
선언 후에는 변수를 메모리에서 사용할 수 있도록 메모리 공간을 확보합니다.

 

 

초기화

변수의 값을 첫 번째로 설정하는 것.

 

 

할당

이미 선언된 변수에 새로운 값을 넣는 과정.
이미 값이 들어있는 변수에 새로운 값으로 바꿔넣는 과정.

 

 

 

 

 

 

 

2. 화살표 함수(=>)

기존의 함수 표현식을 더 간결하게 작성할 수 있다.

 

 

let func = () => {
    console.log("hello")
}

 

 

 

함수 람다식 축약하기

매개변수가 "1개" 일때는 소괄호 지울수 있다

중괄호 안쪽이 1줄이면 중괄호 지울수 있다

중괄호 지웠는데 남은 한줄이 return문이면 반드시 return문을 지워줘야한다

 

 

// 기존 함수 람다식
let power  = (number) => {
    return number * number
}


// 함수 람다식의 축약형
let power = number => number * number

 

 

 

 

 

3. 템플릿 리터럴(``)

기존에 문자열 ''에 새로운 문자열을 넣기 위해서는 +연산자를 이용해야 했다. 하지만 템플릿 리터럴 ``안에 작성한 문자열은 ${} 문법을 통해 변수형태로 새로운 문자열을 쉽게 넣을 수 있다. 

 

예시)

const name = 'John';
const age = 30;
const greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting);  // "Hello, my name is John and I am 30 years old."