function (Javascript)

January·2022년 4월 20일

IIFE JavaScript function new Function return 매소드 체이닝 콜백함수 호이스팅 호출함수

Frontend

목록 보기

8/31

함수

함수는 작업을 수행하거나 값을 계산하는 문장 집합 같은 자바스크립트 절차이다.

일반함수

일반 함수는 다른 말로 함수 선언식이라고도 할 수 있다. 자바스크립트가 처음 읽힐 당시에 해석되므로, 함수가 쓰여진 위치가 상관없다. 일반 함수는 함수 전체(함수명, 함수바디)가 통째로 호이스팅 되어 맨 위로 올라가기 때문에 위치 상관없이 읽을 수 있는 것이다.

자바스크립트를 초기에 읽어올때 일반함수는 전부 호이스팅 되기 때문에 메모리 소모가 크다.

익명함수

익명 함수는 재사용 하지 않는, 한번만 사용할 함수를 위한 개념으로, 따로 함수의 이름을 갖지 않는다. 리터럴(Literal) 방식으로 변수에 담겨 사용하는 함수이다.

단 한번만 사용되는(재사용이 필요없는) 함수의 경우, 불필요한 시간동안 메모리를 차지하지 않도록 익명함수로 구현한다면, 정확히 해당 함수가 필요한 위치에서만 해당 함수가 구현되고 사라지면서 메모리를 아낄 수 있게 된다.

선언과 표현

함수 선언식

function abc () {

}

함수 표현식 (함수에 이름이 없어서 익명함수라고 한다.)

const abc = function () {

}

데이터 함수

new function()

함수 표현식과 함수 선언문 이외에 함수를 만들 수도 있는 방법이 하나 더 있다.

new Function 문법을 사용하면 함수를 만들 수 있다.

let func = new Function ([arg1, arg2, ...argN], functionBody)

새로 만들어지는 함수는 인수 arg1...argN과 함수 본문 functionBody로 구성된다.
인수 두 개가 있는 함수를 직접 만들어 보면서 new Function 문법에 대해 이해해보자.

let sum = new Function('a', 'b', 'return a + b')

alert( sum(1, 2) ) // 3

return a + b는 함수 본문이므로 sum(1, 2) 값은 3이다.

기존에 사용하던 방법과 new Function을 사용해 함수를 만드는 방법의 가장 큰 차이는 런타임에 받은 문자열을 사용해 함수를 만들 수 있다는 점이다.

let str = ... 서버에서 동적으로 전달받은 문자열(코드 형태) ...

let func = new Function(str)
func()

아직 이 부분은 공부하지 못해서 이해는 안가지만..서버?😅

new Function이라는 문법을 사용하면 어떤 문자열도 함수로 바꿀 수 있다. 서버에서 전달받은 문자열을 이용해 새로운 함수를 만들고 이를 실행하는 것도 가능하다. 서버에서 코드를 받거나 템플릿을 사용해 함수를 동적으로 컴파일해야 하는 경우, 복잡한 웹 애플리케이션을 구현할 때와 같이 아주 특별한 경우에 new Function을 사용할 수 있다.

함수호출

함수를 선언한 경우, 함수 호출은 함수 선언 전 또는 함수 선언 후에 할 수 있다.

function multiply(a, b) {
  return a * b
}

함수 선언만으로는 아무일도 일어나지 않는다.

function multiply(a, b) {
  return a * b
}

multiply(5, 2)  // 10

함수이름()으로 호출을 해야한다. 함수는 호출하기 전까지는 하나의 데이터일 뿐이다.

반환과 종료 (return)

함수 본문에서 return 명령문에 도달하면 함수의 실행은 그 지점에서 중단된다. 값을 제공한 경우 함수를 호출한 곳에 그 값을 반환한다.

function cup(a, b) {
  console.log(a - b)
  return
}

cup(5, 2)  // 3

return 다음에 표현식이 더 있다면 불투명해지고 실행이 중단된다.

function good(){
  console.log("2. 함수가 실행되었습니다.")
  return  
  console.log("3. 함수가 실행되었습니다.") //실행안됨
}
good()

반환문은 배열이나 객체를 포함한 모든 타입의 값을 반환할 수 있다. 반환문을 통해 호출자는 함수에서 실행된 결과를 전달받을 수 있다.

Method Chaining

연속적인 코드 줄에서 객체의 Method를 연속적으로 호출한다. 메서드가 객체를 반환하게 되면, 메서드의 반환 값인 객체를 통해 또 다른 함수를 호출할 수 있다.

const Test = function() {
    this.x = 0;
    this.y = 0;
    this.z = 0;
};
Test.prototype.setX = function(x) {
    this.x = x;
    return this;
};
 
Test.prototype.setY = function(y) {
    this.y = y;
    return this;
};
 
Test.prototype.setZ = function(z) {
    this.z = z;
    return this;
};

메소드 체이닝을 위해 this를 리턴한다.

// 메소드 체이닝 패턴을 이용한 set 호출
var element = new Test();
element.setX(1).setY(2).setZ(3);
 
// Test {x : 1, y : 2, z : 3}
console.log(element);

잘 이해가 가지는 않는다😅

IIFE

즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)은 정의되자마자 즉시 실행되는 Javascript Function 를 말한다.

이는 Self-Executing Anonymous Function 으로 알려진 디자인 패턴이고 크게 두 부분으로 구성된다.

괄호((), Grouping Operator)로 둘러싸인 익명함수(Anonymous Function)
- 이는 전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지할 수 있을 뿐 아니라 IIFE 내부안으로 다른 변수들이 접근하는 것을 막을 수 있는 방법이다.

(function () {
    var aName = "Barry";
})();
// IIFE 내부에서 정의된 변수는 외부 범위에서 접근이 불가능하다.
aName // throws "Uncaught ReferenceError: aName is not defined"

즉시 실행 함수를 생성하는 괄호()

var result = (function () {
    var name = "Barry";
    return name;
})();
// 즉시 결과를 생성한다.
result; // "Barry"

호이스팅

함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다.

변수 선언 중 var, 그리고 함수선언문에서만 호이스팅이 일어난다.

foo();  // hello
foo2();  // Uncaught TypeError


function foo() { // 함수선언문
        console.log("hello");
}
var foo2 = function() { // 함수표현식
        console.log("hello2");
}

콜백

콜백함수는 간단하게 다른 함수에 매개변수로 넘겨준 함수를 말한다. 매개변수로 넘겨받은 함수는 일단 넘겨받고, 때가 되면 나중에 호출(called back)한다는 것이 콜백함수의 개념이다.

function pull(code, mus, ta) {
  count < 3 ? link() : good()
}

function up() {
  console.log('60회 5세트')
  console.log('힘들죠')
}

function bar() {
  console.log('벌크업하고 거울보세용')
}

pull(2, up, bar)