Javascript 자바스크립트 기본 [3]

'while'문과 'for'문

- 동일한 코드를 여러 번 반복

 

'while' 반복문

while (condition) { // 코드 // '반복문 본문(body)'이라 불림 }

- condition이 true 이면 반복문 본문의 코드가 실행됩니다.

 

본문이 한 줄이면 대괄호를 쓰지 않아도 됩니다.

- 반복문 본문이 한 줄짜리 문이라면 대괄호 {…}를 생략할 수 있습니다.

let i = 3;

while (i) alert(i--);

 

'do...while' 반복문

do {

// 반복문 본문

} while (condition);

- 본문이 먼저 실행되고, 조건을 확인한 후 조건이 true인 동안엔 본문이 계속 실행됩니다.

- do..while 문법은 조건이 truthy 인지 아닌지에 상관없이, 본문을 최소한 한 번이라도 실행하고 싶을 때만 사용해야 합니다.

- 대다수의 상황에서 do...while 보다 while(...) {...}이 적합

 

'for' 반복문

for (begin; condition; step) {

// ... 반복문 본문 ...

}

Ex))

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

 // 0, 1, 2가 출력됩니다.

alert(i);

}

begin	i = 0	반복문에 진입할 때 단 한 번 실행됩니다.
condition	i < 3	반복마다 해당 조건이 확인됩니다. false이면 반복문을 멈춥니다.
body	alert(i)	condition이 truthy일 동안 계속해서 실행됩니다.
step	i++	각 반복의 body가 실행된 이후에 실행됩니다.

 

구성 요소 생략하기

 

- begin 생략

let i = 0; // i를 선언하고 값도 할당하였습니다.

for (; i < 3; i++) {

// 'begin'이 필요하지 않기 때문에 생략하였습니다.

alert( i ); // 0, 1, 2

}

 

- step 생략

let i = 0;

for (; i < 3;) {

alert( i++ );

}

 

무한 반복문

for (;;) {

// 끊임 없이 본문이 실행됩니다.

}

 

반복문 빠져나오기  ->  break;

다음 반복으로 넘어가기 -> break; 

 

레이블(label)

- 레이블 구문은 break나 continue 구문과 함께 사용할 수 있다. 원하는 식별자로 구문 앞에 레이블을 추가할 수 있다.

labelName: for (...) {

...

}

 

Ex)

outer: for (let i = 0; i < 3; i++) {

for (let j = 0; j < 3; j++) {

let input = prompt(`(${i},${j})의 값`, '');

// 사용자가 아무것도 입력하지 않거나 Cancel 버튼을 누르면 두 반복문 모두를 빠져나옵니다.

if (!input) break outer; // (*)

// 입력받은 값을 가지고 무언가를 함

}

}

alert('완료!');

 

switch문

- switch문은 하나 이상의 case문으로 구성됩니다. 대개 default문도 있지만, 이는 필수는 아닙니다.

switch(x) {

case 'value1': // if (x === 'value1')

...

[break]

case 'value2': // if (x === 'value2')

...

[break]

default:

...

[break] }

• 변수 x의 값과 첫 번째 case문의 값 'value1'를 일치 비교한 후, 두 번째 case문의 값 'value2'와 비교합니다. 이런 과정은 계속 이어집니다.
• case문에서 변수 x의 값과 일치하는 값을 찾으면 해당 case 문의 아래의 코드가 실행됩니다. 이때, break문을 만나거나 switch 문이 끝나면 코드의 실행은 멈춥니다.
• 값과 일치하는 case문이 없다면, default문 아래의 코드가 실행됩니다(default 문이 있는 경우).

 

- 두 case를 묶을 수도 있음

case 3: // (*) 두 case문을 묶음

case 5: alert('계산이 틀립니다!');

alert("수학 수업을 다시 들어보는걸 권유 드립니다.");

break;

 

화살표 함수 기본

- 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법

 

let func = (arg1, arg2, ...argN) => expression

이렇게 코드를 작성하면 인자 arg1..argN를 받는 함수 func이 만들어집니다. 함수 func는 화살표(=>) 우측의 표현식(expression)을 평가하고, 평가 결과를 반환합니다.

 

let sum = (a, b) => a + b;

/* 위 화살표 함수는 아래 함수의 축약 버전입니다.

let sum = function(a, b) {

return a + b;

}; */

alert( sum(1, 2) ); // 3

 

인수가 하나밖에 없다면 인수를 감싸는 괄호를 생략할 수 있습니다. 괄호를 생략하면 코드 길이를 더 줄일 수 있습니다.

let double = n => n * 2;

// let double = function(n) { return n * 2 }과 거의 동일합니다.

alert( double(3) ); // 6

 

인수가 하나도 없을 땐 괄호를 비워놓으면 됩니다. 다만, 이 때 괄호는 생략할 수 없습니다.

let sayHi = () => alert("안녕하세요!");

sayHi();

 

함수를 동적으로 만들 수 있습니다.

let age = prompt("나이를 알려주세요.", 18);

let welcome = (age < 18) ?

() => alert('안녕') :

() => alert("안녕하세요!");

welcome();

 

화살표 함수 요약 

1. 중괄호 없이 작성: (...args) => expression – 화살표 오른쪽에 표현식을 둡니다. 함수는 이 표현식을 평가하고, 평가 결과를 반환합니다.
2. 중괄호와 함께 작성: (...args) => { body } – 본문이 여러 줄로 구성되었다면 중괄호를 사용해야 합니다. 다만, 이 경우는 반드시 return 지시자를 사용해 반환 값을 명기해 주어야 합니다.

 

 

출처https://ko.javascript.info/javascript-specials