๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐ŸŒŒ | WEB DEV/Vanilla JS

JS_๋ฌธ๋ฒ• (3)_ํ˜ธ์ด์ŠคํŒ…

by KASSID 2022. 2. 16.

๋ชฉ์ฐจ

    728x90

    ํ˜ธ์ด์ŠคํŒ… ์ด์Šˆ

    Hoisting = ๋Œ์–ด์˜ฌ๋ฆฐ๋‹ค

     

    ์ผ๋ฐ˜์ ์ธ ์–ธ์–ด = ํ•จ์ˆ˜, ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธ ํ›„ ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅ

    JS = ์„ ์–ธ ์ „์— ์‚ฌ์šฉ์„ ํ•ด๋„ ์—๋Ÿฌ๋ฅผ ๋‚ด์ง€ ์•Š๋Š”๋‹ค...!


    ์˜ˆ์‹œ

    1. var ํ‚ค์›Œ๋“œ

    var์€ let๊ณผ ๊ฐ™์€ ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธ์— ์“ฐ์ด๋Š” ํ‚ค์›Œ๋“œ์ด๋‹ค.

    ํ•˜์ง€๋งŒ ๊ฐ™์€ ์ด๋ฆ„์˜ ๋ณ€์ˆ˜๋ฅผ ์žฌ์„ ์–ธํ•ด๋„ ์˜ค๋ฅ˜๊ฐ€ ๋‚˜์ง€ ์•Š๋Š”๋‹ค.

    var a = 1;
    var a = 2;
    console.log(a)
    
    >>>
    2
    ======================
    let a = 1;
    let a = 2;
    console.log(a)
    
    >>>
    SyntaxError: Identifier 'a' has already been declared

     

    ํ˜ธ์ด์ŠคํŒ…์ด ์ผ์–ด๋‚˜๋Š” ์˜ˆ์‹œ

    console.log(a)
    a = 10;
    console.log(a)
    var a = 1
    console.log(a)
    
    >>>
    undefined
    10
    1

     

    2. ํ•จ์ˆ˜

    showData();
    
    function showData() {
        console.log("Hello")
    }
    
    >>>
    Hello

    ํ•จ์ˆ˜์˜ ๊ฒฝ์šฐ ์—ญ์‹œ

    ์„ ์–ธ ์ „์— ํ˜ธ์ถœ์„ ํ•ด๋„

    ์˜ค๋ฅ˜๊ฐ€ ๋‚˜์ง€ ์•Š๋Š”๋‹ค.


    Hoisting ์ด์œ 

    JS๋Š” ํŒŒ์ผ์„ ์ปดํŒŒ์ผํ•  ๋•Œ

    ๋‹ค์Œ์˜ ๊ณผ์ •์„ ๊ฑฐ์นœ๋‹ค.

     

    1. var๋กœ ์„ ์–ธ๋œ ๋ณ€์ˆ˜๊ฐ€ ์žˆ๋Š”์ง€ ํ™•์ธ
    2. ํ•จ์ˆ˜๊ฐ€ ์žˆ๋Š”์ง€
    3. 1-2๋ฒˆ์— ํ•ด๋‹น๋˜๋Š” ๊ฒƒ๋“ค์„ ์ตœ์ƒ๋‹จ๋ถ€์—์„œ ๋จผ์ € ์„ ์–ธ์„ ํ•œ๋‹ค.
    4. ์ „์ฒด ์ฝ”๋“œ ์‹คํ–‰

    ์ด๋•Œ ์ƒ๋‹จ๋ถ€์—์„œ ์„ ์–ธ์„ ํ•  ๋•Œ๋Š” ์ดˆ๊ธฐํ™”๋Š” ๋˜์ง€ ์•Š์€ ์ƒํƒœ์ด๋‹ค.

     

    ๋ฌธ์ œ์ 

    ์ž์‹ ์ด ์˜๋„ํ•˜์ง€ ์•Š์€ ๊ฒฐ๊ณผ๋ฅผ ๋‚ด๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ๋‹ค.

    (์ž์„ธํ•œ ๊ฒƒ์€ ๋‚˜์ค‘์—!)

     

    Hoisting ํ•ด๊ฒฐ๋ฒ•

    1. ๋ณ€์ˆ˜ ์„ ์–ธ

    let, const๋ฅผ ์ด์šฉํ•œ๋‹ค.

     

    2. ํ•จ์ˆ˜ ์„ ์–ธ

    ํ•จ์ˆ˜ ํ‘œํ˜„์‹์„ ์ด์šฉํ•œ๋‹ค!

    // ํ•จ์ˆ˜ ํ‘œํ˜„์‹
    let getData = function() {
        console.log("Hello")
    }
    
    // ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ
    function getData() {
        console.log("Hello")
    }

    ํ•จ์ˆ˜ ํ‘œํ˜„์‹์˜ ๊ฒฝ์šฐ

    let, const๋กœ ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•œ ๋’ค 

    ๊ทธ๊ณณ์— ํ• ๋‹น์„ ํ•˜๋Š” ๊ฒƒ์ด๋ฏ€๋กœ

    ๋ณ€์ˆ˜๋กœ ์ธ์ง€๋ฅผ ํ•œ๋‹ค.

     

    ๋”ฐ๋ผ์„œ ์„ ์–ธ์ด ํ˜ธ์ถœ๋ณด๋‹ค ๋’ค์— ์˜ค๋ฉด

    ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒ์„ ํ•œ๋‹ค.

    ๋Œ“๊ธ€