자바스크립트 if문

자바스크립트 if문 / 조건문 – JavaScript 4

by

프로그램 흐름 제어

프로그램이 하는 일은 데이터를 조작하는 일입니다. 변수를 생성하고 값을 할당합니다. 그리고 또 변수를 생성하여 값을 할당하고 변경하는 일을 반복합니다.

어셈블리어에서 CPU가 하는 일을 보면 아주 단순합니다. CPU의 레지스터에 값을 가져와서 덧셈이나 뺄셈같은 연산을 한 후 다시 메모리에 그 값을 보내는 일을 반복합니다. 물론 CPU의 동작은 이보다 복잡하지만 단순화 해서 생각해보는 것은 이해력에 도움이 됩니다.

단순히 값을 가져오고 할당하는 것은 미리 정해진 한방향으로만 진행되는 것 입니다. 이것만으로는 스마트한 프로그램을 만들 수 없는데요.

흐름 제어를 통해 특정 조건을 판단하여 여러가지 분기를 만들어 낼 수 있습니다. 외길 진행 프로그램이 아니라 흐름에 따라 여러가지 결과를 구현할 수 잇습니다.

자바스크립트 if문

if문은 영어의 if 문장과 비슷합니다. if 만약 ~ 라면 다음의 블록을 실행하라. ~ 라면 다른 블록을 실행하라. 프로그램의 분기를 만들어 낼 수 있습니다. 여기서 부터 프로그램은 재미가 있어지는 거죠.

자바스크립트 뿐 아니라 거의 모든 언어에는 분기를 가지고 있는데요. 문법도 비슷합니다. 여러 언어를 배우다 보면 사소한 문법의 변화 때문에 두뇌 인식능력이 떨어지게 되는데 자바스크립트의 if문법은 C언어를 닮았습니다.

예제로 알아보겠습니다.

var myBool = true;

if(myBool){
    console.log("myBool is true");
}

myBool = false;

if(myBool){
    console.log("myBool is true");
} else {
    console.log("myBool is false");
}

[--- 실행결과 ---]
>> myBool is true
>> myBool is false

if ( ) 괄호안은 표현식의 결과를 반환합니다. true 면 블록이 실행되고 false 면 실행되지 않습니다. false 의 경우 else 구문이 있으면 else 블록이 실행됩니다.

이런 분기를 어떻게 사용해야 할까요? 자바스크립트에서는 불린형 타입이 있습니다. 불린형은 true 와 false 두개 값만 갖는 자료형입니다. if ( 불린형 ) 을 가져다 놓으면 둘 중 하나의 결과가 나옵니다.

프로그램은 소스코드를 따라 위에서 아래로 한줄씩 실행됩니다. 만약 분기를 만들고 싶다면 if 문 이전에 불린형 변수를 만들어서 if의 괄호안에 넣으면 됩니다.

비교연산자(Comparison Operator)

불린형이 아니라도 비교연산자를 사용하면 true 나 false 둘중 하나가 나옵니다. 불린형은 비교연산자와 같이 사용하도록 설계되있는거죠. 별거 아닌 것 같지만 따로 따로 흩어져 있는 지식들같아 보이니까 관계를 잘 파악해둡니다.

자바스크립트 비교연산자에는 ==, === , != , >, < , >=, <= 가 있는데요. 기호만 봐선 수학기호같기도 하고 잘 모릅니다. 또 수학기호와는 다르기 때문에 예제 코드로 알아보겠습니다.

var num1 = 10;
var num2 = 7;

if(num1 == 10){
    console.log("num1 is equal to 10");
}
if(num1 === 10){
    console.log("type of num1 is equal to 10");
}
if(num2 == "7"){
    console.log("num2 is equal to 7");
}
if(num2 === "7"){
    console.log("type of num2 is equal to 7");
} else{
    console.log("type of num2 is different from 7");
}
if(!(num1==10)){
    console.log("NORMAL")
}else{
    console.log("NEGATION")
}
if(num1 > num2){
    console.log("num1 is larger than num2");
}
if(num1 <= 12){
    console.log("num1 is less than or equal to 12");
}

num1 is equal to 10
type of num1 is equal to 10
num2 is equal to 7
type of num2 is different from 7
NEGATION
num1 is larger than num2
num1 is less than or equal to 12

위에서 보면 == 와 ===의 차이가 헷갈립니다. == 는 값이 같을 때입니다. === 는 타입이 같을 때 입니다. “7”은 7과 같은 취급을 하는데 이는 “7” 를 자동 캐스팅(변환)시키기 때문입니다. 이런 소소한 규칙들이 자바스크립트를 어렵게 하는 이유입니다. 사소한 규칙은 일반적 원리가 아니니까 익숙해지는 수밖에 없습니다.

또 ! 는 부정 NOT 의 의미입니다. 쉽게 !true 는 false 이고 !false 는 true 입니다. 반전이라고 보면 됩니다. 컴퓨터 하드웨어의 논리회로에도 NOT 이 있는데 숫자 1을 넣으면 0으로 변하고 0을 넣으면 1로 변하는 것을 의미합니다.

비교연산자와 불린형을 보면 컴퓨터의 원초적 속성을 볼 수 있습니다. 바로 1과 0, true와 false 무조건 둘중의 하나가 결과로 나와야 한다는 것 인데요. 이는 이진수에서 0과1 둘중에 하나의 값을 논리회로를 통해 만들어야 하는 컴퓨터의 설계방식과도 같습니다.

비교연산자, 불린형, if문 이 세가지를 조합해서 프로그램의 흐름을 제어할 수 있습니다.

if 문에는 if – else if – else 문 처럼 분기를 늘려나갈 수 있습니다. 분기를 늘려나가도 선택은 하나만 됩니다.

문법은 if (조건식) 처럼 else if (조건식) 처럼 붙이면 됩니다. if와 else는 한번씩만 사용할 수 있지만 else if의 사용에는 제한이 없습니다.

if 문은 중첩해서 사용할 수도 있습니다. 알고리즘 관련 포스팅에서 내용을 보강하겠습니다.

switch case 문

switch case 문은 전통적인 문법입니다. if 문에서는 else if 로 분기를 늘려나갈 수 있다고 했습니다. 그런데 else if 문이 늘어나면 좀 복잡해집니다. if, else…if, else 이 세 가지는 서로 들어가는 조건이 다르기 때문입니다.

switch case 문을 사용하면 동등한 분기를 나열하기에 좋습니다. 예를 들어 조이스틱의 조작이라던가 요일이라던가 동등하게 나열할 수 있는 경우 switch case문의 가독성이 좋습니다.

사실 if 문과 switch 문으로 서로 똑같은 프로그램을 만들 수 있습니다. 그런데도 경우에 따라 다른 문법을 택하는 것은 코드의 가독성에 있습니다. 즉 사람이 읽는 것이 중요하다는 뜻 입니다. 사람이 읽기 유리하냐 아니냐는 자바스크립트 컴파일러와 인터프리터가 작동하는데 아무 중요하지 않습니다. 그러나 코드를 읽고 쓰는 것은 아직까지는(?) 사람이기 때문에 둘로 나눠 놓은 것 입니다.

실제로 파이썬에는 문제가 있어서 switch case 문을 뺐는데 개발자들은 별로 관심이 없었다고 합니다. 지금까지 전혀 문제 없이 잘 사용하고 있습니다. switch case 문을 쓰는 대신 그냥 if – else if – else 문 같이 사용합니다. 방법은 여러가지니까 기능을 구현하는데 문제는 없습니다.

var msg = "";
var myInput = "left";

switch(myInput){
    case "up":
        msg = "go up";
        break;
    case "down":
        msg = "go down";
        break;
    case "left":
        msg = "go left";
        break;
    case "right":
        msg = "go right";
        break;
    default:
        msg = "unvaild direction";
}

console.log(msg);
go left

논리연산자

논리연산자는 논리회로의 AND 와 OR 연산자와 같습니다. 아래 예제에서 true 나 false 는 불린형으로 대체될 수 있습니다. 즉 불린형으로 답이 나오는 표현식이면 다 됩니다.

AND 와 OR은… 논리 회로의 그것입니다. 1 AND 1 = 1, 1 AND 0 = 0, 같이 논리식의 결과를 반환합니다. 1은 true 0은 false. 이런 식을 사용할 일이 있습니다. 잘 사용하면 복잡한 코드를 간결하게 만들 수 있는데 Tricky 하기 때문에 주의해서 사용합니다.

if(true && true){
    console.log("TRUE");
}
if(true && false){
    console.log("TRUE");
} else{
    console.log("FALSE");
}
if(true || false){
    console.log("TRUE");
}
if(false || false){
    console.log("TRUE");
} else{
    console.log("FALSE");
}
TRUE
FALSE
TRUE
FALSE

요약

자바스크립트 if문과 관련된 내용에 대하여 알아봤습니다. 튜토리얼이 아직 초반인데 뭐가 배워야 할 것들이 참 많습니다. 새로운 개념들 불린형, if문, 비교연산자, 논리연산자… 한번에 모두 이해가 되지 않아도 괜찮습니다.

이것들은 프로그래밍을 그만두는 날까지 생각하게 될 주제입니다. 또 자바스크립트가 아니라 다른 언어들에서도 공통적인 부분이고요. 컴퓨터 프로그램이 흐름을 제어하는 방법은 언어에 별 상관이 없습니다. CPU는 컴퓨터 언어에 상관없이 자기의 할일을 할 뿐입니다. 우리는 단지 자바스크립트라는 웹개발에 특화된 언어를 사용하고 있을 뿐입니다.

컴퓨터 프로그래밍을 어렵게 만드는 것 중 하나는 배워야할 언어가 많고 특성이 다르다는 것 인데요. 컴퓨터의 본질을 이해하지 못하고 고수준(High level – 고급 추상화) 언어만 사용하다 보면 어려움이 더 커져 갑니다. 많은 프로그래머들의 이해도는 그 어딘가에 걸려있습니다.

프로그래머가 더 이상 호기심을 멈추고 이해하기를 포기하는 하나의 방법이 있습니다.

다른 하나는 본질을 이해하기 위해 파고 드는 것 입니다. 경력을 쌓고 시간이 흐를 수록 피하기 어려운 문제입니다.

하지만 선택하기 어려운 문제입니다.

이 튜토리얼 시리즈는 그런 부분을 좀 더 찔러 볼 수 있도록 만들고 있습니다. 기계적인 설명이나 유명한 설명은 어딜가나 볼 수 있으니까요. 약간은 각도를 틀어서 접근해 보는 튜토리얼도 있으면 좋겠다고 생각합니다.

이전 학습
다음 학습

참고문서

Making decisions in your code — 조건문 – Web 개발 학습하기 | MDN (mozilla.org)

if…else – JavaScript | MDN (mozilla.org)

Leave a Comment