[자바스크립트 js] 함수 만들기 / 함수 선언 / 함수 표현식 / 파라미터(매개변수) / 아규먼트(전달인자) / 즉시 실행 함수

  함수 선언 - 보편적으로 사용

• function 키워드를 통해서 함수를 선언하는 방식.
• 호이스팅 가능 : 함수를 선언하기 전에 함수를 호출해도 코드가 동작된다.
• 함수 스코프를 가진다.

function 함수이름(파라미터) {
   동작;
   return 리턴값;
};

 

 

 

 

 

  함수 표현식(function experession) : 함수 선언을 값처럼 사용하는 방식

• 함수 선언을 변수에 할당하거나 다른 함수의 아규먼트로 활용하는 것.
      * 아규먼트(Argument) : 함수 혹은 메서드를 호출할 때, 전달 혹은 입력되는 실제 값(Value). 전달인자.
      * 파라미터(Parameter) : 함수 혹은 메서드 정의에서 나열되는 변수(Variable)명. 매개변수.
• 호이스팅 불가능 : 반드시 변수가 선언된 이후에 함수를 호출해야 정상적으로 동작한다.
• 변수에 할당하는 경우에는 할당된 변수의 특성에 따라 스코프가 결정된다.
  - var 키워드에 할당하면 함수 스코프, let이나 const 키워드 변수에 할당하면 블록 스코프.
  - let이나 const 키워드 변수로 활용된 것은 블록스코프를 가지게 되어, 코드 블록 밖에서 사용할 수 없다.
• 함수 표현식을 작성할 때, 함수에 이름을 지정할 수 있다. 이를 '기명 함수 표현식'이라 한다.
  - 기명 함수 표현식을 사용하는 이유는, 함수 내에서 함수를 가리켜야 할 때 이름을 사용해야 안전하기 때문.

예시 1)

const printTooktak = function(파라미터) {
   동작;
   return 리턴값;
};

printTooktak();

 

예시 2)

const myBtn = document.querySelector('#myBtn');

myBtn.addEventListener('click', function () {
    console.log('나도 자바스크립트 할 수 있다!');
});

 

 

 

 

 

  다양한 함수의 형태

// 변수에 할당해서 활용
const sayTT = function () {
  console.log('Hi Tooktak');
};

// 객체의 메소드로 활용
const Tooktak = {
  sayTT: function () {
    console.log('Hi Tooktak');
  }
}

// 콜백 함수로 활용
myBtn.addEventListener('click', function () {
  console.log('button is clicked!');
});

// 고차 함수로 활용
function myFunction() {
  return function () {
    console.log('Hi Tooktak');
  };
};

 

 

 

 

 

  즉시 실행 함수 (IIFE)

• 함수선언 부분을 소괄호로 감싼 다음에 바로 뒤에 함수를 실행하는 소괄호를 붙여주는 방식.
• 함수가 선언된 순간 바로 실행이 된다.
• IIFE : Immediately Invoked Funciton Expression

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

 

• 일반함수처럼 파라미터를 작성하고, 함수를 호출할 때 아규먼트를 전달할 수도 있다.
• 즉시 실행함수는 함수에 이름을 붙여도 외부에서 재사용 할 수 없다.

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

Tooktak(); // ReferenceError

 

• 일반적으로 익명함수를 사용한다.
• 내부에서 자기 자신을 호출하는 재귀적인 구조를 만들 땐, 이름이 필요할 수도 있다.

(function Tooktak(n) {
  console.log(n);
  if (n === 0) {
    console.log('Tooktak');
  } else {
    Tooktak(n - 1);
  }
})(7);

 

• 초기화 기능에 많이 활용된다.

(function init() {
  // 프로그램이 실행 될 때 기본적으로 동작할 코드
})();

 

• 재사용이 필요 없거나 일회성 동작을 할 때도 활용되며,
• 아래와 같은 방식으로 리턴값을 바로 변수에 할당하고 싶을 때 활용할 수 있다.

const do = '나도';
const die = '할 수 있다!';

const myGoal = (function () {
  const doordie = `${do} ${die}`;

  return `늘 내가 나한테 하는 말. ${doordie}`;
})();