JavaScript 조건문과 반복문

조건문 ( Conditions ) 이란 ?

JavaScript의 비교, 논리 연산자와 boolean 데이터 타입을 이용하여 조건문을 사용할 수 있다. 조건문의 종류는 크게 if와 switch가 있다.

if문의 문법

조건문은 if로 시작한다. if뒤의 괄호에 조건이 오고, 조건이 될 수 있는 값은 boolean이다. 값이 true면 if문의 내용이 실행되고 false면 else문의 내용이 실행된다. 또 그렇지 않으면 else if문의 내용이 실행된다.

if (true) { 
  cosole.log('true입니다.');
} else {
  console.log('false입니다.');
}
// 내용은 if문의 내용인 'true입니다'. 가 나온다.

if (false) { 
  cosole.log('false입니다.');
} else if (true) {
  console.log('true입니다.');
} else {
  console.log('false입니다.');
}
// 내용은 else if문의 내용인 'true입니다.'가 나온다.

if (false) { 
  cosole.log('false입니다.');
} else if (false) {
  console.log('false입니다.');
} else {
  console.log('false입니다.');
}
// 내용은 else문의 내용인 'false입니다.'가 나온다.

switch문의 문법

조건문은 switch로 시작한다. 조건이 맞는 case의 내용이 실행되고 조건문은 종료된다. 어떠한 case에도 조건이 부합하면 default문의 내용이 실행되고 조건문이 종료된다. break가 빠지게되면 다음 break를 만나기 전까지 내용들이 출력이 된다.

switch (key) {
  case (조건)1:
    // case1의 내용
    break;
  case (조건)2:
    // case2의 내용
    break;
  case (조건)3:
    // case3의 내용
    break;
  default:
    // default의 내용
    break;
}

switch 예제

let animal = 'dog';

switch (animal) {
  case 'cat':
    console.log('야옹');
    break;
  case 'dog':
    console.log('멍멍');
    break;
  case 'cow':
    console.log('음메');
    break;
  default:
    console.log('일치하는 동물 소리가 없습니다.');
    break;
} // 멍멍

-출처 https://www.youtube.com/watch?v=Tir_8e6S-ZI

if문과 switch문의 차이

switch문은 변수를 입력 받아 미리 정해놓은 여러 값들과의 일치여부를 판단하여 내용을 출력하고 if문은 비교, 논리 boolean의 결과 값을 내놓는 조건문에 따라 내용을 출력한다.

반복문 ( loop ) 이란?

프로그래밍에서는 코드를 반복해야 할 일이 많은데 반복문은 컴퓨터에게 반복적인 작업을 지시하는 방법이다. 자주사용하는 반복문의 종류는 while, for 이다. 시작점과 종료시점을 지정해줘야 무한 loop를 돌지않는다. 무한 loop를 돌게되면 브라우저가 실행되지 않기때문에 주의해야 한다. 반복문을 중간에 멈추게할라면 break;를 사용해준다. break;를 만나면 반복문이 아에 멈추지만 continue를 사용하게 되면 가운데 조건만 빠지고 처음부터 끝까지 반복된다.
( 주로 데이터를 배열이나 객체로 받아서 반복할 경우 많이 사용한다. )

while 문의 문법

반복문은 while로 시작한다 while 위에 시작점이 있고 while뒤의 괄호에 조건이 오고, while 안에 증감이 있다. 조건이 true인 동안에 반복해서 실행이 된다. 조건이 false가 되면 반복문이 종료된다. i는 index이고 0부터 시작한다. while의 가장 큰 문제점은 시작점이 중괄호 밖에 있어서 만약에 또 다른 곳에서 i가 쓰인다면 충돌할 가능성이 크다.

시작점
while (조건문) {
 반복할 내용
 증감;
}

while 문 예제

let i = 0;
while ( i < 10 ) {
	document.write('Hello World');
  	i++;
}

for 문의 문법

반복문은 for로 시작한다. for 괄호 안에 시작점, 조건, 증감을 써준다. 조건이 true인 동안에 반복해서 실행이 된다. 조건이 false가 되면 반복문이 종료된다. i는 index이고 0부터 시작한다. for는 while처럼 시작점이 바깥에 있질 않아서 충돌이 잘 일어나지 않는다. 또 while보다 가독성도 좋고 코드도 간결하다.
( var 보단 let으로 선언하면 밖에서 충돌일어날 가능성이 더 줄어든다. )

for (시작점; 조건문; 증감) {
 반복할 내용
}

for 문 예제

for (let i = 0; i < 10; i++) {
	document.write('Hello World');
}

while과 for의 차이

while문은 몇번 반복할지 모를 경우에 사용하고 for는 반복 횟수가 정해져 있을 경우에 많이 사용한다.

그 밖의 반복문들

- for in

for in 반복문은 객체에서 많이 사용된다. 객체의 key와 value를 열거해준다. in 뒤에는 배열명을 써주고 for문 안의 변수는 key가 나오고 객체명[변수]는 value값이 나온다.

let obj = {
  name : '원숭이',
  age : 12,
  favorite: 'banana'
}
for (let i in obj) {
  console.log( i + ':' + obj[i]);
}

결과값

- for of

for of 반복문은 배열안의 데이터 값을 읽는데 많이 사용한다. of 뒤에는 배열명을 써준다.

let arr = [ 10, 20, 30 ];
for (let i of arr) {
  console.log(i);
}

결과값

- forEach ( 배열 메서드 )

forEach 반복문은 오직 배열에서만 사용이 가능하다. forEach의 인자는 callback함수가 들어오고 callback 함수의 매개변수는 index, item이 있다. 둘중 하나만 사용해도 무관하다.

let arr = [ 10, 20, 30 ];
arr.forEach(function(item){
  console.log(item);
});

결과값

- do while

do while 반복문은 잘 쓰이지 않는다. 그 이유는 조건문의 결과와 상관없이 무조건 1번은 반복되고 while문의 문제점과 똑같기 때문이다. while문과 똑같이 시작점을 위에 써주고 do 안에 반복할 내용과 증감을 써준뒤에 while을 써서 조건을 걸어둔다.

let i = 0;
do {
  console.log(i);
  i++;
} while ( i < 10 );