[JavaScript] 함수

Parkboss·2022년 3월 13일

JavaScript

목록 보기

13/29

함수

함수는 다수의 명령문을 코드 블록으로 감싸고, 하나의 실행 단위로 만든 코드의 집합
유사한 동작을 하는 코드를 하나로 묶어, 범용성을 확대시킨 블록 코드
함수는 정의 부분과 호출 부분으로 구성
함수는 가급적 한가지 일만 하며, 매개 변수는 최대 3개 이내로 작성을 권장

함수는 방정식과 같다.
1. function add (x, y) 에서 add 함수이름이다. (함수 이름은 필수이다.)
2. input을 두개 이상 매개 변수 ( x, y) 에 넣을것이다. ( 매개 변수는 옵션이다.)
3. return x + y; 결괏값을 변환할 것이다. (반환 결과는 옵션이다.)
4. 함수 호출 부분에서 정의했던 함수 이름(add)으로 (10 ,20) 호출한다.
5. add의 x = 10, y = 20 값을 호출할 때 return x + y 에서 10, 20 값이 들어간 상태에서 return 코드 문이 실행된다.
6. x + y를 더해서 그 값을 return 해라라는 뜻이다. 10+20 = 30이라는 값이 출력된다.

함수 정의

함수 호출

자바스크립트 함수는 매개변수와 인수의 개수가 일치하는지 확인하지 않는다.
ES6에서 도입된 기본값을 통해 undefined 변수가 들어올 경우 값 초기화 지정 가능

default value 예제를 보도록 하자!
1. print_add(); // output: NaN이 나온 이유는?
2. x , y의 undefined의 자료가 들어가서 undefined 끼리 덧셈을 하려니깐 NaN이 나온것이다.
3-1. function print_add (x, y = 10) {
console.log(x + y); }
print_add(10); // output: 20
왜냐?
y가 undefined 이지만 기본값 x, y = 10 설정이 되어 y = 10이다.
10 + 10 = 20으로 출력이 된다.
3-2. 여기서 매개변수의 값을 지정하지 않았을때의 출력 값은 달라진다.
function print_add (x , y ) {
console.log (x + y): }
print_add(10); // output: NaN
왜냐?
print_add(10); x는 10이지만 y는 undefined 이기 때문에 두 값을 더하면 NaN이 나온다.
4. print_add(10,20,30); // output 30이다.
왜냐?
30의 매개변수의 이후의 값은 넘어오게 되지만 x,y에서 핸들링을 하지 않기 때문에 30 값은 무시! 그래서 x + y= 30 값이 출력된다.

dynamic parameters 예제를 보도록 하자!
1. 매개변수를 쓰지 않더라도 값은 출력이 된다. 그 이유는? 함수를 수행할때 (agruments)내부에 변수가 있다.
2. print.min(10, 20, 30);에 맞춰서 그 값이 넘어온다. {'0':10, '1':20, '2':30}

함수 반환

return후 코드는 수행되지 않으며, default return value는 undefined

1. 실제 add 호출 한 다음에 add를 저장하지 않는다.
2. let result = add 라는 변수값에 저장한다.
3. 변환 값이 add 부분에 30; 설정이 되고 result 변수의 30;이 설정된다.
4. return = break return 뒤에 코드는 실행하지 않는다.

함수는 조건문과 같이 쓰인다.

재귀함수

함수 스스로 자신을 참조해 호출하면서 동일한 코드가 계속적으로 수행되는 함수 호출 방법
재귀 함수는 특정 조건이 됐을 때 자신을 그만 호출되도록 제한하는 exit code가 필요

재귀함수 예제

제동 장치가 필요한 이유?
ex) function recursive(num) {
recursive(num);
}
recursive(3);

1. recursive 함수 호출 3이 num에 3이 들어온다.
2. 3값이 다시 recursive가 된다. 계속 반복을 하게 된다.
3. 3이라는 값이 반복되면서 누적이 되어서 stack이 터지고 stack flow가 된다.
여기서 제동 장치가 필요하다!
4. recursive(num - 1); 제동 장치를 넣어 if (num === 0) 일때 종료하게 만든다.
5. 실제 3이지만 점진적으로 값이 출력된다.

내 피셜 해석이다.
1. recursive (3); = num = 3이다.
2. if (num == 0) return; 여기서 3 == 0은 false여서 첫 출력 값은 3이 된다. 그리고 3이라는 값으로 recursive(num - 1)로 올라간다.
3. 여기서 값은 3-1 =2가 되어서 2의 값이 (2 == 0)으로 올라가서 다시 false 된다. 그래서 2 값이 출력된다.
4. 그리고 2이라는 값으로 recursive(num - 1)로 올라간다.
5. 2-1 =1 값이 되어서 1의 값이 (1 == 0)으로 올라가서 다시 false 된다. 그래서 1 값이 출력된다.
6. 그리고 1이라는 값으로 recursive(num - 1)로 올라간다. 1-1 = 0 이다. 0 == 0 이 되어 코드가 종료된다.
7. 1 2 3 점진적으로 나오는 이유는 return이 종료되고 나왔기 때문이다.

콜백 함수

콜백 함수 (Callback Function)란 다른 함수의 매개변수로 전달되어 수행되어지는 함수
고차 함수 (Higer-order Function)란 매개변수를 통해 함수를 받아 호출하는 함수

콜백 함수는 고차 함수의 매개변수로 사용할 수 있다.
higher_order_func(callback_func); 고차 함수를 수행하지만 그때 매개변수인 callback_func 주솟값이 들어간다.

콜백 함수 예제

콜백 함수를 통해서 수행할 함수를 다이내믹하게 변경할 수 있다.

call by *

call by value
- 값에 의한 복사로 함수 내에서 매개 변수 값을 변경 시켜도 영향이 미치지 않는다.
- 원시 타입 (primitive type)을 매개 변수로 넘겼을 때 발생
1. add에서 매개변수 b를 받는다.
2. b자리에 a를 넣는다. add(b); --> add(a);
3. a=1 은 매개변수 b 에 1이 넘어온다. b=1
4. b=1 일때 값에 대한 복사가 일어난다.
5. {b = b + 1; }; --> b에 대한 연산을 수행해도 실제 console.log 값에 영향을 받지 않는다.
6. b = 2 여도 a와 b는 각각 다른 메모리 영역이다.
7. b가 업데이트 되어도 a가 영향을 안받는다.
call by reference
- 주소에 대한 복사로 함수 내에서 매개 변수 내 값을 변경시키면 원본 데이터에도 영향을 받음
- 객체 타입 (object type)을 매개 변수로 넘겼을 때 발생
  
  1. 객체 타입은 또 다른 메모리 영역이 있다. 즉, 객체는 여러가지 값을 담을수 있다.
  2. a 는 v : 1 주소를 가르킨다.
  3. add의 함수에서 b.v -> v : 1 접근이 가능하다.
  4. add 함수를 호출하게 되면 b라는 곳에 a를 복사한다.
  이때, 주솟값이 복사된다. (call by 처럼 값이 복사가 아니다.)
  5. function (b) {b.v = b.v + 1; }; 함수내에서 b를 건들게 된다.
  b = 1 이였지만 b = 1+1 = 2라는 값을 b에게 업데이트한다.
  6. v = 1이라는 객체에 v = 2 로 변경된다.
  7. 함수가 객체에 영향을 미쳐서 a가 바라보고 있는 동일한 객체에서 v를 출력했을 때 2로 나오는 것을 볼 수 있다. 주솟값의 참조 값이 복사가 되어 그 참조에 대해서 업데이트가 이루어졌다.