JS 함수 핵심 패턴

1
2
3
4
5
6
7
8
9
function hello() {
  return 'Hello~'
}

console.log(hello) // ƒ hello()
console.log(typeof hello) // 'function'

console.log(hello()) // 'Hello~'
console.log(typeof hello()) // 'string'

1
2
3
function hello() {
  console.log('Hello~')
}

1
2
3
const hello = function() {
  console.log('Hello~')
}

1
2
3
const exp = function dec() {}
exp() // OK!
dec() // Error: dec is not defined

1
2
3
4
5
6
7
8
9
10
const fruits = getFruits() // OK!
const movies = getMovies() // Error: Cannot access 'getMovies' before initialization
// ...

function getFruits() {
  // 함수 내용...
}
const getMovies = function() {
  // 함수 내용...
}

1
2
3
4
5
6
7
8
9
10
11
12
// 선언문은 최상단으로 끌어올려짐
function getFruits() {
  // 함수 내용...
}

const fruits = getFruits() // OK!
const movies = getMovies() // Error: Cannot access 'getMovies' before initialization
// ...

const getMovies = function() {
  // 함수 내용...
}

1
2
3
4
5
6
function hello() {
  return 'Hello~'
}
const h = hello()
console.log(h) // 'Hello~'
console.log(hello()) // 'Hello~'

1
2
3
4
5
function hello() {
  return 'Hello~' // 여기서 함수가 종료됨!
  console.log('Wow!') // 동작하지 않음!
}
console.log(hello()) // 'Hello~'

1
2
3
4
5
6
7
8
9
10
11
12
13
function hello1() {
  //
}
function hello2() {
  return
}
function hello3() {
  return undefined
}

console.log(hello1()) // undefined
console.log(hello2()) // undefined
console.log(hello3()) // undefined

1
2
3
4
5
6
function sum(a, b) {
  return a + b
}
console.log(sum(2, 1)) // 3
console.log(sum(7, 4)) // 11
console.log(sum('A', 'B')) // 'AB'

1
2
3
4
5
6
function sum(a, b = 1) {
  return a + b
}
console.log(sum(2)) // 3
console.log(sum(2, undefined)) // 3
console.log(sum()) // NaN <= undefined + 1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const user = {
  name: 'HEROPY',
  age: 85
}

// function getName(user) {
//   return user.name
// }
function getName({ name }) {
  return name
}
// function getEmail(user) {
//   return user.email || '이메일이 없습니다.'
// }
function getEmail({ email = '이메일이 없습니다.' }) { // 구조 분해 할당 + 기본값
  return email
}

console.log(getName(user)) // 'HEROPY'
console.log(getEmail(user)) // '이메일이 없습니다.'

1
2
const getName = ({ name }) => name
const getEmail = ({ email = '이메일이 없습니다.' }) => email

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const fruits = ['Apple', 'Banana', 'Cherry', 'Orange', 'Strawberry']
const numbers = [1, 2, 3, 4, 5, 6, 7]

// function getSecond([a, b]) { // a 변수는 사용하지 않기 때문에 생략 가능!
function getSecond([,b]) {
  return b
}
console.log(getSecond(fruits)) // 'Banana'
console.log(getSecond(numbers)) // 2

// function getFifth([,,,,e]) {
//   return e
// }
function getFifth(items) {
  return items[4]
}
console.log(getFifth(fruits)) // 'Strawberry'
console.log(getFifth(numbers)) // 5

1
2
3
4
5
6
function sum(a, b, ...rest) {
  console.log(a, b, rest) // 1 2 [3, 4, 5, 6, 7, 8]
  return rest.reduce((acc, cur) => acc + cur, 0)
}
const res = sum(1, 2, 3, 4, 5, 6, 7, 8)
console.log(res) // 33

1
2
3
function sum(a, b, ...xyz) {
  // ...
}

1
2
3
4
5
6
7
8
9
10
11
// const sum = (...rest) => rest.reduce((acc, cur) => acc + cur, 0) // 훨씬 간결합니다!
function sum() {
  let res = 0
  for (const item of arguments) {
    res += item
  }
  return res
}

const res = sum(1, 2, 3, 4, 5, 6, 7, 8)
console.log(res) // 36

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 일반 함수
function hello() {
  return 'Hello~'
}
const sum = function(a, b) {
  return a + b
}
const log = function (c) {
  console.log(c)
}

// 화살표 함수
const hello = () => 'Hello~'
const sum = (a, b) => a + b
const log = c => { 
  console.log(c) 
}

1
2
3
const a = () => {} // 매개변수가 없을 경우, 생략 불가.
const b = x => {} // 매개변수 1개인 경우, 생략 가능.
const c = (x, y) => {} // 매개변수가 2개 이상인 경우, 생략 불가.

1
2
3
4
5
6
7
8
9
10
11
12
13
const a = x => { // 중간 로직이 없는 경우, 생략 가능.
  return x * x 
}
const b = x => x * x
const c = x => { // 중간 로직이 있는 경우, 생략 불가.
  console.log(x * x)
  return x * x
}

const d = () => {
  return [1, 2, 3] 
}
const e = () => [1, 2, 3] // 생략한 경우.

1
2
3
4
5
const g = () => {
  return { a: 1 } 
}
const h = () => ({ a: 1 })
const h = () => { a: 1 } // Error: Unexpected token ':'

1
2
3
4
5
const obj = {
  fnA() {},
  fnB: function () {},
  fnC: () => {}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
// 함수 정의(표현)
const double = () => {
  //
}
// 함수 실행(호출)
double()

// VS

// 함수 정의 및 실행(IIFE)
;(() => {
  //
})()

1
2
3
4
5
;(() => {})()        // (화살표함수)()
;(function () {})()  // (일반함수)()
;(function () {}())  // (일반함수())
;!function () {}()   // !일반함수()
;+function () {}()   // +일반함수()

1
2
3
4
5
6
7
8
const a = 7

;(() => {
  const b = 3
  console.log(a, b)
})()

console.log(a, b) // Error: b is not defined

1
2
3
4
;((w, d) => {
  console.log(w.innerWidth)
  console.log(d.body)
})(window, document)

1
2
3
4
5
;(async () => {
  const res = await fetch('https://jsonplaceholder.typicode.com/users')
  const json = await res.json()
  console.log(json)
})()

1
2
3
4
5
6
7
8
9
10
11
const a = callback => {
  console.log('A')
  callback()
}
const b = () => {
  console.log('B')
}

a(b)
// 'A'
// 'B'

1
2
3
4
5
6
7
8
9
function sum(a, b, callback) {
  // 1초 후 실행
  setTimeout(() => {
    callback(a + b)
  }, 1000)
}
sum(3, 7, function(value) {
  console.log(value) // 10 <= 3 + 7
})

1
2
3
<div class="container">
  <h1>Loading...</h1>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
const loadImage = (url, cb) => {
  const imgEl = document.createElement('img')
  imgEl.src = url
  imgEl.addEventListener('load', () => {
    cb(imgEl)
  })
}

const containerEl = document.querySelector('.container')
loadImage('https://picsum.photos/2000/1000', imgEl => {
  containerEl.innerHTML = ''
  containerEl.append(imgEl)
})

1
2
3
4
5
6
7
8
9
10
11
// 5초 후에 콜백을 한 번 호출.
const timeout = setTimeout(() => {
  console.log('Hello~')
}, 5000)

// 버튼을 클릭하면 타이머를 취소.
const btnEl = document.querySelector('button')
btnEl.addEventListener('click', () => {
  console.log('Clear Timeout!')
  clearTimeout(timeout)
})

1
2
3
4
5
6
7
8
9
10
11
// 2초마다 콜백을 반복 호출.
const timeout = setInterval(() => {
  console.log('Hello~')
}, 2000)

// 버튼을 클릭하면 타이머를 취소.
const btnEl = document.querySelector('button')
btnEl.addEventListener('click', () => {
  console.log('Clear Interval!')
  clearTimeout(timeout)
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const userA = { name: 'A', parent: null }
const userX = { name: 'X', parent: null }
const userY = { name: 'Y', parent: userX }
const userB = { name: 'B', parent: userA }
const userC = { name: 'C', parent: userB }
const userD = { name: 'D', parent: userC }

const getRootUser = user => {
  if (user.parent) { // parent 속성의 값이 참(Truthy)인 경우, 재귀 호출
    return getRootUser(user.parent)
  }
  return user
}

console.log(getRootUser(userD)) // userA 객체!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const a = {
  name: 'A',
  fnA() {
    const b = {
      name: 'B',
      fnB() {
        const c = {
          name: 'C',
          fnC() {
            console.log(window) // window 객체
            console.log(a) // a 객체
            console.log(b) // b 객체
            console.log(c) // c 객체
            console.log(d) // Error: d is not defined
          }
        }
        return c
      }
    }
    return b
  },
  fnX() {
    const d = {
      name: 'D'
    }
  }
}
a.fnA().fnB().fnC()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const utils = {
  first: 'Neo',
  last: 'Anderson',
  user() {
    console.log(this) // utils 객체
    return {
      first: 'Heropy',
      last: 'Park',
      age: 85,
      getFullA() {
        return `${this.first} ${this.last}`
      },
      getFullB: () => `${this.first} ${this.last}` // 화살표 함수의 this가 정의되는 위치(선언할 때)
    }
  }
}

const u = utils.user()
console.log(u.getFullA()) // 'Heropy Park' / 일반 함수의 this가 정의되는 위치(호출할 때)
console.log(u.getFullB()) // 'Neo Anderson'

1
2
3
4
5
6
7
8
9
10
11
const timer = {
  title: 'TIMER!',
  timeout() {
    setTimeout(function () {
      console.log(this.title) // undefined
      console.log(this) // window 객체
    }, 1000)
  }
}

timer.timeout()

1
2
3
4
5
6
7
8
9
10
11
const timer = {
  title: 'TIMER!',
  timeout() {
    setTimeout(() => {
      console.log(this.title) // 'TIMER!'
      console.log(this) // timer 객체
    }, 1000)
  }
}

timer.timeout()

1
2
3
4
5
6
7
8
9
10
11
const timer = {
  title: 'TIMER!',
  timeout: () => {
    setTimeout(() => {
      console.log(this.title) // Error: Cannot read properties of undefined (reading 'title')
      console.log(this) // undefined
    }, 1000)
  }
}

timer.timeout()

1
2
3
4
5
6
7
8
9
const amy = {
  name: 'Amy',
  getName(age) {
    return `${this.name} is ${age}`
  }
}
const heropy = {
  name: 'Heropy'
}

1
2
3
4
// 함수.call(객체, 인수1, 인수2, ...)
console.log(
  amy.getName.call(heropy, 85)
)

1
2
3
4
// 함수.apply(객체, [인수1, 인수2, ...])
console.log(
  amy.getName.apply(heropy, [85])
)

1
2
3
// const 객체와_연결된_함수 = 함수.bind(객체, 인수1, 인수2, ...)
const heropysGetName = amy.getName.bind(heropy)
console.log(heropysGetName(85))

1
2
3
4
5
6
7
8
9
10
11
function createCount() {
  let c = 0
  return function () {
    return (c += 1)
  }
}

const count = createCount()
console.log(count()) // 1
console.log(count()) // 2
console.log(count()) // 3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function createCount(start) {
  let c = start
  return function () {
    return (c += 1)
  }
}

const countA = createCount(0)
console.log(countA())  // 1
console.log(countA())  // 2
console.log(countA())  // 3

const countB = createCount(77)
console.log(countB())  // 78
console.log(countB())  // 79
console.log(countB())  // 80

1
2
3
4
5
6
let countA = createCount(0)
console.log(countA())  // 1
console.log(countA())  // 2
console.log(countA())  // 3

countA = null // 참조 제거!

1
2
<h1>Hello world!</h1>
<h2>Hello world!</h2>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const h1El = document.querySelector('h1')
const h2El = document.querySelector('h2')

// 외부에서 별도의 상태(데이터) 관리가 필요!
let h1IsRed = false
let h2IsRed = false

h1El.addEventListener('click', event => {
  h1IsRed = !h1IsRed
  h1El.style.color = h1IsRed ? 'red' : 'black'
})
h2El.addEventListener('click', event => {
  h2IsRed = !h2IsRed
  h2El.style.color = h2IsRed ? 'red' : 'black'
})

1
2
3
4
5
6
7
8
9
10
11
12
13
const h1El = document.querySelector('h1')
const h2El = document.querySelector('h2')

// 하나의 함수로 정리!
const createToggleHandler = () => {
  let isRed = false
  return event => {
    isRed = !isRed
    event.target.style.color = isRed ? 'red' : 'black'
  }
}
h1El.addEventListener('click', createToggleHandler())
h2El.addEventListener('click', createToggleHandler())

1
2
3
4
5
6
7
function myConsole(level, message) {
  console[level](message)
}

myConsole('log', 'Hello world~')
myConsole('warn', 'Danger ahead!')
myConsole('error', 'Error: system failure..')

1
2
3
4
5
6
7
8
9
function useConsole(level) {
  return function(message) {
    console[level](message)
  }
}

useConsole('log')('Hello world~')
useConsole('warn')('Danger ahead!')
useConsole('error')('Error: system failure..')

1
2
3
4
5
6
7
8
9
10
11
12
13
function useConsole(level) {
  return function(message) {
    console[level](message)
  }
}

const log = useConsole('log')
const warn = useConsole('warn')
const error = useConsole('error')

log('Hello world~')
warn('Danger ahead!')
error('Error: system failure..')

1
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

1
2
3
4
5
6
7
8
9
10
11
12
13
function myConsole(level, message) {
  console[level](message)
}

const useConsole = _.curry(myConsole)

const log = useConsole('log')
const warn = useConsole('warn')
const error = useConsole('error')

log('Hello world~')
warn('Danger ahead!')
error('Error: system failure..')

1
2
3
4
5
6
7
8
9
10
const sum = new Function('a', 'b', `
  console.log(a)
  console.log(b)
  return a + b
`)

console.log(sum(1, 7)) 
// 1
// 7
// 8

1
2
3
4
5
6
7
8
let text = ''
const textareaEl = document.querySelector('textarea')
textareaEl?.addEventListener('input', () => {
  text = textareaEl.value
})
textareaEl?.addEventListener('change', event => {
  new Function(text)()
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const createUser = (full, birth) => ({
  firstName: full.split(' ')[0],
  lastName: full.split(' ')[1],
  age: new Date().getFullYear() - birth,
  birth,
  greet() {
    return `Hello, My name is ${this.firstName}! I'm ${this.age}.`
  }
})
const userA = createUser('Neo Anderson', 1985)
console.log(userA.greet()) // 'Hello, My name is Heropy! I'm 38.'

const userB = createUser('Amy Pond', 1916)
console.log(userB.firstName) // 'Amy'

1
2
3
4
5
6
7
8
9
10
11
12
// 모듈화
const add = (a, b) => a + b
const sub = (a, b) => a - b
const mul = (a, b) => a * b
const div = (a, b) => a / b

const calculate = (fn, a, b) => fn(a, b)

console.log(calculate(add, 1, 2)) // 3
console.log(calculate(sub, 1, 2)) // -1
console.log(calculate(mul, 1, 2)) // 2
console.log(calculate(div, 1, 2)) // 0.5

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

// .map()
const doubles = numbers.map(item => item * 2)
console.log(doubles) // [2, 4, 6, 8, 10]
console.log(numbers) // [1, 2, 3, 4, 5]

// .filter()
const evens = numbers.filter(item => item % 2 === 0)
console.log(evens) // [2, 4]
console.log(numbers) // [1, 2, 3, 4, 5]