JS 함수

oching·2022년 4월 26일

FASTCAMPUS ST-FE 3기

JavaScript

목록 보기

4/11

FASTCAMPUS ST-FE 3기
PART3. Javascript Essentials - Ch3. JS함수

JS함수

01. arguments 객체

js는 매개변수의 역할을 수행하는 arguments라는 객체를 지원한다.

function sum (){
  console.log(arguments);
  return arguments[0] + arguments[1];
}
console.log(sum(7,3))

따로 매개변수를 지정하지 않아도 내장된 arguments로 접근해
인수를 받아 값을 처리하는 것을 알 수 있다.
하지만, 직관적이진않기에 매개인수를 따로 지정해주는 것이 좋다.

02. 화살표 함수

() => {} vs function (){}
화살표함수는 일부내용들을 생략해서
축약형으로 간단하게 표현할 수 있다.

기존의 함수표현방식

const double = function (x){
    return x * 2;
}
console.log('double: ', doble(7))  //14

화살표 함수방식

const doubleArrow = (x) =>{
  return x * 2
}
console.log('doubleArrow', dobleArrow(7));

2.1 실행문의 {}생략가능
const doubleArrow = (x) => x * 2;
console.log('doubleArrow', dobleArrow(7));
2.2 매개변수 하나 일 때 () 생략가능
const doubleArrow = x => x * 2;
console.log('doubleArrow', dobleArrow(7));
2.3 객체를 표현할 땐 ({})의 방식으로 소괄호로 감싸줘야한다.
const doubleArrow = x => ({
	name : 'oching'
});
console.log('doubleArrow', dobleArrow(7));

03. IIFE 즉시실행 함수

Immediately-Invoked Function Expression
만약 함수를 만들어 한번만 사용하는 경우,
굳이 함수를 선언하고 참조 하는 것은 불필요할 수 있다.
이럴 때 사용가능한 만들자마자 바로 한번 실행하는 함수의 형태이다.

( function(){} )()

익명함수를 ()소괄호안에 넣고 연달아 ()소괄호를 한번 더 작성한다.

( function(){} ())

()소괄호 안에 ()소괄호를 넣어 중첩되게 사용해도 가능하다.

04. 호이스팅

Hoisting
함수 선언부가 유효 범위 최상단으로 끌어올려지는 현상
DOM은 위에서 아래로 순서대로 렌더링되기때문에
함수의 호출구문이 함수의 표현구문보다 먼저 나오면 TypeError가 뜬다.
하지만, 함수 선언부는 런타임 이전에 선언문부터 준비를 마치기때문에
오류없이 출력해준다.

💡 함수의 표현 : TypeError

const a = 7;

double();

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

💡 함수의 선언 : 호이스팅 현상으로 오류 없이 출력
const a = 7;

double();

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

05. 타이머함수

시간을 따로 지정해 실행시키는 함수.
시간은 ms단위이며 1000ms = 1s를 의미한다.

setTimeout(함수, 시간)  //일정시간 후 함수 실행
setInterval(함수, 시간)  //시간 간격 마다 반복적으로 함수 실행
clearTimeout()  //설정된 Timeout함수를 종료
clearInterval()  //설정된 Interval함수를 종료

5.1 setTimeout(함수, 시간)

setTimeout( function(){
  console.log('hi');
}, 3000)

3초 뒤에 익명함수로 표현된 실행문 호출.
참고로 화살표함수로 표현하면,

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

5.2 clearTimeout() : setTimeout함수 종료시키기

const timer = setTimeout( () => {
  console.log('hi');
}, 3000);
>
const h1El = document.querySelector('h1');
h1El.addEventLIstener('click', () => {
  clearTimeout(timer)
})

timer 라는 변수에 setTimeout 지정해둔 함수를 넣고,
clearTimeout()의 소괄호 안에 timer를 넣어
setTimeout의 시간 흐름을 중지시킨다.

5.3 setInterval(함수, 시간)

setInterval( function(){
  console.log('hi');
}, 3000)
>

3초 간격으로 익명함수의 실행문 호출.
참고로 얘도 화살표함수로 표현하면,

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

5.4 clearInterval() : setInterval함수 종료시키기

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

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

timer 라는 변수에 setInterval지정해둔 함수를 넣고,
clearInterval()의 소괄호 안에 timer를 넣어
setInterval의 시간 흐름을 중지시킨다.

06. 콜백

callback
함수의 인수로 사용되는 함수
특정한 실행 위치를 보장해주는 데 많이 활용된다.

callback함수를 사용하지않았을때 실행순서

function timeout (){
  setTimeout ( () => {
    console.log('hi');
  }, 3000 )
}
>
timeout();
console.log('done');

setTimeout이 있어 timeout의 실행결과가 더 나중에 출력된다.

callback함수로 실행순서를 제어할 수 있다.

function timeout (cb){ //timeout에 콜백함수를 인수로 사용하니, 매개변수를 받아줘야함
  setTimeout (() => {
    console.log('hi');
    cb(); //인수로 함수를 받아 내가 보장하고싶은 실행 순서에 실행시킨다. 
  }, 3000)
}
>
timeout(() => { //timeout의 인수로 사용. 콜백함수
  console.log('done');
})
>