이 번역은 완료되지 않았습니다. 이 문서를 번역해 주세요.

어느 프로그래밍 언어에서 코드는 결정을 해야하고, 다른 입력에 따라서 적절하게 행동해야 합니다. 예를 들어 게임에서 플레이어의 생명이 0이라면, 게임 오버입니다. 날씨 앱을 아침에 본다면, 일출 그래픽을 보여줘야 하고, 야간이 본다면 별과 달은 보여줘야합니다. 이 글에서 자바스크립트에서 조건문이 어떻게 동작하는지 알아볼 것입니다.

선수 조건:

기본적인 컴퓨터 활용 능력, HTML, CSS, Javascript에 대한 기본적인 이해(JavaScript first steps.)

목표:

자바스크립트에서 조건문의 사용법을 이해합니다.

To understand how to use conditional structures in JavaScript.

당신은 하나의 조건을 가질 수 있습니다.

사람(다른 동물들)은 작은 것(과자를 하나 먹을까? 두개 먹을까?)부터 큰 것(고향에 머물면서 아버지의 농장에서 일해야 할까? 미국으로 유학을 갈까?)까지 그들의 경험을 바탕으로 항상 결정을 합니다.

조건문은 결정해야하는 선택(e.g. "과자 하나? 두개?)부터 그 결과의 결과(과자를 하나 먹었을 때의 결과가 여전히 배고플 수 있고, 두개을 먹었을 때의 결과가 배부르지만, 엄마한테 과자를 다 먹었다고 혼날 수 있다.)까지 자바스크립트에서 의사 결정을 내릴 수 있습니다. 

if ... else 문

자바스크립에서 사용될 조건문 중에서 지금까지 가장 일반적인 유형을 봅시다. — the humble if ... else statement.

if ... else 기본 문법

if...else 기본 문법은 pseudocode 같이 보입니다.:

if (condition) {
  code to run if condition is true
} else {
  run some other code instead
}

Here we've got:

  1. 키워드 if 뒤에 괄호가 옵니다.
  2. 시험할 조건은 괄호 안에 위치합니다. (전형적으로 "이 값이 다른 값보다 큰지", "이 값이 존재하는지") 이 조건은 마지막 모듈에서 논의했던 비교연산자(comparison operators)를 사용할 것이고 true 나  false를 리턴합니다.
  3. 내부의 중괄호 안에 코드가 있습니다. — 이것은 우리가 좋아하는 코드일 수 있고, 조건이 true를 반환하는 경우에만 실행됩니다.
  4. 키워드 else.
  5. 또 다른 중괄호 안에 더 많은 코드가 있습니다. — 이것은 우리가 좋아하는 코드 일 수 있고, 조건이 true가 아닌 경우에만 실행됩니다.

이 코드는 사람이 읽을 수 있습니다. — "만약 조건이 true면, 코드 A를 실행하고, 아니면 코드 B를 실행한다." 라고 말합니다.

반드시 else와 두 번째 중괄호를 포함하지 않아도 된다는 것을 주목해야 합니다. — 다음은 또한 완벽한 코드입니다.:

if (condition) {
  code to run if condition is true
}

run some other code

하지만, 여기서 조심할 필요가 있습니다. — 이 경우에, 코드의 두 번째 블록은 조건문에 의해서 제어되지 않습니다. 그래서 조건이 truefalse를 리턴하는 것에 관계없이 항상 동작합니다. 이것이 반드시 나쁜 것은 아니지만, 원하는 대로 되지 않을 수도 있습니다. — 코드의 한 블록이나 다른 블록이 실행되거나 둘 다 실행되지 않는 것을 원할 것입니다.

마지막으로, 다음과 같이 짧은 스타일로 중괄호 없이 쓰여진 if...else를 때때로 볼 수 있었을 것입니다.:

if (condition) code to run if condition is true
else run some other code instead

이것은 완벽하게 유효한 코드이지만, 사용하는 것을 추천하지 않습니다. — 중괄호를 사용하여 코드를 구분하고, 여러 줄과 들여쓰기를 사용한다면, 코드를 쉽게 읽고, 진행되는 작업을 훨씬 쉽게 처리할 수 있습니다.

실제 예시

문법을 잘 이해하기 위해서 실제 예시를 알아봅시다. 자녀가 어머니나 아버지에게 집안일을 도와달라고 요청을 받았다고 상상해 봅시다. 부모님이 "사랑하는 애야, 쇼핑을 하고 가는것을 도와주면, 네가 원하는 장난감을 가질 수 있는 돈을 줄께"라고 말하고 합시다. 자바스크립트에서 이것을 다음과 같이 표현할 수 있습니다.

var shoppingDone = false;

if (shoppingDone === true) {
  var childsAllowance = 10;
} else {
  var childsAllowance = 5;
}

위 코드에는 항상 false를 리턴하는 shoppingDone변수를 결과로 얻을 것입니다. 이는 우리의 가난한 아이에게 실망을 의미합니다. 아이가 쇼핑을 한다면 shoppingDone변수를 true로 설정하는 메커니즘을 부모에게 제공하는 것은 우리에게 달려있습니다.

Note: You can see a more complete version of this example on GitHub (also see it running live.)

else if

지난 예시에서 우리에게 두 가지 선택이나 결과를 제공했습니다. — 하지만 우리가 두 가지보다 더 많은 것을 원한다면?

추가로 선택/결과를 if...else에 연결하는 방법이 있습니다. — else if를 사용하여. 각 추가 선택은 if() { ... }else { ... }사이에 추가적인 블록이 필요합니다. 간단한 날씨 예보 어플리케이션의 일부가 될 수 있는 다음의 예시를 확인하세요. 

<label for="weather">Select the weather type today: </label>
<select id="weather">
  <option value="">--Make a choice--</option>
  <option value="sunny">Sunny</option>
  <option value="rainy">Rainy</option>
  <option value="snowing">Snowing</option>
  <option value="overcast">Overcast</option>
</select>

<p></p>
var select = document.querySelector('select');
var para = document.querySelector('p');

select.addEventListener('change', setWeather);

function setWeather() {
  var choice = select.value;

  if (choice === 'sunny') {
    para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
  } else if (choice === 'rainy') {
    para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
  } else if (choice === 'snowing') {
    para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
  } else if (choice === 'overcast') {
    para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
  } else {
    para.textContent = '';
  }
}

  1. 여기서 우리는 HTML <select> 엘리먼트를 사용하여 다른 날씨 선택과 간단한 문단을 만들 수 있습니다. 
  2. 자바스크립트에서 <select><p> 엘리먼트를 모두 저장하고 있고,  <select> 엘리먼트에 이벤트 리스너를 추가하고, 값이 변할 때 setWeather()함수가 동작합니다.
  3. 함수가 동작했을 때, 현재 <select> 에서 선택된 값을 choice라는 변수에 설정합니다. 그런 다음 조건문을 사용하여 choice값에 따라 문단 안에 다른 텍스트를 표시합니다. if() {...} block에서 테스트된 첫 번째를 제외하고, else if() {...}에서 조건은 테스트되는 방법에 유의하세요.
  4. else {...}안의 가장 마지막 선택은 기본적으로 "최후의 수단" 옵션입니다. — true인 조건이 없으면 코드가 실행됩니다. 이 경우 아무것도 선택되지 않으면 예를 들어, 사용자가 처음에 표시한 "Make a choice" placeholder 옵션에서 다시 선택하기로 한다면, 문단의 텍스트를 비우는 역할을 합니다.

Note: You can also find this example on GitHub (see it running live on there also.)

비교 연산자

비교 연산자는 우리의 조건문 안에 조건을 테스트하는데 사용된다. 우리는 먼저 Basic math in JavaScript — numbers and operators 에서 비교 연산자를 봤습니다. 

  • ===와 !== — 한 값이 다른 값과 같거나 다른지 테스트 한다.
  • < 와 > — 한 값이 다른 값보다 작은지 큰지 테스트 한다.
  • <= 와 >= — 한 값이 다른 값보다 작거나 같은지, 크거나 같은지 테스트 한다

Note: Review the material at the previous link if you want to refresh your memories on these.

boolean(true/false)값과 몇 번이고 다시 만날 일반적인 패턴을 테스트하는 것의 특별한 언급을 하고 싶었습니다.. falseundefinednull0NaN이나 빈 문자열('')이 아닌 어떤 값은 조건문이 테스트 되었을 때, true를 리턴합니다.. 그러므로 우리는 변수가 참인지 값이 존재하는지 간단하게 변수 이름을 사용할 수 있습니다.. 예를 들어,

var cheese = 'Cheddar';

if (cheese) {
  console.log('Yay! Cheese available for making cheese on toast.');
} else {
  console.log('No cheese on toast for you today.');
}

그리고 부모님을 위해 집안일을 하는 아이에 대한 이전 예시에서 리턴하는 것을 다음과 같이 작성할 수 있었습니다.

var shoppingDone = false;

if (shoppingDone) { // don't need to explicitly specify '=== true'
  var childsAllowance = 10;
} else {
  var childsAllowance = 5;
}

if ... else 중첩

if...else문을 다른 문 앞에 넣는 것(중첩하여)은 완벽하게 가능합니다.. 예를 들어, 온도가 무엇인지에 따라 더 많은 선택의 옵션을 보여주기위해 우리의 날씨 예보 어플리케이션에서 업데이트 할 수 있습니다..

if (choice === 'sunny') {
  if (temperature < 86) {
    para.textContent = 'It is ' + temperature + ' degrees outside — nice and sunny. Let\'s go out to the beach, or the park, and get an ice cream.';
  } else if (temperature >= 86) {
    para.textContent = 'It is ' + temperature + ' degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.';
  }
}

비록 코드가 모두 동작하더라도, 각 if...else문은 다른 문과 완전히 독립적으로 동작합니다..

논리 연산자: AND, OR and NOT

만약 중첩된 if...else문을 작성하는 것 없이 다양한 조건을 테스트하길 원한다면 logical operators 이 당신을 도와줄 수 있습니다. 조건 내에서 사용될 때, 처음 두 가지는 다음과 같이 합니다.

  • && — AND; true를 리턴하는 전체 표현식을 위해 각각 true계산되는 둘 이상의 표현식을 함께 연결할 수 있습니다.
  • || — OR; true를 리턴하는 전체 표현식을 위해 하나 이상이 true로 계산되는 둘 이상의 표현식을 함께 연결할 수 있습니다.

AND 예시를 위해서 앞의 예제 코드 중에서 다음과 같이 작성할 수 있습니다.

if (choice === 'sunny' && temperature < 86) {
  para.textContent = 'It is ' + temperature + ' degrees outside — nice and sunny. Let\'s go out to the beach, or the park, and get an ice cream.';
} else if (choice === 'sunny' && temperature >= 86) {
  para.textContent = 'It is ' + temperature + ' degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.';
}

위 예시에서, 첫 번째 코드 블록은 choice === 'sunny'와 temperature < 86가 true를 리턴한다면 실행될 것입니다.

빠르게 OR 예시를 봅시다.

if (iceCreamVanOutside || houseStatus === 'on fire') {
  console.log('You should leave the house quickly.');
} else {
  console.log('Probably should just stay in then.');
}

논리 연산자의 마지막 유형인 ! 연산자로 표현되는 NOT은 표현식을 무효화할 수 있습니다. 위 OR 예시와 함께 봅시다.

if (!(iceCreamVanOutside || houseStatus === 'on fire')) {
  console.log('Probably should just stay in then.');
} else {
  console.log('You should leave the house quickly.');
}

위 예시에서, OR 문이 true를 리턴한다면, NOT 연산자는 전체 표현식이 false를 리턴하도록 무효화할 것입니다.

어떤 구조든지 당신이 원하는 만큼 많은 논리 문을 결합할 수 있습니다. 다음 예시는 두 가지 OR 문 모두 true를 리턴하면, 전체 AND문은 true를 리턴한다는 것을 의미하는 코드를 실행합니다.

if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'Steve')) {
  // run the code
}

조건 문에서 논리적 OR 연산자를 사용할 때 일반적인 실수는 값을 한번 체크하는 변수를 명시한 다음, || (OR) 연산로 분리하여 true를 리턴될 수 있는 변수의 리스트를 사용한다는 것입니다. 예를 들어: 

if (x === 5 || 7 || 10 || 20) {
  // run my code
}

이 경우에 if(...) 내부 조건은 7(또는 다른 0이 아닌 값)이 항상 true가 되므로, 항상 true를 계산할 것입니다. 조건은 "x가 5와 같거나 7이 true면, 항상 그렇다"라고 분명하게 말하고 있습니다. 이것은 논리적으로 우리가 원하는 것이 아닙니다! 이를 동작하게 하기 위해 우리는 각 OR 연산자를 완전하게 명시해야 합니다.

if (x === 5 || x === 7 || x === 10 ||x === 20) {
  // run my code
}

switch 문

if...else 문은 조건문 코드가 잘 동작되는 일을 하지만, 단점이 없지 않습니다. 그 문은 두 가지 선택을 가지고 있는 경우에 주로 유용합니다. 그리고 각각은 실행되기 위한 합리적인 양의 코드가 필요하고, AND/OR 조건은 복잡합니다.(e.g. 다수의 논리 연산자) 어떤 값의 선택으로 변수를 설정하거나 조건에 따라서 특정 문을 출력하는 경우 구문이 약간 번거로울 수 있습니다. 특히 많은 선택 항목이 있는 경우에 특히 그렇습니다.

switch statements 은 당신의 친구입니다. 이는 입력으로 하나의 표현식/값을 받고, 값과 일치하는 하나를 찾을 때까지 여러 항목을 살펴보고 그에 맞는 코드를 실행합니다. 여기 몇몇 많은 수도코드가 있습니다.

switch (expression) {
  case choice1:
    run this code
    break;

  case choice2:
    run this code instead
    break;
    
  // include as many cases as you like

  default:
    actually, just run this code
}

여기에서: 

  1. 뒤에 괄호가 오는 키워드 switch.
  2. 괄오 내부에는 표현식이나 값을 입력합니다.
  3. 표현식이나 값이 될 수 있는 선택이 따라 오는 키워드 case는 콜론이 뒤에 옵니다.
  4. break문은 뒤에 세미콜론이 옵니다. 이전의 선택이 표현식이나 값과 일치한다면 해당 코드 블록에서 실행을 멉추고, switch 문 아래에 있는 어떤 코드로 이동합니다.
  5. 원하는 많은 다른 케이스를 입력할 수 있습니다. 
  6. 키워드 default는 case들과 같은 코드를 입력하고, 일치하는 항목이 없으면 실행되는 기본 옵션입니다. case와 일치하지 않고, 예외가 필요하지 않는 경우 제외할 수 있습니다.

Note: You don't have to include the default section — you can safely omit it if there is no chance that the expression could end up equaling an unknown value. If there is a chance of this however, you need to include it to handle unknown cases.

A switch example

Let's have a look at a real example — we'll rewrite our weather forecast application to use a switch statement instead:

<label for="weather">Select the weather type today: </label>
<select id="weather">
  <option value="">--Make a choice--</option>
  <option value="sunny">Sunny</option>
  <option value="rainy">Rainy</option>
  <option value="snowing">Snowing</option>
  <option value="overcast">Overcast</option>
</select>

<p></p>
var select = document.querySelector('select');
var para = document.querySelector('p');

select.addEventListener('change', setWeather);


function setWeather() {
  var choice = select.value;

  switch (choice) {
    case 'sunny':
      para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
      break;
    case 'rainy':
      para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
      break;
    case 'snowing':
      para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
      break;
    case 'overcast':
      para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
      break;
    default:
      para.textContent = '';
  }
}

Note: You can also find this example on GitHub (see it running live on there also.)

삼항연산자 

다른 예제로 들어가기 전에 소개하고 싶은 마지막 구문이 있다.삼항(조건)연산자( ternary or conditional operator)는 조건이 참이면 한 값/표현식을 반환하고 조건이 거짓이면 다른  값/표현식을 반환하는 구문이다.— 이것은 어떤 상황에 유용할 수 있으며, 참/거짓 조건을 간단히 선택할 수 있는 상황이라면 if...else 블록문보다 코드를 훨씬 적게 사용할수 있다. 이 pseudocode는 아래와 같다:

( condition ) ? run this code : run this code instead

그러면 간단한 예를 보자:

var greeting = ( isBirthday ) ? 'Happy birthday Mrs. Smith — we hope you have a great day!' : 'Good morning Mrs. Smith.';

isBirthday 라는 변수명이 여기 있다— 게스트가 생일이면 '해피버스데이' 메세지를 보내고, 생일이 아니라면  일반적인 '인사' 메세지를 보내는 경우에 해당된다..

삼항 연산자 예제

삼항연산자로 변수값을 정할 필요가 없다; 단지  좋아하는 함수나 코드를 사용하면 된다. — . 이 예제는 삼항연산자를 사용하여 사이트의 스타일링 테마를 선택할  수 있는 것을 보여준다

<label for="theme">Select theme: </label>
<select id="theme">
  <option value="white">White</option>
  <option value="black">Black</option>
</select>

<h1>This is my website</h1>
var select = document.querySelector('select');
var html = document.querySelector('html');
document.body.style.padding = '10px';

function update(bgColor, textColor) {
  html.style.backgroundColor = bgColor;
  html.style.color = textColor;
}

select.onchange = function() {
  ( select.value === 'black' ) ? update('black','white') : update('white','black');
}

여기에는  black이나 white의 테마를 고르기 위한 '<select>' 엘리먼트가 있고, 여기에 더하여 웹사이트 제목을 보여주는 '<h1>" 엘리먼트가 있다.  update() 함수를 덧붙이면 두 칼라를 입력 인수(parameter)로 선택할 수 있다. 웹사이트 배경 칼라가 첫 번째 칼라로 지정되고, 텍스트 칼라가 두 번째로 정해진다.

끝으로,  'onchange' 이벤트 리스너는 삼중연산자를 포함하는 함수를 움직('run')이게 합니다. select.value === 'black' 조건을 테스트는 하는 것으로 시작하는데, 이 조건이 참이면  update() 함수가 배경색은 black으로 텍스트 색은  white로 동작하게 합니다. 이와는 반대로 select theme이  white로 선택되면(조건이 거짓이면) , update() 함수는  배경색은 white으로 텍스트 색은  black로 동작하게 합니다.

Note: You can also find this example on GitHub (see it running live on there also.)

Active learning: A simple calendar

In this example you are going to help us finish a simple calendar application. In the code you've got:

  • A <select> element to allow the user to choose between different months.
  • An onchange event handler to detect when the value selected in the <select> menu is changed.
  • A function called createCalendar() that draws the calendar and displays the correct month in the <h1> element.

We need you to write a conditional statement inside the onchange handler function, just below the // ADD CONDITIONAL HERE comment. It should:

  1. Look at the selected month (stored in the choice variable. This will be the <select> element value after the value changes, so "January" for example.)
  2. Set a variable called days to be equal to the number of days in the selected month. To do this you'll have to look up the number of days in each month of the year. You can ignore leap years for the purposes of this example.

Hints:

  • You are advised to use logical OR to group multiple months together into a single condition; many of them share the same number of days.
  • Think about which number of days is the most common, and use that as a default value.

If you make a mistake, you can always reset the example with the "Reset" button. If you get really stuck, press "Show solution" to see a solution.

Active learning: More color choices!

In this example you are going to take the ternary operator example we saw earlier and convert the ternary operator into a switch statement that will allow us to apply more choices to the simple website. Look at the <select> — this time you'll see that it has not two theme options, but five. You need to add a switch statement just underneath the // ADD SWITCH STATEMENT comment:

  • It should accept the choice variable as its input expression.
  • For each case, the choice should equal one of the possible values that can be selected, i.e. white, black, purple, yellow, or psychedelic.
  • For each case, the update() function should be run, and be passed two color values, the first one for the background color, and the second one for the text color. Remember that color values are strings, so need to be wrapped in quotes.

If you make a mistake, you can always reset the example with the "Reset" button. If you get really stuck, press "Show solution" to see a solution.

Conclusion

And that's all you really need to know about conditional structures in JavaScript right now! I'm sure you'll have understood these concepts and worked through the examples with ease; if there is anything you didn't understand, feel free to read through the article again, or contact us to ask for help.

See also

In this module

문서 태그 및 공헌자

이 페이지의 공헌자: Jonnie-Lion, gsphyo91
최종 변경자: Jonnie-Lion,