변수 문법 정리
var, let, const
이 셋은 선언, 할당, 범위 속성에서 차이가 있다.
| 재선언 | 재할당 | 범위 | |
| var | O | O | function 안에서 존재 |
| let | X | O | { } 안에서만 존재 |
| const | X | X | { } 안에서만 존재 |
const 는 constant, 변하지 않는 값, 상수라는 뜻이다.
하지만 const로 오브젝트를 할당하고 나서 그 안의 오브젝트를 재할당하는 것은 가능하다(말이 어렵다)
수정 불가능한 오브젝트를 만드는 방법
Object.freeze(사람); //수정불가능한 오브젝트를 만드는 방법하지만 쓸 일이 없을 것 같다.
var 이름 = 'kim';
이름;
var 이름은 선언이고
= 다음의 'kim';은 할당이 된다.
➡즉 왼쪽은 선언, 오른쪽은 할당
변수의 Hoisting(호이스팅) 현상
: 변수의 선언을 변수 범위 맨위로 끌고오는 현상(자바스크립트 언어 자체가 그렇다고 한다)
함수 선언도 Hoisting이 된다.(단, 선언만 Hoisting이 된다. 할당은 아님!)
변수 동시에 여러개 만들기(=선언 여러개 한 번에 하기)
var 나이, 이름, 성별;, 치고 이어주면 된다.
할당도 동시에 여러개 할 수 있다.
var 나이=20, 이름='김', 성별='남자';
전역변수 : 모든 곳에서 쓸 수 있는 변수
이해하기 쉽게 <script></script> 안에서 쓸 수 있는 변수라고 생각하자.
//전역변수 : 모든 곳에서 쓸 수 있는 변수
var 철수 = '사람'; //얘는 전역변수
function 함수(){
console.log(나이);
var 이름 = "김"; //얘는 지역변수
}
함수(); //함수 선언만 하면 함수가 작동되지 않는다. 함수();를 해서 함수를 써줘야 된다.window로 전역변수 만들기
window는 자바스크립트 기본 함수를 담은 {오브젝트}다.
window.이름 = 'A';
변수 이해 예시
if(true){
let a = 1;
var b = 2;
if(true){
let b = 3;
}
//let 은 {}안에서만 살기 때문에 아래 콘솔에서 b는 2가 나옴
console.log(b);
}let의 범위는 { } 안이기 때문에 console.log의 위치에 따라 b의 값이 다르다.
변수연습문제
변수 연습문제 1 : 아래와 같이 코드를 쓰면 콘솔창에 뭐가 나올까?
//문제1
함수();
function 함수(){
console.log(안녕);
let 안녕 = 'hello!';
}답 :
Uncaught ReferenceError: Cannot access '안녕' before initialization
(번역 : '안녕'에 아무것도 없는데요?)
왜? :
let과 const는 Hoisting시 undefined가 자동으로 할당되지 않는다.
이걸 temporal deadzone 또는 uninitialized 라고도 한다.
그러니까 let 안녕;은 호이스팅 돼서 맨위로 올라갔어도 뒤의 = 'hello';가 없는 상태라는 뜻.
var는 호이스팅 시 undefined가 자동으로 할당된다.
그래서 어쨌든 저 hello!를 보기 위해선 아래와 같이 바꿔줘야 한다.
함수();
function 함수(){
let 안녕 = 'hello!';
console.log(안녕);
}let과 console.log의 위치를 바꾼 게 전부다.
변수 연습문제 2 : 아래와 같이 코드를 쓰면 콘솔창에 뭐가 나올까?
//문제2
함수();
var 함수 = function(){
console.log(안녕);
var 안녕 = 'hello!';
}답 :
Uncaught TypeError: 함수 is not a function
(번역 : 함수는 function이 아닌데요? ➡ 함수();를 쓰고 싶으면 함수를 function으로 만들어와야지 뭐하는 거임?)
왜? :
var 함수 = function 어쩌구를 호이스팅하면 var 함수; 가 맨위로 올라가는 것이지,
= 다음에 애들까지 주렁주렁 달고 올라오지 않는다.(어이가 없다)
그래서 함수가 function으로 인식 자체가 안 되는 것이다.
중요한 것은 Hoisting은 선언 부분만 되고 할당 부분은 안 된다는 점!
hello!를 보려면 아래처럼 바꿔야 한다.
var 함수 = function(){
var 안녕 = 'hello!';
console.log(안녕);
}
함수();함수();를 내려주고 console.log(안녕);도 var 밑으로 내려준다 끝.
변수 연습문제 3 : 아래와 같이 코드를 쓰면 콘솔창에 뭐가 나올까?
//문제3
let a = 1;
var 함수 = function() {
a = 2;
}
console.log(a);답 :
1
왜? :
var 함수 ~~ 어쩌구 부분은 지금 선언만 되고 실행은 되지 않은 상태기 때문.
a = 2를 보고 싶으면 console.log(a); 전에 함수(); 를 써서 함수를 실행시켜주면 된다.
변수 연습문제 4 : 아래와 같이 코드를 쓰면 콘솔창에 뭐가 나올까?
//문제4
let c = 1;
var d = 2;
window.c = 3;
window.d = 4;
console.log(c + d);답 :
5
왜? :
c = 1, d = 4 기 때문에 1 + 4 = 5
console.log(c)를 쓰게 되면 자기랑 가장 가까운 c를 찾아서 쓴다. window.c는 전역변수기 때문에
자기랑 좀 더 가까운 let c = 1;을 찾아서 쓰는 것이다. (=>나도 이해를 잘 못함 이부분은)
변수 연습문제 5 : 아래와 같이 코드를 쓰면 반복문이 제대로 작동이 안 되는 이유?
setTimeout(function() { console.log(1); }, 1000 );
setTimeout(function() { console.log(2); }, 2000 );
setTimeout(function() { console.log(3); }, 3000 );
setTimeout(function() { console.log(4); }, 4000 );
setTimeout(function() { console.log(5); }, 5000 );🔼얘를 쓰고 싶어서 아래와 같이 반복문으로 축약을 했다.
for (var i = 1; i < 6; i++) {
setTimeout(function() { console.log(i); }, i*1000 );
}답 :
var가 아니라 let을 써야 한다.
var를 쓰게 되면 i=6이 전역변수로 남아서 i = 1,2,3,4,5가 실행되지 않는다.
변수 연습문제 6 : 아래와 같이 코드를 쓰면 반복문이 제대로 작동이 안 되는 이유?
//문제6 0번째 버튼을 누르면 0번째 모달창, 1번째 버튼을 누르면 1번째 모달창을 띄우고 싶다.
var 버튼들 = document.querySelectorAll('button');
var 모달창들 = document.querySelectorAll('div');
버튼들[0].addEventListener('click',function(){
모달창들[0].style.display = 'block';
});
버튼들[1].addEventListener('click',function(){
모달창들[1].style.display = 'block';
});
버튼들[2].addEventListener('click',function(){
모달창들[2].style.display = 'block';
});🔼얘를 쓰고 싶어서 아래와 같이 반복문으로 축약을 했다.
//위 코드를 반복문으로 축약했다. 근데 안 된다. 왜일까?
for (var i = 0; i < 3; i++){
버튼들[i].addEventListener('click', function(){
모달창들[i].style.display = 'block';
});
}답 :
5번 문제와 답이 같다. var가 아니라 let을 써야 한다.
var를 쓰게 되면 i=3이 전역변수로 남아서 i = 0,1,2가 실행되지 않는다.