TIL | 반복문(for loop)과 배열

정세영·2022년 7월 20일
0

Javascript

목록 보기
5/23

1. 헷갈리는 반복문 조건 설정 정리

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

위 코드를 실행 시키면 0,1,2,3,4,5,6,7,8,9 가 출력된다.
0부터 9번 1씩 추가했기 때문이다.

for (let i = 1; i < 11; i++){
  console.log(i)
}

위 코드를 실행시키면 1,2,3,4,5,6,7,8,9,10 이 출력된다.
1부터 9번 1씩 추가했기 때문이다.

for (let i = 0; i < 11; i++){
  console.log(i + 1)
}

위 코드를 실행시키면 1,2,3,4,5,6,7,8,9,10,11 이 출력된다. 11보다 작게 라고 조건을 적었는데 왜 11까지 나왔을까?
콘솔에 i + 1 로 출력하라고 했기 때문이다. 반복문이 원래 출력해야하는 값은 0,1,2,3,4,5,6,7,8,9,10 인데 각 값에 1씩 더해서 출력된 것이다.

2. 반복문(for loop)과 배열

반복문과 배열은 자주 사용되는 조합이다.

예제1) 빈 배열 myArray에 100부터 110까지 요소를 추가하기

let myArray =[]
//반복적으로 100부터 110까지 myArray.push()
for (let i =100; i<=110; i++){
  myArray.push(i)
}
console.log(myArray)
//[100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110]

위의 for loop을 순회할 때의 상황은 다음과 같다.

  • i를 100 이라고 지정했기 때문에 push 로 인해서 myArray에 100 추가됨.
  • 그 후 i++ 됐기 때문에 i가 1 증가 함.
  • 1 증가 된 i에 대해서 조건(i<=110)에 맞는지 참, 거짓을 판별한다.
  • 101은 110보다 작기 때문에 참이 되고 myArray.push(i)코드가 다시 실행 돼서 100 다음에 101이 추가
  • 이 과정을 i가 110이 될때까지 반복
  • 그 후 에도 i는 1이 또추가 됨
  • 하지만 조건에 맞는지 판별하는 과정에서 거짓이 되기 때문에(111은 110보다 크므로 <=110 이라는 조건에 부합하지 않음)
    더이상 for loop 안의 코드가 실행되지 않고 밖에 있는 다음 코드로 넘어감

예제2) Array의 요소를 순회하며 콘솔에 출력하기

Array를 순회한다는 것은 배열에 요소 하나하나를 접근해서 동일한 동작을 실행하는 것이다. 따라서 Array의 요소를 순회하며 콘솔에 출력한다는 것은 요소 하나하나를 콘솔로 출력한다는 뜻이다.

let colors = ['red','blue','orange','black']

console.log(colors[0])
console.log(colors[1])
console.log(colors[2])
console.log(colors[3])
/*"red"
"blue"
"orange"
"black"*/

for (let i=0; i < 4; i++){
  console.log(colors[i])
}
/*
"red"
"blue"
"orange"
"black"*/

위의 방식과 밑에 방식 모두 같은 결과물을 출력한다.
위의 방식은 계속해서 콘솔로 colors 배열의 index를 찍어줘야한다.
반면 for문을 사용하면 index를 1씩 증가시키면서 array를 순회하도록 할 수 있다.

예제3) Number로 이루어진 Array의 요소를 순회하며 1씩 더하여 콘솔에 출력하기

let myNumbers = [10, 20, 30, 40, 50]

for (let i = 0; i < 5; i++){
  console.log(myNumbers[i] + 1)
}
/*
11
21
31
41
51
*/

+1을 어디에 해야하는지가 관건이다.
myNumbers[i+1] 이라고 하면 안된다.
이렇게 하면 요소에 1이 더해지는게 아니라 인덱스에 1이 추가되는것이기 때문에 인덱스가 변경되는거지 요소에 1이 더해지지 않는다.

예제4) Array의 길이만큼 순회하기

위의 예제처럼 조건에 직접 숫자를 적어서 몇 이하 까지 순회하라고 할 수 있지만 이런 경우 배열의 길이가 바뀔때마다 조건을 수정해야한다.
이런 번거로움을 덜기 위해 조건에 배열의 길이를 활용해보자.

let myNumbers = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]

for (let i = 0; i < myNumbers.length; i++){
  console.log(myNumbers[i] + 1)
}
/*
10
20
30
40
50
60
70
80
90
100
*/

i < myNumbers.length 조건을 적을 때 배열의 길이와 작거나 같으면 안되고 작아야 한다. 배열의 길이는 항상 배열의 인덱스보다 1이 크기 때문이다. (요소가 10개 있는 배열의 길이는 10이지만 인덱스는 [0]부터 시작하기 때문에 [9]까지 있다.)

profile
룰루랄라 개발일지🎶❤️‍🔥🧑‍💻❤️‍🔥🎵

0개의 댓글