TIL#9 JS) Loops

luneah·2021년 10월 30일
JavaScriptTILloops
0

JavaScript

목록 보기
9/16
post-thumbnail

반복문

For Loops

for([초기문]; [조건문]; [증감문]) {
... 반복문 본문 ...
}

초기문

  • 초기문 작성 시 변수 선언자를 써주어야 함. (let i = 0)
  • 변수명은 보통 index를 의미하는 i로 선언. (let i = 0)
  • index가 증가할 경우 숫자는 보통 0부터 시작. (배열의 인덱스는 [0]부터 시작하기 때문)

조건문

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

💡 배열에서의 for 조건문은 배열.length 가 많이 쓰임.

let arr = [5, 2, 4, 6];
let arr2 = [];

for (let i=0; i < arr.length ; i++) { // 배열 arr의 길이 = 원소 개수만큼 반복
    arr2[i] = arr[i];  // 새로운 배열 arr2에 arr의 원소들을 그대로 붙여넣기
}

console.log(arr2); // [5, 2, 4, 6]

증감식

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

    💡 조건문이 성립되어 for {}가 한번 실행된 후, 증감식을 통해 i가 증감된다.

✨ 화살표 함수 (Arrow Function)

화살표 함수는 함수를 간략하게 표현 가능하다. 화살표 함수와 일반 함수에는 우위가 없으며, 상황에 따라 필요한 문법을 골라 쓰는 것이 자바스크립트의 함수를 가장 잘 사용하는 방법이다.

  • 화살표 함수는 항상 익명 함수로, 함수명이 없다. → 변수에 할당하여 사용 가능
  • 일반 함수와는 달리, function 키워드와 return 명령어가 없다.
  • this나 super에 대한 바인딩이 없고, methods 로 사용될 수 없다.
    *만약 화살표 함수에서 this가 쓰인다면, 전역변수를 가리킴.
  • new.target 키워드가 없다.
  • 일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 이용할 수 없다.
  • 생성자(Constructor)로 사용할 수 없다.
  • yield를 화살표 함수 내부에서 사용할 수 없다.
// 매개변수가 없는 일반함수
function fn1() {
	return 'Hello world';
}

// 매개변수가 없는 화살표함수
const fn1 = () => 'Hello world';
// 매개변수 1개가 있는 일반함수
function fn2(name) {
	return 'Hello ${name}';
}

// 매개변수 1개가 있는 화살표함수
const fn2 = name => 'Hello ${name}';
// 매개변수 2개가 있는 일반함수
function fn2(name1, name2) {
	return 'Hello ${name1}, ${name2}';
}

// 매개변수 2개가 있는 화살표함수
const fn2 = (name1, name2) => 'Hello ${name1}, ${name2}';

While Loops

while ([조건문]) {
...반복문 본문...
}

  • 어떤 조건문이 참이기만 하면 문장을 계속해서 수행한다.
    만약 조건문이 거짓이 된다면, 그 반복문 안의 문장은 실행을 멈추고 반복문 바로 다음의 문장으로 넘어간다.

  • 조건문은 반복문 안의 문장이 실행되기 전에 확인된다.
    만약 조건문이 참으로 리턴된다면, 문장은 실행되고 그 조건문은 다시 판별됩니다. 만약 조건문이 거짓으로 리턴된다면, 실행을 멈추고 while문 바로 다음의 문장으로 넘어가게 됩니다.

  • 많은 문장들을 실행하기 위해선, { }를 써서 문장들을 묶어줍니다.

n = 0;
x = 0;
while (n < 3) {
  n++;
  x += n;
}

Do...While

특정한 조건이 거짓으로 판별될 때까지 반복한다.

do
문장
while ([조건문]);

  • 조건문을 확인하기 전에 문장은 한번 실행된다.
  • 많은 문장을 실행하기 위해선 { }를 써서 문장들을 묶어준다.
    만약 조건이 참이라면, 그 문장은 다시 실행된다. 매 실행 마지막마다 조건문이 확인된다.
    만약 조건문이 거짓일 경우, 실행을 멈추고 do...while 문 바로 아래에 있는 문장으로 넘어가게 한다.
do {
  i += 1;
  console.log(i);
} while (i < 5);

💡 For Loops VS While Loops

// For Loops
for(var count = 0; count < 6; count++) {
console.log(count);
}

// While Loops
var count = 1;

while(count < 6) {
console.log("count is: " + count);
count++
}

break/continue

break문은 반복문, switch문, 레이블 문과 결합한 문장을 빠져나올 때 사용한다.

  1. break; : 가장 안쪽의 while, do-while, for, 또는 switch문을 빠져나옴.
  2. break [레이블]; 특정한 레이블 문을 빠져나옴.
for (i = 0; i < a.length; i++) {
  if (a[i] == theValue) {
    break;
  }
}

continue 문은 while, do-while, for, 레이블 문을 다시 시작하기 위해 사용될 수 있다. break문과 달리, continue 문은 전체 루프의 실행을 종료하지 않는다. while 루프에서 continue는 다시 조건으로 이동한다. for 루프에서 continue는 증가 표현으로 이동한다.

  1. continue; : 가장 안쪽의 while, do-while, for 문을 둘러싼 현재 반복을 종료하고, 다음 반복으로 루프의 실행을 계속한다.
  2. continue [레이블]; : continue는 그 레이블로 식별되는 루프 문에 적용된다.
i = 0;
n = 0;
while (i < 5) {
  i++;
  if (i == 3) {
    continue;
  }
  n += i;
}

Label

레이블은 프로그램에서 다른 곳으로 참조할 수 있도록 식별자로 문을 제공한다. 예를 들어, 루프를 식별하기 위해 레이블을 사용하고, 프로그램이 루프를 방해하거나 실행을 계속할지 여부를 나타내기 위해 break나 continue 문을 사용할 수 있다.

EX) 레이블 markLoop는 while 루프를 식별한다.

markLoop:
while (theMark == true) {
   doSomething();
}

for...in/of

for...in 문은 객체의 열거 속성을 통해 지정된 변수를 반복한다. 각각의 고유한 속성에 대해, JavaScript는 지정된 문을 실행한다.

for (variable in object) {
statements
}

for...of 문은 각각의 고유한 특성의 값을 실행할 명령과 함께 사용자 지정 반복 후크를 호출하여, 반복 가능한 객체(배열, Map, Set, 인수 객체 등을 포함)를 통해 반복하는 루프를 만든다.

for (variable of object) {
statement
}

✔️ for practice

Q. helloBot이라는 함수를 만들어라.

  • for문을 사용하여 빈 result배열에 greetings에 들어있는 인삿말을 채워라.
  • 인자에는 0과 1로 이루어진 배열이 들어간다.
let group1 = [0,1,1,0,0]
helloBot(group1); // --> ['안녕하세요','또 만나네요','또 만나네요','안녕하세요','안녕하세요']

🔥 My Answer

const helloBot = people => {
  let result = [];

  for(let i = 0; i < group1.length; i++) {
    if(group[i] === 0) {
      result.push('안녕하세요');
    }
    else if(group[i] === 1) {
      result.push('또 만나네요');
    }
  }

  return result;
}

let group1 = [0, 1, 1, 0, 0];
let welcome = helloBot(group1);

console.log(helloBot());

▶ Feedback

  • console하면 결과 값은 잘 나오나 배열 인풋값 명이 people인 점을 활용하지 않아 오류 발생했고 console.log(helloBot()); 괄호 안에 인자 주지 않음.

Sol ) for 반복문 안에 group1 대신 people로 교체, console.log(welcome); 새로운 변수 welcome을 선언하여 가독성 높임.

🔥 Model Answer

// 초면인 사람은 0, 한 번 이상 본 사람은 1인 group1 배열로 인사봇 만들기
// 화살표함수로 전자는 "안녕하세요", 후자는 "또 만나네요"를 출력하는 배열 반환하기

// 화살표함수
const helloBot = people => {   // 배열 group1을 인풋값 명 people로 받음
  let result = [];

  for(let i = 0; i < people.length; i++) {   // 배열 people의 길이만큼 for문 반복
    if(people[i] === 0) {    // 원소값이 0이라면
      result.push('안녕하세요');  // 새로운 배열에 "안녕하세요" 문자열값 추가
    }
    else if(people[i] === 1) {   // 원소값이 1이라면
      result.push('또 만나네요');   // 새로운 배열에 "또 만나네요" 문자열값 추가
    }
  }

  return result;  // 새로운 배열 반환
}

let group1 = [0, 1, 1, 0, 0];
let welcome = helloBot(group1);

console.log(welcome);    // ['안녕하세요','또 만나네요','또 만나네요','안녕하세요','안녕하세요']
profile
luneah
하늘이의 개발 일기
이전 포스트

TIL#8 JS) Array Methods

다음 포스트

TIL#10 JS) Object

0개의 댓글