JS 근본 공부 - function

1. function이란 무엇일까?

- function이란, 프로그램 안에서 하나의 기능을 수행하는 역할을 한다. 여러개의 function들이 모여 하나의 프로그램을 구성하기 때문에 function을 sub-program이라고 부르기도 한다. 

 

- JavaScript와 같이 절차적 언어에서는 이 funciton의 역할이 매우 중요한데, 코드가 순차적으로 실행되기 때문에 function과 function이 맞물려 작동하기 때문이다. 

 

- 그렇다면 function이란 무엇일까? 

function이란, 입력값(input 또는 parameter)을 받아서 각 function에 할당된 연산을 수행한 뒤 그 결과값(output 또는 return)을 반환하는 과정을 의미한다. 

 

 

2. JavaScript 함수 선언 

- function을 선언하기 위해서는 다음과 같은 형식을 갖는다.

function name(param1, param2, ...) {
// 수행할 연산 
return; //반환값
};

 

 

[함수를 선언할 때, 지켜야 하는 규칙]

• 1개의 함수는 1개의 기능을 수행한다
• 함수의 이름을 보고 기능을 추측할 수 있어야 한다.(이름을 지을 때 verb를 사용)
  ex) createNumber
• 함수의 기능이 더 작은 단위로 쪼개질 수 있는지 확인해야한다.
  ex) 함수의 이름이 createNumberAndPoint 라면 createNumber, createPoint로 함수를 따로 선언한다.

 

[First-class function의 개념]

- JavaScript에서는 함수는 Object로 간주된다. 그렇기에 parameter로, 변수로, return 값으로 사용될 수 있다.

// 간단한 함수 예시

function printMessage(message) {
 console.log(message);
}

message = "Hello";
printMessage(message); // 함수호출

 

 

3. Parameter(매개변수)

- 함수의 매개변수가 premitive(기본형)타입인 경우, 매개변수가 갖는 value가 전달된다. 

- 함수의 매개변수가 object(객체형)타입인 경우, 객체가 갖는 reference가 전달된다. 

 

 

 

4. Default parameters(added in ES6)

- 함수에 여러개의 parameter를 사용할 때, 모든 parameter값이 입력되지 않은 경우를 생각하여 parameter가 기본값을 가질 수 있도록 하는 방식이다. 

 

function showMessage(message, from = "unknown"){ // from 매개변수에 기본값 설정
 console.log(`${message} by ${from}`);
}

showMessage("Hi!");

 

 

5. Rest parameters

 

function printAll(...args) {

 for(let i = 0; i<args.length; i++) {
  console.log(args[i]);
  }
  
  // 같은 for문이더라도 of를 사용하여 더 간단하게 표현할 수있다.
  for(const arg of args) {
  console.log(arg);
  }
  
  // forEach를 사용하여 더 간단하게 표현할 수 있다. 
  forEach((arg) => console.log(arg)));
  
}

printAll('dream','coding','ellie');

 

- 위의 코드에서 ...(점세개) 부분을 rest parameters라고 부르는데, 매개변수가 배열 형태로 전달된다. 

- 그러므로 매개변수의 개수에 상관없이 배열형태로 전달된다.

- args는 arguments를 의미한다. 

 

 

 

6. Return

- 모든 함수에는 return문이 포함되어 있다. 

- 눈에는 보이지 않지만 return문이 생략된 함수에는 내부적으로 return undefined;가 선언되어 있다. 

function sum(a,b){
 return a+b;
} // 이 함수를 사용하면 a+b값이 결과값으로 나온다. 

 

 

7. Early return &  exit (현업 tips)

- 이 개념은 현업에서 함수를 작성할 때 사용되는 개념이다.

- 함수를 작성할 때 입력값에대한 조건검사를 가장 우선순위로 수행하게 작성하여 조건이 맞지 않으면 함수를 빠르게 끝낼 수 있도록 작성하는 형태를 의미한다. 아래 코드예시를 보자. 

function upgradeUser(user) {
 if (user.point <= 10) {
  return;
 }
 
 // 해당 조건이 아닌경우 수행할 연산(logic)작성
}

 

- 위의 코드처럼, 조건에 맞지 않는 대상이라면 function을 빠르게 탈출 할 수 있도록 함수의 구조를 작성하는 것을 말한다.

 

 

 

8. First class function - Function expression

1. anonymous function

- 변수 선언과 함께 함수를 선언하는 방식으로 함수의 이름을 따로 선언하지 않는다. 

const print = function() { // anonymous function
 console.log('print');
}

print(); // 변수를 이용한 함수호출

 

 

2. 변수에 할당된 함수를 다른 변수에도 할당할 수 있다. 

// 위의 예시에서 선언한 print함수를 다른 변수에도 할당할 수 있다. 
const printAgain = print;
printAgain();

 

 

3. 이와 같은 방식으로 기존에 정의되어 있는 함수를 변수에 할당할 수 있다. 

function sum(a,b){
 return a + b;
}

const sumAgain = sum;
console.log(sumAgain(1,3);

 

 

4. function hoisting

- 어떤 함수를 선언한 코드라인 이전에서 해당 함수를 호출하더라도 호출이 가능하다.

- 이전 포스팅에서 배웠던 var hoisting처럼, function 또한 hoisting이 가능하다는 뜻이다.  

* hoisting - 영어로 들어올리다 라는 의미로, 선언된 변수 또는 함수를 코드 상단으로 끌어 올리는 것을 의미한다.  

 

참고자료) ojava.tistory.com/144

[javascript] 호이스팅 (hoisting) 이란?

 

 

9. Callback

- 콜백 함수란, 어떤 함수의 매개변수로 사용되어 연산 과정 중 특정 조건에만 호출되는 함수를 의미한다. 이렇게 설명하면 이해가 쉽지 않으니 간단한 예시를 통해 살펴보자. 

function randomQuiz(answer, printCorrect, printWrong) {
 if (answer === 'love you') {
  printCorrect(); // callback
 } else {
   printWrong(); // callback
  }
}

const printCorrect = function() {
 console.log('yes!');
}

const printWrong = function() {
 console.log('no!');
}

randomQuiz('love you', printCorrect, printWrong);
randomQuiz('wrong', printCorrect, printWrong);

- 위의 코드에서는 매개변수로 사용된 printCorrect와 printWrong 함수가 callback 함수의 역할을 하는 것이다. 

 

 

 

10. Arrow function

- 함수를 선언문을 간단히 표현할 수 있는 방식이다. 아래의 코드예시를 살펴보자. 

const simplePrint = function() {
 console.log('simplePrint!');
}

// 위의 함수를 아래처럼 간단한게 표현하는 것이 
// arrow function 이다. 

const simplePrint = () => console.log('simplePrint!');

 

 

 

11. IIFE(Immediately Invoked Function Expression)

- IIFE는 함수의 선언과 동시에 호출을 간단히 하기위해 사용하는 표현방식이다. 아래의 코드예시를 살펴보자.

(function hello() {
 console.log("hello");
})();

- 함수 선언문을 괄호로 묶은 뒤 함수를 호출할 때 사용하는 빈 괄호()를 붙여주면 함수의 선언과 동시에 호출이 가능하다.

- 최근에는 잘 쓰이지 않지만 유용하게 사용할 수 있는 표현식 중 하나이다. 

 

 

 

 

 

 

 

[정보 출처]

www.youtube.com/watch?v=e_lU39U-5bQ&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=5