자바스크립트 - 함수

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

 

함수 선언 전에 함수 호출이 가능하다  = 호이스팅 

 

함수 스코프를 가짐

: 함수 안에서 선언된 함수는 함수 밖에서 호출 할 수 없음

if 등의 코드블럭 내에서 선언된 함수는 전역적으로 호출이 가능함

---

함수 표현식(Function Expression)
const printCodeit = function () {
  console.log('Coodeit');
};

printCodeit();

 

함수 선언을 값처럼 사용 -> 변수에 할당, 파라미터로 사용

-> 선언 이전에 접근 불가 Error 

 

할당된 변수에 따라 스코프가 달라짐 

var -> 전역 스코프

let, const -> 블록 스코프 

 

함수 표현식으로 함수가 할당된 변수는 자동으로 name 이라는 프로퍼티를 갖는다 

이름없는 함수 -> name = "변수이름" 문자열로 갖는다 

 

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

console.log(printCodeit.name); //printCodeit

 

 

const printCodeit = function myFunction () {
  console.log('Coodeit');
};

console.log(printCodeit.name); //myFunction 

 

외부에서 myFunction 함수를 호출할수는 없음

 

 

함수 내부에서 함수를 가리켜야할때는 함수이름을 써주는게 좋다..(안전하다)

---

즉시 실행 함수 (표현) Immediately Invoked Function Expression, IIFE

: 보통 프로그램 초기화 기능이나 일회성 동작 시 활용 

 

(function () {
  console.log('Hi!');
})();

함수를 소괄호로 감싸고, 그 뒤에 소괄호 한번 더 붙여주면 선언된 순간 바로 실행이 됨

 

(function (x, y) {
  console.log(x + y);
})(3, 5);

함수 실행 시 아규먼트를 줄 수 있음 

 

함수에 이름을 붙여도 외부에서 재사용할 수 없음

(function sayHi() {
  console.log('Hi!');
})();

sayHi(); // ReferenceError

 

함수 내부에서 자기 자신을 호출하는 재귀적인 구조에서는 함수 이름이 필요하다

(function countdown(n) {
  console.log(n);
  if (n === 0) {
    console.log('End!');
  } else {
    countdown(n - 1);
  }
})(5);

 

함수의 리턴값을 바로 변수에 할당하고 싶을때 활용 

const firstName = 'Young';
const lastName = 'Kang';

const greetingMessage = (function () {
  const fullName = `${firstName} ${lastName} `;

  return `Hi! My name is ${fullName}`;
})();

---

객체나 배열에서 프로퍼티의 값으로서 함수를 사용 가능

 

const myObject = {
  brand: 'Codeit',
  bornYear: 2017,
  isVeryNice: true,
  sayHi: function(name) {
    console.log(`Hi! ${name}`);
  }
};

 

myObject.sayHi('JavaScript'); //Hi! JavaScript

 

이벤트리스너에도 파라미터로 함수를 넣었었잔아~

 

콜백함수
function makeQuiz(quiz, answer, success, fail) {
  if (prompt(quiz) === answer) {
    console.log(success());
  } else {
    console.log(fail());
  }
};

function getSuccess() {
  return '정답';
};
function getFail() {
  return '오답!';
};

const question = '5 + 3 = ?';
makeQuiz(question, '8', getSuccess, getFail); // 함수 호출-> 내부 조건문에 따라 함수 호출

 

 

고차 함수 Higher Oeder function : 새로운 함수를 호출하는 함수
function getPrintHi() {
  return function () {          다른 함수의 리턴값이 될수도 있음
    console.log('Hi!?');
  };
};

const sayHi = getPrintHi(); 변수에 호출된 값을 할당

sayHi();

또는 getPrintHi()(); 로 호출

 

 

=> 일급함수 First class function

(1) 함수를 다른 함수의 전달인자(파라미터)로 넘길 수 있다.
(2) 함수는 다른 함수의 반환값이 될 수 있다.
(3) 함수를 변수에 할당할 수 있다.

 

자바스크립트는 일급함수를 가진 프로그래밍 언어이다.