변수의 유효범위의 차이
지역변수 - 함수안에서 선언되어 함수안에서만 사용
전역변수 - 함수밖에서도 유효한 값
<!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>
<script>
var num1 = 10;
if(num1 === 10) {
var num1 = 100;
var num2 = 200;
}
console.log(num1);
console.log(num2);
for(var i = 1; i <= 10; i++) {
console.log("hello world");
}
console.log(i) //11 - i가 살아있음
//////////////지역과 전역을 나누는 기준은 함수///////////////
function add() {
var x = 1; //지역변수
}
add();
//console.log(x);
console.log("--------------------------------------------------")
//let변수 - es6
//let - 스코프가 중괄호, 변수의 중복 선언 x
let a = 10;
//let a = 20;
if(a === 10) {
let b = 100; //지역변수
}
console.log(b);
</script>
</body>
</html>
클로저
<!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>
<script>
//클로저 라는 개념 몰라도, 일단 사용하는데 큰 문제 없음
//렉시컬스코프 - 함수가 선언된 위치에 따라서 변수참조가 달라진다.
// 1st
// var a = 1;
// function func1() {
// a = 10;
// console.log(a); //10
// }
// func1();
/////////////////////////////////////////////////////////////////////
// var b = 1;
// function func1() {
// var b = 100;
// func2();
// }
// function func2() {
// console.log(b); //1 -
// }
// func1();
///////////////////////////////////////////////////////////////////
// 3nd
// var c = 1;
// function func1() {
// var c = 100;
// func2();
// function func2() {
// console.log(c); //100 - 함수 선언 위치에 따라 참조하는 변수가 달라진다.
// }
// }
// func1();
////////////////////////////////////////////////////////////////////////
//클로저를 사용해서 a변수를 함수 밖에서 사용할 수 있도록 할거야
//클로저는 내부에 선언된 함수를 이용해서 외부함수 바깥에서 접근할 수 있는 환경을 만들어준다.
//getter, setter
// function aaa() {
// var a = 1;
// // var x = function() {
// // return a;
// // }
// // return x;
// return function() {
// return a;
// }
// } //a의 사용범위는 여기서 끝(지역변수)
// var f = aaa()
// console.log( f() )
//console.log(f)
/////////////////////////////////////////////////////////////////////////////////////////
// function bbb() {
// var count = 0;
// return ++count;
// }
// console.log( bbb() ) // 1
// console.log( bbb() ) // 1
// console.log( bbb() ) // 1
// console.log( bbb() ) // 1
// console.log( bbb() ) // 1
function bbb() {
var count = 0; //private변수
return function() {
return ++count;
}
}
var ff = bbb()
console.log( ff() ) //1
console.log( ff() ) //2
console.log( ff() ) //3
console.log( ff() ) //4
console.log( ff() ) //5
</script>
</body>
</html>'JS > JS-basic' 카테고리의 다른 글
| JS - 객체 (0) | 2024.01.28 |
|---|---|
| JS -클로저 은닉 (0) | 2024.01.28 |
| JS-함수,익명함수,즉시실행함수, (0) | 2024.01.28 |
| JS - 반복문 , 객체 담기 (1) | 2024.01.28 |
| JS -조건문 (0) | 2024.01.28 |
