자바스크립트 js 함수 정리

ggoggori_._·2021년 4월 22일
0

javascript

목록 보기
4/4
post-thumbnail

오늘은 자바스크립트 문법 중 함수에 대해서 공부한 것을 정리해보려고 한다.

자바스크립트의 함수는 수학에서의 y = f(x)와 같이, 입력에 대해서 원하는 출력을 반환하도록 설정할 수 있는 기능이다.

원하는 기능의 함수를 정의하면 추후에 반복해서 그 기능을 사용할 수 있기 때문에 반복되는 코드를 함수로 정의하면 효율적인 코드를 작성할 수 있다.

크게 3가지로 정의하는 방법을 나눌 수 있다.

선언함수

function 함수이름(매개변수) {
함수 기능
};

위와 같은 형식으로 함수를 정의할 수 있다.
함수를 정의하면 해당 함수를 호출하여 그 기능을 여러번 재사용할 수 있다.

함수이름();

위와 같은 식으로 정의한 함수의 기능을 사용할 수 있다.
코드를 통해 살펴보자!

funtion func(){
	console.log('기본적인 함수 생성방법입니다.');
}
func();

>>>	기본적인 함수 생성방법입니다.

func이라는 이름의 함수를 정의했다.
기능은 '기본적인 함수 생성방법입니다.'라는 텍스트를 출력하는 것이다.

func()으로 정의한 함수를 호출하면 정의된 함수내에 작성한 기능을 사용할 수 있는 것을 확인할 수 있다.


익명함수

함수를 쉽게 정의할 수 있는 방법이다.
함수의 이름을 정의하지 않고 변수에 지정하고, 해당 변수를 호출하면 함수의 기능을 사용할 수 있다.

let func = function(){console.log('익명함수 생성 방법입니다.')}

func();

>>>	익명함수 생성 방법입니다.

화살표함수

익명함수보다 더 간단하게 함수를 정의할 수 있는 방법이다.

() => {}

위와 같은 방식으로 선언하고, 사용할 수 있다.
하나의 표현식만을 리턴하는 함수일 때는 중괄호마저 생략이 가능하다..!

let func = () => console.log('화살표함수 생성방법입니다.')

func();

>>> 화살표함수 생성방법입니다.

중괄호를 생략한 화살표함수 사용법이다.

let func = () => {
  console.log('화살표함수 생성방법입니다.')
  console.log('화살표함수 생성방법입니다.')
}

func();

>>> 화살표함수 생성방법입니다.
    화살표함수 생성방법입니다.

중괄호를 포함한 화살표함수 사용법이다.


매개변수가 있는 함수

function 함수이름(매개변수) {
함수 기능
};

앞서서 기본함수를 정의하는 방법에 대해서 살펴보고, 그 사용에 대해서도 코드를 통해 보았는데 '매개변수'는 사용하지 않았다.
'매개변수'가 포함된 함수를 정의하고, return 을 사용해서 그 값을 반환하는 코드를 작성해본다.

function bitcoin(money){
    money = money * money;
    return money;
};

let bitcoinWallet = bitcoin(1000);

console.log(bitcoinWallet);

>>> 1000000

money를 매개변수로 받는 bitcoin이라는 함수를 정의했다.
함수 내에서 money에 다시 money를 곱하는 기능을 수행하고 그 결과 값을 반환하는 함수이다.

매개변수로 입력된 1000에 다시 1000이 곱해져서 return된 money는 1000000이고, 그것을 bitcoinWallet이라는 변수에 입력했다.

console.log(bitcoinWallet);을 실행하면 1000000의 결과를 확인할 수 있다.


콜백함수

콜백함수란 함수의 매개변수로 전달되는 함수이다.
callback이 무엇인지에 대해 간단한 정리만 하고자한다.

선언함수와 문법상 차이가 있는 것은 아니고, 정의되는 방식에 특이한 사항이 있는 것이다.

function func(callback) {
callback()
};

위와 같은 방식으로 정의되는데, func 함수의 매개변수로 callback이 정의되었다. 이 callback으로 함수를 사용하게 되면 그것이 바로 callback함수이다.


function bitcoin(callback){
    callback()
}

bitcoin(function(){console.log(100000)})

>>> 100000

위의 예제에서는 bitcoin이라는 함수의 매개변수로 입력된 function(){console.log(100000)}가 callback함수이다! 이렇게 익명함수로 정의할 수도 있고 미리 정의된 함수로도 사용할 수 있다.


0개의 댓글