함수란?
함수는 일련의 과정을 문장으로 쓰고 블록으로 감싸서 하나의 실행 단위로 정의한 것이다.
함수 내부로 입력을 전달받는 변수를 매개변수, 입력을 인수, 출력을 반환값이라고 한다.
함수는 몇번이든 호출할수 있으므로 코드의 재사용이라는 측면에서 매우 유용하다.
function multiple(parameter) {
console.log(parameter*1);
console.log(parameter*2);
}결론적으로, 키워드, 이름, 파라미터, 바디로 이루어진 객체이다.
함수의 사용법
(선언)
function cal(param1,param2) {
console.log(param1,param2);
return param1 * 10;
}
(호출)
cal(10,20)함수 deepdive
참조 블로그 링크텍스트
앞서 함수를 객체라고 표현했지만,
사용법에 있어서 다르다.
일반 객체는 호출할수 없지만, 함수는 호출이 가능하다는 점이 있다.
함수의 선언 방법에는 4가지 방법이 있다.
//함수 선언문, 함수 이름 생략 불가능
function plus(x,y) {
return x+y;
}
//함수 표현식, 함수 이름 생략 가능
let plus = function (x,y) {
return x+y;
}
//생성자 함수
let plus= new Function ('x','y','return x+y');
//화살표 함수
let plus = (x,y) => x+y;자바스크립트 엔진은 함수 선언문을 해석해 함수 객체를 생성한다.
생성된 함수를 호출하기 위해 이름과 같은 식별자를 암묵적으로 생성하고, 거기에 함수 객체를 할당한다.
let plus = function (x,y) {
return x+y;
}
console.log(plus(1,2));함수는 이름으로 호출하는 것이 아니라 식별자로 호출한다.
값의 성질을 갖는 객체를 일급 객체라고 하는데,
자바스크립트의 함수는 일급 객체이다.
그리고 변수에 할당 가능하다.
함수 선언문과 표현식
다음으로 선언문과 표현식의 차이를 알아보자.
console.dir(plus);
console.dir(minus);
console.dir(plus(2,5));
console.dir(minus(2,5));
function plus(x,y){
return x+y;
}
let minus =function (x,y){
return x-y;
}선언문인 plus는 호출되지만,
표현식인 minus는 호출되지않는다.
둘의 함수 생성시점이 다르기 때문이다.
선언문은 런타임 이전에는 함수 객체가 먼저 생성된다.
즉, 선언문은 이전에 호출하면 함수 호이스팅에 의해 호출이 가능하다.
표현식은 함수 호이스팅이 아닌 변수 호이스팅이 발생해 undefined가 나온다.
함수의 매개변수와 인수
함수에서는 매개변수와 인수가 같은 갯수인지 상관안한다.
인수가 매개변수보다 많다면 무시되지만
암묵적으로 argument객체의 property로 저장된다.
function plus(x,y) {
return x+y;
}
console.log(plus(1)); //NaN
console.log(plus(1,2,3)); //3또한 자바스크립트는 위의 특징과 매개변수의 타입을 사전에 지정하지 않는다.
그러므로 원하는 결과를 강제하려면 type of 으로 제약을 걸지만,
좀더 간편하게 ES6에서 도입된 매개변수 기본값을 사용하면
함수내에서 수행하던 인수 체크 및 초기화를 할수있다.
//런타임 이전 자바스크립트 엔진에 의해 undefined 할당되는 것을 막아줌
function plus(x=0,y=0,z=0) {
return x+y+z;
}
console.log(plus(2,3,4));함수응용법
만약, 한번만 사용하고 다시는 안쓰게 되는 함수가 필요하다면?
즉시실행함수 를 사용하면 된다.
const res = (function(a,b) {
return a*b;
}(3,5));
console.log(res);아마 이러한 자바스크립트 메서드의 특징으로
리액트의 useEffect가 동작하는것 아닐까... 라는 생각이든다.
또한 함수 내부에 또 다른 함수를 정의할수있다.
중첩함수 이다.
function parent() {
const x=1;
function child() {
const y =2;
console.log(x+y);
}
child();
}
parent()outer에는 변수한개와 단지 내부함수 실행문이 들어있고,
실질적인 계산결과는 inner에 들어있다.
추후 배우게 될 리액트의 부모-자식 관계와 관련있다고 생각한다.
부모-자식간 체인이 형성된 컴포넌트에서 부모는 자식의 매개변수(prop)을
비교적 자유로이 사용할수 있지만 형성되지 않는경우 어렵다.
콜백함수
마지막으로 콜백함수.
여러 경우에서 중요하게 다뤄지기 때문에 따로 목차로 내놓았다.
일단 정의는 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수 이다.
function repeat(n,f) { // 고차함수
for(let i=0;i<n;i++){
f(i);
}
}
let logALL = function(i){ //콜백함수1
console.log(i);
};
repeat(5, logALL);
let logODDS = function(i){ //콜백함수2
if (i%2!==0)console.log(i);
};
repeat(5, logODDS);매개 변수를 통해 함수 외부에서 콜백 함수를 전달받는 함수를 "고차함수"라고 한다.
함수의 변하지 않는 공통로직은 미리 정의해두고,
경우에 따라서 변경되는 로직은 함수 외부에서 함수를 선언한후
고차함수로 전달한다.
자바스크립트의 함수는 일급 객체라서
함수의 매개변수를 통해 함수를 전달할수 있다.
콜백함수는 고차함수에 의해 호출되며
고차함수는 필요에 따라 콜백 함수에 인수를 전달 할 수 있다.
