자바스크립트 조건문 & 반복문 JavaScrip Conditions, Loops

자바스크립트의 조건문 & 반복문에 대해 알아보겠습니다.

 

1. if, else, else if

 

if 조건절 안의 조건이 true인 경우, if 블록의 내용이 실행됩니다. false인 경우, else if 문의 조건을 확인하고, 해당 조건이 true이면, else if 조건절 블록의 내용을 실행합니다.

else if 조건 또한 false 인 경우, else 문 블록의 내용을 실행합니다.

if (time < 10) {
  greeting = "Good morning";
} else if (time < 20) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

 

2. switch

 

switch문은 다른 조건에 따라 다른 작업을 수행하는 프로그래밍을 짤 때 유용합니다. 스위치 블록을 탈출하기 위해, break 키워드가 사용됩니다. default 키워드는 일치하는 조건이 없는 경우 실행되는 구문입니다.

switch (new Date().getDay()) {
  case 6:
    text = "Today is Saturday";
    break;
  case 0:
    text = "Today is Sunday";
    break;
  default:
    text = "Looking forward to the Weekend";
}

스위치 문에서는 값을 비교할 때, 엄격한 비교(===)를 사용합니다. 느슨한 비교(==)를 사용하지 않도록 실수하지 마세요! 엄격한 비교는 값과 타입이 모두 같아야 하며, 느슨한 비교는 값만 같으면 됩니다.

아래 예문과 같이, 0과 "0"은 다르며, 값과 타입이 모두 같은 쪽의 결과 나옵니다.

let x = "0";
switch (x) {
  case 0:
    text = "Active";
    break;
  case "0": 
    text = "Pause";
    break;
  default:
    text = "Stop";
}

// 결과값은 "Pause"

반응형

3. 자바스크립트 반복문

 

자바스크립트 상에서 루프를 이용해 코드 블록을 여러 번 실행할 수 있습니다. for문은 일반적인 반복문이며, for in 문은 객체의 속성을 반복합니다. for of 문은 반복 가능한 객체의 값을 반복합니다.

 

인덱스 순서가 중요한 경우 배열에 대해서는 for in을 사용하지 말아야 합니다. 순서가 중요한 경우에는 for 문이나  Array.forEach( )를 사용하는 것이 좋습니다.

 

for of 문은 배열, 문자열, Map, NodeList 등과 같은 반복 가능한 데이터 구조를 반복할 수 있습니다.

1. for 문
for (let i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}

// The number is 0 ~ The number is 4

2. for in 문
const numbers = [45, 4, 9, 16, 25];

let txt = "";
for (let x in numbers) {
  txt += numbers[x];
}

// 45, 4, 9, 16, 25 

3. for of 문
let language = "JavaScript";

let text = "";
for (let x of language) {
text += x;
}

// JavaScrip

자바스크립트 반복문 내에서 var, let 키워드를 주의해서 사용해야 합니다. var 키워드로 선언 후 반복문 안에서 선언된 경우, 반복문 밖에서 다시 영향을 받습니다.

let을 사용하면 루프에서 선언된 변수가 루프 외부 변수에 영향을 주지 않습니다. let을 사용하면, 반복문 내에서만 그 변수가 유효합니다.

1. var 키워드
var i = 5;

for (var i = 0; i < 10; i++) {
  // 생략
}

---> i값은 5가 아닌 10이 됩니다.

2. let 키워드
let i = 5;

for (let i = 0; i < 10; i++) {
  // 생략
}

---> i값은 여전히 5가 됩니다.

4. while 및 do while 문

 

while 루프는 지정된 조건이 참인 경우, 코드 블록을 반복합니다. do while 문은 while 루프의 변형된 형태입니다. 이 루프는 조건이 참인지 확인하기 전에, do 부분에서 코드 블록을 최소 한 번은 실행한 다음, 조건이 참인 동안 루프를 반복합니다.

1. while
while (i < 10) {
  text += "The number is " + i;
  i++;
}

2. do while
do {
  text += "The number is " + i;
  i++;
}
while (i < 10);

 

5. break & continue 키워드

 

자바스크립트에서 break와 continue 키워드가 사용되는데, break는 루프문을 빠져 나오는데 사용되며 continue는 반복을 한 번 점프하는데 사용됩니다. 아래 예문을 보면 확실히 이해하실 수 있을 것입니다.

1. break 키워드
for (let i = 0; i < 10; i++) {
  if (i === 3) { break; }
  text += "The number is " + i + "<br>";
}

//출력 결과
The number is 0
The number is 1
The number is 2

2. continue 키워드
for (let i = 0; i < 10; i++) {
  if (i === 3) { continue; }
  text += "The number is " + i + "<br>";
}

//출력 결과
The number is 0
The number is 1
The number is 2
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9