[ JS ] 함수

🔎 함수

01. 데이터와 호출

function hello() {
  return 'Hello~'
}

// 함수 데이터(Data)
console.log(hello)   //f hello() { return 'Hello~' }
console.log(typeof hello)   //function

// 함수 호출(Call)
console.log(hello())   // Hello~
console.log(typeof hello())   // String

---

02. 기명 / 익명 함수

• 기명 함수 - function 이름() {}

const h1El = document.querySelector('h1')

function handler() {
  console.log(h1El.textContent) // handler 함수는 textContent를 출력한다.
}
h1El.addEventListener('click', handler)

• 익명 함수 - function() {}

const h1El = document.querySelector('h1')

h1El.addEventListener('click', function() {
  console.log(h1El.textContent)
})
  

---

03. 호이스팅 (Hoisting)

• 자바스크립트는 위에서 아래로 해석되는데, 함수 선언문은 함수를 정의하기 전에 사용해도 에러나지 않는다.
• 함수 표현식은 작성된 그대로 동작하기 때문에 호이스팅 현상이 일어나지 않는다.

✍ 예제1

// 호이스팅 (끌어올려지다)
hello()   // Hello~
wolrd ()   // Error..

// 함수 선언문
function hello () {
  console.log('Hello~)
}
              
// 함수 표현식
const world = function () {
  console.log('World~')
}
              

👀 함수 표현식이 작동되게 하려면?

// 함수 표현식
const world = function () {
  console.log('World~')
}

// 호이스팅 (끌어올려지다)
hello()   // Hello~
wolrd ()   // World~

// 함수 선언문
function hello () {
  console.log('Hello~')
}
                    

✍ 예제2

// 함수 이름은 보통 명령형으로 이름을 짓는데(동사가 앞에 나오는 구조)
// 함수의 이름만 보고 과일의 목록을 주세요 라는 것을 어느 정도 예측할 수 있다. = 추상화

const fruits = getfruits()
const movies = getmovies()

function getfruits() {
  // 코드1
  // 코드2
  // 코드3
  // ...
  // return fruits
}

const getmovies = function() {
  // 코드1
  // 코드2
  // 코드3
  // ...
  // return fruits
}

문제없이 작동됨
Error...

---

04. 반환과 종료

• return 키워드 다음에 있는 코드는 실행될 수 없다.
  즉, 데이터를 함수 밖으로 내보냄(반환)과 동시에 함수를 종료하는 역할을 한다.

✍ 예제1

function sayHi(name) {
  return `Hi, ${name}~`
  console.log('동작하지 않음!')
}   // function키워드를 통해서 sayHi라는 이름을 가진 하나의 함수를 정의하고있다.

const h = sayHi('Neo')
// 'Neo'라는 문자 데이터를 name이라는 변수가 데이터를 받아서 사용됨
console.log(h)   // Hi, Neo~
console.log(sayHi('Neo'))   // Hi, Neo~

✍ 예제2

function a() {
  // return
}
function b() {
  return
}
function c() {
  return undefined
}

console.log(a())
console.log(b())
console.log(c())

// 모두 undefined

---

05. 인수와 매개변수

• 인수(Argument)와 매개변수(Parameter)는 엄연히 다른 개념이지만
  항상 같이 등장한다.

✍ 예제1

function add(a, b) {
  return a + b
}

console.log(add(2, 1))   // 3 (2와 1은 인수)
console.log(add(7, 4))   // 11
console.log(add('A', 'B'))   //AB

✍ 예제2

// 매개변수 기본값
function add(a, b=1) {
  return a + b
}

console.log(add(2))   // 3
console.log(add(2, undefined))   // 3
console.log(add())   // NaN

---

06. 화살표 함수

• return 키워드와 중괄호({})를 생략하는 방식으로 반환할 데이터만 명시한다.
• return 키워드가 없으면 중괄호를 생략할 수 없다.

✍ 예제1

// 일반 함수
function hello1() {
  return 'Hello~'
}
const add1 = function(a, b) {
  return a + b
}
const log1 = function (c) {
  console.log(c)
}

//화살표 함수
const hello2 = () => 'Hello~'
const add2 = (a, b) => a + b
const log2 = c => {
  console.log(c)
}   // 매개변수가 하나밖에 없고 기본값이 없을 때, 화살표 함수에서 소괄호 생략 가능!

✍ 예제2

// 화살표 함수의 중괄호 생략
const a = x => {
  return x * x
}
const b = x => x * x   // 위의 함수랑 같은 구조

const c = x => {
  console.log(x * x)
  return x * x
}   // 중괄호 다음에 return이 바로 나오지 않아서 중괄호를 생략할 수 없음

const d = () => {
  return [1, 2, 3]
}
const e = () => [1, 2, 3]   // 위의 함수랑 같은 구조

const g = () => {
  return { a : 1 }  // 객체 데이터
}
const h = {} => ({a : 1})  // 소괄호로 한번 더 묶어줌

---

07. 콜백 (Callback)

• 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수
• 함수가 뒤쪽에서 호출된다.
• () => {}

✍ 예제1

const a = callback => {
  console.log('A')
  callback()
}

const b = () => {
  console.log('B')
}

a(b)
// A
// B

---

08. 즉시실행함수 (IIFE)

• 함수를 만들자마자 바로 호출해서 사용할거라면 함수의 이름을 만들지 않고
  만들면서 바로 호출할 수 있게 하면 좋을 것 같은 상황에서 쓰임

✍ 예제1

// 함수 정의(표현)
const double = () => {
  // ...
}
// 함수 실행
double()



// 즉시실행함수
// ;(함수)()
;(function)() {
  // ...
})()

// '즉시실행함수'의 다양한 사용법
;(() => {})()         // (화살표함수)()
;(function () {})()   // (일반함수)()
;(function () {}())   // (일반함수())
;!function () {}()    // !일반함수()
;+function () {}()    // +일반함수()

---

09. 호출 스케줄링

✍ 예제1

// 콜백을 호출하는 타이머 설정
const timeout = setTimeout(() => {
  console.log('Hello~')
}, 5000)

// 타이머를 취소
const btnEl.document.querySelector('button')
btnEl.addEventListener('click', () => {
  console.log('타이머 취소!')
  clearTimeout(timeout)
})

✍ 예제2

// 콜백을 반복 호출하는 타이머 설정
const timeout = setInterval(() => {
  console.log('Hello~')
}, 3000)

// 타이머를 취소
const btnEl.document.querySelector('button')
btnEl.addEventListener('click', () => {
  console.log('타이머 취소!')
  clearInterval(timeout)
})