[JS] Ch 3. JS 함수

* 이 글은 강의를 들으며 개인적으로 정리하고 기록하기 위한 글입니다.

* 강의명 ) 프론트엔드 개발 초격차 패키지 Online

 

함수 복습

• 함수의 결과가 반복적으로 사용될 땐 변수에 담아서 사용하는 것이 유용
• 함수가 단일적으로 사용될 땐 바로 호출해서 사용
• 이후에 나오는 함수 표현과 함수 선언의 차이에 유의!

---

화살표 함수

// 그냥 함수
const double = function(x) {
	return x * 2
}
console.log('double: ', double(7))

// 화살표 함수 
const doubleArrow = (x) => {
	return x * 2
}
console.log('doubleArrow: ', doubleArrow(7))

• 화살표 함수는 기본적인 로직을 축약형으로 줄일 수 있음

// 축약 전
const doubleArrow = (x) => {
	return x * 2
}

// 축약 후
// 중괄호와 return 생략 
// 매개변수가 하나면 소괄호도 생략할 수 있음 
const doubleArrow = (x) => x * 2

• 축약형으로 객체 데이터를 반환하려면 소괄호로 감싸줘야 함

const doubleArrow = x => ({name: 'Heropy'})

---

즉시실행함수(IIFE, Immediately-Invoked Function Expression)

// 일반 함수
const a = 7
function double() {
	console.log(a * 2)
}
double;

// 즉시실행함수
// 소괄호를 바깥쪽에 위치
(function () {
	console.log(a * 2)
})()

// 소괄호를 안쪽에 위치 
(function () {
	console.log(a * 2)
}())

---

호이스팅(Hoisting)

• 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상

// 함수 표현
const a = 7

double()

const double = function() {
	console.log(a * 2)
}

==> 타입 에러 발생.

// 함수 선언 
const a = 7

double()

const double() {
	console.log(a * 2)
}

==> 에러 발생X. 호이스팅이 발생했기 때문.

---

타이머 함수

setTimeout(함수, 시간)	일정 시간 후 함수 실행 *시간=밀리세컨즈
setInterval(함수, 시간)	시간 간격마다 함수 실행
clearTimeout()	설정된 Timeout 함수를 종료
clearInterval()	설정된 Interval 함수를 종료

const timer = setInterval(() => {
	console.log('Heropy!')
}, 3000)

const h1El = document.querySelector('h1')
	El.addEventListener('click', () => {
	clearInterval(timer)
})

---

콜백 (Callback)

• 함수의 인수로 사용되는 함수

function timeout(callback) {
	setTimeout(() => {
		console.log('Hi!')
		callback()
}, 3000)

timeout(() => {
	console.log('Bye!')
})