[JavaScript Tutorial] 014 Function Statements and Function Expressions 강의를 듣고 정리한 내용입니다.

function은 자바스크립트에서 블럭 { }을 만드는 기본적인 방법 중 하나이다. 함수란 변수를 가지고 어떤 일을 수행하거나 계산하는 일을 한다. 함수는 기본적으로 이렇게 생겼다.

function name([param[,param[,...]]]){}
function greet(name){
    console.log('Hello' + name);
}

함수를 선언하면 먼저 함수 객체가 메모리에 저장된다.

Parameter , Argument

function greet(name){
    console.log('Hello' + name);
}
greet('John');
  • function greet(name){..} 에서 name은 parameter
  • greet('John')에서 'John'은 argument

parameter는 함수를 선언할 때 쓰는 것이고, argument는 해당 parameter에 들어가는 실제 값을 의미한다.

  • 자바스크립트에서 변수의 defalut 값은 undefined 이다.

📎 Functions Statements and Function Expressions, 함수 선언, 함수 표현식

자바스크립트에서 함수를 만드는 방법은 크게 함수 표현식을 이용하는 방법, 함수 선언 방법이 있다.

  • 두 방법은 거의 비슷하며 가장 큰 차이점은 함수표현식에서는 함수의 이름이 없는 익명함수를 만들 수 있다는 것이다. 함수 표현식은 선언이 된 동시에 실행되는 즉시실행함수(IIFE)에서 사용될 수 있다. (MDN)
  • 여러 차이점이 있고 함수 선언식과 함수 표현식 둘의 사용 방법도 다르다.(Codecademy)

** 자바스크립트에서 함수는 객체라는 것을 꼭..꼭!! 명심하자.**

  • 자바스크립트의 function은 First Class Functions 이다. 함수를 변수 안에 담을 수도 있으며 인자로 전달할 수 있고 반환 값으로도 사용할 수 있으며, 런타임에 생성할 수 도 있다는 뜻이다. 때문에 익명함수를 비동기 함수의 callback과 같은 형식으로도 넘길 수 있는 것이다.

함수 표현식 : Function Expressions

자바스크립트에서 표현식이란, 값을 반환하는 식 또는 코드이다. 반환된 값은 어디 변수에 굳이 저장되지 않아도 된다.

  • = operator는 값을 리턴한다. 메모리에 값이 저장되게 된다.
  • + 또한 값을 리턴한다. (ex. 1+2) 실행하고 값을 반환해라
    // 브라우저의 console 창 
    var a; // undefined
    a = 3; // 3
    1+2; // 3
    a = {greeting :'hi'}; // {greeting : "hi"};
    var anonymous = function(){
      console.log('hi');
    }
    위의 식 모두 값을 리턴하는 표현식이다. 이 처럼 함수 표현식도 익명의 함수 객체를 만들고 메모리의 변수 anonymous에 해당 객체를 반환한다.

?????????????????? var a = {gree : 'hi'} 하면 값 undefined 뜨는데..var 가 없어야됨 먼저 var a; var a = {greet : 'hi'}

var anonymousGreet = function(){
    console.log('hi');
}

var anonymousGreet = "";
var anonymousGreet = 1;
var anonymousGreet = {'greet' : 'hi'};
//`var anonymousGreet =` 뒤에 문자열이나 숫자, 객체, 함수 등 여러 표현을 넣을 수 있다. 
  • 함수도 오브젝트이다. 따라서 함수 expression을 이용하면 anonymous라는 변수는 메모리의 주소값을 가지고 있고 가리키고 있는 주소에 function 오브젝트가 저장될 것이다.
  • 즉 function의 이름을 뜻하는게 아니라 메모리의 주소를 알고 있다는 뜻이다.
    anonmousGreet은 자바스크립트 엔진이 만든 익명의 function object를 가지고 있다. 함수 객체가 저장되어있는 곳의 주소값을 알고 있기 때문에 굳이 함수의 이름을 만들 필요가 없다.
  • 어떻게 invoke 시키지 ? i put parens () which invokes the code
    anonymousGreet()

Q. 이 경우 어떤 결과값이 나올까 ?

anaonymousGreet();

var anonymousGreet = function(){
    console.log('hi');
}
anaonymousGreet();

알아야하는 개념 : execution context
변수만 hoist됨

함수 선언 Function Statements

Statements

var a;
if(a==3){
...
}

if는 그냥 일반 statements이고 if statements 안에 어떤 값(true or false)을 리턴하는 expression이 있다.

Function Statements

greet();
// 함수 선언
function greet(){
    console.log('hi');
}
  • 함수 선언식은 실행가능한 문장이 아니기 때문에 끝에 ;을 붙이지 않는다.
  • **함수를 선언하면 함수 전체가 메모리 어딘가에 저장이 되지만 그냥 구문이기 때문에 함수가 실행될 때까지 어떤 값을 리턴하지 않는다.
  • 함수는 실행 컨텍스트의 creation phase 중 호이스트되고 메모리에 저장되게 된다. 따라서 함수 선언문 전에 함수 호출이 가능하다.
  • 함수도 객체이기 때문에 메모리에 greet라는 이름으로 저장되고 호출하면 property의 code를 invoke 시키게 된다.
  • Object의 속성 중 name이 greet이고, code가 안에 적은 코드이다.

참고 자료