on
[Javascript] #5. Javascript 조건문 & 반복문
[Javascript] #5. Javascript 조건문 & 반복문
안녕하세요, iGon 곤잘레스입니다. 오늘 포스팅할 내용은 Javascript의 조건문과 반복문입니다. 다른 언어를 먼저 접하신 개발자 분들께서는 익숙한 문법이실 텐데요. 대표적인 조건문에는 if ~ else 문법이, 반복문에는 for 문이 있습니다. 반복문과 조건문을 적절하게 이용할 수 있다면 프로그래밍에 있어서 다양한 알고리즘을 효율적으로 작성하실 수 있습니다. 그럼 먼저, 조건문에 대해서 먼저 알아보도록 하겠습니다.
1. 조건문
조건문은 특정 조건에 따라 수행돼야 할 명령문을 분기하여 작성해야 하는 경우에 사용하는 문법입니다. 지난 시간에 포스팅한 내용 중, 삼항 연산자 역시 이러한 조건문에 포함된다고 할 수 있는데요. 해당 내용은 지난번에 포스팅하였기에 이번 포스팅에서는 제외하고 다른 조건문에 대하여 설명드리도록 하겠습니다.
1) if 문
if 문은 특정 조건식에 대하여 결과가 참(true)을 수렴하는 경우에만 코드를 실행하는 대표적인 조건문 문법입니다. 기본적인 작성 방법은 아주 간단합니다. 실행문이 하나인 경우에는, if (조건식) 실행문으로 작성하며, 실행문이 여러 줄인 경우에는 if(조건문) 뒤에 중괄호({})를 기입한 후, 중괄호 안에 실행문을 작성하면 조건식이 참인 경우에 작성된 실행문이 수행됩니다.
// 단독 실행문인 경우 /* if (조건식) 실행문; */ if (0 === 0) console.log('단독 실행문 수행'); // 복수의 실행문인 경우 /* if (조건식) { 실행문1; 실행문2; .... } */ if (0 === 0) { console.log('실행문 1 수행'); console.log('실행문 2 수행'); }
2) else 문
else 문은 조건문에 해당되지 않는 경우에 실행문을 수행합니다. 작성 방법은 if 문 뒤에 else 문을 작성하면 됩니다. 주의할 점은 조건문의 값을 거짓으로 취급하는 값이 개발자의 의도와 다를 수 있으니 이러한 경우에는 주의하시기 바랍니다.
* 거짓으로 취급되는 값: false, undefined, null, 0, NaN, "" 등
// else 문 작성 // 단독 실행문인 경우 /* if (조건식) 조건식이 참일 때, 수행되는 실행문 else 조건식이 거짓일 때, 수행되는 실행문 */ if (0 === 1) console.log('0은 1이 맞습니다.'); else console.log('0은 1이 아닙니다.'); // 복수 실행문인 경우 /* if (조건식) { 조건식이 참일 때, 수행되는 실행문 } else { 조건식이 거짓일 때, 수행되는 실행문 } */ if (0 === 1) { console.log('0은 1이 맞습니다.'); } else { console.log('0은 1이 아닙니다.'); console.log('명령문 하나 더 실행합니다.'); }
3) else if문
else if문은 if문의 조건식 외에 추가적으로 참인 결과가 수렴되는 조건을 필요로 하는 경우에 사용하는 문법입니다. 만약, 조건식 하나가 아닌 여러 조건식으로 명령문을 수행해야 한다면 else if를 이용하여 로직을 작성하시면 됩니다.
var a = 1; if (a === 0) { console.log('a는 0입니다.'); } else if (a === 1) { console.log('a는 1입니다.'); } else { console.log('a는 다른 값입니다.'); }
4) switch문
switch문은 전달되는 변수 값이 특정 값인 경우에 여러 수행문을 실행해야 할 때 사용하는 문법입니다. 만약 받아 오는 값이 단일 값이고 이 값에 대하여 여러 수행문을 분기하여 작성해야 한다면, if/else문보다는 더 효율적으로 작성할 수 있습니다. 수행문이 실행된 후에는 break문을 기입하여 해당 수행문만 수행하고 switch문을 빠져나오도록 작성하셔야 의도한 대로 로직이 수행되니 이 점 주의하여 작성하시기 바랍니다.
// switch 문 작성법 var condition = 1; switch(condition) { case 0: console.log('값이 0입니다.'); break; case 1: console.log('값이 1입니다.'); break; case 2: console.log('값이 1입니다.'); break; default: console.log('만족하는 값이 없습니다.'); break; // 모든 case에 맞지 않으면 수행 }
2. 반복문
반복문은 같은 명령을 일정 횟수 동안 반복하여 수행하도록 하는 문법입니다. 복수의 데이터 행렬에 대하여 반복적인 처리가 필요한 로직이 들어가야 할 때, 사용하는 것이 좋지만 중첩된 반복문은 프로그램의 성능 저하를 야기할 수 있기 때문에 이 점 유의하여 개발하시는 것이 좋습니다.
1) for 문
for 문은 반복문의 가장 대표적인 유형이며 아마 대부분의 개발자 분들에게는 가장 친숙한 문법일 것입니다. for문 내에는 초기값과 조건문 그리고 증감 문을 넣어 작성하는데, 조건문의 결과가 거짓이 될 때까지 반복되어 실행됩니다.
// for문 작성 /* for (초기값; 조건문; 증감문) { 반복해서 실행되어야 할 수행문 } */ for (var intA=0; intA < 10; intA++) { // intA가 10이 될 경우 반복문 종료 // 반복문이 수행되면 서 intA의 값은 1씩 증가 console.log('값은 ' + intA + '입니다.'); }
2) for in 문
for in문은 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복합니다. 기본적인 작성 방식은 다음과 같습니다.
작성방식: for (property in 객체)
// for in 문 작성 var arr = [1, 2, 3]; for (key in arr) { // 배열 요소의 key값은 index 값이 출력되고, 속성값은 해당 index의 실제 값이 출력 console.log(`key값: ${key}, 속성값: ${arr[key]}`); } var json = { 'key1': 'a', 'key2': 'b', 'key3': 'c', }; for (key in json) { // 배열 요소의 key값은 index 값이 출력되고, 속성값은 해당 index의 실제 값이 출력 console.log(`key값: ${key}, 속성값: ${json[key]}`); }
for in 문은 객체 형태의 각 요소별 키 값과 키에 매칭 되는 속성 값을 출력하는데 유용하게 사용될 수 있습니다. MDN 문서에 따르면 for in 문은 열거 가능한 non-Symbol 속성(enumerable properties)에 대해서만 반복할 수 있다고 하는데, 내부적으로 enumerable 플래그가 true로 설정된 프로퍼티에 대해서만 열거가 가능하다고 합니다.
또한, 배열의 경우 특정 순서에 따라 인덱스를 반환하는 것을 보장할 수 없기 때문에 반복문을 작성하기 위해서는 for in보다는 for문을 이용하는 것이 좋습니다.
3) for of 문
for of 문은 반복 가능한 객체에 대해서 각 개별 속성 값에 대하여 반복할 대 사용합니다. 반복 가능한 객체는 대표적으로 Array, Map, Set, String 등이 있습니다.
//for of 문 작성 var array = ['a', 'b', 'c']; for (var element of array) { console.log(element); //a //b //c } var strVal = "def"; for (var element of strVal) { console.log(element); //d //e //f } var mapVal = new Map([["H", 1], ["I", 2], ["J", 2]]); for (var element of mapVal) { console.log(element); //["H", 1] //["I", 2] //["J", 2] }
for of문과 for in문의 차이는 for of문은 컬렉션 전용이라는 점입니다. 모든 객체에서 사용할 수 있는 것이 아니라 Symbol.iterator 속성이 있는 모든 컬렉션 요소에 대해 반복할 수 있다는 점이 객체의 모든 열거 가능한 속성을 반복하는 for in문과 다르다고 할 수 있습니다. for in과 for of문은 ECMAScript 2015 이후에 나온 문법이기 때문에 Internet Explorer에서 바로 사용할 수 없기 때문에 babel과 같은 라이브러리를 사용하지 않는 환경에서는 for문으로 대체하여 사용하시기 바랍니다.
4) while
while문은 마찬가지로 조건문이 참일 때에만 실행되는 반복문입니다. 만약 while문 내에 조건문에 대하여 거짓으로 판단하도록 하는 로직이 존재하지 않으면 무한루프에 빠질 수 있기 때문에 for문을 작성할 때보다 더욱 주의하여 작성하셔야 됩니다. 만약 그러한 장치가 없다면, 무한루프에 빠져 작성하신 프로그램이 브라우저 내에서 무한 반복되면서 메모리 부족으로 백화현상에 빠질 수 있습니다.
// while문 작성 /* while(조건문) 수행문 */ while(a < 10) { a++; console.log('while 실행'); }
5) do while문
do while문은 조건문이 거짓일 때까지 반복적으로 실행되나, 조건문의 결과와는 상관없이 무조건 한 번은 실행되어야 할 때 사용하는 문법입니다.
// do while 문 /* do { 수행문; } while (조건식) */ var i = 0; do { i++; console.log('do while은 무조건 한번은 실행됩니다.'); } while(i < 1)
위의 예제를 보시면 초기값은 0으로 시작되어 do 구문 내에서 1 증가한 후, conole로 메시지를 출력합니다. 그다음 while 조건문에서 변수의 값이 1이 되었기 때문에 거짓으로 판단되어 반복문을 종료하게 됩니다.
반복문의 경우에는 특정 조건에 따라 반복문을 빠져나오거나, 뒤의 수행문을 건너뛰고 반복문을 계속 수행할 수 있도록 지시어가 존재합니다. 우선, 반복문을 빠져나오는 경우에 break 지시어를 사용하여 더 이상 반복문 내 실행문을 수행하지 않고 빠져나오도록 할 수 있습니다. 특정 조건에 맞춰 반복문을 종료해야 하는 경우에는 해당 지시어를 사용하는 것이 좋습니다.
만약 특정 조건의 경우에 반복문 내 실행문을 수행하지 않고 건너뛴 후, 반복문을 계속 수행해야 한다면 continue 지시어를 사용하여 로직을 구현할 수 있습니다.
// break; for (var intA=0; intA < 10; intA++) { if (intA === 3) break; console.log('아직은 3 이하입니다.'); } // continue; for (var intA=0; intA < 10; intA++) { if (intA === 3) continue; console.log('3일 때만 건너 뜁니다.'); }
위의 예제를 실행하시게 되면, 먼저 break를 사용한 for 문은 3번만 반복하여 console 메시지를 3번 출력한 후 종료되나 continue를 사용한 for문은 10번 모두 반복하나 변수(intA)가 3인 경우에만 제외하고 9번의 console 메시지를 출력합니다.
지금까지 자바스크립트의 조건문과 반복문에 대해서 알아보았는데요. 앞서 말씀드렸다시피 조건문과 반복문은 알고리즘 작성에 기초가 되는 문법입니다. 이에 대한 기본적인 이해만 있다면 로직 작성에는 크게 어려움이 없을 것이나, 여기에 조금 더 응용력을 길러 적절하게 사용하신다면 효율적이고 탄탄한 로직을 작성할 수 있으실 겁니다. 다음 포스팅에는 자바스크립트의 Function에 대하여 알아보는 시간을 갖도록 하겠습니다. 지금까지 긴 글 읽어주셔서 감사합니다.
즐거운 크리스마스 되세요!!!
from http://igonnnnn.tistory.com/12 by ccl(A) rewrite - 2021-12-25 00:01:56