변수 문법 정리

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가 실행되지 않는다.