후발대 강의- 배열의 메소드

주제

1. 배열 추가(map, filter, reduce, forEach)
2. JSONPlaceholder를 이용한 가상 통신 활용

 

객체에는  속성과 메서드(함수)가 있다

array의 메서드 중  foreach, map, filter, reduce를 배운다

매개변수로 함수가 들어간다.(콜백함수)

 

반복문 복습

 

테스트 배열

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

 

기본적 반복문

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

 

for in - 인덱스 뽑음

for (i in testArr) {
  console.log(i);
}

 

for of - 값 뽑음

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

 

함수 형태 세 가지

function testFunc1() {
  console.log("함수 선언식");
}

const testFunc2 = function () {
  console.log("함수 표현식");
};

const testFunc3 = () => {
  console.log("화살표 함수");
};

 

메소드 안의 함수 -  아래의 둘은 같다.

배열의 메소드 안에는 익명함수를 넣어준다. (다른 곳에서 이 함수를 다시 사용할 일이 보통 없기 때문이다.)

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

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

 

메소드 안의 함수에 이름을 지어줘도 작동은 잘하고 나중에 불러올 수도 있더라.

const mappedArr1 = testArr.map(
  (testFunc = (item) => {
    return item * 2;
  })
);

console.log(testFunc(5));

 

 

배열의 메소드

 

1.forEach 

배열 안의 값을 하나 하나 뽑아준다.

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

 

02. map

배열 length 만큼 반복한다.

const mappedArr = testArr.map((item) => {
  console.log(item);
});

 

 

map은 수정된 배열을 반환한다.

무조건 넣은 배열의 같은 길이의 배열이 나온다. 심지어 값이 null이거나 undefined여도 

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

console.log(mappedArr);

 

반환하는 값이 없을 때도 같은 길이의 배열을 만든다.

const mappedArr = testArr.map((item) => {});

console.log(mappedArr);

 

보통 filter 메소드에 넣어주는 조건을 넣었을 때

null인 경우 null을 채워서 같은 길이의 배열이 나온다.

const mappedArr = testArr.map((item) => {
  return item > 40 ? item : null;
});

console.log(mappedArr);

 

조건에 따른 반환 값을 넣지 않고 그냥 조건만 넣었을 때  

true 와 false 로 이루어진 배열이 나온다

const mappedArr = testArr.map((item) => {
  return item > 40;
});

console.log(mappedArr);

 

03.filter 

배열 length 만큼 반복한다.

const filteredArr = testArr.filter((item) => {
  console.log(item);
});

 

조건을 넣어주면 조건에 맞는 값만 넣은 배열을 반환한다. map과 달리 배열의 길이가 달라질 수 있다.

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

console.log(filteredArr);

 

const filteredArr = testArr.filter((item) => {
  return item > 40 ? item : null;
});
console.log(filteredArr);

 

04. reduce

3개의 인자를 받는다

acc = accumulator = 누산기 = 누적하여 계산한다 

cur = current value = 현재 값

idx = index = 현재 인덱스

 

acc는 return에서 지정해준 연산을 누적하여 계산한다

 

테스트 배열

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

 

기본은 index 1부터 시작

인덱스 0 의 값을 이미 더하고 시작

인덱스 1의 값을 cur로 하여 시작

testArr.reduce((acc, cur, idx) => {
  console.log("acc ", acc);
  console.log("cur", cur);
  console.log("idx", idx);
  console.log("");
  return (acc = acc + cur);
});

 

0을 함수 뒤 콤마 써주고 넣어주면 index 0부터 시작한다.  마지막으로 찍어주는 값은 같다

testArr.reduce((acc, cur, idx) => {
  console.log("acc ", acc);
  console.log("cur", cur);
  console.log("idx", idx);
  console.log("");
  return (acc = acc + cur);
}, 0);

 

반환 값을 보자. 제일 마지막에 찍힌 값

const reducedArr = testArr.reduce((acc, cur, idx) => {
  return (acc = acc + cur + idx);
}, 0);

 

연습용  json 형식의 객체 data를 보내주는 url 주소 구할 수 있는 페이지

https://jsonplaceholder.typicode.com/

JSONPlaceholder - Free Fake REST API

데이터 주고받을 때 통신의 종류에 XML, exel ,JSON  등등이 있다

 

왜 이 방식을 쓰는가?

Json- 가장 효율적인 방법(객체, 키와 밸류를 가지고 있고, 콤마로 구분되는 형태)

javascript 가 웹브라우저에서  거의 쓰이고

자스가 해석하기가 쉬운 방식이 object, array 이다.

 

fetch(서버로 요청하는 url)

답은 promise 객체 형태로 받는다. 

객체는 속성과 메서드를 가진다. 

promise객체는 통신 이후 일어날 이에 대한 메서드를 가진다.

 

통신이 성공했을 때 => then

통신이 실패했을 때 => catch

 

객체. 메소드() 이렇게 쓴거구나. 길어도 똑같다.

 

then 안에는 콜백함수가 오고 그 함수의 매개변수로는 통신 성공했을 때의 promise객체 응답값이 들어있다.

 

그 응답값에  response.json()  이렇게 메소드를 붙일 수 있다.

이건 객체 내용 중  body 부분만 promise 객체형태로 가져온다.

또 promise 객체라서 then 메서드를 또 이용할 수 있다. 

이때 나오는 값은 위에 promiseresult안에 있던 값이 나온다.

then을 써주는 곳은 비동기 함수일 때? 그러면 fetch랑 json 둘 다 비동기 함수라는건가?

 

then((res) => res.json()) 이것은

then((res) => {return res.json()})과 같다. es6 문법

 

가져온 값에서 1을 지우면 200개의 객체가 주르륵 나오네

 

이걸 예전에 dom 강의에서 배웠던 방법으로 화면에 펼치자. 

 

fetch("https://jsonplaceholder.typicode.com/todos")
  .then((res) => res.json())
  .then((data) => {
    const ultag = document.createElement("ul");
    document.body.appendChild(ultag);

    data.map((item) => {
      let litag = document.createElement("li");
      litag.textContent = item.title;
      document.querySelector("ul").appendChild(litag);
    });
  });

 

for of로 써준 방법

 for (item of data) {
      let litag = document.createElement("li");
      litag.textContent = item.title;
      document.querySelector("ul").appendChild(litag);
    }