배열의 활용

밑에 이거 다 "배열"의 메서드다. OK?

보통 익명함수를 map, forEach, ... 등의 매개변수로 넣는다.
-> 왜냐?? 한번만 쓸거니까!!

forEach

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

for (x of testArr) {
	console.log("2반", x);
}

testArr.forEach();

• forEach -> for + each
• for문과 똑같음, 하나씩 끄집어내는 것
• forEach 도 결국 'array'의 메서드!!! (헉 이게 메서드네)

const testArr = [1,2,3,4,5]

const testFunc = function () {
  console.log("hello javascript")
}

testArr.forEach(const testFunc = function () {
  console.log("hello javascript")
});

testArr 에 forEach문 쓰는법.

출력값
hello javascript
hello javascript
hello javascript
hello javascript
hello javascript

const testArr = [1,2,3,4,5]

const testFunc = function () {
  console.log("hello javascript")
}

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

출력값
hello javascript
hello javascript
hello javascript
hello javascript
hello javascript

---

map

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

출력값
1
2
3
4
5

엥? 출력값이 forEach랑 똑같다!
이상하다. 다시해보자.

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

console.log(mappedArr);

출력값
[undefined,undefined,undefined,undefined,undefined]

헉.. 이걸보면 알 수 있었다..
testArr의 length만큼의 undefined가 뜨는것을 보아 map은 새로운 배열을 만드는 것!!!
근데.. 이걸 어디에 쓰지??
-> 바로.. 하나하나씩 아이템을 할당하는 과정에서, 아이템을 수정할 수 있다!!! (오...)

const mappedArr2 = testArr.map(function (item) {
  return item * 2;
});

console.log("*2 했음", mappedArr2);

출력값
*2 했음 [ 20, 40, 60, 80, 100 ]

이런식으로.. *2를 한 값이 return 되는 것을 알 수 있었다. (이런 비밀이??)

그리고 조금 더 진화를 시키면..

const mappedArr3 = testArr.map((item) => {
  return item;
});
console.log("화살표함수", mappedArr3);

화살표 함수로 코드를 짜보았다..

---

filter

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

console.log("filter 찍어봄", filteredArr);

출력값
filter 찍어봄 []

엥? 이거 머냐? map이랑 비슷한데 다르네..
그렇다.. filter는 map과 다르게 걸러지고 남은 녀석들을 반환하기 때문에 조건이 "무적권" 필요한 것이였다. (map은 뭐든지 반환하려고 함)

const filteredArr2 = testArr.filter((item) => {
  if (item > 30) {
    return item;
  } else {
    return null;
  }
});

console.log("필터 체험 해보기", filteredArr2);

출력값
필터 체험 해보기 [ 40, 50 ]

이런식으로.. 조건을 써주면 그 조건에 맞는 것들만 뱉어준다.

const filteredArr3 = testArr.filter((item) => {
  return item > 30 ?? item;
});
console.log("필터를 삼항연산자로!", filteredArr3);

이건 단순히 위의 코드를 삼항연산자로 바꾼 코드다. (있어보이게..ㅋㅋ)

---

reduce

testArr.reduce((acc, cur, idx) => {
  console.log("여기부터 reduce 1번째");
  console.log("reduce acc", acc);
  console.log("reduce cur", cur);
  console.log("reduce idx", idx);
});

출력값
여기부터 reduce 1번째
reduce acc 10
reduce cur 20
reduce idx 1
여기부터 reduce 1번째
reduce acc undefined
reduce cur 30
reduce idx 2
여기부터 reduce 1번째
reduce acc undefined
reduce cur 40
reduce idx 3
여기부터 reduce 1번째
reduce acc undefined
reduce cur 50
reduce idx 4

엥? 왜 인덱스가 1부터 시작??
밑에서 다시 써보자..

testArr.reduce((acc, cur, idx) => {
  console.log("여기부터 reduce 2번째");
  console.log("reduce acc", acc);
  console.log("reduce cur", cur);
  console.log("reduce idx", idx);

  return (acc = acc + cur);
}, 0);

출력값
여기부터 reduce 2번째
reduce acc 0
reduce cur 10
reduce idx 0
여기부터 reduce 2번째
reduce acc 10
reduce cur 20
reduce idx 1
여기부터 reduce 2번째
reduce acc 30
reduce cur 30
reduce idx 2
여기부터 reduce 2번째
reduce acc 60
reduce cur 40
reduce idx 3
여기부터 reduce 2번째
reduce acc 100
reduce cur 50
reduce idx 4

이렇게 reduce를 사용하기 위해서는 함수를 첫번째 매개변수, 초기값(acc의..)을 두번째 매개변수로 넣어줄 것! (이러면 index도 0부터 시작한다!!)

---

JSON

fetch("https://jsonplaceholder.typicode.com/todos/1").then((res) => {
  console.log("-----------통신한다!!!-------------");
  console.log(res.json());
});

객체에는 속성과 메서드가 있다.
우리가 지금부터 다루려고 하는 객체는 promise의 형태를 가진 객체
promise 객체는 "비동기 통신"을 위한 객체라고 보면 된다.
그래서 통신 이후 일어날 일들에 대한 메서드 를 가지고 있다!!!! (중요)
통신 성공시 -> then
통신 실패시 -> catch

then() 이라는 녀석 안에는 콜백함수가 들어간다! (또?)

res 라는 저녀석도 promise 라는 값이다 !!

fetch(~~) -> return 을 promise 객체로
json -> http 의 응답으로 받은 res 의 body 를 뗴어와서 promise 형태로 준다.
res 에는 이 주소로 받아온 모든 것이 다 담겨있다!!! (promise 객체)
res 안의 body만 쓰기위해!!! -> res.json() 을 쓴다!!!! (가지고온 body 역시 promise 객체 형태 ㄷㄷ)
json 이라는 메서드다!!
json 도 비동기 함수다 근데? (헉) 그런데 promise 객체를 반환하는 것을 곁들인..

function testFunc(인자1, 인자2) {
  return "Promise 형태의 객체를 준다 !!!";
}

fetch("https://jsonplaceholder.typicode.com/todos")
  .then((res) => {
    // 이건 통신에 대한 then -> 그래서 res는 통신 후 가져온 값 전체!
    return res.json();
  })
  .then((data) => {
    // 이건 json() 이걸 수행한 결과 (body부분만 가져온 값)
    console.log("예제");
    console.log(data); // 그래서 data는 json() 처리를 한 후 가져온 body 부분 전체

    // 이 부분에서 DOM에 대한 제어를 해주면 되겠구나!!!

    const custtomULTag = document.createElement("ul");
    document.querySelector("body").appendChild(custtomULTag);
    let customLITag;

    for (item of data) {
      // console.log(item["title"]);
      // li태그를 임시로 만들어서 ul 태그에 넣어주는 역할~

      customLITag = document.createElement("li").textContent = item["title"];
      custtomULTag.appendChild(customLITag);
    }
  });

---

흠.. 사실 머가 먼지 잘 모르겠다.
조금 더 연구가 필요해보인다..

오늘의 과제는..

그러하다.