자바스크립트 함수에 대해 알아보겠습니다. 이 글은 MDN과 mandeep1012님의 포스트를 토대로 쓰여졌습니다.
함수형 언어
함수형 언어는 무엇이 다른가?
자바스크립트의 함수형 언어 특징은 특히 브라우저에서 작동하도록 작성된 코드에서 더 중요하다. 함수가 실행의 기본 모듈 단위이기 때문이다.
웹 페이지에서 작동하도록 만들어진 모든 자바스크립트 코드는 함수 안에서 실행될 것이다.
다재다능하고 강력한 구조를 가진 함수는 아주 많은 유연성을 제공하고, 우리의 코드를 좌지우지할 것이다.
1종 객체로써의 함수
함수는 기본적으로 객체의 일종이다. 그 말은, 각각의 함수도 숫자나 스트링처럼 하나의 값이라는 것.
자바스크립트 객체의 기능적 특징들
- 리터럴로 생성될 수 있다.
- 변수, array의 element, 다른 객체의 property에 할당될 수 있다.
- 함수의 인자로 전달될 수 있다. (callback 개념)
- 함수의 return값으로 반환될 수 있다.
- 동적으로 생성된 프로퍼티를 가질 수 있다.
그리고 함수에는 호출될 수 있다는 특별한 기능이 있다.
()표현의 의미
쉼표로 구분된 매개변수(parameter)의 목록과 그 목록을 둘러싸고 있는 괄호. 매개 변수 목록은 없어도 되지만 () 표현은 반드시 있어야 한다. 화살표 함수의 경우, 함수의 본문이 한 줄일 경우에는 괄호를 생략 가능하다.
const func = ()=> {}
func()
// 정의되지도 않은 함수를 실행하려고 들면 에러가 난다.
lalala()method를 호출한 결과로 undefined가 나온다면, 그 method는 정의된 함수이다. 어떤 변수를 실행해 undefined가 나왔다는 것은 그 변수가 '호출할 수 있는 함수'에 해당한다는 것을 의미한다.
매개변수 (parameter & argument)
parameter은 함수를 정의할 때 같이 정의한, 함수가 받을 인풋의 이름. argument는 실제로 함수를 호출하고 실행할 때 인풋으로 넣는 값의 이름.
const func = (parameter)=>{
console.log(parameter)
}
func("argument") //
{} 표현이 갖는 의미
함수 본문. 함수 본문은 중괄호로 둘러싸여 있는 자바스크립트 구문이다. 본문은 비어있을 수 있지만 {}는 반드시 있어야 한다.
{}를 씀으로써 그 자체로 해당 함수는 자기만의 scope를 가지는 걸로 이해해야 한다. try, catch, if, else 등의 block scope에서 쓰이는 {}와 같은 걸로 생각해야겠다.
return이 가지는 의미
return은 함수 실행을 종료, 즉 현재의 call stack상에서 해당 execution context를 없애겠다는 의미이다. 그러면서 동시에 사용자가 짠 로직대로 값을 내뱉는다. 변수처럼. 만약 return이 없다면, 함수의 모든 line들을 읽고 실행한 후에 함수가 자동적으로 종료되는 걸로 알고 있다.
- return을 따로 명시해두지 않는다면 function은 디폴트로 undefined 값을 return한다.
const func = ()=>{
console.log("func function")
}
func() // undefined- return한 값은 호출자쪽에서 받는다.
- return은 함수 실행을 즉시 중단시킨다.
The first return statement immediately stops execution of our function and causes our function to return the value.
const crazyfunc = ()=>{
return true // 이 밑의 return문들은 모두 실행되지 않는다.
return false
return 1
}
crazyfunc() //true함수 선언식 VS. 함수 표현식
함수 선언식은 호이스팅이 가장 큰 차이점이다. 다른 코드들이 실행되기 이전에 호이스팅되어, 자바스크립트 엔진이 이미 값을 알 수 있다. 반면 함수 표현식은 호이스팅이 적용되지 않는다. 화살표 함수도 마찬가지이다.
또한 전역 스코프에서 선언했을 경우, 함수 선언식으로 선언한 함수는 window 객체의 프로퍼티가 된다. 이는 var을 이용한 함수 표현식도 마찬가지이다.
alert(foo()); // ERROR! foo wasn't loaded yet
var foo = function() { return 5; }
alert(var()); // Alerts 5. Declarations are loaded before any code can run.
function var() { return 5; }
화살표 함수
화살표 함수에서는 implicit return이라는 개념을 알고 있어야 한다. 코드가 한 줄일 때, 화살표 함수는 {}표현과 return문을 생략할 수 있다.
const func = function(){
return 100
}
const arrowFunc = () => 100
