[JavaScript] 4. var 키워드와 호이스팅에 대한 이해

2024년 07월 18일

Song hyun
작성자
2024.07.18.오전10:39

728x90

[JavaScript] 4. var 키워드와 호이스팅에 대한 이해

1. var 키워드와 호이스팅

2. ES6와 let,const 키워드

(1) let 키워드

(2) ES6의 주요 특징

3. 예제 코드

(1) 호이스팅 확인하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>index1.html</h2>
    <div>
        <p><span>자바스크립트 형변환에 대해서 살펴보자!</span></p>
    </div>
    <script>
          console.log(hNum);
        const num = 5;
        const str="10";

        const result=num+str;
        console.log(result); // 5+"10" => 문자열로 자동 형변환

        const num1=10;
        const str1='2';

        const multiplyResult = num1*str1; // 곱셈 연산이라 문자열 타입을 숫자형으로 변환하여 곱셈
        console.log(multiplyResult);
        console.log("-------------------");

        const divideResult = num1 / str1; // 나눗셈 연산이라 문자열 타입을 숫자형으로 변환하여 나눗셈
        console.log(divideResult);
        console.log("-------------------");

        const moResult = num1 % str1; // 나머지 연산이라 문자열 타입을 숫자형으로 변환하여 나머지 연산 처리
        console.log(moResult);

        var hNum=10;
      

    </script>
</body>
</html>

(2) 변수 호이스팅과 함수 호이스팅

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>index2.html 파일입니다!</h2>
    <script>
        //ES 5에서 var 키워드를 많이 사용했다. (호이스팅 동작을 하는 녀석)

        var n1=10;
        var n2;
        var n3=null;

        // var 키워드를 사용하면 호이스팅(Hoisting) 동작이 발생한다.
        // 1. 변수 호이스팅
        // 2. 함수 호이스팅

        // 1. 변수 호이스팅
        var  hValue=10; // 변수의 이름만 해당 스코프의 맨 위로 끌어 올려집니다. 
        console.log("============");

        sayHello(); // 함수 선언문은 해당 스코프의 맨 위로 올라간다!
        // 2. 함수 호이스팅
        function sayHello(){
            console.log("안녕 스크립트야!");
        }

        console.log("-----------------");
        console.log(sayHi);

        sayHi(); // 함수 표현식은 호이스팅 되지 않는다.

        // 3. 주의!!!
        // 함수 표현식은 호이스팅되지 않는다!

        // 자바스크립트는 함수를 변수에 담을 수 있다. 
        var sayHi = function() {
            console.log("sayHi~~~~");
        }

</script>
</body>
</html>

728x90

'HTML,CSS, JS > JavaScript' 카테고리의 다른 글

[JavaScript] 6. 객체의 종류와 생성 방법 (0)	2024.07.19
[JavaScript] 5. ES6와 let (0)	2024.07.18
[JavaScript] 3. 자바스크립트의 형변환 (0)	2024.07.18
[JavaScript] 2. 자바스크립트의 자료형과 연산자 (0)	2024.07.18
[JavaScript] 1. 자바스크립트란? (0)	2024.07.18

다음 글이 없습니다.

이전 글이 없습니다.

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

[JavaScript] 4. var 키워드와 호이스팅에 대한 이해

'HTML,CSS, JS > JavaScript' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역