[JS][Udemy] Array Callback Methods

1.  Array Callback Methods

► ForEach

• for ... of와 동일하고 요즘은 forEach 자주 쓰이지 않음

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]

// forEach
numbers.forEach(function (el) {
  if (el % 2 === 0){
    console.log(el)
  }
})

// for ... of
for (let el of numbers) {
  console.log(el)
}


// 2 4 6 8 10 14

 

► Map

• ForEach와 동작 방식은 같지만 반환받은 값으로 새로운 배열을 생성함

const texts = ['sdf', 'are', 'seg', 'hre']
const caps = texts.map(function (t) {
  return t.toUpperCase()
})

// texts의 배열을 받아서 caps새 변수에 대문자 메서드를 사용해 저장

texts
>> ['sdf', 'are', 'seg', 'hre']
caps
>> ['SDF', 'ARE', 'SEG', 'HRE']

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]

const double = numbers.map(function (num) {
  return num * 2
})

console.log(numbers)
>> [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
console.log(double)
>> [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30]

// DO NOT ALTER THE FOLLOWING CODE:
const fullNames = [{first: 'Albus', last: 'Dumbledore'}, {first: 'Harry', last: 'Potter'}, {first: 'Hermione', last: 'Granger'}, {first: 'Ron', last: 'Weasley'}, {first: 'Rubeus', last: 'Hagrid'}, {first: 'Minerva', last: 'McGonagall'}, {first: 'Severus', last: 'Snape'}];

// Write your code here
const firstNames = fullNames.map(function (name) {
    return name.first
}) 

console.log(firstNames); 
// ['Albus', 'Harry', 'Hermione', 'Ron', 'Rubeus', 'Minerva', 'Severus']

---

2.  Arrow Functions

► Arrow Functions

// 함수 표현식
const add = function (x, y) {
  return x + y
}

// 화살표 함수
// 인수가 2개 이상이면 인수를 감싸는 괄호 반드시 필요
const add = (x, y) => {
  return x + y
}
add(2, 3)
>> 5

// 화살표 함수 : 인수가 하나일 때
// 인수가 1개이면 괄호가 없어도 됨
const square = (x) => {
	return x * x
}
square(9)
>> 81

// 화살표 함수 : 인수가 없을 때
// 인수가 0개이면 인수를 감싸는 괄호 반드시 필요
const rollDie = () => {
	return Math.floor(Math.random())
}
rollDie()
>> 2 (랜덤 수 생성)

// greet("Hagrid") >> "Hey Hagrid!" 
const greet = string => {
    return `Hey ${string}!`
}

 

► implicit return

// 모두 같은 함수식

// 기본 함수 표현식
const isEven = function (num) {
  return num % 2 === 0
}
// 화살표 함수
const isEven = (num) => {
  return num % 2 === 0
}
// 인수가 하나일 때 괄호 없애기 가능
const isEven = num => {
  return num % 2 === 0
}
// return 생략과 중괄호를 소괄호로
// 반환값이 하나일 때만 사용 가능
const isEven = num => (
  num % 2 === 0
)
// 한줄로 표현
const isEven = num => num % 2 === 0

 

► Arrow function + 'this' keyword

• 일반 함수와 달리 화살표 함수에서 this 키워드는 다르게 동작함
• 'this'키워드가 화살표 함수에서 다르게 동작해야 하고
• 화살표 함수는 이름을 정의하지 않음

// 일반 함수의 this
const person = {
  firstName: 'witer',
  lastName: 'Kang',
  fullName: function() {
    return `${this.firstName} ${this.lastName}`
  }
}
person.fullName()
>> 'witer Kang'

// 화살표 함수의 this
// 여기서 this는 window객체를 가리킴
const person = {
  firstName: 'witer',
  lastName: 'Kang',
  fullName: () => {
    return `${this.firstName} ${this.lastName}`
  }
}
person.fullName()
>> 'undefined undefined'

const person = {
  firstName: 'witer',
  lastName: 'Kang',
  fullName: () => {
    return `${this.firstName} ${this.lastName}`
  },
  shoutName: function () {
    setTimeout(() => { 
        console.log(this)
        console.log(this.fullName())
    }, 3000)
  }
}

person.shoutName()

>> {firstName: 'witer', lastName: 'Kang', fullName: ƒ, shoutName: ƒ}
>> undefined undefined

// 
const person = {
  firstName: 'witer',
  lastName: 'Kang',
  fullName: () => {
    return `${this.firstName} ${this.lastName}`
  },
  shoutName: function () {
    setTimeout( function() { 
        console.log(this)
        console.log(this.fullName())
    }, 3000)
  }
}
person.shoutName()

>> Window {window: Window, self: Window, document: document, name: '', location: Location, …}
>> Uncaught TypeError: this.fullName is not a function

---

2.  setTimeout  &  setInterval

• 배열과 관련이 없는 함수
• 연기하고, 대기하고, 중단하는 함수

► setTimeout

console.log("HELLOOOOO!")
setTimeout(() => {
  console.log('Are you still there...?')
}, 3000)
console.log('GOODBYE~')

>> HELLOOOOO!
>> GOODBYE~
>> Are you still there...? // 3초후 출력

► setInterval

// id는 변수이기 때문에 어떤 변수라도 상관없음
const id = setInterval(() => {
  console.log(Math.random())
}, 2000)

>> 0.9498092830470815
// 2초 간격을 두고 랜덤 수 생성

clearInterval(id)
>> 반복 중단

---

3.  Filter

► Filter

• 제공된 함수에 의해 구현된 테스트를 통과하는(참인  경우) 모든 요소로 새 배열을 만듭니다
• 원래 배열을 바꾸는 것이 아님

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]

const isEven = numbers.filter(num => {
    return num % 2 === 0
})

// const isEven = numbers.filter(num => num % 2 === 0) 위의 함수식과 동일

isEven
>> [2, 4, 6, 8, 10, 12, 14]

// 원래 배열은 바뀌지 않음
numbers
>> [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]

// 길이가 10보다 작은 요소만 가져오기
validUserNames = ['mark', 'staceysmom1978', 'q29832128238983', 'carrie98', 'MoanaFan']

const name = validUserNames.filter(user => {
  return user.length < 10
})
console.log(name)
>> ['mark', 'carrie98', 'MoanaFan']

 

► Filter와 map의 결합

const newMovie = movies.filter(m => m.score > 80).map(m.title)
// movies에서 title만 가져와서 새 배열을 생성하는데 
// score의 점수가 80 이상인 경우만 가져옴

---

4. Some & Every

• 새 배열을 반환하는 map, filter과는 달리 이 둘은 항상 참이나 거짓을 반환함
• boolean : true/false

► Some

• 요소 중 하나 이상만 조건에 만족해도 true

const exams = [98, 26, 86, 36, 64, 52, 85, 99]

const trueFalse = exams.some(score => score >= 75)

console.log(trueFalse)
>> true

 

► Every

• 모든 요소가 조건에 만족해야 true, 아니라면 false

const exams = [98, 26, 86, 36, 64, 52, 85, 99]

const trueFalse = exams.every(score => score >= 75)

console.log(trueFalse)
>> false

// 모두가 짝수일 경우 true, 아니라면 false를 반환하는 함수 짜기

function allEvens(nums) {
  return nums.every(num => {
      return num % 2 === 0
  })
}
console.log(allEvens([2,4,6,8])); // true
console.log(allEvens([1,4,6,8])); // false
console.log(allEvens([1,2,3]));

---

4. Reduce

► Reduce

const prices = [9.99, 1.50, 19.99, 49.99, 30.50]

// for문 사용
let total = 0
for (let price of prices) {
     total += price
}
console.log(total) // 111.97

// reduce 사용
const total = prices.reduce((total, price) => {
  return total + price
})
console.log(total) // 111.97

// 위와 동일한 코드
const total = prices.reduce((total, price) => total + price)

// for, reduce 결과는 동일

// 가장 작은 수 찾기
const prices = [9.99, 1.50, 19.99, 49.99, 30.50]
const minPrice = prices.reduce((min, price) => {
    if (min < price) {
        return price
    }
    return min
})
console.log(minPrice) // 1.50

const evens = [2, 4, 6, 8]
evens.reduce((sum, num) => sum + num, 100)
>> 120