JavaScript Essentials - ch.3 JS 함수(1) ~ (6)

1. 함수 복습

• 기본적인 함수 실행

function sum (x, y) {
	console.log(x + y)
}

sum(1, 3) // 4 출력

• 리턴을 사용한 함수 실행

function sum (x, y) {
	return x + y;
}

const a = sum(1, 4);

console.log(a) // 5 출력
console.log(sum(3, 3)) // 6 출력

=> 함수가 재사용이 될 때는 변수에 넣어두고 사용하는 것이 효율적

• 기명 함수와 익명 함수
  : 기명 함수는 표현, 익명 함수는 선언

• arguments
  : 매개변수를 지정하지 않아도 arguments를 사용해서 함수를 만들 수 있음
  => 매개변수가 너무 많아서 지정하기 어려울 때 유용함

2. 화살표 함수

const double = function (x) {
	return x * 2
}
console.log(double(3)) // 6 출력

const doubleArrow = x => x * 2
console.log(doubleArrow(3)) // 6 출력

같은 함수이지만 화살표 함수는 축약형으로 사용할 수 있어 좀 더 편리함

3. IIFE(즉시실행함수)

함수를 만들고 나서 한번만 실행 한 후에 더이상 실행 할 일이 없을 때 사용
즉시실행함수는 세미콜론을 꼭 찍읍시당

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

4. 호이스팅

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

const a = 7;

double();

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

=> double이라는 함수가 표현되기 전에 호출을 했기 때문에 오류 발생
=> 자바스크립트는 위에서 아래로 읽혀지기 때문

const a = 7;

double();

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

=> 함수선언식으로 바꾸면 호이스팅이 발생하여 오류가 발생하지 않음

5. 타이머 함수

• setTimeout(함수, 시간): 일정 시간 후 함수 실행

• setInterval(함수, 시간): 시간 간격마다 함수 실행

• clearTimeout(): 설정된 Timeout 함수를 종료

• clearInterval(): 설정된 Interval 함수를 종료

const timer = setTimeout(() => {
	console.log('hi');
}, 3000);

const h1El = document.querySelector('h1');
h1El.addEventListner('click', () => {
	clearTimeout(timer);
};

const timer2 = setInterval(() => {
	console.log('hi');
}, 3000);

const h1El = document.querySelector('h1');
h1El.addEventListner('click', () => {
	clearInterval(timer2);
};

6. 콜백

함수의 인수로 사용되는 인수
e.g. setTimeout, setImterval,,,

function timeout (cb) {
	setTimeout(() => {
    	console.log('hi'); // 첫 번째 출력
        cb(); // 두 번째 출력
    }, 3000}
}
timeout (() => {
	console.log('gg');
})

=> 코드를 작성할 때 특정한 실행 위치를 보장할 수도 있음