자바스크립트 학습 7일차

# 자바스크립트 학습

# 문장 (Statement)

• ; (세미콜론)
• 세미콜론은 문장을 끝나게 하는 역할을 한다.

var book = "책";

# 화이트 스페이스

• White Space
• 사람 눈에 보이지 않는 문자
• 가독성을 위한 것이다.
• 문자마다 기능을 갖고 있다.
• 종류는 아래와 같다.

1. 수평 탭 : TAB
2. 수직 탭 : VT
3. 폼 넘기기 : FF
4. NBSP (No-break space) : NBSP
5. BOM (Myte Order Mark) : BOM
6. Line Feed : LF
7. Carriage Return : CR
8. Line Separator : LS
9. Paragraph Separator : PS

# 세미콜론 자동 삽입

• 세미콜론은 문장 끝에 작성한다.
• 문장 끝에 세미콜론을 작성하지 않으면, 자바스크립트는 세미콜론을 자동으로 삽입하여 문장을 끝나게 한다.

var one = 1
var two = 2;
log(one);

=>
1

자바스크립트 엔진이 분석하여 세미콜론을 자동으로 삽입하여 문장을 끝나게 한다.
(줄을 분리해야 화이트 스페이스(LF/CR) 앞에 세미콜론을 자동 삽입한다.)
(한 줄에 작성할 경우 삽입하지 않는다.)

# 블록

• {문장 리스트opt} 중괄호의 형태
• 실행 그룹으로, 블록 안의 모든 문장을 실행한다.

var one = 1, two = 1;
if (one === two) {
	var result = one + two;
    log(result);
};

=>
2

• 문장 리스트 : { } 안에 작성된 모든 문장을 의미, 문장 리스트 작성은 선택(option)이다.

# if

• if (표현식) 문장1 
• if (표현식) 문장1 else 문장2
• 조건에 따른 처리로서 먼저 표현식을 평가한다. 평가 결과를 true/false로 변환, true이면 문장1 실행, false이면 문장2를 실행한다.

1. 블록을 사용하지 않은 형태.
var a = 1, b = 1;
if (a === b) log("블록을 사용하지 않음");

if (a === b)
	log("1번 줄")
    log("2번 줄");
    
=>
블록을 사용하지 않음
1번 줄
2번 줄



2. 블록을 사용한 형태
var a = 1, b = 1;
if (a === b) {
	log("블록 사용");
}

=>
블록 사용



3. if else, 블록 사용하지 않음
var a = 1, b = 2;
if (a === b) 
	log("블록 사용하지 않음. true");
else
	log("블록 사용하지 않음. else");
    
=>
블록 사용하지 않음, else



4. if else, 블록 사용
var a = 1, b = 2;
if (a === b) {
	log("블록 사용. true");
} else {
	log("블록 사용. else");
}

=>
블록 사용. else

# debugger

• 디버거 작성 위치에서 실행을 멈춘다.
• 브라우저의 개발자 도구 창이 열려 있을 때만 멈춘다.
• ES5부터 지원한다.

var sports = "스포츠";
debugger;
log(sports);

=>
스포츠
debugger가 있는 위치에서 실행이 멈춘다.(debugger에서 조치를 취해야 다음이 실행된다.)

• debugger 사용방법

1. 개발자 도구 열기(Ctrl + Shift + I) => 윈도우 기준
	- 크롬 맞춤설정 및 제어
    - 도구 더보기
    - 개발자 도구(D)
2. 브라우저 새로고침 실행(F5)
3. debugger 위치에서 실행 멈춤
4. debugger 종료(F8)


* 윈도우 기준 debugger 단축키
F8 : debugger 종료
F11 : debugger 다음 라인으로 이동
브레이크포인트 : 희망하는 라인 번호 좌측 클릭

# while

• while (표현식) 문장
• 표현식의 평가 결과가 false가 될 때까지 문장을 반복하여 실행
• 반복이 종료되는 조건이 필요하다. (없을경우 무한 반복된다.)

var k = 1;
while (k < 3) {
	log(k);
    k++; 
}

=>
1
2

# do ~ while

• do 문장 while (표현식)
• 처리 방법은 while문과 동일하지만, 단, do 문을 먼저 실행한다.

var k = 0;
do {
	log("do:", k);
    k++;
} while (k < 3) {
	log("while:", k);
};

=>
do:0
do:1
do:2
while:3

do~while문의 경우 true일 때 do 문장 실행, false이면 while문 실행

# for( )

• for (초깃값opt; 비교opt; 증감opt) 문장
• 2번째의 비교 표현식의 평가 결과가 true인 동안 문장을 반복 실행한다.

for (var k = 0; k < 2; k++) {
	log(k);
};

=>
0
1

## for( )문 옵션

• for (초깃값opt; 비교opt; 증감opt) 문장에서 opt는 생략 가능하다.
• 증감 생략

for (var l = 0; k < 3;) {
	log(k);
    k++;
};

=>
0
1
2

• 초깃값과 증감 생략

var k = 0;
for (; k < 3;) {
	log(k);
    k++;
};

=>
0
1
2

• 비교와 증감 생략

for ( var k = 0; ;) {
	log(k);
    k++;
    if (k > 2) {
    	break;	//for()문 종료
    };
};

• 모두 생략

var k = 0;
for (;;) {
	log(k);
    if (k === 2) {
    	break;	// for()문 종료
    };
    k++;
};

=>
0
1
2

# break

• break;
• break 식별자;
• 반복문 종료
• for, for~in, while, do~while, switch에서 사용한다.

1. break 위치에서 종료
var k = 0, m = 0;
while (k < 3) {
	m++;
    if (m === 2) {
    	break;
    };
    log(m);
};

=>
1

2. 세미콜론 자동 첨부
for (var k = 0; k < 3; k++) {
	if (k === 1) {
    	break
        log("k === 1");
    };
    log(k);
};

=>
0

break 끝에 세미콜론을 자동으로 첨부.
break 아래 log는 실행하지 않는다.

# continue

• continue;
• continue 식별자;
• 반복문의 처음으로 분기한다.

for (var k = 0; k < 5; k++) {
	if (k === 2 || k === 3) {
    	continue;
    };
    log(k);
};

=>
0
1
4

k === 2 or k === 3일때 continue로 반복문으로 돌아감(k++로)

• for, for~in, while, do~while에서 사용한다.