[JS] 09. 함수

📚 Table of Contents

01. 선언과 표현 그리고 호이스팅

호이스팅 ( Hoisting )

호이스팅은 JavaScript에서 변수와 함수 선언을 코드의 최상단으로 끌어올리는 동작을 말합니다.

함수 호이스팅의 주요 특징은 다음과 같습니다:

함수 선언문은 전체가 호이스팅됩니다.
함수를 선언하기 전에 호출할 수 있습니다.
함수 표현식은 호이스팅되지 않습니다.
호이스팅은 코드의 가독성과 유지보수성에 영향을 줄 수 있으므로 주의해서 사용해야 합니다.

호이스팅은 JavaScript 엔진이 코드를 실행하기 전에 변수와 함수 선언을 메모리에 저장하는 과정에서 발생합니다.

이로 인해 코드의 실행 순서가 예상과 다르게 동작할 수 있습니다.

함수 선언문

함수 선언문에서는 작동

hello()

function hello() {
  console.log('hello~')
}

함수 표현식

함수 표현식에서는 작동하지 않는다.

hello()

const hello = function hello() {
  console.log('hello~')
}

02. 반환 및 종료

함수의 return 키워드는 다음과 같은 역할을 합니다:

결과 반환: 함수의 실행 결과를 호출한 곳으로 돌려줍니다.
함수 종료: return 문이 실행되면 함수의 실행이 즉시 중단됩니다.
값 지정: return 뒤에 명시된 값이 함수의 반환값이 됩니다.
제어 흐름: 조건에 따라 다른 값을 반환하거나 함수를 조기 종료할 수 있습니다.

return을 사용하지 않으면 함수는 기본적으로 undefined를 반환합니다.

function plus(num) {
  if (typeof num !== 'number') {
    console.log('숫자를 입력해주세요!')
    return 0
  }
  return num + 1
}

console.log(plus(2)) // 3
console.log(plus(7)) // 8
console.log(plus()) // 숫자를 입력해주세요!
                    // 0

03. 매개변수 패턴

기본값(Default value)

function sum(a, b = 0) {
  return a + b
}

sum(1, 2) // 3
sum(7) // 7

구조 분해 할당(Destructuring assignment)

const user = {
  name: 'userA',
  age: 23
}

function getName({ name }) {
  return name
}

funtion getEmail({ email = '이메일이 없습니다.' }) {
  return email
}

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

const fruits = ['apple', 'banana', 'cherry']
const numbers = [1,2,3,4,5,6,7]

function getSecondItem([, b]) {
  return b
}

console.log(getSecondItem(fruits)) // banana
console.log(getSecondItem(numbers)) // 2

나머지 매개변수(Rest parameter)

function sum(...rest) {
  console.log(rest)
  return rest.reduce(function (acc, cur) {
    return acc + cur
  }, 0)
}

console.log(sum(1, 2)) // 3\
console.log(sum(1, 2, 3, 4)) // 10
console.log(sum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)) // 55

04. 화살표 함수 (Arrow function)

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

const sum = (a, b) => a + b

console.log(sum(1, 2))

화살표 함수 특성

화살표 함수의 다양한 패턴:

기본 형태:
const a = () => {}
매개변수가 하나인 경우:
const b = x => {} // 매개변수가 1개일 때 소괄호 생략 가능
매개변수가 둘 이상인 경우:
const c = (x, y) => {}
함수 본문이 한 줄인 경우:
const d = x => { return x * x } const e = x => x * x // return 키워드와 중괄호 생략 가능
함수 본문이 여러 줄인 경우:
const f = x => { console.log(x * x) return x * x }
객체 반환:
const g = () => { return { a: 1 } } const h = () => ({ a: 1 }) // 객체 반환 시 소괄호로 감싸야 함
배열 반환:
const i = () => { return [1, 2, 3] }

이러한 패턴들은 화살표 함수의 간결성과 유연성을 보여줍니다.

05. 즉시실행함수(IIFE)

Immediately-Invoked Function Expression

즉시실행함수(IIFE)는 정의되자마자 즉시 실행되는 함수입니다.

이 함수는 한 번만 실행되며, 전역 스코프를 오염시키지 않고 변수를 캡슐화하는 데 유용합니다.

;(() => {})() // (F)()

;(function () {})() // (F)()

;(function () {}()) // (F())

;!function () {}() // !F()

;+function () {}() // +F()

;((a, b) => {
  console.log(a.innerWidth) // 화면에 보여지는 가로 넓이
  console.log(b.body)
})(window, documnet)

06. 콜백 함수

콜백 함수는 다른 함수에 인자로 전달되어 나중에 호출되는 함수입니다.

주요 특징은 다음과 같습니다:

비동기 작업을 처리할 때 주로 사용됩니다.
함수의 실행을 제어하거나 결과를 처리하는 데 유용합니다.
코드의 유연성과 재사용성을 높입니다.
이벤트 처리, 타이머 설정, AJAX 요청 등에서 자주 사용됩니다.

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

// 함수 b가 콜백함수가 된다.
const b = () => {
  console.log('b')
}

a(b)

const sum = (a, b, c) => {
  setTimeout(() => {
    c(a + b)
  }, 1000) // callback
}

sum(1, 2, value => {
  console.log(value)
})

// 이미지를 로드하는 함수 정의
const loadImage = (url, cb) => {
  // 새로운 img 요소 생성
  const imgEl = document.createElement('img')
  // 이미지 소스 설정
  imgEl.src = url
  // 이미지 로드 완료 시 이벤트 리스너 추가
  imgEl.addEventListener('load', () => {
    // 5초 후에 콜백 함수 실행
    setTimeout(()=>{
      cb(imgEl)
    }, 5000)
  })
}

// 컨테이너 요소 선택
const contatinerEl = document.querySelector('.container')
// 이미지 로드 함수 호출
loadImage('https://i.imgur.com/oRweY2l.png', (imgEl) => {
  // 컨테이너 내용 초기화
  contatinerEl.innerHTML = ''
  // 로드된 이미지를 컨테이너에 추가
  contatinerEl.append(imgEl)
})

fmmB9qw.png|314

07. 재귀 (Recursive)

재귀는 함수가 자기 자신을 호출하는 프로그래밍 기법입니다.

이 방법은 복잡한 문제를 더 작고 간단한 문제로 나누어 해결하는 데 유용합니다.

재귀 함수의 주요 특징:

기본 케이스: 재귀를 멈추는 조건
재귀 케이스: 함수가 자신을 다시 호출하는 부분
수렴: 각 재귀 호출이 기본 케이스에 가까워지도록 함

재귀는 트리 구조 탐색, 수학적 계산 등 다양한 알고리즘에서 사용됩니다.

그러나 과도한 사용은 스택 오버플로우를 일으킬 수 있으므로 주의가 필요합니다.

let i = 0

const a = () => {
  console.log(a)
  i += 1
  if (i < 4) {
    a()
  }
}

a()

const userA ={ name: 'A', parent: null }

const userB ={ name: 'B', parent: userA }

const userC ={ name: 'C', parent: userB }

const userD ={ name: 'D', parent: userC }

const getRootUser = (user) => {
  if (user.parent) {
    return getRootUser(user.parent)
  }
  return user
}

console.log(getRootUser(userD)) // A

08. 호출 스케줄링

호출 스케줄링은 JavaScript에서 특정 코드나 함수의 실행을 지연시키거나 주기적으로 실행하도록 예약하는 기능입니다.

이는 비동기 프로그래밍의 중요한 부분으로, 웹 애플리케이션의 성능 최적화와 사용자 경험 향상에 도움을 줍니다.

주요 호출 스케줄링 메서드:

setTimeout(): 지정된 시간 후에 함수를 한 번 실행합니다.
setInterval(): 지정된 시간 간격으로 함수를 반복적으로 실행합니다.
clearTimeout(): setTimeout()으로 설정한 타이머를 취소합니다.
clearInterval(): setInterval()로 설정한 반복 실행을 중지합니다.

이러한 메서드들은 비동기적으로 작동하며, 웹 페이지의 반응성을 유지하면서 시간 기반 작업을 수행할 수 있게 해줍니다.

const hello = () => {
  console.log('Hello~')
}

const timeout = setInterval(hello, 2000) // 2초마다 실행

const h1El = document.querySelector('h1')
h1El.addEventListener('click', () => {
  console.log('Clear!')
  clearInterval(timeout)
}) // h1 클릭 시 스케줄 종료

09. this

일반 함수의 this는 호출 위치에서 정의

const user = {
  firstName: 'Neu',
  lastName: 'Lyeo',
  age: 22,
  getFullName : function() { // 일반 함수
    return `${this.firstName } ${this.lastName}`
  }
}

console.log(user.getFullName()) //NeuLyeo

화살표 함수의 this는 자신이 선언된 함수(렉시컬) 범위에서 정의

const user = {
  firstName: 'Neu',
  lastName: 'Lyeo',
  age: 22,
  getFullName: () => { // 화살표 함수
    return `${this.firstName} ${this.lastName}`
  }
}

console.log(user.getFullName()) //undefined undefined

function user() {
  this.firstName = 'Par' 
  this.lastName = 'This'

  return {
    firstName: 'Neu',
    lastName: 'Lyeo',
    age: 22,
    getFullName: () => { // 화살표 함수
      return `${this.firstName } ${this.lastName}`
    }
  }
}

const u = user()
console.log(u.getFullName()) //ParThis

function user() {
  this.firstName = 'Par' 
  this.lastName = 'This'

  return {
    firstName: 'Neu',
    lastName: 'Lyeo',
    age: 22,
    getFullName() { // 일반 함수
      return `${this.firstName } ${this.lastName}`
    }
  }
}

const lewis = {
  fistName: 'Lewis',
  lastName: 'Yang'
}

const u = user()
console.log(u.getFullName()) //NeuLyeo
console.log(u.getFullName.call(lewis))// Lewis Yang

const timer = {
  title: 'TIMER!',
  timeout() {
    console.log(this.title)
    setTimeout(() => {
      console.log(this.title)
    }, 1000)
  }
}

timer.timeout() //TIMER! 1초 뒤 TIMER!

저작자표시 비영리 변경금지

'Language > JavaScript' 카테고리의 다른 글

[JS] 10. 클래스 (0)	2024.10.22
[JS] 08. 조건문, 반복문 (1)	2024.10.18
[JS] 07. 구조 분해 할당, 선택적 체이닝 (0)	2024.10.17
[JS] 06. 연산자 (1)	2024.10.15
[Js] 05. 데이터 etc (0)	2024.10.14

느린 저장소

[JS] 09. 함수

[JS] 09. 함수

01. 선언과 표현 그리고 호이스팅

호이스팅 ( Hoisting )

함수 선언문

함수 표현식

02. 반환 및 종료

03. 매개변수 패턴

기본값(Default value)

구조 분해 할당(Destructuring assignment)

나머지 매개변수(Rest parameter)

04. 화살표 함수 (Arrow function)

화살표 함수 특성

05. 즉시실행함수(IIFE)

Immediately-Invoked Function Expression

06. 콜백 함수

07. 재귀 (Recursive)

08. 호출 스케줄링

09. this

일반 함수의 this는 호출 위치에서 정의

화살표 함수의 this는 자신이 선언된 함수(렉시컬) 범위에서 정의

'Language > JavaScript' 카테고리의 다른 글

티스토리툴바

[JS] 09. 함수

[JS] 09. 함수

01. 선언과 표현 그리고 호이스팅

호이스팅 ( Hoisting )

함수 선언문

함수 표현식

02. 반환 및 종료

03. 매개변수 패턴

기본값(Default value)

구조 분해 할당(Destructuring assignment)

나머지 매개변수(Rest parameter)

04. 화살표 함수 (Arrow function)

화살표 함수 특성

05. 즉시실행함수(IIFE)

Immediately-Invoked Function Expression

06. 콜백 함수

07. 재귀 (Recursive)

08. 호출 스케줄링

09. this

일반 함수의 this는 호출 위치에서 정의

화살표 함수의 this는 자신이 선언된 함수(렉시컬) 범위에서 정의

'Language > JavaScript' 카테고리의 다른 글

관련글

티스토리툴바