<22.03.07> JavaScript 공부 일지 #02. 조건문(if-else / switch)과 반복문(for, for-in, for-of, while)

JavaScript 공부하기 #02

 

오늘은 자바스크립트의 조건문과 반복문에 대해 공부한 것을 포스팅하려고 한다. 조건문과 반복문은 프로그래밍 언어마다 조금씩 차이는 있지만 큰 틀은 별로 다르지 않은 것 같다. if-else문과 switch를 포함한 조건문, 그리고 for, for-in, for-of, while문을 포함한 반복문에 대해서 알아보자.

 

1. 조건문

 

우선 조건문이란, 프로그래머가 명시한 조건의 참 거짓에 따라 달라지는 계산이나 상황을 수행하는 구문이다. 예를 들어, 나이가 20살 이상이면, '성인'이고, 그렇지 않다면 '미성년자'라던지. 조건에 따라 수행되는 결과가 달라지게 구성할 수 있는 구문이 조건문이다. 자바 스크립트에서는 if문과 switch문이 있는데, if문부터 살펴보자.

 

1-1. if문

 

자바스크립트에서 기본적인 if문 구조는 아래와 같다.

 

if ( condition ) {
	....
}

 

단순히 if만 사용하였을 때이다. if 다음에 작성하는 괄호안에는 특정한 조건을 입력해주면 된다. 이 때 조건은 변수 그 자체일수도 있으며 특정한 식일수도 있다. 조건을 작성하였다면 브라켓( { } ) 내부에 조건에 해당할 시 수행할 코드문을 작성하면 된다. 그렇다면 아래의 문장을 if문으로 표현해보자.

 

'num이 10 이상일 경우 'hello'를 출력하자'

 

var num = 15;

if ( num >= 10 ) {
	console.log("hello");
}

 

정수가 들어갈 변수 num을 선언하고 if문을 활용하여 조건문을 작성하였다. 만약 변수 num에 15가 아니라 5를 넣고 싶은데, num이 10보다 작을 때에 'Bye'를 출력하고 싶다. 어떻게 해야 할까? 아래 코드를 보자.

 

var num = 5;

if ( num >= 10 ) {
	console.log("hello")
}else {
	console.log("bye")
}

 

if문에 최초로 작성하였던 조건을 충족하지 못했을 시 특정 행동을 취하고 싶다면 else문을 작성하면 된다. else문은 if문을 작성하는 것과는 달리 별도의 조건문을 작성하지 않고 바로 브라켓을 작성한다. 그런데, 위와 같이 코드를 짜면, 더욱 다양한 조건을 주고 싶어도, if와 else로만 구성해야 하기 때문에 필연적으로 두 개의 분기점밖에 생성하지 못한다. 이를 위해 else if가 존재한다. else if를 사용하려면 아래와 같이 코드를 구성하면 된다.

 

if ( condition ) {
	...
}else if ( condition ) {
	...
}else if ( condition ) {
	... 
}else {
	...
}

 

else if는 여러번 작성할 수 있다. 5번이고 100번이고 작성할 수 있다. 때문에 다양한 조건을 주고 싶다면 else if문을 작성한 뒤 조건을 작성하면 된다. 이를 활용한 코드는 바로 아래에 있다.

 

var num = 46;

if ( num < 10 ) {
	console.log("bye");
}else if ( num < 20 ) {
    console.log("hello");
}else if ( num < 30 ) {
    console.log("nice to meet you");
}else if ( num < 40) {
    console.log("glad to meet you");
}else {
    console.log("how are you?");
}

 

else if문을 활용하여, num이 10단위로 변화할 때마다 각자 다른 문자가 출력될 수 있도록 조건문을 구성했다. 이처럼 if문은 else if문을 활용하여 다양한 조건을 부여하여 다수의 분기점을 가지는 프로그램을 구성할 수 있다. 

 

1-2. switch문

 

switch문은 자바스크립트에서 지원하는 또 다른 조건문이다. if문과 마찬가지로 특정 조건에 따라 실행되는 분기점을 생성할 수 있다. switch문의 구성은 아래와 같다.

 

switch ( key ) {
	case value:
    	...
        break;
   	default:
    	...
        break;
}

 

위 switch문의 형태는 key-value 형태로 구성되어 있다. switch는 괄호 안에 특정 key를 받아 case문에서 key의 값을 검사한다. 이 때, 실제 key의 value와 일치하는 case에 도달하게 되면, 해당 case의 코드를 실행한다. 위 코드에서 case는 하나만 존재하나, 실제로는 여러개를 작성할 수 있다. default문은 case를 모두 검사했음에도 조건과 맞지 않았을 경우 수행하는 기본값이다. 위 코드를 보면 case문과 default문 모두 break가 설정되어 있는 것을 알 수 있는데, 이를 작성해주지 않으면 조건에 맞는 case에 도달해도 탈출하지 못하고 다음 case문으로 넘어가게 된다.   

 

case의 value는 정수나 문자열이여야 한다. 예를 들어 0에서 6까지의 숫자 중 하나를 받아 요일을 출력하는 조건문을 switch를 활용해 작성하면 아래와 같다.

 

var dayNum = 3;

switch ( dayNum ) {
	case 0:
    	console.log("월요일");
        break;
    case 1:
    	console.log("화요일");
        break;
    case 2:
    	console.log("수요일");
        break;
    case 3:
    	console.log("목요일");
        break;
    case 4:
    	console.log("금요일");
        break;
    case 5:
    	console.log("토요일");
        break;
    case 6:
    	console.log("일요일");
        break;
    default:
    	console.log("0에서 6까지의 숫자만 입력하세요!");
        break;
}

 

0에서 6까지의 숫자를 월요일에서 일요일까지 각각 매핑해주었다. dayNum을 key로 받아 순서대로 case를 돌며 dayNum과 value를 계속해서 비교한다. dayNum이 3이기 때문에, case 3에서 검사를 멈출 것이며, 목요일을 출력하고 break문에 따라 곧바로 switch문을 탈출하게 된다. break문은 switch문에서만 사용할 수 있는 것이 아니라, 조건문, 반복문에서 모두 사용할 수 있다. break문을 활용하여 특정 조건에 도달했을 때, 반복문 또는 조건문을 탈출시킬 수 있다.

 

위 switch문은 key로 특정 변수를 부여하고, 각 case를 통해 정해진 고정값을 검사하며 조건에 맞는지를 확인하는 형태였다. 하지만 switch문은 if문처럼 비교연산자를 통한 범위 지정은 안되는 걸까? 가능하다. 아래와 같은 형태로 구성할 수 있다.

 

switch ( true ) {
	case ( key < 10 ):
		...
		break;
	case ( key < 20 ):
		...
		break;
	default:
		...
		break;
}

 

기존에 key로 전달해주던 곳에 true를 적어주고, 각 case에는 () 안에 비교하고자 하는 변수를 넣어 비교연산자를 통해 식을 적어준다. 위와 같은 형태로 범위를 지정하여 switch문을 생성할 수 있다. 이러한 형태로 코드를 구성하면 아래와 같다.

 

var Num = 29;

switch ( true ) {
 	case ( Num <= 10 ):
		console.log("hello");
		break;
	case ( Num <= 20 ):
		console.log("bye");
		break;
	case ( Num <= 30 ):
		console.log("Good");
		break;
	default:
		console.log("None");
 		break;
 }

 

실제 코드를 실행하면 세 번째 case에서 멈출 것이다. 

 

2. 반복문

 

반복문은, 어떠한 조건이 충족되는 동안 특정한 행동을 반복하는 구문이다. 반복문은 조건문만큼이나 자주 사용하며 조건문과 함께 사용되기도 한다. 

 

2-1.  for문

 

for문은 흔히, 반복횟수가 정해진 경우에 자주 사용한다. 따라서 실제 유한한 크기를 가지는 객체나 배열등을 다룰 때 주로 사용할 수 있다. 자바스크립트에서 for문의 기본형태는 아래와 같다.

 

for ( 변수선언; 종료조건; 변수의 변화 ) {
	...
}

 

for 문의 기본형태는 위와 같은데, 초기에 변수 선언을 해주고, for 문이 종료하는 조건을 작성한다. 그리고 for문이 계속해서 다음 동작을 수행할 수 있도록 초기에 선언했던 변수에 변화를 줄 수 있다. 위 기본적인 형태에서 for문 바깥에서 변수를 미리 선언하거나 변수의 변화를 for 문 내부에 작성할 수도 있는데, 이러한 경우 위 형태에서 일부 구문을 생략할 수 있다. 만일 생략한다면 아래와 같이 작성하여야 한다.

 

for (; 종료조건; 변수의 변화) {
	...
}

 

위 코드의 경우 변수선언 부분을 생략하였는데, 생략하였다하더라도 세미콜론(;)은 반드시 작성하여야 한다. 그럼 for 문의 기본형태를 활용하여 배열을 탐색하는 코드를 작성하자.

 

var arr1 = [23,1,5,3,100];

for ( var i = 0; i < 5; i++ ) {
	console.log(arr1[i]);
}

 

5의 길이를 가지는 arr1 배열을 선언한 후, for문을 작성하였다. for문 내에서 i라는 변수를 0으로 초기화하고, 변수 i가 5 미만일 때까지 수행한다. 그리고 변수 i는 한 번 수행이 끝날 때마다 1씩 증가한다. 위와 같은 형태를 통해 총 다섯번에 걸쳐 배열 arr1의 원소를 차례대로 출력할 수 있다. 

 

2-1-1.  for-in 

 

자바스크립트에 존재하는 특별한 for문이다. 위에서 서술했던 for문과 마찬가지로 정해진 횟수만큼 어떤 동작을 수행하는데, 다만 다른 점이 있다면 for-in문은 객체의 key값에 접근할 수 있다는 점이다. 객체 뿐만 아니라 배열에도 사용할 수 있는데, for-in문의 기본 구성은 아래와 같다.

 

for ( key in object ) {
	...
}

 

기본 for문보다 훨씬 간단하다. 좌측에는 obejct의 key로 받을 변수, in 뒤에는 객체나 배열이 올 수 있다. 아래의 코드를 보자.

 

var Person = {
    Name: "Park-Ji-Yoon",
    Position: "Idol",
    Age: "20"
}

for ( key in Person ) {
	console.log(Person[key]);
}

 

obejct 변수를 가지는 Person는 for - in문을 통해 접근할 수 있다. for - in문은 오브젝트뿐 아니라 배열에도 사용하여 배열의 인덱스를 받을 수 있다. 아래 코드를 보자.

 

var arr1 = [1,2,3,4,5];

for ( index in arr1 ) {
    console.log(arr1[index]);
}

 

index는 배열 arr1의 인덱스를 바로 출력해준다. 기본적인 for문을 사용하여 인덱스를 구하려 했다면 코드 내용이 조금 더 길어졌을 것이다.

 

2-1-2. for-of

 

for-of는 for-in과 비슷하지만, 이터레이터 객체에 대해서만 반복이 가능하다는 차이점이 있다. 또한 객체의 key가 아니라 value값을 반환한다. 기본 구조는 아래와 같다.

 

for ( value of object ) {
	...
}

 

for-in 구문과 별 차이가 없다. 다만 in이 of로 바뀌었다. 그리고 object로부터 받는 것은 key가 아니라 value이다. 앞전에 서술한 것처럼, for-of는 이터레이터 객체에 대해서만 적용할 수 있다고 했는데, 아래의 코드를 보자.

 

var Person = {
    Name: "Park-Ji-Yoon",
    Position: "Idol",
    Age: "20"
}

for ( value of Person ) {
	console.log(value);
}

 

위 코드를 HTML 문서에 넣고 웹 브라우저 콘솔에서 확인하면 아래와 같이 뜬다.

 

 

Person은 이터러블이 아니여서 for-of를 사용할 수 없다는 에러가 뜬다. 자세한 것은 아직 기초단계라 알 수 없지만, 위 에러문으로 알 수 있는 것은, 자바스크립트에서 object 자료형은 순회할 수 있는 iterable 객체는 아니라는 것이다. 그렇다면 object가 아니라 배열에 적용을 해보자.

 

var arr1 = [1,2,3,4,5];

for ( value of arr1 ) {
    console.log( value );
}

 

위 코드는 정상적으로 작동한다. 즉, 배열 자료형은 자바스크립트내에서 iterable 객체라는 것이다. 이처럼, for-of는 객체의 실제 값에 접근하여 출력하지만, 이터러블 객체가 아니라면 작동하지 않는다는 것을 알 수 있다.

 

2-2. while

 

while문은 for문과 마찬가지로 특정 동작을 반복적으로 수행하는 반복문이다. 하지만 for문과는 쓰임새가 조금은 다른데, while문의 경우 반복횟수가 정해져 있다기 보다는, 특정 조건에 만족할때까지 수행해야 하는 경우에 자주 사용된다. while문의 구조는 아래와 같다.

 

while ( condition ) {
	...
}

 

for문에 비해 간결하다. 그럼 while문을 활용해 코드를 하나 작성해보자. 아래 예시를 보자.

 

var sum = 0;
var i = 0;

while ( i < 10 ) {
	sum += i;
	i++;
}

 

i가 10 미만일 동안, 변수 sum에 i를 계속 더하는 코드이다. while문의 경우, for문과 달리 종료 조건을 충족하기 위해 브라켓 안에 변수의 변화를 반드시 명시해주어야 한다. 그렇지 않을 경우 무한 루프에 빠진다. 무한 루프는 특정한 경우가 아니라면 피해야 한다.  만약 무한 루프를 사용해야 한다면, 조건을 작성하는 곳에 true를 작성하면 된다.

 

2-2-1. do-while

 

do-while문 또한 while문과 비슷하지만 다르다. 조건을 검사하는 순서가 다른데, while문의 경우 조건을 먼저 검사한 후 동작을 수행하지만, do-while문의 경우 일단 동작을 수행하고 조건을 마지막에 검사한다. 즉, while문은 조건이 맞지 않을 경우 코드를 수행하지 않지만, do-while문은 초기 조건이 맞지 않는다 하더라도 일단 실행은 하고 본다. 아래의 두 코드를 비교해보자. 하나는 while문으로 작성한 것이고, 하나는 do-while문으로 작성한 것이다.

 

var i = 11;
var temp = 0;

while ( i < 10 ) {
    temp += i;
    i++;
}

var i = 11;
var temp = 0;

do {
    temp += i;
    i++;
}while( i < 10 );

 

위 두 코드를 같이 실행하면 아래와 같은 결과가 출력된다.

 

 

while문의 경우 변수 i가 이미 10을 초과해버렸기 때문에 while문 아래에 있는 코드들은 수행하지 않은 채 결과를 출력했다. 따라서 0이 되었다. do-while문의 경우 변수 i가 10을 초과해버렸긴 했지만, while문 앞의 코드를 먼저 수행해버리기 때문에 초기 temp값 0에 변수 i값 11이 더해져서 11이 출력된 것을 확인할 수 있다.

 

 

오늘은 자바스크립트의 조건문과 반복문에 대해 살펴보았다. 다음번에도 자바스크립트를 공부하여 다른 내용으로 포스팅 할 수 있도록 하겠다.

 

P. S 조잡한 글 읽어주셔서 감사합니다! 혹시나 틀린 정보가 있다면 과감한 지적(하지만 욕은 삼가해주시면 감사하겠습니다 ㅎㅎ) 부탁드립니다.