후발대 특강 수업#2 - 배열 활용 / json

jini·2022년 12월 5일

JavaScript js

거북이반🐢

목록 보기

2/2

📚 221202 후발대 특강 수업 1일차

오늘 수업

배열 활용 (forEach / map / filter / reduce)
화살표 함수 , 삼항연산자 ==== 익숙해지면 된다!!!!
json

🚩 배열의 활용

01. forEach -> for+each

for문과 똑같다.
객체(배열)에는 속성과 메서드가 있다
메서드는 함수같이 생긴것.
forEach도 결국, array의 메서드!


const testArr = [1, 56, 73, 87, 90, 100, 35, 7, 32]; //length=9

testArr.forEach(function () {
  console.log("hello");
});

length=9인데, 배열의 개수만큼 hello가 9번 나오게된다.

이 안에 매개변수 item을 넣으면,

const testArr = [1, 56, 73, 87, 90, 100, 35, 7, 32];

testArr.forEach(function (item) {
  console.log(item);
});

02. map (맵핑한다)

보통 익명함수를 map,foreach~~~ 의 매개변수로 넣는다.

const testArr = [1, 56, 73, 87, 90, 100];

testArr.map(function (item) {
  console.log("---");
  console.log(item);
});

맵함수는 return한 애들을 모아서 새로운 배열을 만들어요!!

const testArr = [1, 56, 73, 87, 90, 100];

const mappedArr = testArr.map(function (item) {
  return item * 2;
});
console.log(mappedArr); //[ 2, 112, 146, 174, 180, 200 ]출력

화살표함수로 바꿔보기

//일반 함수
function(){
  return 1;
}
//같은 값의 화살표 함수
()=> 1

const mappedArr = testArr.map((item) => {
  item * 2;
});
//return이 한줄이면 리턴 생략 가능.

03.filter =>걸러내는것

filter에는 조건이 들어가야한다.

const testArr = [1, 56, 73, 87, 90, 100];
const filteredArr = testArr.filter((item) => {
  console.log("check", item);
  return item
  if (item > 60) {
    return item;
  } else {
    return null;
  } 
}); // [ 73, 87, 90, 100 ] 출력

3항 연산자!

조건 ? true일때 : flase일때

const testArr = [1, 56, 73, 87, 90, 100];

const filteredArr = testArr.filter((item) => {
  return item > 60 ? item : null;
  //return item > 10 ?? item (위랑 같다!)
});// [ 73, 87, 90, 100 ] 출력

04. reduce(누적연산)

acc,cur,idx(누적값, 현재값, 인덱스) 는 매개변수,
근데 아무 이름이나 써도 된다.

const testArr = [1, 56, 73, 87, 90, 100];

testArr.reduce((acc, cur, idx) => {
  console.log("acc", acc);
  console.log("cur", cur);
  console.log("idx", idx);
  console.log("");
  return (acc = acc + cur); //누적값을 항상 갱신해줘야한다!
}, 0); //초기값을 0으로 넣어주면 인덱스가 0부터 시작하게된다.