배열 메소드-forEach, map

ioioi·2023년 11월 13일
0

Javascript

목록 보기
16/21
post-thumbnail

📌 forEach

배열의 을 하나씩 불러오고 인덱스배열을 가져올 수 있다.
새로운 변수에 할당하면 undefined 값을 부여받는다.
👉 새로운 배열로 반환할 수 없다.
👉 단순히 배열의 반복 작업을 필요할 때 사용한다.

const members = ['영훈', '윤수', '동욱', '태호'];

members.forEach((element) => {
  console.log(`${element}님이 입장하셨습니다.`)
})

members.forEach((element, i) => {
  console.log(`${i} ${element}님이 입장하셨습니다.`)
})

members.forEach((element, i, arr) => {
  console.log(`${i} ${element}님이 입장하셨습니다.`)
  console.log(arr);  // members 배열이 i번 찍힘
})

📌 map

map 메소드는 return 값으로 새로운 배열반환할 수 있다.
👉 반복 작업을 통해서 새로운 배열을 반환하고 싶을 때 사용한다.

const firstNames = ['영훈', '윤수', '동욱', '태호'];
const lastNames = ['김', '나', '박', '이'];

const fullNames = firstNames.map((element, i) => {
  return lastNames[i] + element;
})

-arrow function 적용

firstNames.map((element, i) => lastNames[i] + element)

🔥 주의

최대 반복 횟수는 배열의 길이 값 만큼만 반복한다.
(무한루프에 빠지지 않음!)

1. 배열의 새로운 요소 추가될 때 => 배열의 길이만큼 추가

const members = ['영훈', '윤수', '동욱', '태호'];

members.forEach((element) => {
  console.log(`${element}님이 입장하셨습니다.`);
  members.push('새로운 멤버');
})

console.log(members);

배열의 길이: 4 👉 새로운 멤버 4번 추가됨

2. 배열의 길이가 줄어들 때 => 반복 횟수 줄어듦

const members = ['영훈', '윤수', '동욱', '태호'];

members.forEach((element) => {
  console.log(`${element}님이 입장하셨습니다.`);
  members.pop();
})

console.log(members);

pop()메서드는 배열의 마지막 요소를 제거하고 그 요소를 반환 👉 원본 배열을 수정!

profile
UIUX/Frontend

0개의 댓글

관련 채용 정보