06_자바스크립트 : 함수 (화살표함수, 순수함수, 고차함수, 콜백함수, 재귀함수,...)

---

함수 정의

 

---

 

1. 함수 선언문

함수 선언문에서는 함수의 이름을 생략할 수 없음
function hello(name) {
    return `${name}님 안녕하세요!`;
}

함수 호출
console.log(hello('홍길동'));
=> 홍길동님 안녕하세요!

 

 

 

2. 함수 표현식

- 함수 리터럴로 생성한 함수 객체를 변수에 할당할 수 있음.

함수 표현식에서는 함수명을 생략 가능
var hello = function (name) {
    return `${name}님 안녕하세요!`;
}

식별자로 함수를 호출 / 함수명으로 호출은 불가능
console.log(hello('홍길동'));

 

 

 

3. 함수 호이스팅

- 함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 것

-  변수 할당문의 값은 할당문이 실행되는 시점, 즉 런타임에 평가 되므로 함수 표현식의 리터럴도 할당문이 실행되는 시점     에 평가 되어 함수 객체가 된다.

- 함수 표현식으로 정의한 함수는 반드시 함수 표현식 이후에 참조하고 호출해야 한다.

 

console.log(hello('홍길동'));
// TypeError: hi is not a function
console.log(hi('홍길동'));

함수 선언문
function hello(name) {
    return `${name}님 안녕하세요!`;
}

함수 표현식
var hi = function(name) {
    return `${name} 안녕~`;
}

 

 

 

---

함수 호출

 

---

 

1. 매개 변수와 인수

 

- 매개변수는 함수 몸체 내부에서만 참조 가능

- 모든 인수는 암묵적으로 arguments 객체의 프로퍼티로 보관 됨.

function hello(name) {

    console.log(name);
.
    console.log(arguments); =>가변인자 함수 구현시 활용

    return `${name}님 안녕하세요!`;
}
(x) console.log(name); 함수 몸체 외부에서 참조x

var result = hello('홍길동');
console.log(result);
=> 홍길동
   [Arguments] { '0': '홍길동' }
   홍길동님 안녕하세요!

 

 

 

 

- 함수는 매개변수의 개수와 인수의 개수가 일치하는지 체크하지 않음

- 인수가 부족해서 할당되지 않은 매개변수의 값은 undefined

result = hello();
console.log(result);
=> undefined
   [Arguments] {}
   undefined님 안녕하세요!

 

 

 

 

 

- 매개변수보다 인수가 더 많은 경우 초과된 인수는 무시

result = hello('유관순', '신사임당');
console.log(result);
=> 유관순
   [Arguments] { '0': '유관순', '1': '신사임당' }
   유관순님 안녕하세요!

 

 

 

 

 

- 인수를 전달하지 않거나 undefined를 전달하면 매개변수 기본 값이 동작

function hi(name = '아무개') {
			
            return `${name} 안녕~`;
}

매개변수 기본값 활용
result = hi(); <- 인수전달 하지않음
console.log(result);
=> 아무개 안녕~ <- 기본값 활용되어 출력

 

 

2. 반환문(retrun)

 

- 반환문 이후의 문은 실행x 

- 반환문은 리턴 키워드 뒤에 오는 값을 반환함

- 반환 값을 명시적으로 지정하지 않으면 undefined 반환

- 반환 값이 없을 시 반환문 생량 가능(undefined 반환)

 

 

 

---

화살표 함수

 

---

 

1. 화살표 함수 기본 문법

- function 키워드 대신 화살표를 사용해 간략하게 함수 선언 가능

- 화살표 함수는 항상 익명 함수로 정의

- 본문이 한줄인 함수를 작성할 때 유용함.

var message;

(1) 기존 function 
message = function () {
    return "Hello World!";
};

(2) function 키워드 생략 가능
message = () => {
    return "Arrow Function!";
};

(3) 명령문이 하나만 있을 경우 중괄호 생량가능

- 함수 몸체 내부의 문이 값으로 평가 될 수 있는
표현식인 문이라면 암묵적으로 반환(return생략)
message = () => "Arrow Functions are simple!";

(4) 매개변수가 있을 경우
message = (val1, val2) => "Arrow " + val1 + val2;

(5) 매개 변수가 하나면 소괄호 생략 가능
message = val => "Arrow " + val;
매개변수가 없거나 여러 개일 경우 생략x

 

 

---

다양한 타입의 함수

 

---

 

1. 즉시 실행 함수

- 함수 정의와 동시에 즉시 호출되는 함수

- 단 한 번만 호출, 재호출 x

- 반드시 () 그룹연산자로 감싸야 함.

 

- 함수 이름이 없는 익명 함수를 사용하는 것이 일반적
(function(){
    console.log('익명 즉시 실행함수! 함수 정의와 동시에 호출!');
})();

- 함수 이름을 작성할수도 있지만 해당 이름으로 다시 호출할 수는 없음
(function hello(name){
    console.log('기명 즉시 실행함수! 함수 정의와 동시에 호출!');
    console.log(`${name}님 안녕하세요!`);
})('홍길동');

hello('유관순'); =>ReferenceError: hello is not defined

 

 

 

2. 재귀 함수

- 재귀 호출 :  함수가 자기 자신을 호출하는 것

- 재귀 함수 : 재귀 호출을 수행하는 함수

- 재귀 함수는 반복되는 처리를 위해 사용

- 반복문보다 재귀 함수 사용이 직관적으로 이해하기 쉬울 때만 사용 (무한 반복에 빠질 수 있기 떄문)

function factorial(n) {
    
    if(n <= 1) return 1;
    => n이 1 이하일 때 멈춤
   
    return n * factorial(n - 1);
    =>재귀 호출
}

 

 

 

3. 중첩 함수(= 내부 함수)

- 중첩함수 : 함수 내부에 정의 된 함수, 외부함수를 돕는 헬퍼 함수의 역할

- 외부함수 : 중첩 함수를 포함하는 함수

 

function outer() {
    var outerVal = '외부 함수';

    function inner() {
        var innerVal = '내부 함수';
        // 외부 함수의 변수를 내부 함수에서 참조할 수 있다.
        console.log(outerVal + "," + innerVal);
    }

    inner(); 
    => 호출
	
}

outer(); 
=> 호출

 

 

4. 콜백 함수

- 콜백 함수 : 함수의 매개변수를 통해 다른 함수의 내부로 전달 되는 함수

- 고차 함수 : 매개변수를 통해 함수의 외부에서 콜백 함수를 전달 받은 함수

- 콜백 함수는 고차 함수에 전달 되어 헬퍼 함수의 역할을 함

 

function increase(value) {
    return value + 1;
}

function decrease(value) {
    return value - 1;
}

 전달 받은 함수에 전달 받은 값을 적용 시켜주는 고차 함수
function apply(func, value){
    => 고차 함수는 매개변수를 통해 전달 받은 콜백 함수의 호출 시점을 결정해서 호출한다.
   
   => 콜백 함수는 고차 함수에 의해 호출 되며
       이 때 고차 함수는 필요에 따라 콜백 함수에 인수를 전달할 수 있다.
    return func(value);
}

고차 함수로 콜백 함수를 전달하며 호출한다.
console.log(apply(increase, 5));
=> 6
console.log(apply(decrease, 5));
=> 4

콜백 함수가 고차 함수 내부에서만 호출 된다면 
콜백 함수를 익명 함수 리터럴로 정의하면서
곧바로 고차 함수에 전달하는 것이 일반적이다.
console.log(apply(function(value){ return value ** 2 }, 5));
console.log(apply(function(value){ return value + 1 }, 5));
console.log(apply(function(value){ return value - 1 }, 5));
=> 25
6
4

 

 

 

5. 순수 함수와 비순수 함수

- 순수 함수 : 외부 상태에 의존하지도 않고 변경하지도 않는 함수

- 비순수 함수 : 외부 상태에 의존하거나 외부 상태를 변경하는 함수

- 함수 외부 상태의 변경을 지양하는 순수 함수를 사용하는 것이 좋음

 

var cnt = 0;


(1) 순수 함수
- 순수 함수는 최소 하나 이상의 인수를 전달 받으며 인수의 불변성을 유지함.
function increase(n) {
    return ++n;
}

- 순수 함수가 반환한 결과 값을 변수에 재할당해서 상태를 변경
cnt = increase(cnt);
console.log(cnt);
=> 1
cnt = increase(cnt);
console.log(cnt);
=>2


(2) 비순수 함수
- 외부 상태에 의존하며 외부 상태를 변경
function decrease() {
    return --cnt;   
}

- 비순수 함수는 외부 상태(cnt)를 변경하므로 상태 변화를 추적하기 어려움
cnt = decrease();
console.log(cnt);
=> 1
cnt = decrease();
console.log(cnt);
=> 0