[JS] 5. Function
in JS
1. 함수
// 함수 정의
function add(x,y){ // 매개변수 option
return x + y; // return option
}
add(10,20) // 함수 호출
// 1. 함수 선언식
function add(x, y) {
return x + y;
}
// 2. 함수 표현식
const add = function (x, y) {
return x + y;
};
// 3. 화살표 함수
const add = (x, y) => x + y;
- 다수의 명령문을 코드 블록으로 감싸고, 하나의 실행 단위로 만든 코드의 집합
- 유사한 동작을 하는 코드를 하나로 묶어, 범용성을 확대시킨 블록 코드
- 정의 부분과 호출 부분으로 구성
- 가급적 한가지 일만 하며, 매개 변수는 최대 3개 이내로 작성을 권장
함수 호출
// default value
function print_add(x, y =10) {
console.log(x + y)
}
print_add(10, 20, 30) //30
// 3번째 인수 무시
print_add(10,20) //30
print_add(10) // 20
print_add() // NaN
// dynamic parameters
// 잘 사용하지 않는다.
// 명시적으로 위의 방법 사용
function print_min() {
console.log(arguments[0] - arguments[1])
}
print_min(10, 20, 30) // -10
print_min(10,20) // -10
print_min(10) //NaN
print_min() //NaN
function add(x,y){
return x + y
console.log("hello")
// return 이후의 코드는 실행되지 않는다.
// 그냥 return 하면 break 역할
}
let result = add(10,20)
console.log(result) //30
function checkAge(age) {
if (age>19) return true
else return false
}
console.log(checkAge(14)) // false
console.log(checkAge(20)) // true
- 자바스크립트 함수는
매개변수와 인수의 개수가 일치하는지 확인하지 않는다. - ES6에서 도입된 기본값을 통해 undefined 변수가 들어올 경우 값 초기화 지정 가능
2. 재귀 함수
function recurse(){
// function code
recurse()
}
recurse
// stack 자료구조
// 점진적으로 위로 쌓인다.
function recursive(num) {
if (num == 0) return
console.log(num)
recursive(num-1)
// 3 2 1
}
recursive(3)
function recursive(num) {
if (num == 0) return 0;
return num + recursive(num - 1)
// 3 + (2 + (1 + 0))
}
console.log(recursive(3))
// 6
function factorial(num) {
if (num == 0) return 1;
return num * factorial(num - 1)
// 3 * (2 * (1 * 1))
}
console.log(factorial(4))
// 24
- 함수 스스로 자신을 참조해 호출하면서 동일한 코드가 계속적으로 수행되는 함수 호출 방법
- 재귀 함수는 특정 조건이 됐을 때 자신을 그만 호출되도록 제한하는 exit code 가 필요 (
if(조건) return) - 반복문으로도 변환 가능하지만, 코드가 짧아지고 함수의 목적성에 맞춰 재사용이 가능하다는 장점
3. 콜백 함수
function callback_func() {
console.log("I'm callback func")
}
function higher_order_func(callback) {
console.log("I'm higher-order func")
callback()
}
higher_order_func(callback_func)
// callback_func 의 주소값이 들어간다.
// 매개변수로 함수도 옮길 수 있다.
// 매개변수로 넘겨지는 함수 === 콜백함수
// 매개변수로 함수를 실행하는 함수 === 고차함수
function add(x,y){
return x + y
}
function sub(x,y){
return x - y
}
function mul(x,y){
return x * y
}
function div(x,y){
return x / y
}
function calcalator(callback, x, y){
return callback(x, y)
}
console.log(calcalator(add, 7, 3))
console.log(calcalator(sub, 7, 3))
console.log(calcalator(mul, 7, 3))
console.log(calcalator(div, 7, 3))
- 다른 함수의 매개변수로 전달되어 수행되어지는 함수
- 고차 함수(Higher-order Function)란 매개변수를 통해 함수를 받아 호출하는 함수
call by value
let a = 1
let add = b => b = b + 1 //callee
// b = a = 1
// 각각 다른 메모리 영역이기 때문에 b가 업데이트 되도 a 값엔 영향을 끼치지 않는다.
add(a) //caller 2
console.log(add(a)) //2
// a의 값이 변하지 않기 때문에 2번 호출되도 값이 동일하다
console.log(a) //1
- 값에 의한 복사로 함수 내에서 매개 변수 값을 변경시켜도 영향이 미치지 않음
- 원시 타입(primitive type)을 매개 변수로 넘겼을 때 발생
call by reference
let a = { v: 1}
let add = b => b.v = b.v + 1 //callee
// b = a = 1
// 주소값 복사이기 때문에 실제 객체에 대한 값도 바뀐다
// 참조에 의해 레퍼런스 업데이트 됨
add(a) //2
console.log(add(a)) //caller 3
console.log(a.v) //3
- 주소에 대한 복사로 함수 내에서 매개 변수 내 값을 변경시키면 원본 데이터에도 영향을
- 객체 타입(object type) 을 매개 변수로 넘겼을 때 발생
4. 연습문제
- 두 정수를 입력 받아 가장 큰 값을 출력해주는 함수를 작성하시오
function MAX(x, y){
// 구현 필요
return x > y ? x : y
}
console.log(MAX(0, 3)) //3
console.log(MAX(-1, 5)) //5
console.log(MAX(100, 7)) //100
나의 회고 🤫
내가 생각보다 js 문법을 익히지않고 프로젝트를 시작했다는 생각이 많이 들었다.
js에서는 매개변수의 갯수를 신경쓰지 않는다는 것…처음 알았다.
안그래도 저번주에 movester에서 매개변수값을 주지 않아도 오류가 나지 않아서 신기했는데 이것때문이었구나…
함수로 호출될때 값이 원시 데이터인지 객체인지에 따라 값이 달라지는 것도 알고는 있었지만 항상 헷갈렸는데 제대로 알 수 있었다.
다른 언어의 기본 문법을 알고 있다고 해서 새로운 언어를 배울 때 공부를 안해도 되는 것은 아니구나를 절실히 깨달았다
