JS기초 문법 복습 ( 배열 2(fE,mp,ft,fd), for문, while문 )

( 1 ) forEach,

let numbers01 = [7, 1, 3, 9, 2];

함수를 실행, 매개변수 위치에 함수( function(){} )가 들어간다

매개변수 자리에 함수를 넣는 것 : 콜백 함수

numbers.forEach();

numbers01.forEach(function (item01) {
  console.log(item01); // * 7 1 3 9 2
});

• 함수의 매개변수는 배열에 있는 각각의 요소가 한개씩 들어간다 7 1 3 9 2

• 실수로 numbers01을 출력한 경우 [ 7, 1, 3, 9, 2 ] 배열이 5번 반복되어 출력됨

---

( 2 ) map

• map 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과를 새로운 배열로 반환.

• 항상 원본 배열의 길이만큼 return 된다

let numbers02 = [1, 19, 7, 21, 6, 19];

let newNumbers = numbers02.map(function (item02) {
  return item02 * 2;
});
console.log(newNumbers); // * [1, 19, 7, 21, 6, 19];

• ! return 값 필수 ! return값을 적지 않으면 undefined로 채워진 배열이 나온다

---

( 3 ) filter

• filter 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 요소만 새로운 배열로 반환합니다.

• filter의 return값에는 조건이 들어간다

let numbers03 = [1, 7, 43, 19, 7, 7];

numbers03.filter(function (item03) {
  return item03 !== 7;
});
console.log(numbers03); // * [ 1, 7, 43, 19, 7, 7 ] // ? 이게 나오면 안되는데
// * filter 메소드를 돌려놓고 다시 기존의 배열을 출력하면 안됨

! 중요 ! 새로운 배열을 받기 때문에 선언문과 변수를 새로 써준다

const filteredNumbers = numbers03.filter(function (item03) {
  return item03 !== 7;
});
console.log(filteredNumbers); // * [ 1, 43, 19 ] / 올바른 출력 값

불일치 연산자 (!== : 타입이 일치하면 false를 반환

---

( 4 ) find

filter와 유사하게 조건에 맞는것을 반환, 허나 조건에 맞는 요소 중 첫 번째 요소만 반환한다

let numbers04 = [1, 4, 7, 9, 11, 16];

const foundNumbers = numbers04.find(function (item04) {
  return item04 > 4;
});
console.log(foundNumbers); // * 7

조건에 맞는 요소 중 제일 먼저 반환 되는 7만 출력됨

---

for문

for => ~동안 : 반복문

const arr = ["one", "two", "three", "four", "five"];

for (let i = 0; i < arr.length; i++) {
   console.log(i); // 0 1 2 3 4 // 5개

// 0부터 시작, 인덱스로 접근
   console.log(arr[i]); // one ~ five 출력 // 5개
}

배열의 요소 개수만큼 반복하여 실행

ex) : 0부터 10까지의 수 중에서 2의 배수만 console.log로 출력 (if문 사용)

for (let i = 0; i <= 10; i++) {
  if (i >= 2) {
    if (i % 2 === 0) {
      console.log(i); // 2 4 6 8 10
    }
  }
}

! 풀면서 막혔던 점

• (1) 처음 for문에서 if문 사용 할 생각을 못하고 조건식 부분에 다 쑤셔넣음

  
  

• (2) if문 사용 부분에서 i === i % 2 === 0 라고 유추, i에 계속 집착 let 초기 값을 자연스럽게 0으로 시작 -> 출력 값 0 2 4 6 8 10

0은 2의 배수가 아님 -> if문을 하나 더 쌓아줌 i >= 2로 재지정 그렇게

i가 2로 바뀐값에서 i % 2 === 0를 계산 // 2 4 6 8 10

---

while

while문의 기본 템플릿

while (조건) {
메인로직 증감
}

let i = 0;

while (i < 10) {
  console.log(i); // 0 ~ 9 출력
  i++;
}

ex) while문을 활용해서, 3초과 100 미만의 숫자 중 5의 배수인 것만 출력하는 예

let p = 3;

while (p < 100) {
  if (p % 5 === 0 && p >= 5) {
    console.log(p + "는 5의 배수");
  }
  p++;
}

증감식을 적어주지 않으면 무한으로 반복된다

* 참고로 위의 새로운 조건을 추가하는 기호는 앰퍼샌드(&)다, 코드 상에선 폰트 구분이 다름

---

break문과 continue문

간단한 for문 템플릿 0 ~ 10출력

for (let i = 0; i < 10; i++) {
  console.log(i); // 0 ~ 9 출력
}

break

if 분기 설정

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break;
  }
  console.log(i); // 0 ~ 4 출력
}

• break를 만난 순간 for문을 벗어나고 밖으로 나간다

• 원래는 0 ~ 9 출력이지만 if문과 break 사용으로 5를 만나면 멈추게 되었다

continue

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    continue; // continue문을 만나면 그 다음 i 순서로 넘어간다
  }
  console.log(i); // 0~4 [5]제외 6~9
}