함수(function)
자바스크립트에서의 함수는 엄청나게 중요하다. 객체와 함수만 정확히 알아도 js의 많은 부분을 알았다고 할 수 있을 것이다. 스코프, 실행 컨텍스트, 클로저, 생성자 함수, 메서드, this, 프로토타입, 모듈화 등이 함수와 연관이 된다.
프로그래밍언어에서 함수란
프로그래밍 언어에서 함수는 수학적인 함수와 개념 자체는 비슷하다. 입력을 받아 출력을 내보내는 일련의 프로세스를 뜻한다.
정의는 일련의 과정을 문(statement) 로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다.
- 매개 변수(parameter) : 함수로 전달받는 변수
- 인수(argument) : 입력하는 값
- 반환(return) : 반환 값
함수를 사용하기 위해선 해당 함수를 호출하고 매개 변수에 인수를 전달하고 코드 블록의 일련의 문들을 실행 후 반환값을 돌려 받아야 한다.
함수 사용의 이유
- 코드의 재사용
- 코드의 신뢰성
- 코드의 가독성
위의 이유들이 모두 별개의 이유는 아니다. 기본적으로 함수는 코드의 재사용성을 높힌다. 그리고 코드를 재사용하면 사람이 작성해야 되는 코드의 양이 적어지기 때문에 실수가 적어지게 되고, 신뢰성이 올라가게 된다. 또한 적절하게 작성된 함수 사용은 코드를 잘 조각낼 수 있게되고, 이는 가독성을 많이 올릴 수 있게 한다.
함수의 정의
변수는 선언한다 라고 이야기했고, 함수의 경우 정의한다라고 한다.
함수는 객체 타입의 값이다. 이 말은 함수가 변수에 할당이 될 수 있다는 뜻이다. 또한 이 변수 식별자를 통해 변수처럼 활용될 수 있다.
함수 선언문
function func1(){
}함수는 위의 형식으로 작성될 경우 함수 선언문이라고 한다.
함수 표현식
var a = function (){};함수는 위처럼 작성될 경우 함수 표현식이라고 한다.
차이점
자바스크립트에서의 함수 이름은 함수 몸체 내에서만 참조할 수 있는 식별자다. 이 문장의 의미를 다시 한번 생각해볼 필요가 있다.
function func1(){
}// 함수 선언문이런 함수가 있다고 했을 때, 우리는 당연히
func1();이렇게 호출해서 사용하곤 한다. 그리고 이 func1의 함수명이 호출될 것이라고 생각했다.
하지만 실제 작동은 이렇게 되지 않는다는 것이다. func1이라는 함수 이름은 내부에서만 참조할 수 있다. 즉, 재귀 함수를 만들때만 사용할 수 있다는 것이다.
그럼 실제로는 어떻게 작동할까.
function func1(){
}
var func1 = function func1(){}; // 실제 작동 - 함수 표현식자바스크립트 엔진은 함수 선언문이 있을 경우, 런타임에서 암묵적으로 함수 이름과 같은 변수를 생성해서 함수를 할당한다. 즉 호출하는 것은 함수 이름이 아니라 함수 이름과 같은 변수이고, 여기에 들어있는 함수가 실행되는 것이다.
이 때문에 함수 선언문은 함수 이름을 생략하는 익명함수로 작성되면 안된다.
이를 증명하기 위한 예제로
function foo(){
console.log("foo");
}
foo(); // foo
(function bar() {console.log("bar");});
bar(); // Reference Error함수 선언문에 소괄호를 써주면 해당 내용을 선언문으로 인식하지 않고, 함수 리터럴로 인식하게 된다. 즉 값으로 인식하는 것이다. 때문에 해당 선언문은 표현식으로 작동되고, 어떤 변수에도 할당되지 않았기 때문에 실행되고 끝나버린다. 그래서 bar(); 로 호출하려고 했을 때, 메모리에 할당되지 않아서 찾을 수가 없다.
1급 객체
자바스크립트의 객체는 1급 객체이다.
- 객체를 변수에 할당할 수 있고,
- 객체를 매개변수의 인수로 넘길 수 있고,
- 객체를 반환할 수 있으면
이를 1급 객체라고 한다. 그리고 자바스크립트의 함수는 객체이기 때문에 1급 객체가 된다. 즉, 함수는 변수에 할당되고, 인수로 넘겨질 수 있고, 반환될 수도 있다. 이는 함수형 프로그래밍을 하는데 있어서 매우 중요한 요소이다.
함수 호이스팅
함수는 변수(var)와 다르게 동작한다. 함수 표현식의 경우 변수에 할당하는 것을 명시하기 때문에, 변수 호이스팅이 일어나지만, 함수 선언문의 경우 함수 호이스팅이 일어난다. 변수와 마찬가지로 함수 선언문은 런타임 이전에 객체가 생성되고, 함수 이름과 똑같은 식별자를 생성하고 할당한다. 하지만 변수와 다른 점은 변수의 경우 undefined를 할당했지만, 함수는 함수 객체를 그대로 할당한다.
console.log(func1); // func1()
console.log(func2); // undefined
function func1(){
}
var func2 = function(){
}이 func1 함수는 정상적으로 함수 객체를 출력한다. 호이스팅 되어 이미 런타임 이전에 함수 객체가 만들어졌고, 해당 함수 이름과 같은 식별자를 만들어 할당했기 때문이다.
반면 아래 함수 표현식은 변수만 호이스팅이 일어난다. 이 함수는 런타임 이전에 할당되지 않는다.
함수 호이스팅은 함수를 코드 순서 상 선언되지 않은 함수를 호출할 수 있게 만든다. 때문에, 자바스크립트가 처음 만들어졌을 때 에러를 최대한 발생시키지 않으려는 노력이 이런 결과를 만들었지만, js가 위상이 높아져 프로그래밍 언어로서의 자리를 잡기 위해서는 함수 표현식을 사용하는 것이 좋다고 한다.
생성자 함수
차후 정리 예정
화살표 함수
es6에서 새로 도입된 함수 표현 방식이다.
차후 정리 예정
콜백 함수
콜백 함수는 자바스크립트에서 많이 사용되는 패턴이다. 콜백 함수는 함수에 인수로 전달되는 함수를 뜻한다. 또한 이 콜백함수를 매개 변수로 받는 함수를 고차함수라고 한다. 콜백함수는 고차함수에 의해 원하는 시점에 호출되어야 하므로, 함수 객체 자제를 전달해야 한다.
차후 추가 예정
