TIL14 l Variable - type2 (Function)

Noma·2021년 1월 22일
JavaScript
0

* 아래 내용은 DreamCoding과 MDN 자료를 정리한 내용입니다.

1. Function

function printHello(){} // 함수 선언
const print = function printHello() {} // 함수 표현

  • first-class function을 지원한다.
    : 함수를 다른 함수에 매개변수로 제공하거나, 함수가 함수를 반환할 수 있으며, 변수에도 할당할 수 있다.

    → 함수를 다른 변수와 동일하게 다루는 언어는 first-class function을 가졌다고 표현한다.

  • 함수의 이름을 전달한다는 것은 함수가 가리키는 reference을 복사해서 전달하는 것이다. → 💥Function is object in JS !

  • 프로그램에서 function은 fundamental building block이다.

  • "sub program"이라고도 불리며 여러 번 재사용 가능

  • 한 가지 task를 수행하거나, 어떤 값을 계산하는 데 사용

1) Function declaration

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

  • naming: doSomething, command, verb

  • 하나의 함수는 한 가지 일을 해야 한다.
    e.g. createCardAndPoint → creatCard, createPoint

  • function is object in JS
    → 콘솔에서 선언된 함수에 '.'을 찍으면 그 함수의 속성값들이 뜨는 걸 볼 수 있음

function printHello() {
  console.log("Hello");
}
printHello(); // 별로 쓸모 없음


function log(message) {
  console.log(message);
}
log("Hi, I'm merry!");
// 파라미터를 받아서 출력해야 쓸모가 있다.

하지만, js에서는 타입이 없어서 함수자체의 인터페이스만 보면 이 메시지가 string을 전달해야하는지 number를 전달해야하는지 알 수 없다.

→ 타입이 중요한 함수에서는 자바스크립트는 조금 난해할 수 있다.

❗ 참고 ) TypeScript

타입스크립트는 항상 파라미터나 리턴의 타입을 명시하도록 되어있어서, 함수의 인터페이스만 봐도 얘가 정확하게 무엇을 하는 함수인지(함수의 이름, 전달되어야되는 파라미터와 그의 데이터타입, 어떤 값이 리턴되어야 하는지) 확실하게 확인하고 쓸 수 있다.

2) Parameters

  1. primitive parameters : value로 전달
  2. object parameters : reference로 전달
function changeName(obj) {
  obj.name = "bob";
}

const merry = { name: "merry" };

changeName(merry);
console.log(merry); // {name: "bob"}

▷ 오브젝트는 레퍼런스로 전달되기 때문에 함수 안에서 오브젝트의 값을 변경하게 되면 그 변경된 사항이 그대로 메모리에 적용된다.

3) Default parameters

(added in ES6)

: 원하는 default 값을 지정할 수 있다. 사용자가 인자를 전달하지 않았거나 undefined을 전달할 경우 이 값이 대체 되어져 사용된다.

예제 )

function showMessage(message, from = "unknown") {
  console.log(`${message} by ${from}`);
}
showMessage("Hi!"); // Hi! by unknown

▷ message에는 "Hi"를 전달했지만 from에는 받은 인자가 없어서
"unknown"으로 대체되어져 사용된다.

→ default parameter를 지정하지 않았을 경우 from은 undefined로 출력된다.

아래는 위의 코드와 의미가 같다.

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

4) Rest parameter

(added in ES6)

function funcName(...parameterName){
	statements...
}

'...'을 쓰면 인자를 배열형태로 받는다.

예제 )

function printAll(...args) {
  for (let i = 0; i < args.length; i++) {
    console.log(args[i]);
  }
printAll("dream", "coding", "ellie");
[console]
dream
coding
ellie

위의 for loop 대신에 for of문과 forEach()를 사용해도 같다.

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

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

5) Local scope

JS에서 scope란?
" 밖에서는 안이 보이지 않고 안에서만 밖을 볼 수 있다. "

let globalMessage = "global"; //global variable
function printMessage() {
  let message = "hello";
  console.log(message); //local variable
  console.log(globalMessage);

  function printAnother() {
    console.log(message);
    let childMessage = "hello";
  }
  console.log(childMessage); // error
}
printMessage();
console.log(message); // error

6) Return

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

function sum(a, b) {
  return a + b;
}
const result = sum(1, 2); //3

❗ return 값을 명시하지 않거나, return 자체를 생략하면 undefined을 반환한다.

🌟 Early return, Early exit

// Bad👎👎
function upgradeUser(user) {
  if (user.point > 10) {
    // long upgrade logic...
  }
} 
/* 이렇게 '~~일 때 ~~한다' 라고 작성하게 되면 
  (블럭 안에서 코드를 많이 작성하면) 가독성이 떨어짐 */

// Goooood👍👍
function upgradeUser(user) {
  if (user.point <= 10) {
    return;
  }
  // long upgrade logic...
} 
/* 조건이 맞지 않는 경우 가능한 빨리 리턴 해서 함수를 종료시키고, 
   조건이 맞을 때만 쭉 실행하는 것이 중요 */

7) IIFE

: Immediately Invoked Function Expression

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

이렇게 선언과 동시에 호출하려면, 아래처럼 괄호를 묶어주면 된다.

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

2. Function expression

함수 선언과 비슷하고 구문이 같다.

함수 표현식은 선언이 되지 않은 상태에서 사용할 수 없기 때문에 함수를 사용하기 전에 코드에 함수코드가 존재해야 사용할 수 있다.

(반면에 함수 선언식은 선언이 hoisting 되기 때문에 선언되기 전에 사용이 가능하다.)

- Anonymous function expression

const myFunction = function() {
    statements..
}

- Named function expression

  • 이점 : 오류가 발생할 경우 스택 트레이스에 함수의 이름이 포함되어 오류의 근원을 더 쉽게 찾을 수 있다.
const myFunction = function namedFunction(){
    statements..
}

3. Callback function

unsing function expression

콜백 함수는 인수로서 다른 함수로 전달되는 함수로, 그 다음 외부 함수 내에서 호출되어 어떤 종류의 루틴이나 행동을 완료한다.

예제 )
printYes와 printNo가 callback functions로서 파라미터로 전달되어짐

function randomQuiz(answer, printYes, printNo) {
  if (answer === "love you") {
    printYes();
  } else {
    printNo();
  }
}
const printYes = function () {
  //anonymous function
  console.log("yes!");
};
const printNo = function print() {
  console.log("no!");
};
randomQuiz("wrong", printYes, printNo); // no!
randomQuiz("love you", printYes, printNo); // yes!

4. Recursive function

: 자기 자신을 호출하는 함수를 말한다.

예제 )
제공된 정수의 팩토리얼을 반환

function factorial(x) {
  if (x<0) return;
  if (x===0) return 1;
  return x * factorial(x-1);
}

factorial(3);
// 6

피보나치 수열, 팩토리얼 또는 반복적인 평균을 계산시 등.. 꼭 필요할 때에만 사용해야한다. 잘못 사용시 프로그램이 죽을 수 있다.

5. Arrow function

(always anonymous!)

  • 자바스크립트 언어에 버그같이 존재하던 this issue를 해결하기 위해
  • 간결하고 간편하게 함수를 작성하기 위해
    ( 특히, 콜백으로 전달하는 경우 )

ES6에 도입이 되어진 함수이다.

/* [도입 전]
const simplePrint = function () {
   console.log("simplePrint!");} */

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


/* [도입 전]
 const add=function(a,b){
     return a+b;} */
const add = (a, b) => a + b;


const simpleMultiply = (a, b) => {
  // do somthing more...
  return a + b;
}; 
/* 이렇게 함수안에서 다양한 일들을 해야할 땐
블럭을 써주고 안에 return을 꼭 적어줘야함 */

❗ 참고자료
https://developer.mozilla.org/ko/docs/Glossary/First-class_Function
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions
https://www.youtube.com/channel/UC_4u-bXaba7yrRz_6x6kb_w

profile
Noma
Frontend Web/App Engineer
이전 포스트

JavaScript - Variable type1( primitive, object )

다음 포스트

TIL15 l Callback Function

0개의 댓글