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 |