(Javascript) 자바스크립트 기초문법 (2) 조건,반복

안녕하세요! 영감을 주는 개발자 방민방민입니다. 

지난 시간에 이어 자바스크립트 기초 문법 중 조건문, 반복문 등에 대하여 알아보는 시간을 갖고자 합니다.

바로 시작하도록 하겠습니다.

1. if 문

if 문은 프로그래밍에서 가장 많이 사용하는 제어문입니다. if 문의 문법은 아래와 같습니다.

if (조건문)

{

statement1;

}

else

{

statement2;

}

조건문에 따라 조건문이 참인경우 statement1 이 , 거짓인 경우에는 statement2 가 실행됩니다.

여러가지의 조건문을 사용하기 위해서는 if ~ else if ~ else 문을 사용합니다. 문법은 아래와 같습니다.

if (조건문)

{

statement1;

}

else if(조건문2)

{

statement2;

}

else

{

statement3;

}

이 경우 첫번째 조건문이 참일때, statement1, 첫번째 조건문이 거짓이고 두번째 조건문2가 참일때, statement2를 두번째 조건문2까지 거짓인경우 statement3이 실행됩니다. 예제를 보겠습니다.

var i = 25;
if(i>25)
{
	alert("greater than 25.");
}
else if(i<25)
{
	alert("less than 25");
}
else
{
	alert("same with 25");
}

이경우 i =25;로 변수 설정이 되어있기 때문에 본 예제는 아래와 같이 if 문과 else if 문을 지나 마지막에 있는 same with 25 를 알림창으로 출력합니다.

2. do - while 과 while 문

do-while 과 while 문 모두 일정 기간동안 반복되는 반복문입니다. 차이점은 do while 문은 조건문과 관계없이 일단 한번은 실행된다는 점이고, while 문은 조건문에 따라 한번도 실행되지 않을 수도 있다는 점입니다.아래의 형태를 보며 차이점을 생각해 보겠습니다.

1) do-while문

do

{

statement;

} while(expression);

var i =0;
do {
i+=2;
alert(i);
} while(i<10);

이 경우 2,4,6,8,10 다섯번의 알림창을 출력합니다.

2) while문

while(expression) statement;

var i =0;
while(i<10)
{
	i+=2;
	alert(i);
}

이 경우에도 마찬가지로 2,4,6,8,10 다섯번의 알림창을 출력합니다.

차이점은 do -while 의 경우 조건문을 false 로 주더라도 첫번째 2를 출력하는 알림창은 반드시 출력된다는 점입니다. 반면 while 문은 조건을 false 로 주면 알림창을 하나도 출력하지 않습니다.

3. for문

for 문 역시 while 과 마찬가지로 반복문입니다. 다만 그 형태가 조금 다릅니다. 형태는 아래와 같습니다.

for (initialization; expression; post-loop-expression) 

{

statement;

}

var count = 10;
for(var i = 0; i<10; i++)
{
alert(i);
}

이 경우 0부터 9 까지 10번의 알람을 출력합니다.

for 문은 while 문으로 또 while 문은 반대로 for 문으로 생성이 가능합니다.

옵션 없이 for(;;) 을 사용하게 되면 무한 루프를 돌게됩니다.

4. for-in문

for - in 문은 책에서의 표현에 따르면 객체의 프로퍼티를 나열하는데 사용됩니다.

이 부분은 저도 아직 이해가 되지 않는 부분입니다. 

for(var propName in window)
{
	document.write(propName);
}

예를들어 위와같이 작성하면 아래와같은 이름들을 출력합니다.

"documentwindowselfnamelocationhistorylocationbarmenubarpersonalbarscrollbarsstatusbartoolbarstatusclosedframeslengthtopopenerparentframeElementnavigatorapplicationCachesessionStoragelocalStoragescreeninnerHeightinnerWidthscrollXpageXOffsetscrollYpageYOffsetscreenXscreenYouterWidthouterHeightdevicePixelRatioeventdefaultStatusdefaultstatusoffscreenBufferingscreenLeftscreenTopclientInformationstyleMediaindexedDBwebkitIndexedDBspeechSynthesisonabortonbluroncanplayoncanplaythroughonchangeonclickoncontextmenuoncuechangeondblclickondragondragendondragenterondragleaveondragoverondragstartondropondurationchangeonemptiedonendedonerroronfocusoninputoninvalidonkeydownonkeypressonkeyuponloadonloadeddataonloadedmetadataonloadstartonmousedownonmouseenteronmouseleaveonmousemoveonmouseoutonmouseoveronmouseuponmousewheelonpauseonplayonplayingonprogressonratechangeonrejectionhandledonresetonresizeonscrollonseekedonseekingonselectonstalledonsubmitonsuspendontimeupdateontoggleonunhandledrejectiononvolumechangeonwaitingontransitionendonanimationendonanimationiterationonanimationstartcryptoperformanceonbeforeunloadonhashchangeonlanguagechangeonmessageonofflineononlineonpagehideonpageshowonpopstateonstorageonunloadoriginclosestopfocusbluropenalertconfirmpromptprintrequestAnimationFramecancelAnimationFramepostMessagecaptureEventsreleaseEventsgetComputedStylematchMediamoveTomoveByresizeToresizeByscrollscrollToscrollBygetSelectionfindwebkitRequestAnimationFramewebkitCancelAnimationFramewebkitCancelRequestAnimationFramegetMatchedCSSRulesshowModalDialogwebkitConvertPointFromPageToNodewebkitConvertPointFromNodeToPageopenDatabasesetTimeoutclearTimeoutsetIntervalclearIntervalatobbtoacustomElementsisSecureContextfetchaddEventListenerremoveEventListenerdispatchEvent"

반복문을 실행할때마다 propName 변수에 window 객체의 프로퍼티 이름을 저장하고 출력합니다. 이에 대해서는 기회가 된다면 추후 포스팅에서 다루어 보도록 하겠습니다.

5. 문장 레이블

문장에 label 을 붙여두면 나중에 break 나 continue 에서 사용할 수 있습니다. 형태는 아래와 같습니다.

label: statement

 start: for(var i = 0; i <10; I++){alert(i);} 

이와같이 하면 for 문에 start 라는 라벨을 붙여 추후에 사용이 가능합니다 :)

6. break, continue

break 는 즉시 반복 루프를 빠져나갑니다. 

continue 는 해당하는 반복에서 반복문의 가장 위로 돌아가게 됩니다.

var num = 0;
for (var i=1; i<10; i++)
{
	if(i%5==0)
  {
  	continue;
  }
  num++;
}
alert(num);

이경우 알림창은 8을 출력합니다. 이유는 중간에 i 가 5가 되는 경우 해당 횟수의 반복문을 빠져나가 맨 위로 돌아 갔기 때문에 num++ 한번을 해주지 않았기 때문입니다.

반면 continue 위치에 break 을 사용하게 되면 alert 는 4를 출력합니다.

i가 5가 되는 그 즉시 반복문 전체를 빠져 나오기 때문입니다.

7. switch문

switch 는 조건에 따른 case를 결정합니다.

사용 예제를 통해 확인해보겠습니다.

switch(i)
{
	case 25:
  	alert("25");
    break;
	case 35:
  	alert("35");
    break;
  case 45:
  	alert("45");
    break;
  case 55:
  	alert("55");
    break;
  default:
  	alert("other");
}

switch 문은 default 값으로 행할 statement 를 맨 아래에 두고 그 위에 각각의 케이스를 정의하는 것이 바람직합니다. 그래고 해당 케이스의 statement 를 실행한 뒤에는 break; 문을 사용하여 반드시 switch 문을 벗어나도록 해주는것이 좋습니다.

8. 함수

함수는 아래의 형태를 사용하여 선언합니다.

function funName(arg1, arg2, ..., argN)

{

statement;

}

그리고 이렇게 선언된 함수는 아래와 같이 호출하여 바로 사용이 가능합니다.

funName(arg1, arg2, ..., argN); 

함수에서 전달되는 매개변수는 자동으로 arguments 객체에 배열 형태로 저장됩니다.

즉 arguments[0],arguments[1],arguments[2],...,arguments[N-1] 까지 자동으로 저장됩니다.

이말은 선언시에는 아래와 같이 각각의 매개변수 이름을 설정해 주지 않고 

statement; 안에 arguments[0] 와 같은 값을 사용하여 자연스럽게 그 값을 활용할 수 있다는 뜻입니다.

function funName()

{

statement;

}

좀더 명확한 이해를 위해 예를 통해 보도록 하겠습니다.

function doAdd()
{
	if(arguments.length==1)
  {
  	alert(arguments[0]+10);
  }
  else if(arguments.length==2)
  {
  	alert(argument[0]+arguments[1]);
  }
}

위의 경우 

doAdd(10); 을 호출하면 20이 

doAdd(30,30); 을 호출하면 60이 알람으로 출력됩니다. 즉 doAdd 함수에 각각의 매개변수명을 설정해 주지 않았지만 함수 내부에서 arguments 라는 매개변수명을 활용하여 접근하고 이를 연산하는데에 사용이 가능하다는 뜻입니다.

여기까지 (Javascript) 자바스크립트 기초문법 (1)(2) 포스팅을 통해 자바스크립트에서 사용되는 가장 기초적인  문법에 대하여 모두 다루어 보았습니다. 

C언어나 Java 를 해보셨던 분들은 크게 어렵지 않게 따라 오셨을것이라 생각합니다. 또 그렇지 않다고 하더라도 크게 무리는 없으셨을 것이라고 생각됩니다. 더욱 깊게 내용을 이해하고 싶으신 분들은 앞서 언급드린바와 같이 

"프론트엔드 개발자를 위한 자바스크립트 프로그래밍" 책을 참고하시면 될 것 같습니다.

오늘은 여기까지 영감을 주는 개발자 방민방민이었습니다.

감사합니다.:)