javascript) 호이스팅, var, let, const, 람다식

 

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

 

1.중복 선언 허용

2. 호이스팅 문제

 

 

 

        var num1 = 10

        console.log(num1)

        var num2 = 20

        console.log(num2)

         // 10,20출력

        function func(){

            console.log("첫번째 함수임")

        }

        func()

        function func(){

            console.log("두번째 함수임")

        }

        func()

        // 두번째함수임 2번출력

 

 

호이스팅

ㄴjavascript에 있는 독특한 기능. 

ㄴ변수와 함수의 선언문 (var num1, function( ) { }) 를 파일의 상단으로 끌고올라와서 실행하는 기능

 

 

 

위 코드의 호이스팅 실행순서)

 

var num1

var num2

function func(){

    console.log("첫번째 함수임")

}

function func(){

    console.log("두번째 함수임")

}

 

이 코드들 부터 실행되게 된다

이를 고려해서 아까의 코드실행 결과가 왜 그렇게 나왔는지 다시 생각해보기

 

 

 

 

변수 호이스팅 막기)

ㄴvar대신 let쓰기 

 

let a= 10

console.log(a)

console.log(b)  //에러 발생

let b= 10

 

 

let a= 10

console.log(a)

let b= 10

console.log(b)

//10,10 출력

 

 

 

 

 

함수 호이스팅막기)

ㄴ함수 표현식으로 쓰기.

ㄴ(함수를 변수에 할당하는 식)

 

 

// 함수선언식(기존에 쓰던방식)

function func(){

    console.log("hello")

}

 

 

// 함수표현식(let func까지만 위로 올라감)

let func = function(){

    console.log("hello")

}

 

 

 

 

 

 

 

 

함수 람다식

ㄴ함수 표현식을 더 짧고 간결하게 쓰기위한 방법

ㄴ람다식을 제일 많이 씀

 

let func = () => {

    console.log("hello")

}

 

 

 

 

함수 람다식 축약하기)

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

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

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

 

 

// 기존 함수 람다식

let power  = (number) => {

    return number * number

}

 

 

// 함수 람다식의 축약형

let power = number => number * number

 

 

 

 

 

 

const 와 let 비교하기)

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

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

ㄴ협업,대규모 프로젝트를 할때, 만에하나 모를 실수를 방지하기 위함이다

ㄴ기본적으로는 const를 사용하나, 상황에 따라 값이 바뀌어야할 변수면 let을 쓴다.

 

 

 

let

ㄴ변수를 선언하는 명령어

ㄴ변수는 값이 바뀔수 있다(재할당O)

 

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

ㄴ블록스코프{}를 가진다

 

 

 

const

ㄴ상수를 선언하는 명령어

ㄴ상수는 값이 바뀔 수 없다 (재할당X)

 

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

ㄴ블록스코프{}를 가진다