for문과 array 조작방법

for loop 를 이용해서 Array의 element를 전부 확인한 다음에 어떤 변수와 같을 때 호출하기.

아래 예시는 for Loop을 사용해서 해당 index 와 일치하는 string 을 찾았을 때 호출하기 위한 for Loop 이다.

e.g.1

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

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

위의 예시에서 대전을 home 변수에 지정했기 때문에 i 가 5와 같거나 작을동안만 for Loop를 돌린다.

즉 0,1,2,3,4,5 → 6번

그 중 대전이 두번 있기 때문에 아, 대전 사시는군요 가 두번 출력된다.

같은 목적의 for loop를 다른 조건문으로 써보기.

e.g.2

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

for (let i = 10; i > 1; i--) {
   if (cities[i] === home) {
     console.log("아, "+ cities[i] +" 사시는군요");
   }
} // 아, 대전 사시는군요. 

작아지는 i 를 사용해보고 싶어서 위의 예시를 적었다. 그런데 아, 대전 사시는군요 가 한번만 출력되었다.

왜 그럴까 곰곰히 생각해보니, i 는 인덱스 번호이기 때문이다.

현재 for 안의 조건문이 i = 10 이고, i 가 1보다 큰 동안만, i 를 하나씩 줄인다.

라는 의미로 되어있다. 그런데 현재 "대전" 의 인덱스 번호들을 살펴보면, 각각

cities[1] , cities[3] 이다.

그래서 i 즉 인덱스가 3 인 "대전" 만 출력되고, 인덱스가 1인 "대전"은 조건에 맞지 않기 때문에 출력되지 않았다.

같은 목적의 for loop를 length 를 사용해서 써보기.

e.g.3

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

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

아까 배운 .length 를 사용한 예시를 보자. 가장 주의깊게 봐야할 부분은 i < cities.length; 부분이다.

비교연산자를 <= 가 아닌 < 를 사용하고 있다. 총 loop를 6번 실행하고 싶기 때문에 위와같이 작성되었다.

인덱스 번호는 항상 0부터 시작하기 때문이다.

---

for 문을 사용해서 smallestElement 찾기

let arr = [5, 8, 10, 100, 40, 2];

function findSmallestElement(arr) {
  let smallest = Infinity; 
  
  for (i = 0; i < arr.length; i++) {
    if (smallest > arr[i]) { 
      smallest = arr[i]; 
    } 
  }
  
  return smallest;
}

findSmallestElement(arr);

코드의 목표

smallest에 이제 계속 배열 안의 element 들을 비교해 나가면서 smallest보다 작은 애가 있다면 그 element 를 새로운 smallest 로 만들어 줄것이다. (임의로 가장 큰 숫자라는 의미로 Infinity를 지정해준 것이므로, 굳이 Infinity를 할 필요는 없고, arr[0] 그 배열의 첫번째 인덱스로 해도 된다. )

코드의 진행과정

1. smallest 라는 variable 을 만드는데 Infinity 혹은 배열의 첫번째 요소로 정한다. 일단 위의 예시에서는 Infinity 로 했다.
2. if 조건문에서smallest 라는 variable 을 arr[i] 보다 작은지 확인한다. (index가 0 인 첫번째 요소부터 시작할것이다.)
3. arr[i] 가 Infinity(무한대라는 뜻이기 때문에) 보다 더 작으므로 arr[i] 를 변수 smallest 에 저장한다.
4. 이제 같은 과정을 for loop를 사용해서 arr 의 다음 element 로 넘어간다.
5. 다음 index 넘버의 element 가 smallest 보다 작은지 확인한다.
6. 만약 작다면, 그 element 를 새로운 smallest 로 지정해준다.

💡 몰랐던점

smallest = Infinity; 로 일단 제일 작은 숫자가 들어갈 variable 을 만들어 주는것.
(Infinity 는 제일 큰 숫자가 있다는 가정으로 쓰이는 keyword이다.)

🔥 주의할점

scope 에 유의해서 for 안에 let smallest = Infinity; 를 넣지 않도록 한다.

function findSmallestElement(arr) {
	  for (i = 0; i < arr.length; i++) {
		let smallest = Infinity; 
	    if (smallest > arr[i]) { 
	      smallest = arr[i]; 
	    } 
	  }
 return smallest;
}

예시를 보면 for 문 시작할때 들어가 있는데, 그렇게 하면 for 문이 시작될때마다 smallest 가 Inifinity 가 되고, 새로운 smallest 로 임명되더라도 다시 for 문이 실행되면서 새롭게 Infinity 로 되어버리기 때문이다.

Assignment

findSmallestElement 함수를 구현해 주세요
findSmallestElement 의 arr 인자는 숫자 값으로만 이루어진 array 입니다.
array 의 값들 중 가장 작은 값을 리턴해주세요.
만일 array가 비어있으면 0을 리턴해주세요.

처음에는, 아래 예시로 해결했다.

e.g.1

let arr = [5, 8, 10, 100, 40, 2];

function findSmallestElement(arr) {
  
  if(arr.length > 0) {
    let smallest = Infinity;
    for (let i = 0; i < arr.length; i++) {
      if (smallest > arr[i]) { 
        smallest = arr[i];
      }
      return smallest;
  }

	else if(arr.length === 0) {
		return 0;
	}
}

findSmallestElement(arr);

e.g.2 - 더 좋은 코드

let arr = [5, 8, 10, 100, 40, 2];

function findSmallestElement(arr) {
  
  if(arr.length === 0) {
    return 0;
    } 
  
    let smallest = Infinity;
    for (let i = 0; i < arr.length; i++) {
      if (smallest > arr[i]) { 
        smallest = arr[i];
      }  
    }
    return smallest;
}

findSmallestElement(arr);

예시 1 에서는, 예시 2 에서처럼 if 문에서 return 0 기능을 넣지 않았다. 대신 아래쪽에 else if 문을 썼고, for 문을 위에 올려서 if 조건문 안에 넣었었다. return smallest; 로 리턴하고 함수가 끝나는 오류가 나지 않게 하겠다는 이유로 그렇게 썼던 것이다. 그렇게 하면 쓸모없이 if 문이 생기고, else if 문 자체가 함수의 구조를 복잡하게 만드는데, 예시2 처럼 쓰면 훨씬 간단하다.

헷갈렸던 이유

하지만 사실 예시 2를 보면 어차피 if 조건이 성립하지 않는다면, if 문을 지나치게 된다. 그렇기 때문에 코드의 모양 상에서 return 이 위쪽에 써있다고해도 밑의 for 문이 실행되는데 전혀 지장이 없다.

만약 if 문이 성립하면 0 을 리턴하고 끝나겠지만, 애초에 그것이 목적인 코드이다.

🏝곁다리

if(arr.length === 0) {
    return 0;
    }  

그리고 위의 예시 코드처럼 한줄로 간단하게 끝나는 코드일 경우에,

curly bracket 을 생략하고 아래와 같이 한줄로 쓸 수도 있다.

if(arr.length === 0) return 0; 

---

🕳 오늘의 삽질

For 반복문을 공부하던 중이었다.

아래의 예시는 Array에 도시 이름을 담고, 조건에 맞는 도시를 출력하는 코드이다.

원래의 코드

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

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

갑자기 생긴 궁금증 :

전에 어디서 봤던 내용 중에 return 을 쓰고나면 함수에서 빠져나가 중단된다는데.. 했던게 생각났다. console.log라서 여러번 출력이 가능한가보다. return 을 써보면 어떨까?

내가 작성한 코드

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

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

SyntaxError: 'return' outside of function

return 이 함수 밖에 있다는 에러가 떴다. 검색해보니 for loop 는 함수가 아니다. "iteration statement" 이라고 불린다. for 를 사용한 for statement 라고 말할 수 있다.

---

배열 조작 방법

배열 내용을 수정하는 방법에는 크게 두가지가 있다.

1. index로 접근하여 배열 내용을 수정하거나 배열에 새로운 요소 추가하기

let cities = [];
cities[0] = "서울"; 
cities[1] = "뉴욕";
cities[2] = "치앙마이";
cities[5] = "제주도";

console.log(cities); // [ '서울', '뉴욕', '치앙마이', <2 empty items>, '제주도' ]
console.log(cities[3]);
console.log(cities[5]); // 제주도 

cities[5] = "포항";
console.log(cities[5]); // 포항

처음에 let cities = []; 이렇게 배열을 선언하고나서

cities[i] = "서울"; 이렇게 인덱스 넘버를 넣어서 지정한 위치에 element 를 넣을 수 있다.

위의 예시에서 보면 cities[5] = "제주도"; 처럼 index 3,4 를 건너뛰고 갑자기 저 자리에 넣을 수 있다.

그럴 경우 cities[3] 을 쓰면 undefined 가 출력된다.

2. push, unshift로 배열에 요소 추가하기

let cities = [];
cities.push("경주", "전주");
cities.unshift("인천");
console.log(cities) //[ '인천', '경주', '전주' ]

let lastCity = cities.pop();
console.log(lastCity)

위와같이 Array Method 들을 사용할 때 ( ) 반드시 괄호를 사용한다.

Method도 function 이니깐..

이번에는 배열의 내용을 없애는 방법을 알아보자.

arrayName.pop();

배열의 맨 마지막 요소가 사라진다.

e.g.1

let day = ['m', 's', 'w', 't'];
day[1] = 't';
day[4] = 'f';
day[5] = 's'; // 방법 (1)

let month = [1, 2, 3, 4]
month.push(5); // 방법 (2)

이 예시는 위에서 말한 배열을 수정하는 방법을 보여주고 있다.

🔥 주의할점

arrayName.push();

아래의 과제들을 수행하다 틀렸던 부분인데, push, unshift, pop 등은 method 임을 꼭 기억하자!

result.push(array[i]); 이렇게 함수처럼 괄호와 함께 호출해서 쓰면 된다.

for loop 와 array.length 를 사용해서 array 를 수정하기.

코드의 목적

아래의 코드는 array, for loop, if를 사용한 function 이다.

1. result 는 비어있는 array

2. for loop 를 돌려서 배열의 요소가 어떤 조건에 맞는지 확인한다.

3. 비어있는 array 에 요소를 넣고, 수정하고 for loop를 돌린 다음에 나온다.

4. 그렇게 for loop 의 모든 과정을 거쳐서 나온 array 를 출력하는 것이 목표다.

내가 썼던 코드. (배열의 갯수가 5개인것을 알고 있어서 i = 4 라고 시작한 상태이다.)

let myArray = [1, 4, 30, 10, 9]

function divideArrayInHalf(array) {
  let result = [];
  for(let i = 4; i >= 0; i--) {
    if(array[i]>10) {
    result.push(array[i]);
    } 
    if(array[i]<=10) {
    result.unshift(array[i]);
    }
  }
  return result;
}

divideArrayInHalf(myArray);

🔥 주의할점

for(let i = 4; **i <= 0;** i--) i 가 0보다 작거나 같을때에만 for 가 작동하라는 조건이기 때문에 이 부분을 잘못 써서 작동을 안하고 있었다.

그 이전에 또 잘못쓴 부분이 result.push(array[i]); 라고 써야 하는 부분을

result = result.push(array[i]); 이렇게 썼는데, 잘못된 코드이다.

새롭게 result 에 지정해줄 필요도 없다. 그리고 애초에 틀린 문법이다.이미 result는 [ ]; 와 함께 선언한 순간 array 가 되었기 때문에 변수가 아니다. 그렇기 때문에 위의 코드처럼 써서 새롭게 담을 수가 없는 것이다.

위의 방법은 변수를 이미 지정한 다음에 그 변수의 내용을 수정하고 싶을 때 쓰는 내용이다.

더 좋은 코드

// Assignment - 다음 함수 안에 코드를 구현하세요
let myArray = [1, 4, 30, 10, 9]

function divideArrayInHalf(array) {
  let result = [];
  for(let i = array.length - 1; i >= 0; i--) {
    if(array[i]>10) {
    result.push(array[i]);
    } 
    else {
    result.unshift(array[i]);
    }
  }
  return result;
}

divideArrayInHalf(myArray);

바뀐 부분 :

조건문에서 array.length - 1 을 사용했다.

추후에 바뀔지도 모르는 array 요소의 갯수가 자동으로 적용될 수 있는 함수다.