[SeSAC] 반복문

 

const arr = [1, 'a', [4, 5, 6], { name: "something" }]

// for 기본형태
for (let i = 0; i < arr.length; i++){
  console.log(arr[i]);
}

// key를 하나씩 꺼내준다.
// 배열: index / Object: key
for(const index in arr){
  console.log(arr[index]);
}

// key의 value를 하나씩 꺼내준다.
for(const element of arr){
  console.log(element);
}


// while의 형태
let i = 0;
while (i < arr.length){
  console.log(arr[i])
  i++;
}

// 결과

// 1
// a
// [ 4, 5, 6 ]
// { name: 'something' }

위 코드는 모두 결과가 동일하다.

상황과 편의에 따라 선택적으로 활용하면 된다.

처음에는 문법 자체가 어려울 수 있겠으나 해결 방법은 반복이 최선이다.

 

추가적인 팁으로는 변수들에 실제 값을 하나씩 넣어보며 변화과정을 느끼는 것도 방법이다.

또한 손으로 그림을 그리는 것 또한 이해에 도움이 된다.

 

for (초기화; 조건식; 증감식) {
  // 실행할 코드
}

for (let key in 객체) {
  // 실행할 코드
}

for (let value of 반복 가능한 자료형) {
  // 실행할 코드
}

while (조건식) {
  // 실행할 코드
}

 

무엇이든 사용하려 할 때는 목적을 잊지 않아야 한다.

반복문은 동일한 동작을 여러번 이행하는 것이 목적이다

console.log(arr[0])
console.log(arr[1])
console.log(arr[2])
console.log(arr[3])

이처럼 index 부분만 변하고 있다.

만약 배열의 길이가 1000이라면 같은 비슷한 코드를 최소 1000번 작성하는 번거로움이 생긴다.

 

이 동작을 최소화하고자 하는 것이다.

 

따라서

변하는 부분이 어디인지.

어떤동작이 반복되고 있는지 추리는 것부터 시작해야한다.

이러한 생각을 서술하여 코드로 옮기는 행위가 도움이 될 것이다.

console.log() 함수가 반복된다.
arr의 인덱스가 변화한다.
인덱스는 arr의 길이 직전까지 변화한다.

 

이 문구를 참고하여 위에 마련된 반복문과 비교하여 활용에 참고가 되면 좋겠다.

---

break, continue

• break: 반복문을 즉시 종료 시킨다.

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break;
  }
  console.log(`i의 값: ${i}`);
}
// i의 값: 0
// i의 값: 1
// i의 값: 2
// i의 값: 3
// i의 값: 4

• continue: 현재 반복을 건너뛰고 다음 반복으로 넘어간다.

for (let i = 0; i < 5; i++) {
  if (i === 2) {
    continue;
  }
  console.log(`i의 값: ${i}`);
}
// i의 값: 0
// i의 값: 1
// i의 값: 3
// i의 값: 4