변수와 데이터 타입 / 지역변수와 전역변수 / var let const 차이 / 호이스팅 (Hoisting)

변수

프로그램 실행 중에 값을 저장하기 위한 메모리 내의 임시 기억장소

식별자 사용 규칙 (변수명, 함수명 등)

변수는 문자와 숫자로만 구성
특수문자는 $와 _만 사용
첫 글자는 숫자가 될 수 없음
한글 사용 가능하긴 하나, 영문 사용 권장
예약어(키워드)는 사용할 수 없음
대소문자 구별
가급적 상수는 대문자로 선언
읽기 쉽고 이해할 수 있도록 선언

변수 선언

var
let (ES6 이후 보완하기 위해 추가된 변수 선언 방식)
const (ES6 이후 보완하기 위해 추가된 변수 선언 방식)
변수를 필요한 곳에 사용하면 자동으로 생성되기 때문에 반드시 선언하지 않아도 됨
변수의 데이터 타입은 실행 시 결정 (동적 타이핑)
명시적으로 선언하는 경우에는 예약어 var 사용 (명시적 선언 권장)

//명시적 선언
var total;

//여러 개 선언 가능
var name, address;

// 변수 초기화 (선언과 동시에 값 저장)
var price = 10000;
var name = “홍길동”;
tel = “010-1234-1234”;

var와 let과 const 차이

var

function 단위의 scope ( = 함수 스코프 : 함수 내에서 선언된 변수만 지역변수 - if문, for문 등은 함수 아님 혼동 X)
동일 변수명 여러 개 선언해서 사용해도 오류 없음 (한 번 선언된 변수를 다시 선언할 수 있다)
선언하기 전에 사용 가능
-> var로 선언한 모든 변수는 코드가 실제로 이동하지는 않지만 최상위로 끌어올려진 것처럼 동작함 (호이스팅)
var는 선언과 초기화가 동시에 되어, 할당 전에 호출해도 에러를 내지 않고 undefined 반환

let

{ } (block) 단위의 scope ( = 블록 스코프 : 모든 코드 블록 내에서 선언된 변수(지역변수)는 코드 블록 내에서만 유효하며, 외부에서는 접근 불가능하다는 의미)
한 번 선언 후에 다른 값으로 변경 가능
최초로 선언하는 모든 변수에 let 붙이면 이미 사용되고 있는 변수일 경우 에러를 발생시켜 알려줌
let은 선언 단계와 초기화 단계가 분리되어 진행
-> 호이스팅 되면서 선언 단계가 이루어지지만, 초기화는 실제 코드에 도달했을 때 이루어지기 때문에 reference error 발생

const

절대로 바뀌지 않는 상수
상수명 대문자 선언 권장
const로 선언된 상수를 바꾸려고 하면 에러 발생
선언과 할당이 동시에 되어야 함

=> 자바스크립트에서 변수를 선언할 때는 변하지 않는 값은 const, 변할 수 있는 값은 let으로 선언

의도치 않은 동작을 강제할 수 있음

(Tip : 모든 변수를 const로 선언하고, 나중에 변경될 여지가 있는 변수만 let으로 바꿔줌)

var let 차이 예제

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Javascript </title>
		<script type="text/javascript">
			sum=0;
			for(var i=0; i<10; i++) {
				sum+=i;
			}
			console.log(i); // for문 밖에서 i 사용 가능
			
			sum=0;
			for(let i=0; i<10; i++) {
				sum+=i;
			}
			console.log(i); // for문 밖에서 i 사용 불가 : 블록 안에서만 사용 가능
		</script>
	</head>
	<body>
		
	</body>
</html>

const 값 변경 불가 예제

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Javascript </title>
		<script type="text/javascript">
			// const : 상수 -> 값의 변경 불가능
			let name = "홍길동";
			console.log(name);
			
			name = "이몽룡";  // let으로 선언된 변수는 값 변경 가능
			console.log(name);
			
			const address = "서울";
			console.log(address);
			
			address = "부산"; // const로 선언된 변수는 값 변경 가능
			console.log(address);
		</script>
	</head>
	<body>
		
	</body>
</html>

변수의 유형

멤버변수 (전역변수)

전역범위(<script> 태그 바로 아래)에 명시적으로 선언되거나
명시적으로 선언하지 않고 사용하는 변수
자바스크립트 코드 내 모든 곳에서 사용 가능

지역변수

함수 내에서 var 또는 let을 붙여서 선언된 변수
함수 내에서만 사용 가능
함수 내에서 var를 붙이지 않고 사용하는 변수는 전역변수로 간주

변수 선언 예제

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Javascript </title>
		<script type="text/javascript">
			//명시적 선언
			var num=10, pi=3.14;
			var ch = 'a';
			var name = "홍길동";
			
			// 명시적으로 선언하며 동시에 값 저장
			address ="서울시 강남구";
			nation = '대한 민국'; // 문자열 작은 따옴표도 사용 가능
			
			document.write(num);// 변수 값만 출력
			
			// 문자열과 변수, 태그 연결해서 출력
			document.write("<br>");
			document.write("num : " + num + "<br>");
			document.write("pi : " + pi + "<br>");
			document.write("ch : " + ch + "<br>");
			document.write("name : " + name + "<br>");
			document.write("address : " + address + "<br>");
			document.write("nation : " + nation);
		</script>
	</head>
	<body>
		
	</body>
</html>

지역변수 예제

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Javascript </title>
		<script type="text/javascript">
			function f1() {
				// 지역변수 : 함수 내에서 var/let 붙인 변수
				// 함수 내에서만 사용 가능
				var localVar1 = 100;
			}
			
			// 함수 f1()에서 선언된 지역변수 사용 불가 : 아래 코드 실행 시 오류 발생 (undefined)
			// f1(); // 값 저장을 위해서는 함수를 호출해주어야 함
			// document.write(localVar1 + "<br>");
			
			function f2() {
				// 전역변수 : 함수 내에서 var/let 안 붙이고 값을 저장한 변수
				// 함수 밖에서도 사용 가능
				localVar2 = 200;
			}
			
			f2(); // 값 저장을 위해서는 함수를 호출해주어야 함
			document.write(localVar2 + "<br>");
			
			function f3() {
				// 지역변수 : 함수 내에서 var/let 붙인 변수
				// 함수 밖에서도 사용 가능
				let localVar3 = 300;
			}
			
			f3();
			document.write(localVar3 + "<br>"); // 오류 발생 -> 지역변수라서 접근 불가
		</script>
	</head>
	<body>
		
	</body>
</html>

전역변수 예제

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Javascript </title>
		<script type="text/javascript">
			// 여기에 선언된 변수는 var 붙든 안 붙든 모두 전역변수
			var x=5, y=10; // var를 붙인 명시적 선언. 전역변수
			total=0; //var 없이 값 저장. 전역변수
			
			function f1() { // 모든 전역 변수 사용 가능
				x = x+y;
				document.write(x + "<br>");
			}
			
			function f2() { // 모든 전역 변수 사용 가능
				total = x+y;
				document.write(total + "<br>");
			}
			
			f1();
			f2();
			
			document.write(x + "<br>");
			document.write(total + "<br>");
		</script>
	</head>
	<body>
		
	</body>
</html>

데이터 타입 (데이터 값의 유형)

숫자 : 정수형, 실수형
문자 : ‘a’
문자열 : “string”, ‘작은 따옴표도 가능’
NaN : Not a Number (숫자가 아닌데 숫자로 사용할 경우)
논리값 : true, false
null : ‘참조 객체 없음’의 의미 (값이 없을 때)
undefined : 값의 유형을 알 수 없음

데이터 형변환

parseInt() : 정수값으로 형변환
parseFloat() : 실수값으로 형변환
String() / toString() : 문자열로 형변환

데이터 타입 / 형변환 예제

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Javascript </title>
		<script type="text/javascript">
			var num1 = 15; // 정수
			var num2 = 123.45; // 실수
			var answer = 'y'; // 문자
			var name = "홍길동"; // 문자열 " 
			var address = '서울시 종로구 1번지'; // 문자열 '
			var result = true; // 논리값
			var nothing;
			
			// 취소 버튼 누르면 null값 반환
			var input = prompt("자료형 예제", "취소 버튼 누르세요.");
			
			// 1. 숫자 연산
			document.write("정수 * 실수 : " + (num1 * num2));
			
			// 2. 형변환 : parseInt(num2) : 실수 값을 정수로 변환
			// 123.45 -> 123
			document.write("<br>실수를 정수로 형변환 : " + parseInt(num2));
			
			// 3. 숫자를 문자열로 변환
			// "15" + "123.45" => "15123.45"
			document.write("<br>숫자를 문자열로 형변환 : " + String(num1) + num2.toString());
			
			// 4. 문자열 * 문자열 : NaN (Not a Number : 숫자 아님)
			// NaN 출력
			document.write("<br>문자열 곱하기 : " + (name *address));
			
			// 5. nothing 변수를 선언만 하고 값을 저장하지 않은 경우
			// undefined : 값의 유형을 알 수 없음
			// undefined 출력
			document.write("<br>nothing : " + nothing);
			
			// 6. prompt() 대화상자에서 취소 버튼 누를 경우
			// null : 참조 객체 없음 (값이 없을 때)
			// null 출력
			document.write("<br>input : " + input);
		</script>
	</head>
	<body>
		
	</body>
</html>

호이스팅 (Hoisting)

변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것
즉, 선언은 뒤에 했는데, 선언문 전에서 변수 사용하는 것
var로 선언된 변수는 가능
let로 선언된 변수는 불가
선언은 호이스팅 되지만 할당은 호이스팅 되지 않음
호이스팅은 scope 단위로 일어남

console.log(name);
var name1 = "홍길동";

예제 : 선언은 호이스팅 되지만 할당은 호이스팅 되지 않음

// (1) 호이스팅 가능
console.log(name);
var name = 'Mike';

// (1) 실제 동작은 아래와 같이 됨
var name;
console.log(name);  // undefined : 선언은 호이스팅 되지만 할당은 호이스팅 되지 않음
name = 'Mike'; // 할당은 여기서 처리됨

예제 : let은 호이스팅 되지 않음

// (1) 호이스팅 불가능
console.log(name);  // Reference Error
let name = 'Mike';

예제 : 호이스팅은 scope 단위로 일어남

// 가능
let age = 30;
function showAge() {
  console.log(age);
}

// 불가능 : scope = showAge() 내부
let age = 30;
function showAge() {
  console.log(age);
  let age = 20;
}

호이스팅 = scope 내부 어디에서든 변수 선언은 최상위로 선언된 것처럼 처리한다는 의미

그럼에도 불구하고 let과 const는 왜 호이스팅 되지 않는 이유는?

TDZ ((Temporal Dead Zone) 때문 ->TDZ 영역에 있는 변수들은 사용할 수 없음

let과 const는 TDZ의 영향을 받아, 할당되기 전에는 사용이 불가능 -> 코드 예측 및 잠재적 버그 감소 가능

저작자표시 비영리 변경금지

'Frontend > Javascript' 카테고리의 다른 글

비교연산자와 논리연산자 (0)	2021.12.07
형변환 (0)	2021.12.07
데이터 입력과 출력 / alert (0)	2021.12.07
정적 / 동적 타이핑 언어 (0)	2021.12.07
JavaScript 기본 개념 및 구조 (0)	2021.12.07

0lli2

변수와 데이터 타입 / 지역변수와 전역변수 / var let const 차이 / 호이스팅 (Hoisting)

변수

식별자 사용 규칙 (변수명, 함수명 등)

변수 선언

var와 let과 const 차이

변수의 유형

데이터 타입 (데이터 값의 유형)

데이터 형변환

호이스팅 (Hoisting)

'Frontend > Javascript' 카테고리의 다른 글

티스토리툴바

변수와 데이터 타입 / 지역변수와 전역변수 / var let const 차이 / 호이스팅 (Hoisting)

변수

식별자 사용 규칙 (변수명, 함수명 등)

변수 선언

var와 let과 const 차이

변수의 유형

데이터 타입 (데이터 값의 유형)

데이터 형변환

호이스팅 (Hoisting)

'Frontend > Javascript' 카테고리의 다른 글

'Frontend/Javascript' Related Articles

티스토리툴바