조건문

docs.scrimba.com

항상 같은 일만 하는 프로그램은 별로 유용하지 않습니다. 로그인한 방문자에게는 한 메시지를, 낯선 사람에게는 다른 메시지를 보여주는 페이지, 18살은 받지만 12살은 받지 않는 양식, 승리했는지 패배했는지 알려주는 게임이 필요합니다. 이 모든 것은 질문을 던지고 그 답에 따라 행동할 방법이 필요합니다. 이것이 바로 조건문이 하는 일입니다. 어떤 것이 참인지에 따라 실행할 코드를 선택하도록 합니다.

이미 필요한 조각들을 가지고 있습니다. 비교 및 논리 연산자는 참 또는 거짓 답을 제공하며, 이 장은 그에 따라 행동하는 것에 관한 것입니다.

조건이 참일 때만 코드 실행하기

**if 문**은 조건이 참일 때만 코드 블록을 실행합니다. if 단어, 괄호 안에 조건, 중괄호 안에 블록을 작성합니다. 조건이 참이면 블록이 실행됩니다. 그렇지 않으면 JavaScript가 블록을 건너뛰고 계속 진행합니다.

const age = 20;

if (age >= 18) {
  console.log("You can enter."); // You can enter.
}

조건 age >= 18은 참 또는 거짓입니다. 여기서 age는 20이므로 참이고, 메시지가 출력됩니다. age를 12로 바꾸면 조건이 거짓이므로 블록이 건너뛰어지고 아무것도 출력되지 않습니다.

조건이 거짓일 때 대체 코드가 필요한 경우가 많습니다. 이것이 else의 역할입니다:

const age = 12;

if (age >= 18) {
  console.log("You can enter.");
} else {
  console.log("Come back when you are older."); // Come back when you are older.
}

정확히 둘 중 하나의 블록만 실행되고, 둘 다 실행되지는 않습니다. 두 가지 이상의 결과가 있을 때, else if로 다른 조건을 확인할 수 있습니다:

const score = 74;

if (score >= 90) {
  console.log("Grade: A");
} else if (score >= 70) {
  console.log("Grade: B"); // Grade: B
} else {
  console.log("Grade: C");
}

JavaScript는 위에서부터 각 조건을 확인하고 참인 첫 번째에서 멈춥니다. 74는 >= 90은 아니지만 >= 70이므로 Grade: B를 출력하고 else를 확인하지 않습니다.

**if 문**은 조건이 참일 때 블록을 실행하고, 선택적인 else 블록은 그렇지 않을 때 실행됩니다. else if를 연결하면 여러 조건을 순서대로 확인할 수 있습니다.

const score = 74;

if (score >= 90) {
  console.log("Grade: A");
} else if (score >= 70) {
  console.log("Grade: B"); // Grade: B
} else if (score >= 50) {
  console.log("Grade: C");
} else {
  console.log("Grade: F");
}

순서가 중요하며, 이것이 사람들이 놓치는 부분입니다. JavaScript는 위에서부터 각 조건을 테스트하고 첫 번째 참인 블록을 실행한 다음 나머지를 건너뜁니다. 이것이 범위가 높에서 낮으로 가는 이유입니다. score >= 70에 도달하면 74가 일치하고 체인이 멈춥니다. score >= 50을 먼저 작성했다면 74가 대신 그것과 일치하고 50 이상인 모든 학생이 C를 받게 됩니다.

조건은 참 또는 거짓 값을 생성하는 모든 표현식이 될 수 있으므로, 연산자의 논리 연산자로 확인을 결합할 수 있습니다:

const age = 20;
const hasTicket = true;

if (age >= 18 && hasTicket) {
  console.log("Enjoy the show."); // Enjoy the show.
} else {
  console.log("Entry refused.");
}

**if 문**은 조건을 평가하고 결과가 참이면 블록을 실행하며, 다른 경우를 위해 선택적인 else if 및 else 분기가 있습니다. 체인은 순서대로 평가됩니다. JavaScript는 조건을 위에서 아래로 평가하고 조건이 참인 첫 번째 블록을 실행한 후 전체 체인을 빠져나옵니다.

const score = 74;

if (score >= 90) {
  console.log("Grade: A");
} else if (score >= 70) {
  console.log("Grade: B"); // Grade: B
} else if (score >= 50) {
  console.log("Grade: C");
} else {
  console.log("Grade: F");
}

이 구조의 두 가지 속성을 기억할 가치가 있습니다. 첫째, 분기는 상호 배타적입니다. 정확히 하나만 실행됩니다. 이것이 여기서 경계가 각각 한 쪽만 필요한 이유입니다. score >= 70 분기는 score < 90으로 보호할 필요가 없습니다. 이 라인에 도달했다는 것은 이미 score >= 90 테스트가 실패했다는 의미이기 때문입니다. 중복된 상한을 추가하는 것은 일반적인 충동이지만 체인을 더 읽기 쉽게 하지 않고 더 어렵게 만듭니다.

둘째, 조건은 부울로 강제되므로 문자 그대로의 비교일 필요가 없습니다. 모든 표현식이 작동하며, JavaScript는 참 같은 값과 거짓 같은 값 규칙을 적용합니다. 이 유연성은 유용하며 때때로 함정이 되므로, 이 장의 고급 레벨에서 아래에서 자세히 다시 다룹니다.

const age = 20;
const hasTicket = true;

if (age >= 18 && hasTicket) {
  console.log("Enjoy the show."); // Enjoy the show.
} else {
  console.log("Entry refused.");
}

Juno조건이 참일 때만 코드 실행하기if는 괄호 안의 조건이 참일 때만 블록을 실행하고, else는 그렇지 않을 때의 대체 코드를 제공합니다. 세 가지 이상의 결과가 있을 때 else if를 추가하세요. JavaScript는 위에서부터 확인하고 첫 번째 일치에서 멈추므로 의미 있는 순서로 조건을 배치하세요.

Juno조건이 참일 때만 코드 실행하기if / else if / else 체인은 첫 번째 참인 조건의 블록을 실행하고 나머지를 건너뛰므로, 순서는 장식이 아니라 논리입니다. 범위가 높에서 낮으로 가는 것도 같은 이유입니다. 조건은 참 또는 거짓으로 해석되는 모든 표현식이 될 수 있으므로, 여러 조건을 확인해야 할 때 논리 연산자로 결합하세요.

Juno조건이 참일 때만 코드 실행하기 체인은 상호 배타적이며 위에서 아래로 평가되므로, 각 분기는 위의 분기에서 이미 제외한 경계만 필요합니다. 중복된 상한을 추가하는 것은 주의로 읽히지만 실제로는 노이즈일 뿐입니다. 그리고 조건은 부울로 강제되는데, 이는 예상치 못한 값이 슬쩍 들어갈 때까지 기능이지만, 참 같은 값과 거짓 같은 값 규칙을 기억하세요.

삼항 연산자로 값 선택하기

때때로 if / else는 작은 작업 하나를 합니다. 두 값 중 하나를 선택하는 것입니다. 이를 위해 **삼항 연산자**라는 더 짧은 형태가 있습니다. 조건을 쓰고, ?를 쓰고, 참일 때 사용할 값을 쓰고, :를 쓰고, 거짓일 때 사용할 값을 씁니다.

const age = 20;
const message = age >= 18 ? "Welcome" : "Too young";

console.log(message); // Welcome

이것을 질문으로 읽으세요. age >= 18인가? 그렇다면 message는 "Welcome"이 되고, 그렇지 않으면 "Too young"이 됩니다. 이것은 if / else가 내릴 것과 같은 결정입니다. 한 줄로요.

삼항 연산자는 저장하거나 출력할 값을 선택할 때 최고입니다. 분기가 여러 가지 일을 해야 한다면 if 문이 더 명확하므로, 각 쪽이 단일 값일 때만 삼항 연산자를 사용하세요.

**삼항 연산자**는 조건을 기반으로 두 값 중 하나를 선택합니다: condition ? valueIfTrue : valueIfFalse. if 문과 달리, 이것은 표현식이므로 변수에 할당하거나 템플릿 리터럴에 직접 드롭할 수 있는 값을 생성합니다.

const score = 82;
const passed = score >= 60 ? "pass" : "fail";

console.log(`Result: ${passed}`); // Result: pass

이것이 자리를 차지하는 곳입니다. 두 값 중 하나를 변수에 할당하는 것은 삼항 연산자가 한 줄에서 하는 작업인 반면, if 버전은 같은 논리를 5줄에 걸쳐 펼치고 양쪽 분기에서 할당을 반복합니다:

// if 버전은 같은 것을 더 많은 의식으로 합니다:
let passed;
if (score >= 60) {
  passed = "pass";
} else {
  passed = "fail";
}

도움이 멈추는 곳은 분기가 값을 생성하는 것보다 더 많이 할 때입니다. 어느 쪽이든 여러 문을 실행해야 하거나, 한 삼항 연산자를 다른 것 안에 중첩하는 자신을 발견한다면, 얻은 가독성은 사라집니다. 그 시점에 if 문이 더 명확한 선택입니다.

**삼항 연산자**는 JavaScript에서 세 개의 피연산자를 취하는 유일한 연산자입니다: condition ? valueIfTrue : valueIfFalse. 유용하게 만드는 구분은 이것이 문이 아니라 표현식이라는 것입니다. 값으로 평가되므로 문이 갈 수 없는 곳에 들어갑니다. 할당의 우변, 인자, 템플릿 리터럴.

const score = 82;
const label = score >= 60 ? "pass" : "fail";

console.log(`Result: ${label}`); // Result: pass

전체 작업이 두 값 중 선택하는 것일 때 이를 사용하고, 할당을 한 곳에 유지하는 대신 양쪽 분기에서 반복하기 때문에 if보다 선호합니다. 삼항 연산자로 값을 선택하고, 분기를 실행하지 마세요.

실패 모드는 중첩입니다. 분기가 그 자체로 삼항 연산자인 삼항 연산자는 기술적으로 작동하지만, 독자가 오른쪽에서 왼쪽으로 파싱하고 동시에 여러 조건을 머리에 유지하도록 강제합니다:

// 읽기 어렵습니다. 여기서는 if 체인이나 switch를 선호하세요.
const grade = score >= 90 ? "A" : score >= 70 ? "B" : score >= 50 ? "C" : "F";

그 줄은 올바른 답을 생성하고 다음 독자에게 실제 노력이 듭니다. 결정에 두 가지 이상의 결과가 있으면, if 체인이나 switch가 훨씬 더 명확하게 표현합니다. 이것이 다음 섹션의 주제입니다.

Juno삼항 연산자로 값 선택하기 삼항 연산자는 두 값 중 하나를 선택하는 간결한 방법입니다: condition ? valueIfTrue : valueIfFalse. 저장하거나 출력할 것을 선택할 때 빛을 발합니다. 분기가 단일 값을 반환하는 것보다 더 많이 해야 한다면, 전체 if를 사용하세요. 더 명확하게 읽힐 것입니다.

Juno삼항 연산자로 값 선택하기 삼항 연산자는 표현식이므로, if 문이 할 수 없는 할당하거나 템플릿 리터럴에 드롭할 수 있는 값을 제공합니다. 이것이 두 값 중 하나를 선택하기 위한 깔끔한 선택이 되는 이유이며, if 버전은 양쪽 분기에서 할당을 반복하기 때문입니다. 분기가 실제 작업을 수행하거나 삼항 연산자를 중첩하기 시작하면 if로 전환하세요.

Juno삼항 연산자로 값 선택하기 삼항 연산자는 표현식이므로, 문이 갈 수 없는 곳에 갑니다. 할당, 인자, 템플릿 리터럴. 이를 사용하여 값을 선택하고, 분기를 실행하지 마세요. 이렇게 하면 읽기 쉬워집니다. 한 삼항 연산자를 다른 것 안에 중첩하면 더 이상 보상하지 않으므로, 다중 결과 결정은 if 체인이나 switch에 속합니다.

switch로 고정된 경우에 대해 한 값 비교하기

한 값을 고정된 가능성 목록과 비교할 때, **switch 문**이 긴 if / else if 체인보다 더 깔끔할 수 있습니다. 확인할 값을 제공한 다음 비교할 경우를 나열합니다.

const day = "Tue";

switch (day) {
  case "Sat":
    console.log("Weekend");
    break;
  case "Sun":
    console.log("Weekend");
    break;
  default:
    console.log("Weekday"); // Weekday
}

switch는 day를 각 case와 차례대로 비교합니다. 일치를 찾으면 해당 경우의 코드를 실행합니다. break는 멈추라고 말합니다. 없으면 JavaScript는 다음 경우로 계속 실행합니다. default는 일치하는 경우가 없을 때 실행되는 대체로, 체인의 최종 else와 같습니다.

break 잊기는 클래식 switch 실수입니다. 이를 빠뜨리면 코드는 일치하는 경우를 실행한 다음 break를 만나거나 끝까지 모든 아래 경우를 실행하는데, 이것이 의도한 것은 거의 없습니다.

**switch 문**은 한 값을 고정된 경우 집합과 비교합니다. 모든 분기가 같은 값에 대한 동등성을 테스트할 때 긴 if / else if 체인보다 더 명확하게 읽힙니다.

const status = "shipped";

switch (status) {
  case "pending":
    console.log("Order received.");
    break;
  case "shipped":
    console.log("On its way."); // On its way.
    break;
  case "delivered":
    console.log("Delivered.");
    break;
  default:
    console.log("Unknown status.");
}

세 가지가 논리를 수행합니다. case는 일치할 값을 표시하고, break는 일치한 경우를 끝내고, default는 일치하지 않은 것을 처리합니다. 일치는 엄격한 동등성(===)을 사용하므로 case "1"은 숫자 1과 일치하지 않습니다.

함정은 폴스루(fall-through)입니다. break 없는 case는 멈추지 않습니다. break를 만나거나 switch의 끝까지 실행이 다음 경우로 계속됩니다. 이것은 보통 버그이지만 여러 경우가 하나의 결과를 공유할 때는 가끔 유용합니다:

const day = "Sat";

switch (day) {
  case "Sat":
  case "Sun":
    console.log("Weekend"); // Weekend
    break;
  default:
    console.log("Weekday");
}

여기서 "Sat"가 일치하고 "Sun"의 공유 블록으로 폴스루되므로 두 주말 날 모두 같은 줄을 실행합니다. 이것이 의도적으로 사용된 폴스루이며, 빈 경우가 공유 블록 바로 위에 직접 쌓여 있기 때문에만 명확하게 읽힙니다.

**switch 문**은 단일 값을 취하고 일련의 case 레이블과 비교하여, 일치하는 첫 번째의 블록을 실행합니다. 비교는 엄격한 동등성(===)이므로 중요합니다: case "1"은 숫자 1과 일치하지 않으며, 구출할 타입 강제가 없습니다.

const status = "shipped";

switch (status) {
  case "pending":
    console.log("Order received.");
    break;
  case "shipped":
    console.log("On its way."); // On its way.
    break;
  case "delivered":
    console.log("Delivered.");
    break;
  default:
    console.log("Unknown status.");
}

사람들이 과소평가하는 메커니즘은 폴스루입니다. switch는 한 경우를 실행하고 멈추지 않습니다. 일치하는 레이블로 점프한 다음 break 또는 닫는 중괄호를 만날 때까지 경우 경계를 무시하면서 직진합니다. 누락된 break는 일치 아래의 모든 경우를 실행합니다. 이것이 대부분의 switch 버그의 원인이며, 또한 동작의 의도된 유일한 사용입니다. 여러 값이 블록을 공유하도록 레이블을 쌓는 것입니다:

const day = "Sat";

switch (day) {
  case "Sat":
  case "Sun":
    console.log("Weekend"); // Weekend
    break;
  default:
    console.log("Weekday");
}

default가 마지막에 올 필요는 없지만, 마지막에 두는 것이 switch를 읽기 쉽게 유지하는 관례입니다. 또한 switch는 한 값의 동등성만 테스트하므로, 이전의 등급 예시처럼 범위 확인의 체인은 switch가 될 수 없습니다. 이 제한은 switch가 올바른 도구일 때를 말해주는 정확히 그것입니다. 이 레벨의 마지막 부분이 이를 분해합니다.

Junoswitch로 고정된 경우에 대해 한 값 비교하기switch는 한 값을 case 옵션 목록과 비교하고 일치하는 것을 실행하며, default는 포괄적입니다. 각 경우를 항상 break로 끝내세요. 그렇지 않으면 JavaScript가 아래 경우로 계속 실행합니다. 그 누락된 break는 거의 모든 사람이 최소 한 번은 만드는 실수입니다.

Junoswitch로 고정된 경우에 대해 한 값 비교하기 모든 분기가 같은 값에 대한 동등성을 테스트할 때 switch를 사용하고, ===로 일치한다는 것을 기억하세요. "1"은 1이 아닙니다. 각 경우에는 break가 필요하거나 다음 경우로 폴스루됩니다. 그 폴스루는 기본적으로 버그이지만, 공유 블록 위에 빈 경우를 쌓는 것이 의도적으로 사용하는 유일한 경우입니다.

Junoswitch로 고정된 경우에 대해 한 값 비교하기switch는 엄격한 동등성으로 한 값을 일치시킨 다음 경우 경계를 무시하면서 break를 만날 때까지 아래쪽으로 실행되므로, 누락된 break는 일치 아래의 모든 경우를 실행합니다. 공유 블록 위에 레이블을 쌓는 것이 의도적 폴스루의 유일한 사용입니다. 단일 값에 대한 동등성만 테스트하므로, 범위 확인 집합은 if 체인으로 남습니다.

올바른 도구 선택하기

이제 결정을 내릴 수 있는 세 가지 방법이 있으며, 선택은 주로 적합성에 관한 것입니다. 대부분의 분기에는 if / else if / else 체인을 사용하세요. 특히 조건이 범위이거나 조합일 때 그렇습니다. 두 값 중 하나를 저장하거나 인쇄할 때 삼항 연산자를 사용하세요. 한 값을 고정된 옵션 목록과 비교할 때 switch를 사용하세요.

이 중 어느 것도 다른 것보다 더 고급이 아닙니다. 결정을 가장 명확하게 표현하는 것을 선택하고, 확실하지 않으면 if 문이 항상 안전한 기본값입니다.

세 가지 형태가 겹치므로, 유용한 기술은 도구를 결정의 모양과 일치시키는 것입니다. if 체인은 모든 것을 처리하며, 조건이 범위(score >= 70) 또는 조합(age >= 18 && hasTicket)일 때마다 올바른 선택입니다. 삼항 연산자는 한 식으로 두 값 중 선택하기 위한 것입니다. switch는 단일 값이 상태나 요일 이름처럼 고정된 경우 목록에 대해 동등성을 테스트할 때 맞습니다.

얽힌 코드를 많이 방지하는 한 가지 규칙이 있습니다. 가장 짧은 것이 아니라 가장 명확하게 읽히는 형태를 선택하세요. 중첩된 삼항 연산자는 if 체인보다 짧고 읽기 어렵습니다. 길이가 목표가 아닙니다. 다음 사람, 그리고 종종 한 달 뒤의 당신을 위해 쓰세요.

세 가지 도구이며, 그 사이의 경계는 결정의 모양으로 내려옵니다. if 체인은 일반적인 형태입니다. 범위, 조합, 조건이 표현할 수 있는 모든 것을 처리하므로, 분기가 한 값에 대한 동등성 테스트가 아닐 때마다 기본값입니다. 삼항 연산자는 두 값 중 하나를 표현식으로 선택하는 단일 작업으로 좁혀지며, 양쪽 분기가 단순할 때만 보상합니다. switch는 한 값이 고정된 경우 집합에 대해 동등성과 비교될 때 맞습니다.

범위를 벗어나지만 명명할 가치가 있는 네 번째 옵션이 있습니다. 값을 결과에 매핑할 때, 조회 객체가 종종 셋 다를 이깁니다. 경우별로만 값을 할당하는 switch, 또는 긴 if 체인의 value === "x" 테스트는 색인을 만드는 평범한 객체로 더 명확합니다. 객체가 준비되면 그 패턴을 만날 것입니다. 지금은 switch가 실제로는 변장한 테이블일 때를 주목하세요.

이를 마무리하는 두 가지 고급 습관이 더 있습니다. 첫 번째는 참 같은 값과 거짓 같은 값입니다. 조건이 비교일 필요는 없습니다. JavaScript는 조건을 부울로 강제하고, 거짓으로 나오는 값은 고정되고 짧은 집합입니다: false, 0, "" (빈 문자열), null, undefined, 및 NaN. 다른 모든 것은 참 같습니다. 이것이 if (name)이 "name은 비어있지 않다"의 일반적인 속기인 이유이며, 또한 놀라울 수 있는 이유입니다. 0 값은 실제 숫자이지만 거짓 같은 조건이므로 if (count)는 count가 0일 때 블록을 건너뜁니다. 거짓 같은 집합을 알고 이 확인들은 추측을 멈춥니다.

두 번째는 가드 절(guard clause)입니다. 결정이 실제로는 일찍 빠져나가는 것에 관한 것일 때, 깊게 중첩된 if는 먼저 종료 조건을 확인하고 멈추는 것보다 더 나쁘게 읽힙니다. 그 "나쁜 경우를 확인하고, 멈추고, 좋은 경로로 계속진행"하는 모양이 가드 절이며, 주요 논리가 분기 안에 묻혀 있는 대신 들여쓰지 않은 상태로 유지됩니다. 멈추는 부분은 보통 함수에서 반환하는 것을 의미합니다. 이것이 다음 장인 함수입니다. 전체 패턴이 그곳에 나타납니다. 지금 가져갈 아이디어는 예외 경우를 먼저 처리하여 결정을 평탄화하는 것이 정상 경우를 더 깊게 중첩하는 것보다 거의 항상 더 명확하다는 것입니다.

Juno올바른 도구 선택하기 대부분의 결정에는 if 체인을 사용하고, 두 값 중 하나를 선택할 때 삼항 연산자를 사용하고, 한 값을 고정 옵션과 일치시킬 때 switch를 사용하세요. 이 중 어느 것도 다른 것보다 멋지지 않습니다. 결정을 가장 명확하게 표현하는 것을 선택하고, 확실하지 않으면 if 문으로 기본값을 설정하세요.

Juno올바른 도구 선택하기 도구를 모양과 일치시키세요. 범위와 조합에는 if, 두 값 중 선택에는 삼항 연산자, 고정된 경우에 대한 동등성에는 switch. 가장 짧은 것이 아니라 가장 명확하게 읽히는 형태에 도달하세요. 중첩된 삼항 연산자는 짧고 따르기 어렵습니다. 다음 독자(종종 당신)를 위해 쓰세요.

Juno올바른 도구 선택하기if 체인은 일반 도구이고, 삼항 연산자는 두 값 중 하나를 선택하기 위한 것이며, switch는 고정된 경우 집합에 대한 동등성을 위한 것이며, 조회 객체는 종종 값 매핑 switch를 이깁니다. 거짓 같은 집합(false, 0, "", null, undefined, NaN)을 머리에 유지하세요. 그러면 if (count)가 카운트가 0일 때 놀라지 않습니다. 그리고 결정이 실제로는 일찍 종료하는 것에 관한 것일 때, 나쁜 경우를 먼저 처리하고 중첩을 평탄화하세요. 완전한 가드 절은 함수와 함께 옵니다.

조건문이 여기서 어디로 가는지

조건문은 프로그램이 고정 스크립트를 멈추고 입력에 반응하기 시작하게 합니다. 이를 지속적으로 사용할 것이며, 주변의 모든 것과 결합됩니다. 참 또는 거짓 답은 연산자에서 오고, 여기서 내린 결정은 루프로 데이터에 반복 적용하고 함수로 패키징할 때 보상을 받기 시작합니다.

다음 장인 루프는 제어 흐름의 다른 절반을 추가합니다. 코드를 실행할지 선택하는 것이 아니라, 조건이 멈추라고 할 때까지 반복 실행하는 것입니다.