SPACE RUMI

Hi, I am rumi. Let's Splattack!

[STUDY] 스터디/Deep Dive JS

js 함수 리터럴 / 화살표함수 / 콜백함수 / 고차함수 정의

백루미 2022. 11. 24. 13:57
반응형

함수 函數

지닐 함에 셈수를 쓴다.
함이 상자같은걸로 생각하면 편한데, 암튼 상자에 x y 를 넣으면 아웃풋이 뭔가 나오지않는가?
수학적으로 말하자면 Input을 받아 Output을 내보내는 과정이다.

값의 성질을 가진 객체를 일급객체라하는데, JS에서 함수는 일급객체다. 함수를 값처럼 쓸수있다는 뜻이다.
함수는 객체 타입의 값이라서, 변수에 함수리터럴을 할당할수있다.

 

함수 표현식 

함수는 함수이름으로 호출하는것이 아닌, 객체를 가리키는 식별자로 호출한다.

let multi = function multipulate(x,y){ // 기명 함수 표현식
    return x * y;
}

multi(3,5) // 15
multipulate(3,5) // Uncaught ReferenceError: multipulate is not defined

 

함수 선언문

함수 선언문은 암묵적으로 식별자를 함수이름으로 생성한다.

function mul(x,y){ // 함수 선언문
    return x * y;
}

 

함수 표현식과 함수 선언문의 차이점

함수 선언문으로 정의하면 선언이전에 호출해도 잘 작동하지만
함수 표현식으로 정의하면 선언이전에 호출할수없다.

mul(2,5); // 10

function mul(x,y){ // 함수 선언문
    return x * y;
}
multi(2,5) // multi is not defiend

let multi = function multipulate(x,y){ // 기명 함수 표현식
    return x * y;
}

 

함수도 호이스팅된다

함수 선언문으로 정의하면 호이스팅이 된다.
함수표현식은 런타임에 평가되므로, 함수표현식의 함수리터럴도 할당문이 실행되는 시점에 평가되어 함수 객체가 된다.
즉, 함수표현식으로 정의하면, 변수 호이스팅이 발생하는것이다.

 

화살표함수

화살표함수는 항상 익명함수로 정의한다.
선언문과의 차이점은.. this 바인딩 방식이 다르며, 화살표 함수는 prototype property가 없고, arguments객체를 생성하지않는다.

const add = (x,y) =>{
	return x + y; // 반환문
}

add(10,5) // 15

 

매개변수와 인수

매개변수 2개인데 인수 1개만 던지면? => undefiend가 들어감
매개변수 2개인데 인수 3개를 던지면? => 일단 계산하고, 맨마지막 하나는 arguments property로 보관

function calc(x, y){ //매개변수 x, y 2개
	return x * y
}

calc(2) // 2 * undefiend = undefiend
calc(2,5,4) // 2*5 = 10

 

반환문 (return)

반환문은 함수 내부에서만 쓸수있다. (전역사용 X)
반환문 이후의 문은 실행되지 않는다.
반환문을 생략하면 암묵적으로 undefiend가 반환된다.

 

즉시실행함수

한번만 호출되며 다시 호출할수없다.
따라서 즉시실행함수는 보통 익명함수로 쓴다.(식별자가 무의미)
즉시실행함수는 반드시 그룹연산자 ()로 감싸야한다.

(function (){
   let a = 8
   let b = 9
   return a*b 
}()) // 72

 

재귀호출함수

자기자신을 다시 호출하는 함수. 무한 재귀호출하므로 반드시 탈출조건을 작성한다.
대부분 for, while문으로 대체가능하다. 따라서 재귀함수를 써야 가독성이 더 좋은 상황에서만 사용한다.

const count = (n) =>{
    if(n < 0) return;
    console.log('count:',n);
    count(n-1);
}

 

콜백함수

함수의 매개변수를 통해서 다른 함수의 내부로 전달되는 함수. 제어권을 위임한다.
콜백함수는 고차함수에 의해 호출된다.

const repeat = (count, func) => { // 고차함수
	for(let i=0; i<count; i++){
    	func(i)
    }
}

const print = (i) => { // 콜백함수
	console.log(i)
}

repeat(3, print) // 0 1 2

 

고차함수

매개변수를 통해 콜백함수를 전달받은 함수.
배열메서드인 forEach, filter , map , reduce가 고차함수이다.

반응형