[JS 스터디] Function

[hochan222]

주제 키워드는

✨Function✨

입니다.

☘️ 하위 주제 키워드

• 함수표현식, 함수선언문
• 화살표함수
• 익명함수
• 즉시실행함수
• 일급객체

⏳스레드에 각 페어당 소요시간 적어주세요!

(ex) holee 90분 소요

[hochan222]

공유하고싶은 자료 & 개인적으로 정리한 블로그 등이 있다면 여기👇👇👇에 댓글로 공유해주세요 😆

[hochan222]

• 5 Differences Between Arrow and Regular Functions
• https://poiemaweb.com/js-function

[yechoi42]

함수 선언식 vs 함수 표현식

//함수 선언식
function 함수명 () {
}
//함수 표현식
var 함수명 = function() {
};

함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다.

아래의 코드는

logMessage();
sumNumbers();

function logMessage() {
  return 'worked';
}
var sumNumbers = function () {
  return 10 + 20;
};

자바스크립트 해석기를 거치면 호이스팅에 의해 다음과 같이 인식된다.

function logMessage() {
  return 'worked';
}

var sumNumbers(); 

logMessage();
sumNumbers();

sumNumbers = function () {
  return 10 + 20;
};

sumNumbers에서 var도 호이스팅이 적용돼 함수가 아닌 변수로 인식되게 된다.

출처: https://joshua1988.github.io/web-development/javascript/function-expressions-vs-declarations/

화살표함수

화살표 함수 표현(arrow function expression)은 function 표현에 비해 구문이 짧고 자신의 this, arguments, super 또는 new.target을 바인딩 하지 않습니다. 화살표 함수는 항상 익명입니다. 이 함수 표현은 메소드 함수가 아닌 곳에 가장 적합합니다. 그래서 생성자로서 사용할 수 없습니다.

• 화살표 함수를 사용하면 중첩함수 안에서 this를 사용할 수 있습니다.
• 화살표 함수는 전역 컨텍스트에서 실행될 때 this를 새로 정의하지 않습니다.
• 대신 코드에서 바로 바깥의 함수 또는 클래스의 this 값이 사용됩니다.

출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions

익명함수

이름이 없는 함수를 말한다. 익명함수는 함수 자체가 '식'이기 때문에 익명함수를 변수에 할당할 수 있다. 또한, 다른 함수의 매개변수로 사용할 수도 있다.

즉시실행함수

함수표현식은 함수를 정의하고, 변수에 함수를 저장하고 실행하는 일련의 과정을 거칩니다. 하지만, 즉시실행함수를 사용하면 이와 같은 과정을 거치지 않고 즉시 실행된다는 특징이 있습니다. 차이점이라면 단순히 함수를 괄호"()"로 랩핑한 게 전부입니다. 이런 함수를 즉시실행함수(IIFE)라 부릅니다.

> var sum = (function(a, b) {return a + b;})(5, 3);
> console.log(sum);
< 8

함수표현식의 경우 함수 호이스팅이 아니라 변수 호이스팅이 발생한다. 변수 호이스팅은 변수 생성 및 초기화와 할당이 분리되어 진행된다. 호이스팅된 변수는 undefined로 초기화 되고 실제값의 할당은 할당문에서 이루어진다.
함수표현식은 함수선언식과는 달리 스크립트 로딩 시점에 변수 객체(VO)에 함수를 할당하지 않고 runtime에 해석되고 실행되므로 이 두가지를 구분하는 것은 중요하다.

var hanq = a(); // TypeError: a is not a function

(function a() {
 alert("1");
})();

// Douglas Crockford의 권장 표기법
(function a() {
 alert("1");
}());

JavaScript : The Good Parts의 저자이며 자바스크립트의 권위자인 더글러스 크락포드(Douglas Crockford)는 이와 같은 문제 때문에 함수표현식만을 사용할 것을 권고하고 있다. 함수 호이스팅이 함수 호출 전 반드시 함수를 선언하여야 한다는 규칙을 무시하므로 코드의 구조를 엉성하게 만들 수 있다고 지적한다.

출처: https://devyj.tistory.com/9

일급객체

프로그래밍 언어 디자인에서, 특정 언어의 first-class citizens(first-class type, 또는 first-class object, 또는 first-class value라고도 할수 있는데)이란 보통 다른 객체들에게 적용 가능한 연산을 모두 지원하는 객체를 말합니다. 이러한 연산에는 보통 매개변수로 전달되고, 함수에서 반환되고 수정되고 변수에 할당되는 작업이 포함되는데요.

first-class citizen의 조건은 다음과 같아요.

• 변수나 데이터 구조안에 담을 수 있다.
• 파라미터로 전달 할 수 있다.
• 리턴 값으로 사용할 수 있다.

1. 함수 할당
   자바스크립트에선 여러 방법으로 변수에 함수 할당이 가능

1. var 키워드

var a = function() {
    //function body...
};

2. method
   함수를 객체의 키값으로 할당할 수 있다.

var movie = {
    name: '옥자',
    director: '봉준호',
    show: function() {
        console.log(this.name + ' ' + this.director);
    }
}

함수를 직접호출하지 않고 변수를 호출해 함수 사용 가능

var newAdd = add;
newAdd(2,3) //5

2. 함수 전달
   예, 이벤트 리스너의 콜백함수

3. 함수 반환

// 함수를 리턴하는 test() 함수
function test() {
   return function() {
       console.log('javscript');
   }
}

var bar = test();
bar();

JavaScript의 함수가 일급 객체이기 때문에 할 수 있는 것

• 콜백 패턴 을 사용할 수 있다.
• 고차함수(High-order function) 를 만들 수 있다.
• Javascript의 클로저(closure) 를 사용해 커링(currying) 과 메모이제이션(memoization) 이 가능하다.

출처: https://soeunlee.medium.com/javascript%EC%97%90%EC%84%9C-%EC%99%9C-%ED%95%A8%EC%88%98%EA%B0%80-1%EA%B8%89-%EA%B0%9D%EC%B2%B4%EC%9D%BC%EA%B9%8C%EC%9A%94-cc6bd2a9ecac

https://frontsom.tistory.com/3

[hochan222]

함수 선언식과 함수 표현식에 따른 차이 (함수 표현식 방법을 권장)

이유 ?

함수 표현식은 함수 선언식과 달리 스크립트 로딩 시점에 변수 객체(VO)에 함수를 할당하지 않고 runtime에 실행됨

-> 너무 많은 코드를 변수 객체(VO)에 저장하면 어플리케이션의 응답속도가 떨어짐

이유 추가했습니댜!

[hochan222]

자바스크립트에서 함수를 정의하는 방법

1. 함수 선언식
2. 함수 표현식
3. 화살표함수
4. new 키워드를 통한 함수 생성
5. GeneratorFunction

함수 표현식 vs 함수 선언식 vs Function 생성자가 정의한 함수

함수 표현식(function expression)이나 함수 선언(function declaration)에 의해 정의 된 함수는 현재 범위를 상속합니다. 즉,이 함수는 클로저를 형성합니다. 반면에 Function 생성자가 정의한 함수는 전역 범위 (모든 함수가 상속) 이외의 다른 범위를 상속하지 않습니다.

/*
 * Declare and initialize a variable 'p' (global)
 * and a function 'myFunc' (to change the scope) inside which
 * declare a varible with same name 'p' (current) and
 * define three functions using three different ways:-
 *     1. function declaration
 *     2. function expression
 *     3. function constructor
 * each of which will log 'p'
 */
var p = 5;
function myFunc() {
    var p = 9;

    function decl() {
        console.log(p);
    }
    var expr = function() {
        console.log(p);
    };
    var cons = new Function('\tconsole.log(p);');

    decl();
    expr();
    cons();
}
myFunc();

/*
 * Logs:-
 * 9  - for 'decl' by function declaration (current scope)
 * 9  - for 'expr' by function expression (current scope)
 * 5  - for 'cons' by Function constructor (global scope)
 */

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions

블록 레벨 함수

ES2015 (ES6)를 시작으로 엄격 모드에서, 블록 내부 함수는 이제 그 블록 범위가 됩니다. ES6 이전에, 블록 레벨 함수는 엄격 모드에서 금지됐습니다.

비엄격 코드에서 블록 레벨 함수

불가능. 비엄격 코드에서, 블록 내부 function 선언은 이상하게 동작합니다.

함수의 존재 여부

함수의 존재 여부는 typeof연산자를 사용하여 결정할 수 있다.

 if ('function' == typeof window.noFunc) {
   // noFunc() 사용
 } else {
   // 뭔가 다른 것 수행
 }

Call-by-value, Call-by-reference

원시 타입 인수는 Call-by-value(값에 의한 호출)로 동작한다.

function foo(primitive) {
  primitive += 1;
  return primitive;
}

var x = 0;

console.log(foo(x)); // 1
console.log(x);      // 0

객체형(참조형) 인수는 Call-by-reference(참조에 의한 호출)로 동작한다.

Array도 원시 타입이 아니기 때문에 Call-by-reference(참조에 의한 호출)로 동작한다.

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

var num = 100;
var obj = {
  name: 'Lee',
  gender: 'male'
};

console.log(num); // 100
console.log(obj); // Object {name: 'Lee', gender: 'male'}

changeVal(num, obj);

console.log(num); // 100
console.log(obj); // Object {name: 'Kim', gender: 'female'}

어떤 외부 상태도 변경하지 않는 함수를 순수함수(Pure function), 외부 상태도 변경시켜는 부수 효과(side-effect)가 발생시키는 함수를 비순수 함수(Impure function)라 한다. 우리는 순수함수를 지향하자!

• https://poiemaweb.com/js-function

자바스크립트 꼬리물기와 for에 관하여...

우리는 재귀함수로 그 패턴을 처리하는데, 크롬의 경우 꼬리물기를 지원하지 않아서 허용되는 Call Stack의 개수가 생각보다 많지 않아서 언제나 Stackoverflow의 가능성이 항상 존재한다. 모든 꼬리물기 재귀함수는 for문으로 치환할 수 있다. 이를 통해, 우리는 재귀함수의 Stackoverflow의 가능성을 피할 수 있다. (상세 내용은 위 링크 참조)