[부스트코스] 웹 프로그래밍 FE: JavaScript 3 함수, 함수 호출 스택

오늘은 JavaScript 마지막 파트입니다. JavaScript의 함수에 대하여 알아보겠습니다.

학습 목표

1. JavaScript의 기본문법을 이해한다.
2. DOM, Browser Event, Ajax이 각각 무엇인지 이해하고, 이를 활용해 웹화면을 제어할 수 있다.
3. JSP의 라이프사이클을 이해하고 redirect & forward 와 scope를 이해하고 사용할 수 있다. 
4. JSTL과 EL을 사용할 수 있다. 
5. 데이터베이스를 설치하고 간단한 SQL을 사용할 수 있다. 
6. Maven을 이해하고 Maven을 이용한 웹 어플리케이션을 작성할 수 있다. 
7. JDBC 프로그래밍을 할 수 있다. 
8. Web API를 이해한다. 

강의 링크👇

[LECTURE] 3) 자바스크립트 함수 : edwith

 

[LECTURE] 4) 자바스크립트 함수 호출 스택 : edwith

 

목차

1. 함수 선언식
2. 함수 표현식
3. 호이스팅
4. 반환값
5. arguments
6. Arrow function
7. 호출 스택

 

1. 함수 선언식(Function Declarations)

함수는 여러 개의 인자를 받아서, 그 결과를 출력합니다. 파라미터의 개수와 인자의 개수가 일치하지 않아도 오류가 나지 않습니다. 

만약, 파라미터 1개가 정의된 함수를 부를 때, 인자의 개수를 0개만 넣어 실행하면, 이미 정의된 파라미터(매개변수)는 undefined이라는 값을 갖게 됩니다. 이는 변수는 초기화됐지만, 값이 할당되지 않았기 때문입니다.

아래와 같은 형식의 함수 선언코드를 함수선언문이라고 합니다.  

function declaration() {
    return 'function decalrations';
}

2. 함수 표현식(Function Expressions)

변숫값에 함수 표현식을 담아 놓은 것을 함수 표현식이라고 말합니다. 함수선언문과 달리 선언과 호출순서에 따라서 정상적으로 함수가 실행되지 않을 수 있습니다.

함수 표현식보다 함수 선언문을 더 자주 사용하지만, 어떤 코딩컨벤션에서는 함수 표현식을 권장하기도 합니다.

어떤 컨벤션을 갖던지 한가지만 정해서 사용하는 게 좋습니다.

var expresstion = function () {
    return 'function expresstions';
}
 

3. 표현식과 호이스팅

자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 미리 다 모아서 선언합니다.

함수 안에 있는 변수들을 모두 끌어올려서 선언한다고 해서, 이를 hoisting이라고 합니다.
(실제로 코드가 끌어올려지는 건 아니며<이 과정이 눈에 보이는 게 아니죠>, 자바스크립트 내부적으로 그렇게 끌어올려서 처리하는 것입니다)

함수 선언식과 표현식의 차이점

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

함수 선언식은 코드를 구현한 위치와 관계없이 자바스크립트 특징인 호이스팅에 따라 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려집니다.

따라서 아래와 같은 코드가 실행되면 

console.log(declaration());
console.log(expresstion());
 
 
function declaration() {
    return 'function decalrations';
}
 
var expresstion = function () {
    return 'function expresstions';
}

호이스팅에 의해 자바스크립트 해석기는 코드를 아래와 같이 인식하기 때문에 

function declaration() {
    return 'function decalrations';
}
 
var expresstion;
 
console.log(declaration());
console.log(expresstion());
 
 
expresstion = function () {
    return 'function expresstions';
};

이런 오류 메시지를 나타내게 됩니다.

 

따라서

함수 선언식은 코드를 구현한 위치와 관계없이 자바스크립트 특징인 호이스팅에 따라 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려지고,

함수 표현식은 자바스크립트 호이스팅에 따라 변수가 끌어올려지는 형태가 되기 때문에 함수가 아닌 변수로 인식하여 함수선언문과 달리 선언과 호출순서에 따라서 정상적으로 함수가 실행되지 않을 수 있습니다.

호이스팅을 제대로 모르더라도 함수와 변수를 가급적 코드 상단부에 선언하면, 호이스팅으로 인한 스코프 꼬임 현상은 방지할 수 있다.

함수 표현식 vs 함수 선언식

 

4. 반환값

자바스크립트 함수는 반드시 return값이 존재하며, 없을 때는 기본 반환값인 'undefined'가 반환됩니다.

자바스크립트에서는 void 타입이 없습니다. 

function printName(firstname) {
    var myname = "jisu";
    var result = myname + " " +  firstname;
}
 
console.log(printName());

위의 코드의 반환값은 undefined 입니다.

 

5. arguments

함수가 실행되면 그 안에는 arguments라는 특별한 지역변수가 자동으로 생성됩니다. arguments의 타입은 객체입니다.(console.log( typeof arguments) 로 확인해보세요!)

• 정의된 인자보다 적게 함수를 호출했을 경우, 넘겨주지 않은 인자에는 특별한 값 undefined가 할당된다.
• 반대로 정의된 인자보다 많게 함수를 호출했을 경우, 에러가 발생하지 않고 초과된 인수는 무시된다.

자바스크립트 함수는 선언한 파라미터보다 더 많은 인자를 보낼 수도 있습니다. 이때 넘어온 인자를 arguments로 배열의 형태(숫자로 인덱싱된 프로퍼티)로 하나씩 접근할 수가 있습니다. 하지만 arguments는 배열타입은 아니기때문에 배열의 메서드를 사용할 수가 없고 유사 배열 객체 라고 부릅니다.

이러한 특성 때문에 함수 코드를 작성할 때, 런타임 시 호출된 인자의 개수를 확인하고 이에 따라 동작을 다르게 해줄 수 있습니다.

 

6. Arrow function 

ES2015 = ES6

화살표 함수(Arrow function)는 function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있습니다. 하지만 모든 경우 화살표 함수를 사용할 수 있는 것은 아닙니다. 화살표 함수의 기본 문법은 아래와 같습니다.

// 매개변수 지정 방법
    () => { ... } // 매개변수가 없을 경우
     x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.
(x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.
 
// 함수 몸체 지정 방법
x => { return x * x }  // single line block
x => x * x             // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다. 위 표현과 동일하다.
 
() => { return { a: 1 }; }
() => ({ a: 1 })  // 위 표현과 동일하다. 객체 반환시 소괄호를 사용한다.
 
() => {           // multi line block.
  const x = 10;
  return x * x;
};

화살표 함수는 익명 함수로만 사용할 수 있기 때문에 화살표 함수를 호출하기 위해서는 함수 표현식을 사용합니다.

자세한 내용은 잘 정리된 글이 있으니 아래 블로그를 참고해 주세요.

Arrow function | PoiemaWeb

 

7. 호출 스택(Call Stack)

자바스크립트는 단일 스레드 프로그래밍 언어이므로, 단일 호출 스택이 있습니다. 단일 호출 스택이 있다는 뜻은 한 번에 하나의 일(Task)만 처리할 수 있다는 뜻입니다.

stack이란 프로그램에서 우리가 어디에 있는지를 기본적으로 기록하는 데이터 구조로 선입후출입니다. 프링글스 과자를 먹을 때 처럼 가장 먼저 넣어져 맨 아래 깔려진 감자칩은 맨 마지막에 먹을 수 있습니다. 

function foo(b){
    var a = 5;
    return a * b + 10;
} 
 
function bar(x){
    var y = 3;
    return foo(x * y);
}
 
console.log(bar(6));

위와 같은 코드가 실행되면

처음에 11번째 줄 console.log(bar(6))이 call stack에 쌓기게 됩니다. 그리고 bar()함수가 그 위에 쌓이고, foo()가 쌓이게 됩니다. foo()함수가 모든 동작을 끝내고 return 됐을 때 메모리 공간에서 사라지게 됩니다. 즉, call stack 에서 사라지게 됩니다. 그리고 나서 bar도 받아온 값으로 마저 동작을 다 끝낸다음 return 되고, call tack에서 사라지고, console.log()까지 실행되고 call stack이 비어지면 프로그램이 끝나게 됩니다.

call stack은 이렇게 동작하지만, 함수를 연속적으로 계속 호출하면 call stack이 꽉 차버리면서 더 실행되지 못하고 오류가 발생할 겁니다. 그래서 브라우저에서는 대부분 지정된 횟수만큼만 call stack을 쌓게 미리 설정해둔 경우가 많다고 합니다. 따라서 혹시 개발 중에 Maximum call stack size exceeded 오류를 발견해도 너무 놀라지 말고, 대처하도록 하세요.

더 자세한 내용은 아래 블로그를 참고하시면 좋을 것 같습니다.

자바스크립트 호출 스택(Call Stack) 이해하기

 

 

이렇게 오늘 Javascript 함수에 대하여 알아보았습니다. 다음에는 WEB UI 개발에 관련된 정보를 가지고 오도록 하겠습니다. 감사합니다.