if문은 말 그대로 특정 조건일 때 실행되는 구문을 뜻합니다. 즉, JavaScript 코드로 조건을 제시해주면 그 조건이 성립될 때, 코드가 실행됩니다. 기본 구조는 다음과 같습니다.
if (조건) { 실행할 코드 }
그럼, JavaScript로 조건을 작성하는 방법을 배워봅시다. JavaScript에는 truthy, **falsy**라는 개념(링크를 꼭 확인해주세요)이 있습니다. JavaScript는 조건이 truthy한 값일 때 조건이 성립된다고 해석하며, 조건이 falsy한 값일 때 조건이 성립되지 않는다고 해석합니다. 조건이 성립되는 경우를 몇 가지 살펴봅시다.
if (true) { console.log('true!'); } if (123) { console.log('true!'); } if ([]) { console.log('true!'); }
위의 조건문들은 전부 console.log가 작동합니다. 그러면 조건이 성립되지 않는 경우를 몇 가지 살펴봅시다.
if (false) { console.log('false!'); } if (null) { console.log('false!'); } if (undefined) { console.log('false!'); } if (0) { console.log('false!'); }
위의 조건문들은 전부 falsy한 경우이므로 console.log가 찍히지 않습니다. 지금까지 간단한 예를 알아보았는데, 공교롭게도 간단한 조건만 존재하지는 않죠. 조금 더 복잡한 경우에는 어떤 식으로 조건을 작성하는지 알아봅시다. 예를 들어, a라는 변수가 1이고, b라는 변수가 2일 때 작동하는 코드를 짜고 싶다면 다음과 같이 작성합니다.
if (a === 1 && b === 2) { // 원하는 코드 }
위와 같이 여러 조건을 중복해서 써야할 때에는 비교 연산자와 논리 연산자를 사용합니다. 비교 연산자 중에서 일치 연산자는 ==과 !=의 사용을 피하고, 대신 ===과 !==을 사용합니다. 그 이유는 ==과 != 연산자는 피연산자들의 타입이 서로 다르면 강제로 타입을 변환하여 비교하기 때문에, 원하지 않는 결과가 나올 수도 있기 때문입니다. 논리 연산자는 여러 조건에 대한 논리를 구성하기 위해 사용합니다. 여기서 논리는 &&(AND), ||(OR), !(NOT)입니다. 간단하게 말해서 && 연산자는 두 조건이 모두 충족됐을 때 통과되고, || 연산자는 두 조건 중 하나라도 충족되면 통과됩니다. ! 연산자는 조건을 뒤집어 줍니다. 즉, truthy한 값에 ! 연산을 하면 false가 나오고, falsy한 값에 ! 연산을 하면 true가 나옵니다. 몇 가지 예를 봅시다.
var a = 1; var b = 2; if (a === 1 && b === 2) { console.log('Wow!'); } if (a === 1 || b === 2) { console.log('Wow!'); } if (!a === false) { console.log('Wow!'); }
위의 코드들은 모두 console.log가 찍힙니다.
두 수를 정한 후, if문을 이용해 큰 수에서 작은 수를 뺀 값을 console.log로 찍는 코드를 작성해봅시다.
두 수를 정하고, if문을 이용해 큰 수에서 작은 수를 나누었을 때의 나머지를
console.log
로 찍어주는 작성해봅시다.
for문과 if문을 이용해 1부터 원하는 숫자까지의 정수 중 2의 배수만 더해주는 코드를 작성해봅시다. 그리고 더한 값을
console.log
로 확인해주세요.
빈 배열을 만들고, for문을 이용해 1부터 원하는 숫자까지의 정수 중 3의 배수와 5의 배수만 배열에 넣는 코드를 작성해봅시다. 그리고 제대로 들어갔는지
console.log
를 이용해 확인해봅시다.
var scores = [50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100];
위와 같이 학생들의 점수가 배열로 주어졌을 때, 평균을 넘는 학생이 몇 %인지 구해봅시다.