내장 고차함수 / event loop

hyemini·2022년 8월 11일

2022. 08.11 - TIL 💁‍♀️

오늘 배운 내용 ✍

배열 내장 고차함수 forEach, find, filter, map, reduce, sort, some, every
고차 함수를 활용하여 프로그램을 작성
이벤트 루프(event loop)

복습 & 정리 📖

내장 고차함수 이해하기

자바스크립트에서는 배열 메소드들 중 일부가 대표적인 고차 함수에 해당합니다!

forEach
배열을 빙글빙글 돌면서 반복적으로 작업을 수행합니다 (for 대신 쓰면 됩니다) forEach는 인자로 콜백함수를 받습니다! 나머지 내장 고차함수들도유 🥺

const arr = ['a','b','c','d']

arr.forEach(function(value, index, array){
    console.log(value, index, array)
  })


//콘솔창에는 이렇게 나옵니다!
a 0 [ 'a', 'b', 'c', 'd' ]
b 1 [ 'a', 'b', 'c', 'd' ]
c 2 [ 'a', 'b', 'c', 'd' ]
d 3 [ 'a', 'b', 'c', 'd' ]

대부분은 요소 자체에 관심이 있기 때문에 index와 array에 관심이 없다면 지우셔도 됩니다!

find
조건에 맞는 아이템을 찾을 때 씁니다!

const fruit1 = {name : 'apple' , color : 'red'}
const fruit2 = {name : 'banana', color : 'yellow'}
const fruits = [fruit1, fruit2]

let found = fruits.find((value) => {
  return value.name === 'apple'
})

console.log(found);

//콘솔창에는 이렇게 뜹니다 ㅎㅎ
{ name: 'apple', color: 'red' }

filter
조건에 맞는 아이템들을 새로운 배열로 반환해 줍니다!

const fruit1 = {name : 'apple' , color : 'red'}
const fruit2 = {name : 'banana', color : 'yellow'}
const fruit3 = {name : 'tomato', color : 'red'}
const fruits = [fruit1, fruit2, fruit3]

let result = fruits.filter((value) => {
  return value.color === 'red'
})

console.log(result); // [ { name: 'apple', color: 'red' }, { name: 'tomato', color: 'red' } ]

이렇게 컬러가 레드인 애들만 새롭게 반환해 줍니다!!

map
배열의 요소들을 각각 다른 요소로 매핑하고 변환해서 새로운 배열로 생성해 줍니다!

const nums = [1,2,3,4,5]
result = nums.map((item) => {
  if(item % 2 === 0){
    return item * 100
  } else {
    return item
  }
})
console.log(result);
console.log(result); //[ 1, 200, 3, 400, 5 ]

좀 응용해서 적어보았답니당 재밌죠?

reduce
배열의 요소들을 접어서 접어서 값을 하나로!

result = [1,2,3,4,5].reduce((sum, value) => {
  sum += value
  return sum
}, 0) //0으로 초기화

console.log(result) //15

고차 함수를 활용하여 프로그램을 작성

removeElement

배열과 임의의 값(discarder)을 입력받아 기존 배열에서 discarder와 일치하는 요소가 제거된 새로운 배열을 리턴해야 합니다.

function removeElement(arr, discarder) {
  return arr.filter((item) => {
    return item != discarder
  })
}

filter 함수를 사용해 봤습니다!

filterOddLengthWords

문자열을 요소로 갖는 배열을 입력받아 그 길이가 홀수인 요소만을 갖는 배열을 리턴해야 합니다.

function filterOddLengthWords(words) {
  return words.filter((item) => {
    return item.length % 2 > 0
  })
}

getIndex

정수를 요소로 갖는 배열과 정수(num)를 입력받아 num을 배열에 추가하고 정렬한다고 가정할 경우, num의 인덱스를 리턴해야 합니다.

function getIndex(arr, num) {
  return arr.reduce((acc, value) => {
    return num > value ? acc + 1 : acc
  }, 0)
}

reduce 함수를 사용해 봤습니다!

이벤트 루프(event loop)

이벤트 루프란?
Task Queue에서 하나씩 꺼내서 동작시키는 Loop라고 합니다! 자바스크립트는 한 번에 하나씩 작업을 합니다 (Single Thread) 따라서 자바스크립트는 기본적으로 동기적으로 진행됩니다! 하지만 가끔가다가 특별한 코드를 실행해야할 경우가 있는데.. 예를 들자면..! ajax, 이벤트리스너, setTimeout 이런 등등의 코드들입니다 (Web API) 이런 코드들은 처리하기까지 시간이 오래 걸립니다

그래서 이러한 코드들은 Call Stack에 쌓아서 실행하지 않고 잠깐 보류해놨다가 완료가 되는 시점에 Call Stack으로 보냅니다!
근데 Call Stack으로 보내질 때는 Call Stack이 텅 빈 시점에만 보내지게 되어있습니다!

정리하자면..! ajax 요청, 이벤트리스너, setTimeout 이런 코드가 실행 준비가 되면 Task Queue에 집어넣고 Task Queue에 있던 코드는 Call Stack으로 옮겨서 실행해 주는데 Call Stack이 비어있을 때만 차례대로 집어넣어서 실행을 해준다는 겁니다 🤭

GOOD 😉

내장 고차함수 헷갈렸는데 정리하니까 많이 편해졌다!
자바스크립트 동작 원리를 알고 나니 아주 좋았다!

BAD 😥

TO DO 🔥

자바스크립트 더 공부하고
주말에 리액트 공부해야겠다 :)

Retrospect 🧐

아직 어렵긴 하지만 매우 유익하고 좋은 시간이었습니당

hyemini

이전 포스트

고차함수 (higher order function)

다음 포스트