js 함수

JS
javascript, function, 함수

서브루틴은 반복되는 작업의 일부를 떼어내어 이름을 붙이고, 언제든 그 이름을 부르기만 하면 실행. 함수의 가장 간단한 사용형태

함수생성

우선 다짜고짜 함수를 만들어보자. 오늘이 윤년인지 아닌지 알아보는 함수 생성.

1
2
3
4
5
6
7
8
function printLeapYearStatus(){
    const year = new Date().getFullYear();
    if(year %4 !==0) console.log(`${year} is not a leap year.`)
    else if(year%100 !=0)console.log(`${year} is a leap year.`)
    else if(year % 400 !=0)console.log(`${year} is not a leap year.`)
    else console.log(`{$year} is a leap year`);
}
printLeapYearStatus();  //2017 is not a leap year.

값을 반환하는 함수로

위의 printLeapYearStatus 함수는 재사용하기 편리하지만 프로그램이 커지면 콘솔에 기록하는 것은 의미가 없어짐. HTML에 결과를 출력하거나, 파일에 저장하거나, 다른 계산에 사용해야 할 수도 있는데 지금 함수로는 그렇게 사용할 수가 없음

그래서 함수가 값을 반환하는 서브루틴이 되도록 수정

1
2
3
4
5
6
7
8
function isCurrenrYearLeapYear(){
    const year = new Date().getFullYear();
    if(year%4!==0)return false;
    else if(year%100!=0)return true;
    else if(year%400!=0)return false;
    else return true;
}
isCurrenrYearLeapYear();    //false

함수로서의 함수

순수한 함수에서는 입력이 같으면 결과도 같아야 함
isCurrenrYearLeapYear함수는 언제 호출하느냐에 따라 true를 반환하기도, false를 반환하기도 한다. 순수한 함수는 아니라는 것.

1
2
3
4
5
6
7
function isLeapYear(year){
    if(year%4!==0)return false;
    else if(year%100!=0)return true;
    else if(year%400!=0)return false;
    else return true;
}
isLeapYear(2014);   //false

year지역변수에 고정된 값이 들어가게 되니 같은 값이 들어가게 되고, 결과도 같아진다. 다른 효과도 전혀 없으니 순수한 함수라고 할 수 있음

This code here could be more DRY

DRY(don't repeat yourself) 함수는 반복을 없애는 것이 좋다.
순수한 함수를 쓰면 코드를 테스트하기 쉽고, 이해하기 쉽고, 재사용하기도 쉽다. 순수한 함수를 사용하도록 습관을 들이는 것이 좋음

함수에 별명 붙이기

변수가 있는 곳에는 함수도 있을 수 있음

  • 함수를 가리키는 변수를 만들어 별명을 정할 수 있음
  • 배열에 함수를 넣을 수 있음
  • 함수를 객체 프로퍼티로 사용할 수 있음
  • 함수를 함수에 전달할 수 있음
  • 함수가 함수를 반환할 수 있음
  • 함수를 매개변수로 받는 함수를 반환하는 것도 가능
    다 가능?
1
2
3
4
5
6
7
function addThreeSquareAddFiveTakeSquareRoot(x){
    return Math.sqrt(Math.pow(x+3, 2)+5);
}
//막 이런 함수 별명을 써서 간단하게 바꾸면...
const f = addThreeSquareAddFiveTakeSquareRoot;
//여기서는 함수명 다음에 괄호를 안쓴다!
const answer = (f(5) + f(2)) /f(7);
공유하기 댓글