자바스크립트 함수

• 들어가기 전에

"자바스크립트 잘 이해하고 있다는 것" === "자바스크립트 함수를 잘 이해하고 있다"

• 학습 목표

1. 자바스크립트의 선언방식들과 그 차이점, 반환값, hoisting을 이해한다.

• 핵심 개념

- Function

- Hoisting

- arguments

- 기본 반환값(undefined)

• 함수 - 함수의 선언

- 일반적인 선언 ex) function inner() { }

- 함수는 여러 개의 인자를 받아서, 그 결과를 출력한다.

- 파라미터의 개수와 인자의 개수가 일치하지 않아도 오류가 나지 않는다.

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

function printName(firstName) {
    var myname = "hzoou";
    return "name is " + firstname;
}
console.log(printName()); //name is undefined

· 위 함수 선언코드는 함수선언문이라고 한다.

• 함수 - 함수표현식

- 함수를 변수에 담아서 표현한다. ex) var inner = function() { }

- 함수는 아래 printName과 같이 표현할 수도 있다. 이렇게 선언하면 함수선언문과 달리 선언과 호출순서에 따라 정상적으로 함수가 실행되지 않을 수 있다.

- 함수 표현식보다 함수 선언문을 더 자주 사용하지만, 어떤 코딩 컨벤션에서는 함수 표현식을 권장하기도 한다. 어떤 컨벤션을 갖던지 한가지만 정해서 사용하는 게 좋다.

function test() {
    console.log(printName());
    var printName = function() {
        return 'anonumouse';
    }
}
test(); //TypeError: printName is not a function

• 함수 - 표현식과 호이스팅

- 앞선 코드에서, printName이 "printName이 not defined"라고 오류가 나오지않고, function이 아니라고 나온 이유는 printName이 실행되는 순간 'undefined'로 지정됐기 때문이다.

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

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

- 따라서 아래 코드 역시 함수를 값으로 가지지만 어쨌든 printName도 변수이므로 끌어올려지고, 값이 할당되기 전에 실행됐으므로 undefined가 할당된 상태이다.

• 함수 - 반환값과 undefined

- 아래 함수의 반환값은 undefined다.

function a() {
}
 
console.log(a); //undefined

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

• 함수 - arguments 객체

- 함수가 실행되면 그 안에는 arguments(인자)라는 특별한 지역변수가 자동으로 생성된다. arguments의 타입은 객체이다. 

- 자바스크립트 함수는 선언한 파라미터보다 더 많은 인자를 보낼 수도 있다. 이때 넘어온 인자를 arguments로 배열의 형태(array-like)로 하나씩 접근할 수 있다. arguments는 배열타입은  아니다. 따라서 배열의 메서드를 사용할 수가 없다.

function a() {
    console.log(arguments);
}
 
a(1,2,3); //{ '0':1, '1':2, '2':3 }

• Arrow function

- ES2015에는 arrow function이 추가됐다. 간단하게 함수를 선언할 수 있는 문법으로 처음에는 꽤 낯설다.

- 하지만 점점 많이 사용되고 있는 syntax이므로 같이 알아두자.

function getName(name) {
    return "Woo" + name;
}
 
//위 함수는 아래 arrow 함수와 같다.
ver getName = (hzoou) => "Woo" + name;