[JavaScript] 02 Function

 이번 게시글에서는 함수에 대해 다뤄볼 것이다. 너무 기초적인 내용은 생략하고, 이번 함수 파트에서는 TS 내용도 아주아주 조금씩 언급하면서 글을 작성하고자 한다. 

---

함수 작성 매뉴얼 ( One Function - Do One Thing , Naming )

 

 기본적으로 하나의 함수는 하나의 일만 수행하도록 작성하는 것이 가장 이상적이다. 그리고 함수의 이름을 정할 때는 그 함수가 어떤 일을 수행하는지 명시할 수 있는 동사를 포함하는 것이 좋다. (ex. create_user)

함수를 작성할 때는 다음과 같이 작성한다.

 

function name(param1, param2) {
	// body ...
    return ;
}

 

추가로, 다음과 같이 첫 번째 코드는 두 번째 코드로 변경하여 작성하는 것이 재사용성, 다양성 측면에서 더 좋을 것이다. 

function printHello() {
	console.log('Hello');
}
printHello(); // 'Hello'

function log(message) {
	console.log(message);
}
log('Hello'); // 'Hello'

+ TypeScript

 어차피 자바스크립트 이후에 타입스크립트도 다룰 것이기 때문에, 위의 코드를 타입스크립트로도 한번 작성해보도록 하겠다. 타입스크립트는 말 그대로 자바스크립트에 변수의 타입을 지정하는 것이다. 

 

function log(message: string): number {
	console.log(message);
    return 0;
}

여기서 message: string 에서 string 은 파라미터 값 message의 타입을 명시하는 것이고, number는 log라는 함수의 리턴 타입을 명시하는 것이다. 이렇게 타입스크립트에서는 데이터의 타입을 명시하기 때문에 앞 게시글에서 언급한 JS의 문제점을 보완할 수 있다. 

 

 

Function is Object in JS

 

 자바스크립트에서 함수는 오브젝트에 포함된다. 이 말인 즉슨, 함수를 변수에 할당하거나 파라미터로 전달하거나 리턴 값으로 지정할 수 있다는 것이다. 

First-class function
functions are treated like any other variable.
can be assigned as a value to variable.
can be passed as an argument to other functions.
can be returned by another function.

 

function change_name(obj) {
	obj.name = 'minsan';
}

const min = {name:'min'};
change_name(min);
console.log(min); // 'minsan'

 

Default parameters (ES6)

 

function show_message(message, from = 'unknown') {
	console.log(`${message} by ${from}`);
}

show_message('hello!'); // hello by unknown

 디폴트 파라미터는 사용자가 파라미터 값을 전달하지 않을 경우를 대비하여, 디폴트 값을 설정하는 것이다. 위 코드와 같이 파라미터 전달부에서 디폴트 값을 지정해줄 변수에 원하는 기본 값을 할당하여 작성하면 된다. 

 

Rest parameters (ES6)

 

function printAll(...args) { // 배열 형태로 파라미터가 전달됨
    for(let i = 0; i < args.length; ++i) {
    	console.log(args[i]);
    }
}
printAll('HTML', 'CSS', 'JS');

Rest parameters는 ...args 형태로 인자를 전달받게 되고, 이는 배열 형태를 띈다.

참고로 위의 반복문 코드는 다음과 같이 더 간결하게 표현할 수 있다. 

 

for(const arg of args) {
	console.log(arg);
}

args.forEach((arg) => console.log(arg));

args 배열에 있는 각 인자에 대해(=forEach) arg라는 이름을 붙여 블럭 내부에서 사용함을 의미.

 

+ 함수 작성시 예외처리 TIP - Early return, Early exit

• Bad case
  

  function upgradeUser(user) {
      if(user.point > 10) {
      	// long upgrade logic...
      }
  }​

• Good

  function upgradeUser(user) {
      if(user.point <= 10) {
          return ;
      }
      // long upgrade logic ...
  }

---

1. Function Expression (함수 표현식)

 

함수 선언은 함수 정의보다 더 빨리 호출될 수 있다. ( hoisting )

함수 표현식은 함수 실행부에 도달할 때 생성된다.

. . .

공부하면서 영어로 필기한 내용인데 번역하니까 문맥이 이상해진 것 같다.. 원래 필기 내용도 같이 첨부하겠다. 

a function declaration can be called earlier than it is defined. ( hoisting )
a function expression is created when the execution reaches it.

 

코드 작성 시 다음과 같이 쓴다.

 

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

const printAgain = print; // can be assigned as a value
printAgain(); // print

 

 위 코드에서 보다시피 변수에 할당된 함수를 실행하는 경우에는, 보통 함수를 사용할 때와 마찬가지로 변수명에 괄호()를 붙여 사용하면 된다 ( 만약 인자를 전달하는 경우에는 괄호 안에 인자를 전달하여 사용 ).
만약 변수로 사용하는 경우에는, 보통 변수를 사용할 때와 마찬가지로 괄호 없이 변수명만 명시하여 사용하면 된다. 

 

2. Callback Function using function expression

 

function randomQuiz(answer, printYes, printNo) { // 파라미터로 함수가 전달됨
    if(answer === 'love you') {
        printYes();
    } else{
        printNo();
    }
}

// Anonymous Function
const printYes = function() {
    console.log('yes');
};

// Named Function
const printNo = function print() {
    console.log('no');
};

randomQuiz('wrong', printYes, printNo); // no
randomQuiz('love you', printYes, printNo); // yes

 

+ Named Function
    better debugging in debugger's stack traces.
    can use recursions.

Named Function은 Anonymous Function과 달리 이름이 붙여진 함수를 말한다.
이 네임드 함수는 익명함수에 반해 디버깅할 때 편리하며, 재귀함수를 작성할 수 있다는 특징이 있다.
익명함수는 함수 이름이 없기 때문에, 재귀를 사용할 수 없다. 

 

콜백함수는 나중에 다시 다룰 것이기 때문에, 이번 게시글에서는 이 예제로 간단히 보고 넘어가는 걸로 하자. 

 

3. Arrow Function - always anonymous

 

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

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

// if parameters exist.
const add = (a, b) => {
    // do something more
    return a + b;
};

 

+ IIFE - Immediately Invoked Function Expression

 IIFE 는 말 그대로 함수 선언과 동시에 함수를 실행하는 구문이다. 이는 코딩하면서 함수의 결과를 바로바로 확인하고 싶을 때 사용할 수 있다. 하지만 최근 프로젝트에서는 잘 사용하지 않는다고 함.

 

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

 

위 코드와 같이, 함수 선언부를 괄호()로 감싼 다음, 뒤에 괄호()를 붙이면 된다. 그냥 그렇구나 하고 넘어가도록 하자.