[JS] JavaScript Function & Arrow Function

Function

• 하나의 특별한 목적의 작업을 수행하는 Subprogram
• 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있다.

JavaScript Function

• 자바스크립트에서는 함수도 하나의 datatype이다.
• 함수를 변수에 대입하거나, 함수에 프로퍼티를 지정하는 것도 가능하다.
• 또한 다른 함수 내에 중첩되어 정의될 수도 있다.

1. Function declaration(함수 선언)

 

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

 

하나의 함수는 하나의 기능한 수행 하도록 한다. (one function === one thing)

함수 이름은 함수의 기능을 잘 알 수 있는 것으로 짓는다. (doSomething, command, verb)

자바스크립트에서 함수는 object이다. 자신의 프로퍼티와 메서드를 가질 수 있다.

 

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

printHello();  // Hello

------------------------------

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

say('Hello!!');  // Hello!!
say(1234);  // 1234

 

2. Parameters

premitive parameters : passed by value

object parameters : passed by reference

 

function chamgeName(obj) {
  obj.name = 'coder'
}

const eunji = {name: 'eunji'};

chamgeName(eunji);
console.log(eunji);  // {name: "coder"}

 

3. Default parameters (added in ES6)

 

function showMessage(message, from) {
  console.log(`${message} by ${from}`);
}
showMessage('hi!'); // hi! by undefined

function showMessage2(message, from = 'unknown') {
  console.log(`${message} by ${from}`);
}
showMessage2('hi!'); // hi! by unknown

 

parameter의 default 값을 지정해줄 수 있다.

function name ( param = 'default 값' );

 

4. Rest parameters (added in ES6)

 

function printAll(...args) {
  for (let i = 0; i < args.length; i++) {
    console.log(args[i]);
  }
  // or
  for (const arg of args) {
    console.log(arg);
  }
  // or
  args.forEach((arg) => console.log(arg))
}

printAll('dream', 'coding', 'eunji'); 
// 3개의 요소를 배열 형태로 함수에 전달. printAll 함수가 배열을 차례대로 출력

 

5. Local scope

 

let globalMessage = 'global'; // global variable

function printMessage() {
  let message = 'hello';  // local variable
  
  console.log(message);  //hello
  console.log(globalMessage);  //global
  
  function printAnother() {
    console.log(message);
    let childMessage = 'hello';
  }
  console.log(childMessage); // error
}

printMessage();

 

6. Return a value

 

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

const result = sum(1, 2); 
console.log(`sum: ${result}`);  // sum: 3

 

return이 없는 함수에는 return undefinded가 생략되어 있다.

 

7. Early return, early exit

 

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

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

 

조건이 맞을때 (10 이상 일 때) logic을 진행하는 코드보다

조건이 맞지 않을 때 (10이하 일 때) 함수를 종료하고, 다음 logic을 진행하는 코드가

더 가독성도 좋고, 효율적이다.

 

---

First-class function

 

• 함수를 변수처럼 사용할 수 있다.
• 변수의 값으로 할당이 가능하다.
• 다른 함수의 인자로 전달할 수 있다.
• 다른 함수에 의해 리턴값으로 리턴이 가능하다.

1. Function Expression (함수 표현식)

 

function declaration은 hoisting이 되어 함수가 선언되기 전에도 호출이 가능하지만,

function expression은 함수가 할당된 다음 부터 호출이 가능하다.

 

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

print();  // hi
const printAgain = print;
printAgain();  // hi

 

함수를 선언함과 동시에 print라는 변수에 할당한다.

함수에 이름이 없는 것을 anonymous function이라 한다.

이름이 있는 함수를 named function이라 한다.

function expression에서 named function을 쓰면 디버깅할 때 스택 추적이 편하고,

함수 안에서 자기 스스로를 호출할 때 쓰인다.(recursions)

 

2. Callback Function

 

함수를 먼저 전달하고 조건이 맞을 때만 전달한 함수를 호출하는 것을 Callback function이라고 한다.

 

function randomQuiz(answer, printYes, printNo) {
  if (answer ==='love you') {
    printYes();
  } else {
    printNo(); 
  }
};

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

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

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

 

printYes, printNo 2가지 콜백 함수가 파라미터로 전달되어서

answer이 'love you'인 경우에만 printYes 함수를 호출하고,

answer이 'love you'가 아니면 printNo 함수를 호출한다.

 

3. Arrow function (화살표 함수)

 

function 키워드 대신 화살표를 사용하여 함수를 간결하게 만들어 준다.

arrow function은 anonymous function이기 때문에 function expression을 사용한다.

객체의 메서드를 정의할 때는 사용할 수 없다.

 

(a, b) => {...}

(a, b) => a + b  
// (a, b) => { return a + b } 와 동일

() => {...}  // parameter가 없을 때 () 필요
a => {...}  // parameter가 한 개일 때 () 생략 가능

--------------

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

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

--------------

const add = function (a, b) {
   return a + b;
};

const add1 = (a, b) => a + b;

--------------

const simpleMultiply = function (a, b) {
  // do something more
  return a * b;
}

const simpleMultiply = (a, b) => {
  //  do something more
  return a * b;
}

 

arrow function은 키워드 function을 생략하고, 대신 parameter 뒤에 =>를 쓴다.

parameter가 한 개 일 때는 소괄호 ( )를 생략할 수 있다.

구문이 한 줄이면 중괄호{ }와 return을 생략할 수 있다.