-
[javascript basic] 제어구문Develop 2019. 3. 30. 01:11
제어구문이란?
Javascript를 포함한 대부분의 프로그래밍 언어에서는 순차적으로 실행되는 코드의 흐름을 변화시켜 코드를 간결하게 표현할 수 있는데 '제어구문' 이라고 한다. 제어구문은 단순하게 이해하면 조건문과 반복문이고 프로그래밍에서 중요한 부분을 차지하고 있다.
조건문
조건문은 값이 true 또는 false 인지에 따라 분기처리 하는 것이다. 다시말하면 조건문은 조건을 판별하는 기준과 실행되는 코드가 필요한 것이다. 이것만 이해한다면 아래코드를 통해 쉽게 이해할 수 있다. 코드의 내용은 나이에 따라 서로 다른 코드가 실행되는 과정을 보여주고 있다.
if (age > 20) { goAdultPage() } else if (age > 14) { goTeenPage() } else { goKidPage() }만약 주어진 값에 대한 분기점이 여러개일 때에는 switch 문이 활용된다. 즉 위와 같은 상황에서 각각의 나이대별로 세밀하게 분기해야하는 경우에 사용된다. if와 else if로 작성해도 되지만 switch를 사용하면 좀 더 간결하게 작성할 수 있다.
switch(age) { case 1: console.log(1); braek; case 2: console.log(2); braek; case 3: console.log(3); braek; ... ... ... default: console.log('default'); }주의할 점은 각각의 케이스에서 break키워드로 빠져나와야 한다. 그렇지 않으면 다음조건을 계속해서 판별하여 default구문까지 실행되게 된다.
반복문
반복문은 for 와 while이 있다. 실무에서는 while에 비해 for문이 많이 사용되고 있다. 왜냐하면 이터러블한 데이터와 객체를 순회할때 for문을 활용하기 때문이고 보기에 가독성이 좋다. 사용하는 방법은 어렵지 않으니 우선 문법만 간단히 정리해보자.
while은 조건문이 true일떄 실행된다. while문 앞에 do와 실행될 문장을 붙여 주면 조건식의 결과와 상관없이 최초의 실행될 구문이 실행된다.
while (조건식) { 실행문 } do {실행문} while(조건식)이어서 for 문의 문법을 알아보자
for (초기화식; 조건식; 증감식) { 조건식이 참인 경우 반복 실행될 문; } // 사용예제 for (var i = 0; i < 2; i++) { console.log(i); }프로그래밍을 처음 시작하는 경우 반복문은 많이 써보지 않으면 어렵게 느껴질 수 있다.하지만 사용방법에 있어서는 어렵지 않기 때문에 그냥 생각나는 조건을 만들어 많이 사용해보면 익숙해질 수 있다.
별로 삼각형 그리기
제어구문을 활용한 가장 기본적인 예제로 아래와 같이 *로 삼각형을 그리는 예제가 있다.
* ** *** ****아마도 기본적인 예제만 해결해도 반복문의 사용방법은 익힐 수 있을 것이다.복잡한 로직이나 반복문이 중첩되는 경우에는 좀 더 어려워질 수 있으나 단순한 것들은 금방 익숙해질 수 있고 단순한 반복문으로 처리하는 것들이 더 많다. 반복문을 계속 사용하면서 익숙해지면 중첩되는 반복문도 쉽게 다가오게 된다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>* 삼각형그리기</title> </head> <body> <div id="res"></div> <script> function foo (h) { var res = ''; for (var i = 0; i < h +1; i++) { res += '*'.repeat(i) if (i === 0 || i === h) { continue; } else { res += "<br>" } } var elem = document.getElementById('res'); elem.innerHTML = res } foo(5) </script> </body> </html>'Develop' 카테고리의 다른 글
[javascript basic] 배열 (1) 2019.04.06 [HTML5 & Javascript] Canvas Basic (그리면서 배우는 도형그리기 기초) (0) 2019.03.17 댓글