The for loop,looping Arrays, Breaking and Continuing

The for loop

아래와 같이 반복해서 출력해야 하는 코드가 있다고 해보자.

console.log("Lifting weights repetition 1");
console.log("Lifting weights repetition 2");
console.log("Lifting weights repetition 3");
console.log("Lifting weights repetition 4");
console.log("Lifting weights repetition 5");
console.log("Lifting weights repetition 6");
console.log("Lifting weights repetition 7");
console.log("Lifting weights repetition 8");
console.log("Lifting weights repetition 9");
console.log("Lifting weights repetition 10");

이렇게 일일이 치기 귀찮으므로 for loop를 사용할 수 있다. 사용하는 방법은 아래와 같다.

for (let rep = 1; rep <= 10; rep++) {
  console.log(`Lifting weights repetition ${rep}`);
}

저기서 rep=1은 1부터 시작한다는 거고 rep <= 10은 rep 값이 10이 되면 loop이 멈추게 되는 것이다. rep++ 은 rep의 값이 하나씩 증가하도록 설정해 준 것이다. 그리고 template literal 사용해서 바뀌어야 할 부분에 rep을 넣어주면 1부터 10까지 증가해서 콘솔에 출력되는 것을 볼 수 있다.

looping arrays

문자열뿐만 아니라 배열 또한 for loop로 반복할 수 있다. 아래의 코드를 보자.

const jonas = [
  "Jonas",
  "Lee",
  2037 - 1991,
  "teacher",
  ["Michael", "Peter", "Steven"],
  true,
];

const types = [];

이렇게 jonas라는 배열이 있고 types라는 빈 배열에 새로운 값을 넣어준다고 해보자. 이때 for loop문을 사용할 수 있다.

for (let i = 0; i < jonas.length; i++) {
  console.log(jonas[i], typeof jonas[i]);
}

코드의 결과값은 이렇게 나온다.

Jonas string Lee string 46 'number' teacher string (3) ['Michael', 'Peter', 'Steven'] 'object' true 'boolean'

위에 빈 배열로 만들어둔 types에 이 값을 넣어주는 방법은 두 가지가 있다. 첫 번째로 아래의 코드처럼 넣어줄 수 있다.

 types[i] = typeof jonas[i]; 

이렇게 types 배열 안의 각 값에 jonas 배열의 각 타입을 넣어주는 것이다. 두 번째 방법은 더 자주 사용되는 방법인데, push() 메서드를 이용하는 것이다.

 types.push(typeof jonas[i]);

loop되었을 때 순서대로 넣어져야 하므로 배열의 뒤쪽에서부터 차곡차곡 쌓이는 push 메서드를 사용해야 한다.

const years = [1991, 2007, 1969, 2020];
const ages = [];

for (let i = 0; i < years.length; i++) {
  ages.push(2037 - years[i]);
}
console.log(ages);

위의 코드도 비슷하게 years배열 안에 있는 각 값들을 loop해서 2037년도에서 빼준뒤 ages라는 빈 배열에 그 값을 넣어주었다.

continue break

다음으로 continue와 break에 대해서 배워보자!

console.log("---ONLY STRINGS ---");
for (let i = 0; i < jonas.length; i++) {
  if (typeof jonas[i] !== "string") continue;

  console.log(jonas[i], typeof jonas[i]);
}

여기서 continue는 스킵하라는 의미를 가진다. 한마디로 위의 코드에서 문자열이 아니면 skip하고 다음 코드를 실행하라는 것이다. 그래서 결과를 보면 문자열들만 나오게 된다.

break는 말 그대로 loop을 종료하는 것이다.

console.log("---BREAK WITH NUMBER ---");
for (let i = 0; i < jonas.length; i++) {
  if (typeof jonas[i] === "number") break;

  console.log(jonas[i], typeof jonas[i]);
}

위의 코드를 보면 숫자를 만나면 loop을 종료하게 된다. 따라서 숫자 자체도 출력되지 않고 그 전에 출력되었던 두 개의 문자열만 출력되는 것을 볼 수 있다.