함수

GoGoDev·2022년 1월 10일

JS & TS

목록 보기

4/11

함수는 단순히 생각하면 계산과 결과를 묶는 것이다. 그 코드를 활용하기 위해 묶는 것이고, 코드를 통해 나온 결과를 볼 수 있는 것이 함수이다.

이름이 없는 함수

function fn1() { // 함수 정의문
	return 100;
}

const fn2 = function () { // 함수 정의식(식에는 ;가 꼭 붙어야한다.)
	return 100;
};

fn(); // 100

함수에 이름이 없으면 함수를 호출할 수가 없고 값을 return 받을 수 없다.
하지만 JS에서는 함수를 값으로 취급한다.
값으로 취급한다는 뜻은 변수에 넣을 수 있다는 것을 의미한다.
fn이라는 값에 함수를 넣어 변수처럼 사용할 수 있다.

즉시 실행 함수

(function() {
	console.log('즉시 실행 함수 호출');
})();

즉시 실행 함수는 함수를 먼저 만들고 그 함수를 값으로 취급한 후, '()' 호출 구문을 통해 호출된다.
즉시 실행 함수는 함수를 값으로 취급하고 호출한 후 종료가 된다.
어플리케이션 실행동안 단 한번만 실행시키고 싶은 함수를 만들고 싶으면 즉시 실행 함수로 만들면된다.

가변 인자

function sum(a,b) {
	let s = 0;
    for(let i = 0; i < arguments.length; i++){
    	s += arguments[i]
    }
}

const abcSum = sum(10, 20, 30,40); // 100

arguments는 함수에 전달되는 인수들을 모아놓은 배열 형태이다.
sum()함수에 들어온 (10,20,30,40) 인자들이 arguments 안으로 들어오게 된다.
sum(a,b)함수에 인자는 2개밖에 없지만 호출할 때, 인자를 2개 이상 넣어도 JS에서는 동작하기는 한다. 이렇게 인자가 가변적으로 있을 때에는 가변인자를 사용한다.

function sum(a,b, ...arguments) {
	let s = 0;
    for(let i = 0; i < arguments.length; i++){
    	s += arguments[i]
    }
    return s;
}

const abcSum = sum(10, 20, 30,40); // 100

a,b에는 10,20이 순서대로 들어가고 그 이후의 값들은 ...arguments 전개 파라미터로 들어가 데이터를 가변적으로 사용할 수 있다.

화살표 함수

const sum = (a,b,...arguments) => {
	let s = 0;
    for(let i = 0; i < arguments.length; i++){
    	s += arguments[i]
    }
    return s;
}

const pTen = x => x + 10; // 한 줄 코드 (인자가 하나이면 소괄호 생략 가능)

기본 함수와 많이 유사하다. 하지만 화살표 함수는 기본 함수보다 간단한 코드로 나타낼 수 있다.

Generator function (생성기 함수)

function* gen() {
	yield 10;
    yield 20;
    return 30;
}

const g = gen();

g.next(); // yield 10으로 이동
g.next(); // yield 20으로 이동
g.next(); // yield 30으로 이동

제네레이터 함수는 특별하다. 일반 함수의 작동 방식과 다르다.
일반 함수를 호출하면 그 함수로 진입해서 계산을 하고 결과를 반환하고 종료한다.
제네레이터 함수는 최초에 호출하면 함수가 실행되지 않고 실행 준비 상태에 들어간다.
그러고 함수를 실행할 도구를 담은 객체 하나를 반환한다.
이 도구를 통해 함수를 실행했다가 멈췄다가 할 수 있다.

제네레이터 함수는 return을 사용할 수 있지만 yield라는 키워드도 사용할 수 있다.
next()라는 명령어를 통해 gen()함수안의 yield로 이동한다.