JS - 08_for

송철진·2022년 9월 22일
0

for

반복문: Iteration statement
사용하는 이유: 동일한 문장을 반복해서 써야하는 개발자의 수고로움을 덜어주기 위해서
특정한 조건을 만족할 때 반복 ex) counter
반복문과 배열은 현업에서 굉장히 자주 사용된다
자주 사용하지 않는 메소드는 당연히 까먹는다 검색해서 사용해라

반복문 테스트: 실행문 앞뒤로 콘솔 찍어보고 생각해보기

let myArray = [];
for(i=0; i<10; i++){
	console.log("before: ", myArray);
  	myArray.push(i);
  	console.log("after", myArray);
  
}

Assignment

01. for문 기초

for문이란 무엇일까요?

javascript 세상에서는 생각보다 반복적으로 해야할 일들이 많습니다.
자료의 개수가 5개 정도라면 일일히 세거나 특정 단어를 입력하는 등의 일이 쉽습니다.
하지만 자료의 개수가 20개라면..?! 100개라면..? 생각이 달라지겠죠?
그래서 필요한 것이 반복문입니다.
반복문은 여러 종류가 있는데 이번 시간에는 javascript 세상에서 가장 널리 쓰이는 for문에 대해 알아보도록 합시다.

위의 그림과 같이 for문을 작성할 때는 소괄호 안에 초기화문, 조건문, 증감식을 쓰고
사이사이에 세미콜론(;)을 입력해주어야 합니다.

예를 들어 1부터 10까지의 합을 구해보겠습니다.

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

초기화문

  • 초기화문 작성 시 변수 선언자를 써주어야 합니다.
  • 변수명은 보통 index를 의미하는 i로 선언합니다.
  • index가 증가할 경우 숫자는 보통 0부터 시작합니다.

조건문

  • index의 범위를 설정합니다.
  • index가 증가할 경우 특정한 숫자 미만 혹은 이하로 설정합니다.
  • index가 감소할 경우 0 이상으로 설정합니다.
  • 조건문이 true일 경우 반복문을 계속 실행합니다.
  • 조건문이 false일 경우 반복문이 종료됩니다.

증감식

  • index가 1씩 증가할 경우 ++을 써줍니다.(index의 숫자가 하나씩 증가)
  • index가 1씩 감소할 경우 --를 써줍니다.(index의 숫자가 하나씩 감소)
  • i++은 i = i+1 을 줄여서 쓴 것입니다. i += 1 로 표현할 수도 있습니다.
  • i++는 ++1로 표현할 수 있습니다.

for문이 어떻게 동작 하는지 알아볼까요?

종이와 펜을 꺼내주세요!
1부터 10까지의 합을 구하는 for문 코드를 표를 그려보며 익혀봅시다.

02. Iterate with JavaScript For Loops

for 문

for 반복문은 어떤 특정한 조건이 거짓으로 판별될 때까지 반복합니다.
for문의 구성은 이런 식으로 되어 있습니다.
for ([초기문]; [조건문]; [증감문])

let ourArray = [];
for (var i = 0; i < 5; i++) {
  ourArray.push(i);
}
//ourArray will now contain [0,1,2,3,4].

위의 예시를 살펴본다면
[초기조건 : i = 0] / [조건 : i < 5 ] /[증감 : i++ : 하나씩 증가]
형태로 이루어졌습니다.

예시를 참고해서 forLoops() 함수를 작성해주세요.
for문을 사용하여 myArray 배열에 1부터 5까지의 숫자가 요소로 포함될 수 있도록 해주세요.

// Assignment - 다음 함수 안에 코드를 작성하시면 됩니다.
function forLoops() {
  // 아래의 코드를 수정하지 마세요.
  let myArray = [];
  
  // 아래에 코드를 작성해주세요
  for(let i = 1; i < 6; i++){
    myArray.push(i);
  }  

  // 아래의 코드를 수정하지 마세요.
  return myArray;
}
console.log(forLoops())
module.exports = { forLoops };

03. Iterate Odd Numbers With a For Loop 1

for문에서 i가 2씩 증가한다면 어떨까요?

지난 시간에 for문에서 i가 1씩 증가하는 방식에 대해 알아 보았는데요!
이번 시간에는 응용편입니다.
왼쪽에 두 개의 함수식이 있습니다.
각 함수식에 원하는 결과값이 나올 수 있도록 for문을 작성해주세요!
1~30까지의 숫자 중에 addEvenNumber 함수는 짝수만을 result 배열에 담아 리턴하고,
addOddNumber 함수는 홀수만을 result 배열에 담아 리턴합니다.
i가 2씩 증가하도록 증감식을 잘 설정해주세요!

Hint!

초기화문에서 index가 어떤 숫자부터 시작하는지가 중요합니다.

function addEvenNumber() {
  let result = [];
  // 여기에 식을 작성해주세요!
  // result 배열안에 짝수가 들어가야 합니다.
  for(let i = 2; i <= 30; i++){
    result.push(i);
    i++;
  }
  return result;
}
function addOddNumber() {
  let result = [];
  // 여기에 식을 작성해주세요!
  // result 배열안에 홀수가 들어가야 합니다.
  for(let i = 1; i <= 30; i++){
    result.push(i);
    i++;
  }
  return result;
}
console.log("addEvenNumber() : ", addEvenNumber())
console.log("addOddNumber() : ", addOddNumber())
module.exports = { addEvenNumber, addOddNumber };

04. Iterate Odd Numbers With a For Loop 2

var ourArray = [];
for (var i = 0; i < 10; i += 2) {
  ourArray.push(i);
}
// ourArray will now contain [0,2,4,6,8]

for문을 사용하여 1부터 9까지의 숫자 중에 홀수인 숫자를 myArray 배열에 순서대로 추가해주세요.

// Assignment - 다음 함수 안에 코드를 작성하시면 됩니다.
function forLoops() {
  // 아래의 코드를 수정하지 마세요.
  let myArray = [];
  
  // 아래에 코드를 작성해주세요
  for(var i = 1; i < 10; i+=2){
    myArray.push(i);
  }
/* 또는
  for(var i = 0; i < 10; i++){
  	i++;
    myArray.push(i);
  }
*/
    // 아래의 코드를 수정하지 마세요.
  return myArray
}
console.log(forLoops())
module.exports = { forLoops };

05. Count Backwards With a For Loop

for문은 아래와 같이 큰 숫자에서 작은 숫자로 진행하는 것도 가능합니다.

let ourArray = [];
for (let i=10; i > 0; i-=2) {
  ourArray.push(i);
}
// ourArray will now contain [10,8,6,4,2]
  • 9부터 1까지의 숫자 중에서 홀수인 숫자들을 큰 순서대로 앞에서부터 myArray에 포함시켜주세요.
// Assignment - 다음 함수 안에 코드를 작성하시면 됩니다.
function arrayForLoops() {
  // 아래의 코드를 수정하지 마세요.
  let myArray = [];
  // 아래에 코드를 작성해주세요
  for(let i = 9; i > 0; i-=2){
    myArray.push(i);
  }
  // 아래의 코드를 수정하지 마세요.
  return myArray;
}
console.log(arrayForLoops())
module.exports = { arrayForLoops };

06. Iterate Through an Array With a For Loop

주어진 배열의 각 요소들의 합을 구하는 for문을 작성하라는 문제였나 싶다
코드를 보고 문제를 유추하라는 문제인가?

// Assignment - 다음 함수 안에 코드를 작성하시면 됩니다.
function arrayLoop() {
  // 아래의 코드를 수정하지 마세요.
  let myArr = [ 2, 3, 4, 5, 6];

  // 아래에 코드를 작성해주세요
  let total = 0;
  for(let i = 0; i < myArr.length; i++) {
    total = total + myArr[i];
  } 
  
  // 아래의 코드를 수정하지 마세요.
  return total;
}
console.log(arrayLoop())
module.exports = { arrayLoop };

07. getAllLetters

  • for문을 사용하여 getAllLetters 함수를 작성하세요.
  • 단어(str 인자)가 주어졌을 때 함수의 리턴값은 주어진 단어를 구성하는 모든 문자를 담고 있는 배열입니다.
  • 만약 빈 문자열이 주어졌다면, 빈 배열을 반환해야 합니다.
let output = getAllLetters('Radagast');
console.log(output); // --> ['R', 'a', 'd', 'a', 'g', 'a', 's', 't']
/*
- for문을 사용하여 getAllLetters 함수를 작성하세요.
- 단어(str 인자)가 주어졌을 때 함수의 리턴값은 주어진 단어를 구성하는 모든 문자를 담고 있는 배열입니다.
- 만약 빈 문자열이 주어졌다면, 빈 배열을 반환해야 합니다.

let output = getAllLetters('Radagast');
console.log(output); // --> ['R', 'a', 'd', 'a', 'g', 'a', 's', 't']
*/
// Assignment - 다음 함수 안에 코드를 작성하시면 됩니다.
function getAllLetters(str) {
  // 아래의 코드를 수정하지 마세요.
  let strArray = [];

  // 아래에 코드를 작성해주세요
  strArray = str.split('',str.length);
  // 아래의 코드를 수정하지 마세요.
  return strArray;
}
let output = getAllLetters('Radagast');

console.log(output);

module.exports = { getAllLetters };

탐구하기

string.prototype.split()
string객체를 지정한 구분자를 이용해 여러 문자열로 나누어 array로 반환


08. 심화 - 인사봇

여러분은 IT 컨퍼런스의 주최자가 되었습니다.
행사장에 들어오는 사람에게 자동으로 인사해주는 인사봇을 만드려고 합니다.
처음 보는 사람은 숫자 0으로, 한번 봤던 사람은 숫자 1로 표기된 배열이 준비되어 있습니다.
처음 보는 사람에게는 '안녕하세요' 라는 인사를, 한번 봤던 사람에게는 '또 만나네요'라는 인삿말을 남기려고 합니다.

  • helloBot이라는 함수를 만들어주세요.
  • for문을 사용하여 빈 result배열에 greetings에 들어있는 인삿말을 채워주세요.
  • 인자에는 0과 1로 이루어진 배열이 들어갑니다.
let group1 = [0,1,1,0,0]
helloBot(group1); // --> ['안녕하세요','또 만나네요','또 만나네요','안녕하세요','안녕하세요']
const helloBot = people => {
//매개변수가 1개면 괄호()는 생략, people이라는 매개변수를 받음  
  let peopleArray = [];
  for(let i = 0; i<people.length; i++){
    if(people[i] === 0){
      peopleArray.push('안녕하세요');
    }else{
      peopleArray.push('또 만나네요');
    }
  }
  return peopleArray;
}
let group1 = [0,1,1,0,0]
console.log(helloBot(group1));
  
module.exports = { helloBot };

profile
검색하고 기록하며 학습하는 백엔드 개발자

0개의 댓글