JavaScript var, let, const 차이

1. var

- 자바스크립트에서 변수를 선언하기 위한 선언자이다.

- 변수의 유효 범위의 대한 문제가 존재한다.

ex) 기존의 존재하는 변수 a를 재선언하여도 에러가 발생하지 않는다.

<script>
    var a = 5;
    console.log(a);
    var a = "e";
    console.log(a);
</script>

2. let

- 위 같은 var의 문제점을 보완하기 위해 ECMAScript 6부터 추가된 변수 선언자다.

ex) 위 var과는 다르게 이미 존재한다는 에러 메시지를 보여준다.

<script>
    let a = 5;
    console.log(a);
    let a = "e";
    console.log(a);
</script>

※ var보단 let을 사용해주는 것이 더욱 에러 발생을 대비할 수 있다.

3. const

- let과 마찬가지로 ECMAScript 6부터 추가된 선언자 이다.

- let과는 다르게 선언 시 한번만 초기화 할 수 있는 상수 이다.

- 단, 배열이나 객체와 같은 참조타입일 경우 값(프로퍼티)을 수정할 수 있다.

JavaScript eval 함수

- 인수로 문자열을 받으며 문자열을 자바스크립트 코드로서 해석한 후 동작한다.

		var mul = 5;
		
		eval("mul *= 10; var temp = 10");
		document.write(mul, " ", temp);	// 50 10

- 3~4라인을 보면 eval 함수 내에 선언한 변수 temp를 밖에서도 사용할 수 있다.

- 이렇게 함수로 코드를 실행 가능한 이유는 자바 스크립트가 스크립트 언어로서 컴파일러를 사용하지 않는 인터프리터 방식으로 한줄 한줄 해석하므로 코드를 해석하는 도중 코드를 해석할 수 있다.

- 문자열로 코드를 실행하므로 외부로부터 코드를 입력받아 그것을 실행 시킬 수 도 있다.

- 단, 코드를 읽는도중 또 코드를 읽는 이중 작업으로서 실행 속도가 더욱 느려지며, 보안상 문제가 발생하기 쉬워서 사용은 권장되지 않는다.

JavaScript 함수

함수의 기본적인 형태 

		function sum(a,b) {
			let result = a+b;
			return result;
		}

디폴트 매개변수 (Default Parameter)

		function sum(a=5,  b=50) {
			let result = a+b;
			return result;
		}

- C++에서와 마찬가지로 디폴트 매개변수를 지정할 수 있다. 디폴트 매개변수는 함수 호출 시 파라미터가 없으면 디폴트로 지정해 놓은 값으로 함수를 실행한다.

- 디폴트 매개변수는 우측부터 지정하여야 한다.

암시적으로 생성되는 인수의 배열

		function sum2() {
			let result = 0;
			for(var i=0; i<arguments.length; i++) {
				result += arguments[i];
			}
			return result;
		}
		document.write(sum2(1,2,3,4,5,6,7,8,9,10));	// 55

- 함수는 암시적으로 arguments라는 인수들의 배열을 가진다.

- 위 sum2함수는 1~10까지의 수를 인수로 받고 이를 가지고 있는 arguments 배열을 통하여 그 합을 return 해준다.

익명 함수

		let mul = function(a,b) { return a*b; }
		
		document.write(function(a,b) {return a+b;}(5,10) );	// 15
		document.write(mul(5,10));	// 50

- 익명 함수는 간단하게 1회용 함수라 할 수 있고 이를 변수의 저장하지 않으면 위 3라인처럼 사용할 때마다 다시 구현하여야 한다.

- mul은 변수에 저장해 놓으므로 재활용 할 수 있다.

- 익명 함수와 달리 함수는 페이지가 로드할 때 모든 함수를 읽어 해석해 놓지만 익명 함수는 그렇지 않다.

JavaScript 예외 처리

: 에러가 발생하였을 시 에러가 발생한 위치를 특정하거나 어떠한 에러가 발생하였는지를 확인 할 수 있다.

		try {
			document.write("예외처리 발생<br>");
			throw new Error("전달할 메시지");
		} catch(e) {
			document.write(e.name + " 가 발생<br>");
			document.write("전달받은 메시지 : " + e.message + "<br>");
		} finally {
			document.write("상관없이 실행");
		}

실행 결과

- 3라인에서 throw를 사용하여 임의적으로 에러를 발생시켰다. 에러가 발생하여 catch문이 실행된다.

- 5라인에서는 전달받은 에러 객체의 name 속성을 이용하여 어떠한 에러가 발생하였는지 이름을 확인할 수 있다.

- 6라인에서는 에러의 관한 설명을 담은 message 속성을 이용하여 설명을 볼 수 있다.

- finally는 에러의 발생 여부와 상관없이 실행되는 문으로써 문법상 명확하기 위하여 사용한다.

		try {
			document.write("예외처리 발생<br>");
			throw new ReferenceError("전달할 메시지");
		} catch(e) {
			document.write(e.name + " 가 발생<br>");
			document.write("전달받은 메시지 : " + e.message + "<br>");
		} finally {
			document.write("상관없이 실행");
		}

실행 결과

- ReferenceError가 발생한 것을 볼 수 있다.

- 해당 코드에서는 에러를 임의적으로 발생시켰지만 실제 try문에서 에러가 발생한 경우 발생한 에러의 종류에 따라서 그에 맞는 서로 다른 처리를 해줄 수 있다.

JavaScript 제어문

1. if 문

let a = 2;
if(a ) {

} else if( a == 1) {

} else {

}

2. switch 문

let a = 2;
switch(a) {
    case 1 :
          break;
    case 2 :
          break;
}

3. for 문

for(let i=0; i<5; i++) {

}
// 혹은
for(let b in a) {

}

4. while 문

let a = 4;
while(a == 4) {

}

5. do~while 문

let a = 5;
do {

} while(a == 5);

※ 실행흐름을 제어 - Lable(레이블)

olabel:
  for(let i =0; i<3; i++) {
    for(let j=0; j<3; j++) {
       document.write(i+", " + j+ "<br >");
       if(j==2) break;           // 1번
       if(j==2) break olabel; //  2번
   }
 }

1번 결과

2번 결과

JavaScript 형변환

1. 암시적 변환

 형을 직접적으로 변환해주는 것이 아닌 자동적으로 변환한다.

	let a = 5;
	document.write(a+"10");	// 510
	document.write(a*"10");	// 50

ㄴ 숫자 -> 문자열 : 2 라인에서는 a가 문자열 5로 변환되어서 510이 출력된다.

ㄴ 문자열 -> 숫자 : 3 라인에서는 문자열 10이 숫자로 변환되어서 5*10의 결과인 50을 출력한다.

2. 명시적 변환

- 문자열 -> 숫자 

ㄴ Number("문자열") : 해당 문자열을 숫자로 변환한다. 단, 문자열에 숫자 외 문자열, 즉 숫자로 바꾸지 못하는 문자가 포함되어있는 경우는 NaN(Not a Number)을 리턴한다.

ㄴ parseInt("문자열") : 해당 문자열을 Int형(=정수형) 숫자로 변환한다. 정수형이므로 소수점 아래는 잘린다. Number함수와 달리 문자열에 숫자로 바꾸지 못하는 문자가 포함되어있어도, 문자 이전까지의 숫자를 숫자로 변환해 준다.

또한, 2번 째 인수로 진수를 설정해줄 수도 있다. 4라인을 보면 10을 16진수로 출력하여 16이 보여진다.

ㄴ parseFloat("문자열") : 해당 문자열을 Float형(=실수형) 숫자로 변환한다. parseFloat도 문자열에 처리못할 문자가 있으면 parseInt와 마찬가지로 처리한다.

		let a = "5.14g35";
		document.write(Number(a));	// NaN
		document.write(parseInt(a));	// 5
		document.write(parseInt("10", 16));	// 16
		document.write(parseFloat(a));	// 5.14

- 숫자 -> 문자열

ㄴ String(숫자) : 해당 숫자를 문자열로 변환한다. 이는 사실 ""를 더해주는 암시적 형변환을 사용하면되므로 사용성이 떨어진다.

3. 논리형 변환

- false : 0, "", NaN, null, undefined 같은 경우

- true : 그 외에 경우

4. 변수의 타입 확인 typeof()

- typeof(변수) : 여기에는 변수 뿐만아니라 객체를 사용할 수도 있다. 이 함수는 자료형을 리턴해주며 리턴되는 값은 "number", "string", "boolean" 처럼 소문자 문자열이다.

※ == vs. ===

- == : 값만 비교한다.

- === : 값뿐만 아니라 타입까지 비교한다.

JavaScript 변수

 변수형

 변수 데이터 형으로는 숫자, 문자열 외에도 클래스, 객체, 함수 등등이 있다.

// 기본적인 변수 선언
let i = 5;     // 숫자형
let s = "test" // 문자열
const PI = 3.14 // 상수

// 클래스(Class)
function MyC() { }
let myC = MyC();


// 객체(Object)
function MyC() { }
let myO = new MyC();


// 함수(Function)
function fun() { }
let func = fun;
 

클래스, 객체, 함수 형을 구현할 때는 모두 function을 사용한다.

 주석

- 한 줄 : // 

- 여러 줄 : /*   */

 변수 값 확인하기

1. document.write() 

: html의  body 영역에 출력할 수 있다. 이곳에는 html 태그를 사용할 수도 있다.

let v = 20;
document.write("변수 : ", v);   // ','를 사용
document.write("변수 : " + v);  // '+'를 사용

ㄴ 문자열과 숫자형을 +하면 숫자형을 문자열로 변환 한다.

2. console.log()

: 디버깅 함수 중 하나로서 특정 부분에 삽입하여 값을 확인하기 용이하다. 이를 사용하면 오류를 찾거나 특정 어느 부분에서 값이 잘못되었는지를 확인하기 편하다. 

단, document처럼 body영역에 출력하는 것이 아니라 Console에 출력한다.            ( Chrome일 경우 [F12] - Console 에서 확인 )

알림 창 띄우기

1. alert("출력할 문자열")

: 알림 창을 띄워 값을 출력한다. 값을 확인하거나 할 때 사용한다.

2. prompt("텍스트", "기본값")

: 알림 창을 띄워 값을 입력 받는다. 

	function say() {
		let who;
		who = prompt("입력 테스트 중", "기본");
		if(who) {
			alert(who + "확인함");
		}
		else {
			alert(who + "취소함");
		}
	}

 위 코드처럼 if문을 사용하여 확인과, 취소에 따라 실행을 다르게 해줄 수 있다.

 단, 취소를 눌렀을 때는 변수의 값이 저장 안 됨으로 초기화 된 변수를 사용해야 한다.

※ undefined  vs.  null

 보통 변수를 선언하고 값을 할당하지 않으면 값이 아직 없다는 의미로 undefined가 들어간다.

null 또한 값이 없다는 의미로 의미상으로는 같다.

 하지만 null은 '아무것도 참조하지 않는다'는 의미로서 주로 객체를 초기화할 때 사용한다는 차이점이 존재한다.