Front-End/Javascript

javascript - function

태나미 2021. 1. 31. 17:04

function is object type

Parameters

premitive parameters: passed by value

object parameters: passed by reference (메모리에 ref가 전달)

Rest parameters ( ES6에서 추가)

// parameters가 ...으로 선언하면 배열로 전달되어진다.
function printAll(...args) {
  for(let i = 0; i < args.length; i++){
    console.log(args[i]);
  };
    
    //위와 같음
  for( const arg of args) {
    console.log(arg);
  };
    
  //위와 같음
  args.forEach((arg) => console.log(arg));
};

printAll('kim', 'tae', 'nam');

// kim
// tae
// nam

Local scope

let globalMsg = 'global'; //global로 선언

function printMsg() {
  let msg = 'hello world'; //함수안에서 local로 선언
  console.log(msg); // hello world
  console.log(globalMsg); // global
  function printAnother() {
    console.log(msg); // hello world
      let subMsg = 'test';
  }
  console.log(subMsg); // Uncaught ReferenceError: subMsg is not defined
};

printMsg();
console.log(msg); // Uncaught ReferenceError: msg is not defined

밖에서는 안이 보이지 않고, 안에서만 밖을 볼 수 있다.

모든 함수에서는 return undefined가 생략 되어있음.

First-class function

  • 함수를 다른 변수와 동일하게 다루는 언어는 일급 함수를 가졌다고 말한다.
  • 다른 객체 처럼 함수를 변수에 할당이 가능하고 함수에 인자로 함수를 전달하고 함수를 Return하는 함수를 만들수 도 있다.

함수 선언식과 함수 표현식

 함수 선언식 은 선언하기 이전에 호출될 수 있다. (호이스팅).

declaration(); // declaration

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

 함수 표현식 은 함수를 선언함과 동시에 값이 할당된다.  => 할당된 다음부터 호출이 가능

expression(); // Uncaught ReferenceError: Cannot access 'expression' before initialization

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

함수 선언식은 자바스크립트의 특징인 호이스팅에 따라 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려진다.

Callback function

콜백 함수는 함수 표현식을 사용한다.

파라미터에 함수를 전달해서 상황에 맞는 함수를 부르는 것을 콜백 함수라 한다.

function randomPrint(answer, printYes, printNo) {
  if (answer === "taenam") {
    printYes();
  } else {
    printNo();
  }
}

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

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

randomPrint('jihun', printYes, printNo); //no
randomPrint('taenam', printYes, printNo); //yes

named function은 디버깅을 할때, stack traces에 함수 이름을 하기 위해 쓰인다.

Arrow function

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

// 위와 같음
const simplePrint = () => console.log('simple print');

 

출처:

www.youtube.com/watch?v=e_lU39U-5bQ&t=968s