[JS] 배열(2)

Kng_db·2022년 12월 5일
0
post-custom-banner

배열 메서드 사용하기

복습!!
배열 사용의 일반적인 방법

for (let i=0; i<testArr.length; i++) {
	console.log(testArr[i]);
}

for ~ of를 이용한 방법

for (item of testArr) {
	console.log(item);
}

함수를 넣는 방법 3가지

  • 함수를 변수에 달아서 넣는 방법
const testFunc = function () {
	console.log("hello js");
}
testArr.forEach(testFunc);
  • 바로 함수를 집어넣는 방법
testArr.forEach(function (item) {
	console.log(item);
});
  • 화살표 함수!
testArr.forEach((item) => {
	console.log(item);
});

이름 없는 함수 = 익명함수
익명함수를 map, forEach, 등등 의 매개변수로 넣어요. -> 일회성이기 때문
(변수화 하는 것은 여러곳에서 쓰기 위함!)

  • 콜백 함수는 각 요소에 대해 실행되며, 배열의 요소를 나타내는 매개변수를 반드시 하나 이상 사용해야 합니다.

forEach, map, filter, reduce

const testArr = [2, 10, 100, 7, 71, 50, 27, 1];

forEach

객체(배열)에는 속성과, 메서드가 있다.
forEach도 결국, 'array의 메서드'다!

forEach('콜백함수 들어감')

@ forEach로 50이하만 출력하기

testArr.forEach((item) => {
  if (item <= 50) {
    console.log(item);
  }
});

map

@ map으로 50초과만 2배로 출력하고 나머지는 그대로 출력하기

const mappedArr = testArr.map((item) => {
  if (item > 50) {
    return item * 2;
  } else {
    return item;
  }
});
console.log(mappedArr);

forEach와 map은 출력이 같은데 무슨차이일까??
map함수는 return 한 애들을 모아서 새로운 배열을 만든다!!
return이 한줄밖에 없다면?? 아래처럼 표현 가능

const mappedArr = testArr.map((item) => item * 2);

filter

걸러내는 것
filter는 무언가 받은 것만 반환!! -> 받은게 없으면 빈 배열 출력
map은 무조건 무언가 반환!! -> 받은게 없으면 length만큼 undefined 출력

@ filter로 짝수만 출력하기

const filteredArr = testArr.filter((item) => {
  return item % 2 === 0 ?? item;
});
console.log(filteredArr);

reduce

acc => 누산기, cur => 현재 값, idx => 현재 index

@ reduce로 각 요소 더 한 누적 값 출력하기

const A = testArr.reduce((acc, cur, idx) => {
  console.log("acc", acc);
  console.log("cur", cur);
  console.log("idx", idx);
  console.log("");

  return (acc += cur);
}, 0);
console.log("누산기", A);

'0'을 안넣어주면 초기값이 바로 2부터 시작해서 10을 호출하니 인덱스가 1부터 시작하는 것!

테스트 영상 https://www.youtube.com/watch?v=1QESmUVNknU

profile
코딩 즐기는 사람
post-custom-banner

2개의 댓글

comment-user-thumbnail
2022년 12월 7일

반복 학습하시면서 많이 이해하셨나요!?

1개의 답글