[DAY7] 함수

console.log(1);
console.log(2);
console.log('A');
console.log('B');
console.log(1);
console.log(2);
console.log('C');
console.log('D');
console.log('E');
console.log(1);
console.log(2);

위 코드를 보면 같은 코드가 반복적으로 발생하는 부분이 있으며 그 코드가 계속해서 등장하지만 반복성이 규칙적이지 않다는 것도 알 수 있다. 결국 같은 코드의 중복이 발생한 것이다. 중복이 발생하게 되면 유지보수하기가 어려워지고, 코드의 가독성이 떨어지며 코드의 양이 증가하게 된다. 앞서 변수와 반복문 등을 통해 중복을 해결할 수 있었고, 또 다른 방법을 통해서도 해결할 수 있다.
이 문제를 해결해줄 수 있는 또 다른 도구가 바로 함수이다.

함수의 선언

함수를 사용하려면 함수를 호출하고자 하는 범위 내에서 함수를 선언해야만 한다. 함수를 선언하는 기본적인 형태는 아래와 같이 구성이 되어 있다.

• 함수의 이름
• 괄호 안에서 쉼표로 분리된 함수의 매개변수 목록
• 중괄호 { } 안에서 함수를 정의하는 코드를 표현

function 함수의 이름(매개변수){
  함수를 정의하는 코드
}

함수의 기본 형태를 활용하여 문제를 해결할 수 있다.

function repeat12(){
  console.log(1);
  console.log(2);
}

repeat12();
console.log('A');
console.log('B');
repeat12();
console.log('C');
console.log('D');
console.log('E');
repeat12();

함수의 입력

함수도 프로그램과 같이 입출력이 존재한다. 앞서 해결했던 부분은 반복적인 부분 즉, 같은 동작을 하기 위해 매개변수가 존재하지 않는 함수로 활용했다.

매개변수를 활용하면 함수를 통해 항상 똑같이 동작하는 것이 아니라 입력에 따른 다양한 값에 대한 결과 값을 모두 도출해낼 수 있다. (예. 두 수의 합을 구하는 함수)

function sum(num1, num2){
  console.log(num1 + num2);
}

sum(4 , 5)  // argument
//실행 결과 9

함수의 출력

위 코드로 함수를 실행하게 되면 console.log()를 통해서 화면에 바로 출력이 가능할 것이다.

하지만 여러 형태로 저장되지 못하고 console.log()만을 통해서 출력이 될 뿐이라는 점에서 효과적이지 못한 함수이다. 위 코드의 함수를 값으로서 받아낼 수 있다면 함수의 결과를 통해서 여러 형태로 응용이 가능할 것이다. 이런 문제를 해결해줄 수 있는 명령문이 return이다.

function add(num1, num2){
  return num1 + num2;
}

console.log(add(4 , 5))
//실행 결과 9

return 명령문은 함수 실행을 종료하고, 주어진 값을 함수 호출 지점으로 반환한다.

function add(num1, num2){
  console.log('A');
  return num1 + num2;
  console.log('B');
}

console.log(add(4 , 5))

//실행 결과 
A
9

위 코드에서 return명령문을 만나면 그 즉시 함수를 종료되기 때문에 return 명령문 뒤에 작성된 console.log('B')가 출력되지 않는 것을 알 수 있다.

함수 표현

함수 표현은 JavaScript의 유연성을 활용한 함수의 선언 방식이다.

let add = function(num1,num2){
  return num1 + num2;
}

console.log(add(4,5));
//실행 결과 9

함수의 이름은 주로 생략이 되며 지정한 변수를 통해 함수를 선언할 수 있다. 함수를 불러올 때는 변수 이름을 통해 불러오면 된다.

화살표 함수(Arrow Functions)

화살표 함수는 2015년도에 업데이트 된 ES6(ECMAScript 6)문법으로서 function을 통해 함수를 만든 것보다 간단히 함수를 표현할 수 있다.

let add = (num1,num2) => {
  return num1 + num2;
}

명령문이 한 줄일 경우 더욱 간단하게 표현 할 수 있다.

let add = (num1,num2) => num1 + num2;

화살표 함수에 대한 자세한 내용은 링크 참고.

정리 및 느낀 점

함수의 선언, 입력, 출력 그리고 JavaScript에서 함수를 표현하는 방법에 대해서 알아보았다. 함수를 왜 활용해야하는지, 어떤 관점으로 바라볼 것인지에 대해서 다시 생각해볼 수 있었다.
공부할수록 학습을 해야하는 부분이 점점 늘어난다는 것을 실감했다.그래도 계속해서 모르는 것은 찾아보려는 습관을 들이고 큰 개념부터 시작해서 세부적인 개념까지 이해할 수 있도록 노력해야겠다.