[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)
})
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 |