16. for 문 (TIL)

이해용·2022년 5월 3일
JavaScriptfor loop
0
post-thumbnail

이전에 틀렸던 문제를 다시 풀어보니 또 틀려서 정리가 필요하다는 생각이 들었다. for 문의 기초가 필요하다는 생각이 들어 기본부터 차근차근 정리해야겠다.

for 문

16-1. for 문의 활용

도시 배열을 다시 한 번 봅시다.

let cities = ["서울", "대전", "대구", "부산", "광주", "제주도"];

만약 home 이 "서울"이면, "아, 여기 사시는군요"라고 alert 를 띄우고 싶습니다.

let home = "서울";

if (cities[0] === home) {
  alert("아, 여기 사시는군요");
} else if (cities[1] === home) {
  alert("아, 여기 사시는군요");
} else if (cities[2] === home) {
  alert("아, 여기 사시는군요");
} else if (cities[3] === home) {
  alert("아, 여기 사시는군요");
}

만약 도시가 50개라면, 코드에 index를 0부터 49까지 추가하여 코드가 최소 100줄 정도 늘어날 것 같습니다 😆 (아이고...!)

let home = "서울";

if (cities[0] === home) {
  alert("아, 여기 사시는군요");
} else if (cities[1] === home) {
  alert("아, 여기 사시는군요");
} 

// cities[2] ... cities[47] 까지 계속..
else if (cities[48] === home) {
  alert("아, 여기 사시는군요");
} else if (cities[49] === home) {
  alert("아, 여기 사시는군요");
}

그러나 우리가 프로그래밍을 배우는 가장 큰 이유는 단순 반복을 줄이기 위해서가 아닐까요? 이렇게 비효율적인 코드를 for 반복 문을 사용하면 짧게 줄일 수 있습니다.

for (let i = 0; i <= 50; i++) {
   if (cities[i] === home) {
     alert("아, 여기 사시는군요");
   }
}

16-2. for 문의 사용법

for 문을 사용하면 코드를 원하는 만큼 반복시킬 수 있습니다.

실행 조건에 따라 언제부터 언제까지 반복하게 될 것이라고 알려주기만 하면 됩니다.

for 문이 사용된 조금 더 간단한 예시를 보겠습니다. 아래 코드를 실행해봐주세요.

let count = 1;
for (let i = 0; i <= 5; i++) {    
  count = count + 1;
}

형태는 아래와 같습니다.

for (반복조건) {
   // 반복조건이 맞으면 실행할 코드
}

반복조건을 말로 표현하면,

  • 0부터 5까지 1씩 증가 시키면서 for 문의 {} 내부를 실행 하라는 뜻입니다.
  • i 는 1씩 증가하면서 0, 1, 2, 3, 4, 5까지 증가하고, for 문 내부의 코드 총 6번 실행됩니다.
  • i 가 5가 될때까지 for 문의 {} 안을 실행하다가, 6이 되면 i <= 5 라는 식은 false 가 됩니다. (6 > 5)
  • 따라서 {} 내부로 들어가지 못하고, {} 밖으로 벗어납니다.
  • 그렇다면 i 가 0, 1, 2, 3, 4, 5 일 때 실행하게 되니 for 문이 총 6번 실행됩니다.

for loop picture

조건의 표현은 다른데 결과는 똑같은 코드를 짜보았습니다.

let count = 1;
for (let i = 0; i < 6; i++) {    
  count = count + 1;
}
  • for 문의 종료 조건(끝 값)을 i <= 5에서 i < 6 으로 변경하였습니다.
  • 코드에서 <= 와 5 를 수정해서 직접 확인해보세요.
  • 6보다 작을때까지 실행하고 for 문이 끝나기 때문에,
  • i 가 0, 1, 2, 3, 4, 5일때만 실행하여 결국 for 문을 반복하는 횟수는 똑같습니다.

16-3. 반복문 내부의 조건문

const home = "대전";
const cities = ["서울", "대전", "대구", "부산", "광주", "제주도"];

for (let i = 0; i <= 5; i++) {
   if (cities[i] === home) {     
 	    console.log("아, "+ cities[i] +" 사시는군요");
   }
}

  • i 가 0일 때, cities[0] 과 home 을 비교합니다.

  • "서울" === "대전"

  • false 이므로 if 문 {} 내부로 들어가지 않고 i 가 0일때의 for 문은 끝납니다.

  • 그 다음, i 가 1이 증가하여 i 가 1이 되면, cities[1] 과 home 을 비교합니다.

  • "대전" === "대전"

  • true 이므로 if 문이 실행됩니다.

  • 이렇게 i 가 5가 될 때까지 if 조건을 확인하며 for 문이 실행되고 종료 조건을 만족하면 반복이 마무리됩니다.

  • 만약 배열이 아래와 같았다면 console.log 가 세번 떴을 것입니다.

const cities = ["서울", "대전", "대구", "대전", "광주", "대전"];

for 문에서 i 가 1, 3, 5일 때 if 문이 실행되는 것이죠.

이해 되셨나요? 반복문과 조건문은 매우 중요합니다. 확실히 이해가 될 때까지 코드를 작성해보시고, 변수 값이나, 배열의 길이, 배열의 요소를 수정해 가면서 console.log 로 출력하여 확인해보세요.

16-4. 반복문의 다양한 활용

더 다양한 반복조건을 한 번 봅시다.

for (var i = 2; i < 10; i = i + 2)

다른 것은 비슷해 보이는데, 증가 값이 i++ 으로 1씩 증가하는게 아니라 i = i + 2 라고 작성되어 있네요.

  • i 는 2부터 시작하여
  • 10보다 작을 때까지
  • 2씩 증가 시키면서 for 문을 돌린다.
  • i 가 2,4,6,8 으로 2씩 증가하며 for 문을 총 4번 반복합니다.
    i 도 for 문을 돌며 계속 변하는 값입니다.
  • for 문 조건의 마지막에 i = i + 2는 원래의 i 에 2씩 더한다는 뜻이므로 for 문이 한 번 돌 때마다 i 는 2씩 증가하는 것입니다.
    또 다른 예시를 살펴보겠습니다.
for (var i = 10; i > 7; i--)
  • i 는 10부터 시작하여
  • 7보다 클때까지 (7보다 클 동안만)
  • 1씩 감소하면서 for 문 안의 코드를 실행합니다.
  • i 가 10, 9, 8 으로 1씩 감소하며 for 문을 총 3번 반복합니다.

16-5. 반복문과 배열

다시 한 번 처음에 봤던 코드를 보겠습니다.

cities 배열의 길이는 4 이므로, for 문을 4번 돌리기 위해 i 가 0부터 3까지 1씩 증가하여 (0,1,2,3) 총 4번 실행할 수 있도록 조건을 작성하였습니다.

const home = "대전"; 
let cities = ["서울", "대전", "대구", "부산"];  
 
for (let i = 0; i <= 3; i++) {    
  if (cities[i] === home) {      
    console.log("아, "+ cities[i] +" 사시는군요");    
  } 
}

하지만 대부분의 경우 배열의 길이가 얼마나 되는지 알지 못합니다. 프론트엔드 코드에서 직접 배열을 생성하지 않고 외부에서 받아오는 경우가 있고, 또 너무 배열이 길어서 길이를 셀 수 없는 경우도 있습니다.

이러한 경우, 배열의 길이가 얼마나 되는지 알 수 있는 방법이 있습니다. 배열의 길이를 알면 그만큼 for 문을 반복하면 되겠죠. 배열은 length 라는 속성을 가지고 있습니다.

let cities = ["서울", "대전", "대구", "대전", "광주", "대전"];
console.log(cities.length) // cities 배열의 요소는 총 6개 이므로 6 이라는 숫자가 반환됩니다.
for (var i = 0; i < cities.length; i++) {
   if (cities[i] === home) {
     alert("아, 여기 사시는군요");
   }
}
  • *for (var i = 0; i*<*cities.length; i++)*
  • 가운데 비교연산자를 주의하세요. <= 가 아닌 < 를 사용하고 있습니다.
  • 배열의 길이는 6 이므로 총 6번의 반복문이 실행되어야 합니다.
  • i 는 0부터 5까지 총 6번이 실행되어야 하므로 배열의 길이보다 작을때까지 반복문을 실행합니다.
  • 만약 <= 작거나 같다는 비교연산자를 사용하면
  • i 는 0,1,2,3,4,5,6 까지 실행되어 총 7번의 반복문을 실행합니다.

Assignment

findSmallestElement 함수를 구현해 주세요.

  • findSmallestElement 의 arr 인자는 숫자 값으로만 이루어진 배열입니다.

  • arr 의 값들 중 가장 작은 값을 리턴 해주세요.

  • 만일 arr 가 비어있으면 0을 리턴 해주세요.

  • 예를 들어, 다음과 같은 배열이 인자(input)으로 들어왔다면 1이 리턴 되어야 합니다.

[20, 200, 23, 1, 3, 9]

풀이

처음 풀었을 때 if 문을 적절히 사용하면 되겠다는 생각이 들었다.

  1. theSmallest = arr[0] 선언
    let theSmallest = arr[0]
  2. arr 배열의 길이가 0(===arr[0])이라면 0을 return 한다.
if (arr[0] === 0) {
	return 0;
	}
  1. arr 배열의 길이가 1(===arr[0])이라면 arr[0]를 return 한다.
if (arr.length === 1) {
	return arr[0]
	}
  1. for문을 사용하여 arr[i]의 값이 theSmallest의 값보다 작다면 theSmallest 의 값을 출력한다.
for(let i = 0; i < arr.length; i++) {
  if (arr[i] < theSmallest) {
    theSmallest = arr[i];
  }
} return theSmallest;

나의 처음 생각은 arr[i] > theSmallest의 조건도 지정해줘야 한다는 생각이 있어서 헤매게 되었다. 하지만, 위의 for 문에서 i = 0부터 시작하기 때문에 어차피 arr[0]이 제일 작은 수라면 for문에서 성립이 안된다. 그러므로, 자동으로 theSmallest가 return 되게 된다.
따라서 arr[i] > theSmallest 조건은 의미가 없기 때문에 위의 코드로도 정리가 되고 처음 생각의 조건을 지정해주면 중복이 되기 때문에 에러가 발생되는 것이라 생각 들었다.

  1. 결과
function findSmallestElement(arr) {
  // your code here
  //(1)
  let theSmallest = arr[0]; 
  //(2)
  if (arr.length === 0) {
    return 0;
  }
  // (3)
  if (arr.length === 1) {
    return theSmallest;
  }
  // (4)
  for (let i = 0; i < arr.length; i++) {
   if (arr[i] < theSmallest) {
      theSmallest = arr[i];
    }  
  }
  return theSmallest;
}

해당 문제를 풀면서 참고했던 사이트

https://stackoverflow.com/questions/8934877/obtain-smallest-value-from-array-in-javascript

for loop1 in stackoverflow

for loop2 in stackoverflow

profile
이해용
프론트엔드 개발자입니다.
이전 포스트

30. object (3)[TIL]

다음 포스트

17. 배열 조작하기(TIL)

0개의 댓글