✔ var / let / const (6강)
선언과 할당
변수
자료를 임시로 저장하는 공간
선언
변수를 만들겠다고 선언
var age;
let name;
const gender;할당
만들어 놓은 변수에 값을 집어넣는 것
let age=10;var
재선언O / 재할당 O / 범위 function
var name = "kim"; var name = "ko"; // 재선언 o name = "kang"; // 재할당 o console.log(name);
function ediya(){ // 사용 범위가 function
var coffie = "americano";
console.log(coffie); // 가능
}
//console.log(coffie); // not defined
## let
> 재선언X / 재할당 O / 범위 : 모든 중괄호
```js
let age = 20;
age=30;
console.log(age);
if(true){ // 범위는 중괄호
let fruit = "apple";
}
// console.log(fruit); not definedconst
재선언X / 재할당 X / 범위 : 모든 중괄호
const addr = '서울'; // const addr =' 전주'; 재선언 불가 // addr = "광주"; 재할당 불가 if(true){ // 범위는 중괄호 const animal = "tiger"; } // console.log(animal); not defined
const 변수에 오브젝트
const 변수에 Object를 담으면 Object 내의 데이터 변경 가능
- 변수를 재할당 한 것이 아니고 값을 변경하는 것임
const person = {title : 'plus'} person.title='minus' // 재할당이 아니라 값을 변경하는것 o console.log(person);
### Object.freeze()
- 변경 불가능한 오브젝트 만들고 싶을 때 사용하는 자바스크립트 기본 함수
- but. 오브젝트 내의 오브젝트까지 freeze해주지 않음
```js
const phone = {brand : "apple"};
Object.freeze(phone); // 오브젝트 내용 바꿀 수 없음
phone.brand = 'galaxy'
console.log(phone); // apple✔ Hoisting / 전역변수(7강)
Hoisting
: 자바스크립트는 변수나 함수를 선언하면 Hoisting 연상이 일어남
변수나 함수의 선언 부분을 변수의 범위 맨 위로 끌고가서 가장 먼저 해석하는 것
함수 내 변수를 만들었을 때
function person(){
console.log('hello');
var name = 'Kim';
}해석하는 순서는
function person(){
var name;
console.log('hello');
name = 'Kim';
}즉,
console.log(name); // undefined (선언이 되어있으나 값이 할당되지 않음)
var name = 'Kim';
console.log(name); // kimlet과 const의 호이스팅
let, const 변수는 Hoisting 되기는 하지만 undefined라는 값이 할당되지 않음 => error
- 즉, initialization 해주지 않음
- 선언과 할당 사이에 시간차가 있기 때문
a();
function a(){
console.log(안녕); // error : let, const는 호이스팅 시 undefined 자동으로 할당 안 됨
let 안녕 = 'hello'
}전역변수
변수의 특징 (closure)
: 바깥에 있는 변수는 안쪽에서 자유롭게 사용가능 (참조 가능)
- 함수(){} 안쪽에서 바깥쪽에 있는 age라는 변수를 가져다 쓸 수 있음
함수(){} 안쪽에 age라는 변수 정의가 있으면 함수 안에 있는것을 사용하지만
없으면 바깥에 있는 변수를 가져다가 사용 함
let age = 30;
function person(){
console.log(age); // 30 바깥은 변수는 안에서 사용 가능
}
person();전역변수
: 모든 함수나 if나 for 내부에서 공통적으로 사용할 수 있는 (참조할 수 있는) 변수
- 범위 바깥쪽에 변수를 선언하면 모든 함수, if, for에서 사용 가능
let age = 30; // 전역변수
function person(){
console.log(age);
}
person();window
- window라는 오브젝트는 자바스크립트 기본 함수(alert, getElementById 등)를 보관하는 큰 오브젝트
- 전역변수를 만들면 window에도 보관이 됨(var 키워드만)
<script>
var age = 20;
console.log(age); // 20
console.log(window.age); // 20
</script>- 전역변수를 엄격하게 관리하거나 구분짓고 싶을때
→ 전역변수를 만들거나 사용할 때 window 사용
// window로 전역변수 만들기
window.addr = "서울"; // 전역변수 만들기
console.log(addr);
console.log(window.addr);// 전역변수 사용
window.addr="전주" // 전역변수 변경예제
if(true){
let a = 1;
var b = 2;
if(true){
let b = 3;
console.log(b); // 3 : let 범위가 중괄호
}
console.log(b); // 2
}✔ 변수 연습문제 (8-9강)
1번
let, const 변수는 Hoisting 되기는 하지만 undefined라는 값이 할당되지 않음 => error
- 즉, initialization 해주지 않음
- 선언과 할당 사이에 시간차가 있기 때문
a();
function a(){
console.log(안녕); // error : let, const는 호이스팅 시 undefined 자동으로 할당 안 됨
let 안녕 = 'hello'
}- var는 undefined
aa();
function aa(){
console.log(안녕); // undefined : var는 undefined 자동 할당
var 안녕 = 'hello'
}2번
b();
var b = function(){ // b is not a function : 선언부만 호이스팅 되기 때문에
console.log(안녕);
let 안녕 = "hello";
}선언부인 var b; 만 위로 호이스팅 되기 때문에 b가 함수가 아니라는 error가 뜸
3번
let a = 1;
var func = function(){
a = 2;
console.log(a)
}
console.log(a); // 1 :함수를 실행하지 않았기 때문
func(); // 2 : 함수를 실행4번
let a = 1;
var b = 2;
window.a = 3;
window.b = 4;
console.log(a + b); // 1+4 = 5-
var b = 2와 window.b=4는 거의 동일한 기능을 하는 코드
→ b가 4로 재할당 되었다고 볼 수 있음 -
but. let a = 1로 할당하고 글로벌 변수로 3을 할당하면
→ a를 사용할 때 조금 더 범위가 작고 가까운 1을 참조해서 사용함
5번
var로 반복문을 선언하면 반복문이 실행된 후 i값이 5로 변한 상태로 종료됨
이후 i값을 console로 찍으려고 하니 전역변수 i = 5 밖에 없어 5가 출력됨
for (var i = 1; i<=5; i++){
setTimeout(function(){
console.log(i) // 반복문이 도는 것과 동시에 실행되는 코드가 아님
}, 1000*i);
} // 반복문이 다 돈 후 전역변수 var i는 5로 남아있음
// => var는 함수 스코프를 가지고 있어 반복문이 다 돈 후 i를 찾는데 5가 되어있음
let은 번위가 중괄호기 때문에 i값이 중괄호로 남아있어 1, 2, 3, 4, 5를 출력함
for (let i = 1; i<=5; i++){
setTimeout(function(){
console.log(i)
}, 1000*i);
} // let의 범위는 {} 이기 때문에 반복문 안에 let i =0라는 참조가능한 변수가 선언됨6번
마찬가지로 addEventListener의콜백함수 내의 modals[i].style.display = 'block';는
반복문과 동시에 실행되지 않음
반복문 해석 후 버튼을 클릭 했을 때 modals[i].style.display = 'block';가 발동되는데
i 값을 사용하고 싶어서 찾았으나 이미 3이 저장된 i값밖에 없음
<div style="display : none">모달0</div>
<div style="display : none">모달1</div>
<div style="display : none">모달2</div>
<button>버튼0</button>
<button>버튼1</button>
<button>버튼2</button>
<script>
var buttons = document.querySelectorAll('button');
var modals = document.querySelectorAll('div');
for(var i=0; i<3; i++){
buttons[i].addEventListener('click', function(){
modals.forEach(function(modal){
modal.style.display="none";
});
modals[i].style.display="block";
})
}
</script>따라서 변수범위가 중괄호인 let으로 사용
<div style="display : none">모달0</div>
<div style="display : none">모달1</div>
<div style="display : none">모달2</div>
<button>버튼0</button>
<button>버튼1</button>
<button>버튼2</button>
<script>
var buttons = document.querySelectorAll('button');
var modals = document.querySelectorAll('div');
for(let i=0; i<3; i++){
buttons[i].addEventListener('click', function(){
modals.forEach(function(modal){
modal.style.display="none";
});
modals[i].style.display="block";
})
}
</script>