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은 '아무것도 참조하지 않는다'는 의미로서 주로 객체를 초기화할 때 사용한다는 차이점이 존재한다.