(React) 기초 - 변수 선언하기

1. var : 일반적인 변수. 변경 가능

var pizza = true;
pizza = false;
console.log(pizza); // false

 

2. const : 값을 변경할 수 없는 변수이다. 

 

3. let : 구문적인 변수 영역 규칙

 

이 코드에서 if 블록안의 topic 변수를 변경하면 if 블록 밖의 topic 변수 값도 변경된다.

var topic = "자바스크립트";
if (topic) {
	var topic = "리엑트";
    console.log('블록', topic); // 블록 리엑트
}

console.log('글로벌', topic); // 글로벌 리엑트

 

let 키워드를 사용하면 변수의 영역을 코드 블록 안으로 한정시킬 수 있다. let을 사용하면 블록 안에서 글로벌 변수를 보호할 수 있다. 

var topic = "자바스크립트";

if (topic) {
	let topic = "리엑트"
    console.log('블록', topic); // 블록 리엑트
}

console.log('글로벌', topic); // 글로벌 자바스크립트

 

루프 카운터 변수 i를 var로 선언하면, 이 루프에서는 컨테이너 안에 5개의 div를 만든다. 각 div에는 그 div의 인덱스를 경고창에 표시해주는 onclick 핸들러가 할당된다. for 루프 안에서 i를 선언해도 글로벌 영역에 i가 생긴다. 그리고 i가 5가 될 때까지 for 루프를 돈다. 여러분이 5개의 div 박스 중 어느것을 클릭하건 i의 값은 글로벌 변수 i에 있는  5이기 때문에 인덱스는 모두 같다.

const container = document.getElementById('container');
let div;
for ( let i=0; i<5; i++) {
	div = document.createElement('div');
    div.onclick = function() {
    	alert('이것은 박스 #: ' + i + '입니다.');
    };
    container.appendChild(div);
}

// 모든 box가 #5로 표시

 

 

루프 카운터 변수 i를 let으로 선언하면 i의 영역이 블록으로 제한된다. 

const container = document.getElementById('container');
let div;
for (let i=0; i<5, i++) {
	div = document.createElement('div');
    div.onclick = function() {
    	alert('이것은 박스 #: ' + i + '입니다.');
    };
    container.appendChild(div);
}

// This is box #0 부터 표시

 

 

4. 템플릿 문자열 : 문자열 연결을 대신하여 템플릿 문자열을 사용할 수 있다.

console.log(lastName + ", " + firstName + " " + middleName);

 

템플릿에서는 변수를 ${}에는 값을 만들어내는 자바스크립트 식이라면 어떤 것이든 들어갈 수 있다. 템플릿 문자열은 공백을 유지한다. 

console.log('${lastName}, ${firstName} ${middleName}');