[modern-js] 챕터 2.13 ~ 2.18

2.13 반복문

while문 / do-while문

while (조건문) {
    // 본문
}

do {
    //본문
} while (조건);
// 본문이 먼저 실행후 while검사, 최소한 한번이라도 실행할 때 사용

for문

for (let i = 0; i < 3; i++) { // 0, 1, 2가 출력됩니다.
  alert(i);
}

구성 요소
begin	i = 0	반복문에 진입할 때 단 한 번 실행, 이 때 i 는 인라인 변수라고함
condition	i < 3	반복마다 해당 조건을 확인, false이면 반복문을 중단
body	alert(i)	condition이 truthy일 동안 계속해서 실행
step	i++	각 반복의 body가 실행된 이후에 실행

구성요소는 생략이 가능하다.

let i = 0;

for (; i < 3; i++) {
  alert( i ); // 0, 1, 2
}

for (;;) {
  // 끊임 없이 본문이 실행됩니다.
}

break와 continue

break : 반복문 안에서 break문을 만나면 그 즉시 반복문이 종료된다.

continue : 반복문 안에서 break문을 만나면 그 즉시 해당 반복을 멈추고 다음 반복을 진행한다.

// break
while (true) {
  let value = +prompt("숫자를 입력하세요.", '');

  if (!value) break;
  sum += value;
}

// continue
for (let i = 0; i < 10; i++) {
  if (i % 2 == 0) continue;
  alert(i); // 1, 3, 5, 7, 9
}

삼항연산자 ?에서는 break 와 continue 를 사용할 수 없다.

// 가능
for (let i = 0; i < 10; i++) {
if (i % 2) console.log( i );
else continue;
}

// 불가
for (let i = 0; i < 10; i++) {
(i > 5) ? console.log(i) : continue;
}

레이블

레이블을 이용하면 break와 continue가 빠녀나오는 지점을 지정할 수 있다.

outer: for (let i = 0; i < 3; i++) { // (*)
  for (let j = 0; j < 3; j++) {
    let input = prompt(`(${i},${j})의 값`, '');
    if (!input) break outer; // (*)
  }
}
alert('완료!');

input이 빈 값일 때 가장 바깥의 for문을 종료한다.

point: for (let i = 2; i < 10; i++) {
  for (let j = 2; j < 10; j++) {
    if (i === 4 && j === 4) continue point;
    console.log(`${i} * ${j} = ${i * j}`);
  }
}

2 * 2 = 4
2 * 3 = 6
...
3 * 9 = 27
4 * 2 = 8
4 * 3 = 12 (*)
5 * 2 = 10
5 * 3 = 15
...
9 * 8 = 72
9 * 9 = 81

i === 4 && j === 4 일 때 바깥 for문으로 가서 5단부터 다시 시작한다.

break와 continue는 반복문 안에서만 사용할 수 있고, 레이블은 반드시 break이나 continue 지시자 위에 있어야 합니다.

2.14 switch문

let a = prompt('값을 입력해주세요.');

switch (+a) {
  case 3:
    console.log('비교하려는 값보다 작습니다.');
    break;
  case 4:
  case 5:
    console.log('비교하려는 값과 일치합니다.');
    break;
  case 6:
    console.log('비교하려는 값보다 큽니다.');
    break;
  default:
    console.log('어떤 값인지 파악이 되지 않습니다.');
}

• 만약 break 가 없다면 아래 구문들이 실행이 되버리는 주의하자.
• case문을 묶을 수 있다.
• 자료형이 불일치하면 실행되지 않는다.

2.15 함수

키워드

• 외부변수(전역변수), 지역변수
• 매개변수, 전달인자
• 기본값
• 반환값

let outer = '전역변수';function showValue(param1, param2 = '기본값', ...params) {  // parameter, 매개변수  const inner = '지역변수';  outer += '입니다.'; // 외부 변수 수정 가능  param1 += '입니다.';  console.log(outer, inner, param1, param2, params);  // 외부변수는 같은 이름의 지역변수가 없을때만 사용가능,  // 만약 같은이름의 지역변수가 존재한다면 지역변수가 우선적이다.  // 매개변수는 값을 복사해 온다. 따라서 값을 수정해도 외부변수에 영향이 없다.  return; // 비어있는 return이거나 return이 없을 때 함수는 undefiend를 반환한다.}let arg1 = '매개변수1';let arg2 = '매개변수2';showValue(arg1, arg2, '나머지변수1', '나머지변수2'); // argument, 전달인자.console.log(outer, arg1);

• 함수 내부에서 외부 변수를 사용하는 방법 대신 지역 변수와 매개변수를 활용하는 게 좋다.
• 함수는 결국 동작을 정의하는 것이므로 함수명은 동사로 시작하여 작성하자.
• 함수는 동작 하나만 담당해야 한다. (함수 쪼개기)

2.16 함수표현식

함수선언과 함수표현식

함수 선언문: 함수는 주요 코드 흐름 중간에 독자적인 구문 형태로 존재한다.

함수 표현식: 함수는 표현식이나 구문 구성 내부에 생성된다. 아래 예시에선 함수가 할당 연산자 =를 이용해 만든 “할당 표현식” 우측에 생성되었다.

// 함수선언(문)function sayHi() {    console.log('hello');}// 함수표현식const sayHi = function() {    console.log('hello');};

• 함수는 값이다. 따라서 함수도 값처럼 할당, 복사, 선언할 수 있다.
• 함수선언(문) 방식으로 함수를 생성하면, 함수가 독립된 구문 형태로 존재하게 된다.
• 함수표현식 방식으로 함수를 생성하면, 함수가 표현식의 일부로 존재하게 된다.
• 함수 선언문은 코드블록이 실행되기 전에 처리가 된다. 따라서 블록 내 어디서든 활용이 가능하다. (호이스팅)
• 함수표현식은 실행 흐름이 표현식에 다다랐을 때 사용이 가능하다.

주의!

엄격 모드에서 함수 선언문이 코드 블록 내에 위치하면 해당 함수는 블록 내 어디서든 접근할 수 있다. 하지만 블록 밖에서는 함수에 접근하지 못한다.

let age = prompt("나이를 알려주세요.", 18);// 조건에 따라 함수를 선언함if (age < 18) {function welcome() { // 블록내에서만 유효 alert("안녕!");}} else {function welcome() { // 블록내에서만 유효 alert("안녕하세요!");}}welcome(); // Error: welcome is not defined

함수표현식을 사용하면 블록 밖에서도 유효하게 사용할 수 있다.

let age = prompt("나이를 알려주세요.", 18);let welcome;if (age < 18) {welcome = function() { alert("안녕!");};} else {welcome = function() { alert("안녕하세요!");};}welcome(); // 제대로 동작

함수표현식의 세미콜론

if { ... }, for { }, function f { } 같이 중괄호로 만든 코드 블록 끝엔 ;이 없어도 된다.

함수표현식에서 함수는 구문안에서 값의 역할을 한다. 따라서 함수표현식에 세미콜론이 붙는게 아닌 구문이 끝났다는 의미에서 세미콜론이 붙는다.

콜백함수

함수를 나중에 호출하는용도로 함수에 함수를 전달하여 사용하는 전달용 함수를 콜백함수라 한다.

function ask(question, yes, no) {  if (confirm(question)) yes()  else no();}function showOk() {  alert( "동의하셨습니다." );}function showCancel() {  alert( "취소 버튼을 누르셨습니다." );}ask("동의하십니까?", showOk, showCancel);// 함수표현식 이용function ask(question, yes, no) {  if (confirm(question)) yes()  else no();}ask(  "동의하십니까?",  function() { alert("동의하셨습니다."); }, // 익명함수  function() { alert("취소 버튼을 누르셨습니다."); } // 익명함수);// 익명함수는 접근할 수 없다.

2.17 화살표 함수 기본

함수 표현식의 간결한 버전

const func = (arg1, arg2, ...argN) => expressionconst func = function(arg1, arg2, ...argN) {  return expression;};

궁금증

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

위와 같이 중괄호를 사용하여 본문이 여러줄일 때 return 을 반드시 명시해주라고 작성이 되어있다.
하지만 return이 없어도 동작은 잘된다. (엄격모드에서도 잘 동작한다)

왜 return 을 꼭 굳이 명시해야할까?