자바스크립트 딥다이브 3일차

함수

- 함수란 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행단위로 정의한 것

함수 내부로 전달 받은 값을 매개변수, 입력을 인수, 출력을 반환 값 이라고 한다.

- 함수는 함수 정의를 통해 생성한다. 함수 정의하는 방법은 여러가지다.

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

- 함수를 실행시키기 위해서는 함수를 정의하는 것만으로 끝나지 않는다. 

- 인수를 매개변수를 통해 함수에 전달하면서 함수의 실행을 명시적으로 지시해야 한다. 이를 함수 호출 이라고 한다.

 

함수 리터럴 

- 자바스크립트의 함수 객체 타입의 값이다. 함수도 함수 리터럴로 생성이 가능하다. 

- 함수 리터럴은 function 키워드, 함수 이름, 매개변수 목록, 함수 몸체로 구성된다. 

- 함수 리터럴도 평가되어 값을 생성하며, 이 값은 객체다. 즉 함수는 객체다

- 함수는 일반객체와는 다르게 호출을 할 수 있다는 차이점이 있다.

 

함수 정의 

- 함수 정의 방법은 4가지가 있다.

변수는 선언한다고 하는데 함수는 정의한다고 하는데 무슨 차이일까 🤔

함수 선언문이 평가되면 식별자가 암묵적으로 생성이 되고 함수 객체가 할당된다. 
즉 메모리에 함수 식별자가 메모리에 할당 되고 자등으로 함수 객체가 할당된다는 말이다. 

🤔평가와 선언 ??
- 위 코드를 보면 선언 초기화가 일어나지만 우리가 값을 넣고 싶을 때는 실제 값은 나중 실행 시점에 실행시켜야 함. 그래서 호이스팅이 일어날 때 값 10이 나오지 않고 undefined만 나오지만 

console.log(x); // undefined
var x = 10;​​

- 함수의 경우는 다르다

console.log(add(2, 3)); // 5
function add(x, y) {
  return x + y;
}​

함수의 경우 식별자 add와 함수 객체가 같이 생성이 되어 호이스팅이 일어날 때 5로 나오는 것을 볼 수 있다. 이로 인해 변수는 선언이 되었다고 하고, 함수는 정의가 되었다고 한다, 

함수 선언문

- 함수를 선언할 때는 아래와 같이 선언해야 하고 함수 식별자는 생략이 불가하다.

console.log(add(2, 3)); // 5
function add(x, y) {
  return x + y;
}​

- 함수 선언문은 표현식이 아닌 문이다. 

함수 선언문? 표현식?
함수 선언문은 말 그대로 선언문인데 문 자체는 값 처럼 쓸 수 없다고 알고 있자

 

- 근데 위 함수를 보면 표현식처럼 보인다. 표현식이 아닌 문은 변수에 할당이 안된다. 

- 이렇게 동작하는 이유는 자바스크립트 엔진이 문맥에 따라 함수 선언문, 함수 표현식으로 해석하는 경우가 있기 때문이다. 

var add = function add() {
  return x + y;
}

fucntion foo () { console.log('foo') }

foo(); // foo

// 함수 리터럴을 피연산자로 사용하면 함수 선언문이 아니라 리터럴 표현식으로 사용된다. 
(fucntion bar () { console.log('foo') })

bar() // ReferenceError

위 예제를 보면 bar 함수는 ( )를 사용해 표현식으로 만들어보니 bar 함수를 호출이 불가하다. 이유가 뭘까? 

- 아래 사진을 보면 함수를 가르키는 식별자가 없다고 한다. 즉 bar 함수는 함수 외부에서 함수를 참조할 수 없기 때문에 에러가 난다. 

- 근데 사진을 보면 foo는 함수 몸체 에서만 유효한데 어떻게 식별자가 생긴걸까? 

-> 이는 자바스크립트 엔진이 암묵적으로 생성했다고 볼 수 있다. 함수 객체를 가르키는 식별자가 없다면 생성된 함수 객체를 참조할 수 없어 호출이 불가하다. -> 이로 인해 자바스크립트 엔진이 암묵적으로 식별자를 생성하고, 거기에 함수 객체를 할당한다. 

즉 함수는 함수 이름으로 호출하는 것이 아니라 함수 객체를 가르키는 함수 식별자로 호출한다.

함수 표현식

- 자바스크립트 함수는 값처럼 변수에 할당이 가능하고 프로퍼티 값이 될 수도 있으며, 배열의 요소가 될 수 있다. 

- 이처럼 값의 성질을 갖는 일급 객체라고 한다. 

- 함수는 일급 객체이기 때문에 변수에 할당이 가능하다. 이러한 정의 방식을 함수 포현식이라고 한다.

// 함수 표현식 (익명 함수)
var add = fucntion(x,y) {
  return x + y;
}

// 기명 함수
var add = function foo(x,y) {
  return x + y;
}

foo() // ReferenceError => 식별자로 호출해야한다

함수 선언시점과 호이스팅 

- 함수 선언문과 함수 표현식으로 만들 떄 가장 큰 차이는 바로 생성이 되는 시점이다.

- 함수 선언문으로 함수를 정의하면 런타임 이전에 함수 객체를 생성한다. 그로인해 함수 선언문은 정의가 되기 전에 코드의 선두로 끌어올려진 것처럼 보이는데 이를 호이스팅이라고 한다.

함수 호이스팅 vs 변수 호이스팅
- 둘다 자바스크립트 엔진 런타임 이전에 실행이 되는 것은 동일 하지만, 
함수 선언문의 식별자는 함수 객체로 초기화 되고, 변수 var는 undefined로 초기화 된다는 차이점이 있다. 
함수 표현식으로 함수를 정의하면 함수 호이스팅이 아니라 변수 호이스팅이 발생한다.

console.log(add(2, 3)); // 5
console.log(sub(5,2)); // TypeError

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

var sub = function(x, y) {
  return x - y;
}

- 함수 표현식으로 선언한 함수는 변수 선언문처럼 먼저 호출하면 undefined를 호출하게 되는데, 이로 인해 TypeError가 나는 것을 볼 수 있다. 

따라서 함수 표현식은 반드시 함수 표현식이 정의된 이후에 사용해야 한다. 

 

화살표 함수

- E6에 도입된 함수로 function 키워드 대신 화살표로 축약해 더간략하게 사용이 가능하다. 

const add = (x,y) => {
 return x + y;
}

 

함수 호출

- 함수를 호출하면 실행 흐름을 중단시키고 호출된 함수로 실행 흐름을 옮긴다. 

매개변수와 인수 

- 함수를 실행하기 위해 필요한 값을 함수 외부에서 내부로 전달할 필요가 있을 때 매개변수, 인수를 사용한다. 

- 인수는 값으로 평가 될 수 있는 표현식이어야 하고, 인수는 함수를 호출 할 때 지정하며, 개수 타입 제한이 없다 

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

var result = add (1, 2);

함수가 호출되면 함수 몸체 내에서 암묵적으로 매개변수가 생성이 되고 일반 변수와 마찬가지로 undefined로 초기화 가 된 이후 인수가 순서대로 할당된다. 

매개 변수의 유효범위(스코프 범위)는 함수 내부이다. 

만약 인수를 매개변수에 전달할 때 값이 없으면 알아서 undefined로 인식하는데 이로인해 1 + y + undefined로 인식해 NaN이 나온다. 

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

var result = add (1);

 

⚠️ 클린코드 - 함수편

- 함수를 만들 때는 가급적 한가지 일만 하고 가급적 작게 만드는것이 좋다고 한다. 

- 이외에 함수외부에서 함수 내부로 전달한 객체를 함수 내부에서 변경하면 함수 외부의 객체가 변경되는데 이를 부수효과라고 한다. 이를 주의하자 

 

반환문 

- 함수는 return 키워드와 표현식으로 이루어진 반환문을 사용해 실행 결과를 함수 외부로 반환(return) 할 수 있다. 

- 반환문은 두가지 역할을 한다. 

   1. 반환문은 함수의 실행을 중단하고 함수 몸체 전체를 빠져나간다. 따라서 반환문 이후에 다른 문이 존재하면 그 문은 실행하지 않고 무시된다. 

   2.  둘째 return 키워드 뒤에 오는 표현식을 평가해 반환한다. return 키워드 뒤에 반환값으로 사용할 표현식을 명시적으로 지정하지 않으면 undefined가 반환된다. 

function add(x,y) {
  return x * y;
  
  // 반환문 이후에 다른 문이 존재하면 그 문은 실행되지 않고 무시된다. 
  console.log('실행되지 않는다.');
}


function foo() {
  return;
}


console.log(foo()) // undefined


function multiply(x, y) {
  return 
  x * y;
}

console.log(multiply(1, 2)); // undefined가 나온다.

- 반환문은 생략이 가능한데 콘솔로그로 foo 함수를 호출하면 undefined가 콘솔에 나온다. 

- multiply 함수를 보면 return에 세미콜론을을 생략하면 undefined가 나오는 것을 볼 수 있는데 이는 ASI 기능에 의해 자동 삽입 기능으로 인해 자동으로 세미콜론이 추가된다. 

 

참조에 의한 전달과 외부 상태 변경

function changeVal(primitive, obj) {
  primitive += 100;
  obj.name = 'Kim';
}

var num = 100;
var person = { name : 'Lee' };

// 원시 값은 값 자체가 복사되어 전달되고 객체는 참조 값이 복사되어 전달된다. 
changeVal(num, person);

- changeVal 매개변수를 통해 전달받은 원시 타입 인수와 객체 타입 인수를 함수 몸체에서 변경한다. 

- 원시타입은 값 자체가 전달되어 훼손 되지 않는다. 하지만 객체 타입 obj는 참조 값이 복사되니 참조 값을 변경하면 원본도 훼손이 될 수 있다. -> 부수효과 발생 

 

다양한 함수 형태 

즉시 실행 함수 

- 함수 정의와 동시에 즉시 호출되는 함수를 즉시 실행 함수라고 한다. 

- 즉시 실행 함수는 단 한번만 실행되고 다시 호출이 불가하다. 

var res = (function() {
  var a = 3;
  var b = 5;
  return a * b;
}());

rse = (function(a,b) {
  return a * b;
}(3,5))

console.log(res); // 15

- 즉시 실행 함수는 함수 이름이 익명 함수를 많이 사용하지만 기명 함수도 사용이 가능한데, 즉시 실행 함수는 선언문이 아니라 함수 리터럴로 평가되기 때문에 함수 몸체 내에서만 사용이 가능해 함수 호출을 하면 에러가 난다. 

- 즉시 실행 함수도 일반 함수처럼 값을 반환할 수 있고 인수도 전달이 가능하다 

 

재귀 함수 

- 함수가 자기 자신을 호출하는 것을 재귀 호출라고 한다. 

- 재귀 함수는 자기 자신을 호출하는 행위, 재귀 호출을 수행하는 함수를 말한다. 

function countdown(n) {
  for(var i = n; i >= 0; i--) console.log(i);
}

countdown(10);

- 위 함수 처럼 반복문을 사용해 10부터 0까지 출력하는 함수를 구현할 수 있지만 재귀 함도 가능하다. 

 

function countdown(n) {
  if(n < 0) return; 
  console.log(n);
  countdown(n-1); // 재귀호출
}

countdown(10);

- 위 방법처럼 자신을 호출하는 재귀를 사용하면 반복문 없이 사용이 가능하다. 

🤔 재귀함수는 스택 오버플로 에러를 발생시킬수 도 있고, 무한 루프에 빠질 수 있으니 조심히 사용하자 

 

중첩 함수 

- 함수 내부에 정의된 함수를 중첩 함수라고 한다. 

- 중첩함수는 클로저와 스코르에 대해서 자세히 알 때 더 알아보도록 하자. 

function outer () {
  var x = 1;
  
  function inner() {
    var y = 2; 
    console.log(x + y);
  }
  
  inner();
}

outer();

 

콜백 함수

- 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백 함수라고 한다.

- 매개변수를 통해 함수 외부에서 콜백 함수를 전달받은 함수를 고차 함수라고 한다. -> 매개변수를 통해 함수를 전달받거나 반환 값으로 함수를 반환하는 함수를 고차 함수라고 한다. 

- 고차함수는 콜백 함수를 자신의 일부분으로 합성한다. 

- 고차함수는 매개변수를 통해 전달받은 콜백함수의 호출 시점을 결정해서 호출한다. 콜백 함수는 고차함수에 의해 호출되며 이 때 고차함수는 콜백함수에 인수를 전달받을 수 있다. 

 

function makeAdder(x, f) {  
  for(const i = 0; i < x; i++) {
    f(x);
  }
}

function f(i) {
  console.log(i)
}

console.log(makeAdder(4, f); // 0, ,1, 2, 3

- 콜백함수는 은근 햇갈리니 잘 봐두자

 

순수 함수 비순수 함수

- 함수형 프로그래밍에서 외부에 어떤 상태에도 의존하지 않고 변경하지도 않는 함수, 부수효과가 없는 함수를 순수 함수라고 한다. 

- 하지만 부수효과가 있는 함수를 비순수 함수라고 한다. 

var count = 0;

function increase(n) {
  return ++n;
}

count = increase(count);
console.log(count); // 1


// 비순수 함수
var count = 0;

function increase(n) {
  return ++count;
}

increase();
console.log(count); // 1

- 위와 같이 매개변수와 return 값이 동일한 값이 나오는 것이 이것이 순수함수이다. 

- 하지만 아래 외부 상태에 의존하는 아래의 increase 함수는 외부 상태에 따라 값이 변화하는데 이것이 비순수 함수다.