JavaScript 함수 (2)

.forEach()

가장 기본적인 콜백 함수. 배열 내부의 요소를 사용해 콜백 함수를 호출

      const numbers = [273, 52, 103, 32, 57]

						# array는 잘 쓰이지 않음
      numbers.forEach(function (value, index, array) {
        console.log(`${index}번째 요소 : ${value}`)
      })

 

.filter()

리턴 값이 true인 것들만 모아서 새로운 배열을 만드는 함수

      # const는 재할당이 안돼서 오류남
      let 배열 = [273, 52, 103, 32, 57]
      배열 = 배열.filter(function (value, index) {
        return value % 2 === 0
      })

      console.log(배열)
      [52, 32]

 

.map()

리턴한 값을 기반으로 새로운 배열을 만드는 함수

      let 배열 = [273, 52, 103, 32, 57]
      배열 = 배열.map(function (value, index) {
        return value + '!!'
      })

      console.log(배열)
      ['273!!', '52!!', '103!!', '32!!', '57!!']

 

화살표 함수

• 기본형

      let 배열 = [273, 52, 103, 32, 57]
      배열 = 배열.filter(function (value, index) {
        return value % 2 === 0
      })

 

• 화살표 함수 적용 (빨간 부분 날림, 초록색 추가)

      let 배열 = [273, 52, 103, 32, 57]
      배열 = 배열.filter((value, index) => {
        return value % 2 === 0
      })

 

• 더 줄이기 (내부에 있는 코드가 return하는 코드 하나라면 중괄호와 return 생략가능)

      let 배열 = [273, 52, 103, 32, 57]
      배열 = 배열.filter((value, index) => value % 2 === 0)

 

 

즉시 호출 함수

협업하다보면 상수나 변수 명이 겹칠 수 있기에 함수를 짜고 그 내부에서 사용할 수 있도록 코드를 짜는 것이 좋음

      (function () {
        const a =10
      }) ()

      (function () {
        const a =20
      }) ()

 

엄격 모드

다른 코드에도 영향 가지 않도록 보통은 즉시 호출 함수에 넣어 사용함

      (function () {
        'use srict'
      }) ()

 

타이머 함수

      setTimeout(() => (
        console.log('1초 후에 실행됩니다.')
      ), 1000)

      let count = 0
      setInterval(() => (
        console.log('1초마다 실행됩니다.')
      ), 1000)

 

선언적 함수 vs 익명 함수

선언적 함수

function 함수() {
	console.log("선언적 함수입니다.")
}

익명함수

let 함수 = function() {
	console.log('익명 함수입니다.')
}

선언적 함수는 호출이 위에 있더라도 선언적 함수 우선 실행 됨, 익명 함수보다 아래 있어도 우선 실행됨. 다른 <script>에서 호출했을 때 실행될 수도 있음 (그럴 일은 없지만 다른 스크립트의 익명함수 전에 호출이 적혀있을 경우)

익명함수는 순서대로 읽힘.(호출이 위에 있으면 오류 발생)

(호이스팅 때문임. 자세한 내용은 블로그 내 'Javascript 기본 개념 추가 (1)' 참조)

 

 

---

 

문제1. 아래 배열을 다음과 같이 추출하기

• 홀수만 추출
• 100 이하의 수만 추출
• 5로 나눈 나머지가 0인 수만 추출

let numbers = [273, 25, 75, 52, 103, 32, 57, 24, 76]

numbers = numbers.filter((value) => value % 2 !== 0)
console.log(numbers)
numbers = numbers.filter((value) => value <= 100)
console.log(numbers)
numbers = numbers.filter((value) => value % 5 === 0)
console.log(numbers)

return 값으로 3개를 받아와야 하는데 어떻게 해야할까하는 생각에 함수 내부에 let으로 3개 나눠서 적어보기도 하고,  세개를 묶어 리턴 값으로도 돌려보고 여러 짓 해봤었는데 정말 단순하게 따로 세개를 만드는 게 정답 코드였다...

 

문제2. 결과를 아래와 같이 띄우기

0

1

2

3

사과

배

귤

바나나

 

- 내가 쓴 코드 -

  array.forEach((value, index) => {
    console.log(index)
    console.log(value)
  })

- 정답 코드 -

  let array = ['사과', '배', '귤', '바나나']

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

  array.forEach((value, index) => {
    console.log(value)
  })

이번에도 함수 하나에 썼었는데 '0 사과 1 배' 이런식으로 번갈아 나와서 순서 고치고 식 변형해보고 난리쳤지만 문제1이랑 똑같이그냥 두개를 만들어주면 되는 거였다...