[JavaScript] 변수 / var키워드 let키워드 const키워드 / 백틱 (`)

자바스크립트 변수

변수(Variable) : 리터럴(값)을 저장하기 위한 저장공간(메모리)의 식별자(이름)
자바스크립트는 변수를 선언하지 않아도 값을 저장하여 사용 가능하지만 변수를 사용하는 것을 권장한다.

형식) var 변수명 = 초기값

변수에 저장되는 값에 따라 변수의 자료형이 자동으로 변환된다.

자바스크립트의 자료형에는 Number(숫자형), String(문자형), Boolean(논리형), Function(함수형), Object(객체형)이 있다.

변수에 저장된 값이 없는 경우 [undefined] 자료형으로 표현된다.

var num;//변수 선언
alert(num);//undifined

변수에 숫자값이 저장된 경우 [number] 자료형으로 표현된다.

var num=10;//변수 선언 및 초기값 저장 
alert(num);//[10] 출력

변수에 문자값이 저장된 경우 [string] 자료형으로 표현된다.
자바스크립트에서 문자형 리터럴(문자값)은 ' ' 또는 " " 기호를 사용하여 표현한다.

var num="10";
alert(num);

+ 연산자를 사용하여 문자값 결합할 수 있다.

alert("num = "+num);

var 키워드로 변수 선언시 동일한 이름의 변수 선언이 가능하다. (기존 변수를 사용하기 때문이다.)
변수의 자료형이 정해져있지 않고 저장되는 값에 따라 자료형이 변환된다.

var num=10;
var num="20";
alert("num = "+num);//[num = 20] 출력

 

var 키워드로 변수를 선언하지 않아도 값을 저장하여 변수로 사용이 가능하다.

num=10;//변수 선언
alert("num = "+num);//[num = 10] 출력

typeof(변수) : 변수의 자료형을 제공하는 연산자

var num=10;
alert(typeof(num));//[number]출력 - 숫자형 변수
num="10";
alert(typeof(num));//[string]]출력 - 문자형 변수

변수에 논리값(false 또는 true)이 저장된 경우 [boolean] 자료형으로 표현된다.

var num=false;
alert(typeof(num));//[boolean]출력 - 논리형 변수

자바스크립트 자료형에는 function 변수가 존재한다.
자바스크립트 변수에는 함수 저장이 가능하다. - 자료형 : fucntion 

var fun=function() {
	alert("함수의 명령 실행");
}
alert(typeof(fun));//[function]출력 - 함수형 변수

자바스크립트 변수에는 객체 저장이 가능하다. - 자료형 : object 

var obj=new Object();
alert(typeof(obj));//[object]출력 - 객체형 변수

---

ES6(ECMAScript6)에서는 let 키워드 또는 const 키워드를 사용하여 변수를 선언할 수 있다.

var키워드로 변수를 선언한 경우 동일한 이름의 변수 선언이 가능하며 초기값 변경이 가능하다.

var num=100;
alert("num = "+num);//num = 100
	
var num=200;
alert("num = "+num);//num = 200

let 키워드로 변수를 선언한 경우 동일한 이름의 변수 선언이 불가능하고 초기값 변경은 가능하다. 

let num=100;
alert("num = "+num);//num = 100
	
let num=200;//에러 발생

let 키워드로 변수를 선언한 경우 초기값 변경이 가능하다.

let num=100;

num=200;
alert("num = "+num);//num = 200

const 키워드로 변수를 선언한 경우 동일한 이름의 변수 선언, 초기값 변경 모두 불가능하다. - 상수 변수 (Constant Variable) 

const num=100;
alert("num = "+num);//num = 100
	
const num=100;//에러발생
num=200;//변경 불가능

선택문 또는 반복문의 블럭 내부에서 선언된 var 변수는 블럭 외부에서 사용 가능하지만 
let, const 변수는 블럭 종료시 자동 소멸되기 때문에 블럭 외부에서 사용이 불가능하고 블럭 내부에서만 사용 가능하다.

if(true) {
		var num1=100;
		let num2=200;
		const num3=300; 
		
		alert("num1= "+num1+", num2= " + num2 + ", num3= " +num3);
	}
	
alert("num1= "+num1+", num2= " + num2 + ", num3= " +num3);//에러 발생

함수 내부에 선언된 변수는 함수 종료시 무조건 소멸된다.

function display() {
	var num1=100;
	let  num2=200;
	const num3=300;
		
	alert("num1= "+num1+", num2= " + num2 + ", num3= " +num3);
}
	
display();//함수 호출 
alert("num1= "+num1+", num2= " + num2 + ", num3= " +num3);//에러 발생

---

백틱(`) 

문자값을 표현하기 위해 ' ' 또는 " " 기호 대신 ` ` 기호를 사용하여 표현이 가능하다. - ES6에서 추가된 기능
백틱(`) 기호로 표현된 문자값에서는 ${변수} 형식으로  변수값을 제공받아 출력이 가능하다.

let num=100;

alert("num = "+num);
alert(`num = ${num}`);