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줄 정도 늘어날 것 같습니다 😆 (아이고...!)
그러나 우리가 프로그래밍을 배우는 가장 큰 이유는 단순 반복을 줄이기 위해서가 아닐까요? 이렇게 비효율적인 코드를 for 반복 문을 사용하면 짧게 줄일 수 있습니다
for (let i = 0; i <= 50; i++) {
if (cities[i] === home) {
alert("아, 여기 사시는군요");
}
}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번 실행됩니다.
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 = ["서울", "대전", "대구", "대전", "광주", "대전"];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]나의코드
function findSmallestElement(arr) { for(i=0; i<arr.length; i++) { if(arr.length === 0){ //배열의 길이가 없다면 , 즉 빈 배열이라면 0을 리턴 return 0 }else{ let mini = arr[0]; // 변수 min에 배열의 아무 값을 임의로 설정. (가상의 최솟값) for(i=0; i< arr.length; i++){ if(arr[i] < mini) { //반복문으로 돌아가는 배열의 요소들중 가상의 최소값보다 작다면 mini = arr[i] //가상의 최소값이 변수 mini 그렇다면 mini를 리턴 } } return mini } } console.log (findSmallestElement([2000000, 30, 5, 7, 200, 1, 0, 9])) //0을 리턴
이 예제의 핵심은 먼저 최솟값을
변수로 설정하고 배열의 임의의 값을 할당하는 것이다.
그래서 배열의 길이만큼 반복문을 실행하면서 그 가상의 최솟값과 각 배열의 원소를 비교해본다.
만약 변수 min의 값이 더 크면 값을 새로 재할당을 해준다. (최솟값 갱신)
그게 아니라 변수 min의 값이 여전히 더 작을때는 그대로 값을 유지하면서 리턴해준다.