[TIL] 09 -JS Basic #5 함수

UlongChaS2·2021년 5월 25일
0

TIL - JS

목록 보기
5/6
post-thumbnail

함수

함수는 필요한 때에 호출하여 코드 블록에 담긴 문들을 일괄적으로 실행할 수 있고, 중복 없이 유사한 동작을 하는 코드를 여러 번 호출할 수 있다.
다른 객체와 다른 점은 호출할 수 있다는 점이다. JS에서 함수는 객체(일급 객체, First-class object)이므로 다른 값들처럼 사용할 수 있다. 즉, 변수나 객체, 배열 등에 저장할 수 있고 다른 함수에 전달되는 인수로도 사용할 수 있으며 함수의 반환값이 될 수도 있다.
이 이외에 기능으론 객체 생성, 객체의 행위 정의(메소드), 정보 은닉, 클로저, 묘둘화 등의 기능을 수행할 수 있다.


일급 객체(First-calss object)

다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체이며,
함수를 데이터(string, number, boolean, array, object) 다루 듯이 다룰 수 있다. 이 의미는 변수에 할당이 가능하다는 것, 그리고 함수 역시 할당이 가능하다는 의미
다른 함수를 인자(argument)로 전달 받을 수 있고 다른 함수의 결과로서 리턴될 수 있다.


함수 정의 방식

  • 함수 선언문
  • 함수 표현식
  • Function 생성자 함수

함수 선언문 (Function declaration)

function 함수명(매개변수 목록) {
  함수 몸체;
}
ex)
function color(black, white) {
  return 'black' + 'white';
}
  • 함수명
    함수를 구분할 수 있는 식별자이고 함수 선언문에선 함수명을 생략할 수 없다.
  • 매개변수 목록
    괄호에 0개 이상을 적을 수 있으며 여러 개를 적고 싶으면 ,로 분리한다. 다른 언어와 다르게 매개변수 타입을 기술하지 않아도 되고 만약 알고 싶으면 함수 몸체 내에서 타입 체크할 수 있다.
  • 함수 몸체
    함수가 호출되었을 때 실행되는 문들을 적는 곳, ({})로 감싸고 결과값을 반환하고 싶다면return문을 적어야 한다.

함수 표현식 (Function expression)

함수의 일급객체 특성을 이용하여 함수 리터럴 방식으로 함수를 정의하고 변수에 할당할 수 있는데 이러한 방식을 함수 표현식이라 한다.

let 변수명 = function 함수명(매개변수 목록) {
  함수 몸체;
}
ex) // 함수 선언식인 color();를 함수 표현식으로 정의
let color = function(black, white) {
  return 'black' + 'white';
}

함수표현식에서는 함수명을 생략하는 것이 일반적이고 이걸 익명 함수(anonymous function)이라 한다.
함수는 일급객체이기 때문에 변수에 할당할 수 있는데 이 변수는 함수명이 아니라 할당된 함수를 가리키는 참조값을 저장하게 된다. 함수 호출시 함수명이 아니라 함수를 가리키는 변수명을 사용하여야 한다.

let foo = function add(a, b) { // 기명 함수
  return a + b;
}
let bar = foo;
console.log(add(10, 5)); // Uncaught ReferenceError: add is not defined
console.log(foo(10, 5)); // 15
console.log(bar(10, 5)); //15

변수명이 아니라 함수명을 사용하게 되면 위에 보이는 에러가 뜬다. 이는 함수 표현식에서 사용한 함수명은 외부 코드에서 접근이 불가능하기 때문이다. (함수 선언문도 마찬가지)

let color = function color(black, white) {
  return 'black' + 'white';
}

foo는 할당된 함수를 가리키는 참조값을 갖고 let bar = foo;를 해줘서 동일한 익명 함수의 참조값을 갖는다.

0개의 댓글