[js]함수

자바스크립트를 배우면서 가장 많이, 가장 당연하게 배워야 했던 게 함수가 아니었나 싶다.
수포자였던 나에게 함수라는 단어는 왠지 어렵게만 느껴졌었고 더듬더듬 어찌저찌 이런저런 코드 따라쳐보며 얼렁뚱땅 안면을 트고 공부해왔었다.
오늘에서야 함수란 어떤 것인지 대략적으로 정리해보려 한다.

함수의 세 가지 종류

• 함수 선언식(Function Declaration)
• 함수 표현식(Function Expression)
• 화살표 함수(Arrow Function)

함수를 만드는 데 필요한 재료들

• 함수 이름
• 매개 변수(parameter)
• return(void 함수 제외)
• 인자(argument)

위와 같은 재료들이 모여 함수를 만든다.
재료들로 함수를 만들어 보자👇

//함수 선언식(Function Declaration)
function func(x, y){
	return x+y
}
console.log(func(20, 10)) //30


//함수 표현식
const func = function(x, y){
	return x+y
}
console.log(func(20, 10)) //30


//화살표 함수
const func = () => x+y
console.log(func(20, 10)) //30

함수 호출

• 자바스크립트 함수는 매개변수와 인수의 개수가 일치하는지 확인하지 않는다. (즉, 매개변수와 인수의 개수가 일치하지 않아도 에러를 뱉지 않는다)
• undefined 변수가 들어올 경우 값 초기화 지정 가능

default value와 dynamic parameters

//1. default value
function print_add(x, y=10){
	console.log(x+y)
}
print_add(10,20,30) //30
print_add(10,20) //30
print_add(10) //20
print_add()//NaN

여기서 문제! print_add(10)는 어떻게 20이란 결과값을 받을 수 있을까?
그건 위에 매개변수에서 y에 10을 기본값으로 넣어주었기 때문에 x는 10을 받고 y는 따로 받을 값이 없으니 기본값을 꺼내어 사용한 것!
아, 그리고 이렇게 return값이 없는 함수를 void 함수라고 한다.

//2.dynamic parameters
function print_min(){
	//console.log(arguments);
    console.log(arguments[0]-arguments[1]);
}
print_min(10, 20, 30) //-10
print_min(10, 20) //-10
print_min(10) //NaN
print_min() //NaN

dynamic parameters는 매개변수 자리에 아무것도 넣어주지 않아도 실제로 넘어오는 매개변수값을 핸들링 할 수 있다.

function print_min(){
  console.log(arguments);
}
print_min(10, 20, 30)

요 예제가 반환한 값을 보면 아래와 같다.
[Arguments] { '0': 10, '1': 20, '2': 30 }

내부에 argument라는 변수가 있어서 여기에 넘어오는 변수들을 자동적으로 저장하는 동작을 하게 되는데 (참고로 arguments는 임의로 지정한 이름이 아니다) 이러한 arguments의 역할이 dynamic parameters를 가능하게 하는 것.

이렇게 정리는 해놨지만 다이나믹보단 디폴트로 함수를 호출하는 방법을 많이 사용한다.

함수 반환

• return 후의 코드는 수행되지 않는다!!

여지껏 공부하며 사실 return 뒤에 뭘 넣을 일이 없었어서 생각해본 적 없는데.. 그렇다. return 뒤의 코드는 동작이 되지 않는다.
즉, return의 역할로는 결과에 대한 처리 외에도 반복문에서의 break와 같은 역할을 한다고 할 수 있다.
vscode에서도 return 뒤의 코드는 흐릿하게 처리해 버린다.