함수(Function)

함수는 JavaScript에서 기본적인 구성 블록 중의 하나입니다. 함수는 작업을 수행하거나 값을 계산하는 문장 집합 같은 자바스크립트 절차입니다. 함수를 사용하려면 함수를 호출하고자 하는 범위 내에서 함수를 정의해야만 합니다.
자바스크립트에서 가장 중요한 개념 1순위는 당연히 함수다. 자바스크립트에서 이러한 함수를 얼마나 제대로 이해하고 활용하느냐에 따라서 고급 자바스크립트 개발자로 거듭날 수 있다.

1. 함수 정의

자바스크립트에서는 함수를 생성하는 방법은 3가지가 있다. 이들 방식은 모두 같은 함수를 생성한다. 하지만 함수의 동작이 미묘하게 다르다.

1-1 함수 리터럴 or 함수 선언문 방식

자바스크립트에서는 함수도 일반 객체처럼 값처럼 취급된다. 함수리터럴을 이용해서 함수를 생성할 수 있다. 반드시 함수명이 정의되어 있어야 한다.

function sum(x, y){
   return x +y;
}

1-2 함수 표현식 방식

함수리터럴로 하나의 함수를 만들고, 여기서 생성된 함수를 변수에 할당하여 함수를 생성하는 것을 함수표현식이라고 한다.
자바스크립트에서는 함수도 하나의 값처럼 취급된다. 따라서 함수도 숫자나 문자열처럼 변수에 할당하는 것이 가능하다.

let sum = function(x, y) {
   return x+y; 
}
let plus = sum;

1-3 Function() 생성자 함수를 통한 함수 생성하기

자바스크립트의 함수도 Function()이라는 기본 내장 생성자 함수로부터 생성된 객체라고 볼 수 있다.
자주 사용하지는 않지만 다른 사람이 작성한 소스를 분석할 때 알기위해 기본적으로 알아두는 것이 좋다.

let sum = new Function('a', 'b', 'return a+b');
console.log(sum(1,4)) // 5가 출려된다.

2. 익명함수

2-1 익명함수(anoymous function)

위에 함수 변수 sumr가 실제로 참조하는 함수의 이름이 없다. 이러한 이름이 없는 함수 형태를 익명함수라고 한다.
반대로 함수 이름이 포함된 함수 표현식을 기명 함수 표현식이라고 한다.

let sum = function add(a, b){
  return a+b;
}

console.log(sum(3,4)); // 출력값 7
console.log(add(3,4)); // 에러 발생

실제로 함수 표현식에 사용된 함수 이름은 정의된 함수 내부에서 재귀적으로 호출 등에서 구분하기 위해 사용한다. 따라서 함수 이름으로 사용된 add으로 함수 외부에서 호출하면 에러가 발생한다.

2-2 호이스팅(hoisting)

함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다. 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다.
var변수와 함수선언문에서만 호이스팅이 일어난다

익명함수와 기명함수의 차이점
호이스팅 때문에 기명함수는 실행되기 전에 호이스팅 되어 최상단으로 올라가서 전연에 등록되어 있지만, 익명함수는 다른 일반문장과 같이 실행될 때, 등록되어 진다.
그렇기 때문에 기명함수는 미리 호출하는 것이 가능하지만, 익명함수는 가능하지 않다는 것을 주의하자.

sum (2,3); // 5출력

function sum (a, b){
   return a+b;
}

sum(3, 4) // 7출력

3. 함수 객체

자바스크립트에서 함수도 일반 객체처럼 취급될 수 있다.
특정 코드를 수행하는 역할뿐만 아니라, 일반 객체처럼 자신의 프로퍼티를 가질 수 있는 특별한 1급객체 라고 부른다.
리터럴에 의해 생성 , 변수나 배열의 요소, 객체의 프로퍼티 등에 할당 가능 , 함수의 인자로 전달 가능 , 함수의 리턴값으로 리턴 가능 , 동적으로 프로퍼티를 생성 및 할당 가능

3-1 변수나 프로퍼티의 값으로 할당

let foo = function () {
  return 100;
}

3-2 함수 인자로 전달

let foo = function (func) {
  func();
}

3-3 리턴값으로 활용

let foo = function() {
  return function() {
  	console.log("this is my velog");
  }
}

4.함수스코프(Scope)

스코프의 사전적 의미는 '범위'이며, 여기에서는 변수 또는 함수의 유효범위를 가리킨다.

4-1 전역변수

자바스크립트의 제일 밖의 영역, window객체에 변수를 만드는 것이다.
전역(global)변수를 만드는 일은 최대한 지양해야 한다.

4-2 지역변수

지역변수는 함수내부에 선언된 변수로, 스코프 영역에서 선언한 함수를 가리킵니다. 함수가 실행되면 만들어지고 종료되면 소멸된다. 스코프 내에서만 호출될 수 있다.

4-3 매개변수와 인자

매개변수(parameter) : x는 함수를 선언할 때 괄호안의 값
인자(argument) : 아래 1은 함수를 호출할 때 괄호안의 값

let addOne = function(x) {
  var y = x + 1;
  return y;
};

let i = addOne(1);

4-4 스코프체인(ScopeChain)

내부함수에서는 외부함수에 접근이 가능하지만, 외부함수에서는 내부함수에 접근할 수 없다. 내부함수에서 변수를 찾을 수 없으면, 한단계 올라가 변수를 찾으러 가서 전연변수에 도달할 수 있는 개념이 스코프체인이다.

4-5 렉시컬 스코핑(lexical scoping) zerocho 함수의 범위를 그대로 가져왔습니다.

많이들 헷갈리는 개념인데 스코프는 함수를 호출할 때가 아니라 선언할 때 생깁니다. 함수를 처음 선언하는 순간, 함수 내부의 변수는 자기 스코프로부터 가장 가까운 곳(상위 범위에서)에 있는 변수를 계속 참조하게 됩니다. 위의 예시에서는 log 함수 안의 name 변수는 선언 시 가장 가까운 전역변수 name을 참조하게 됩니다. 그래서 wrapper 안에서 log를 호출해도 지역변수 name='nero'를 참조하는 게 아니라 그대로 전역변수 name의 값인 zero가 나오는 겁니다.

let name = 'zero';
function log() {
  console.log(name);
}

function wrapper() {
  name = 'nero';
  log();
}
wrapper();