[부스트코스] 자바스크립트 함수

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

 

 

함수의 선언

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

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

파라미터가 1개일때, 인자의 갯수가 0개만 넣어 실행하면, 이미 정의된 파라미터는 undefined라는 값을 갖게 된다.

이는 변수는 초기화됐지만, 값이 할당되지 않았기 때문이다.

// 함수의 호출.
function printName(firstname) {
    return "name is" +  firstname;
}

console.log(printName());

// 출력 결과 : name is undefined

console.log(printName('bellroute'));

// 출력 결과 : name is bellroute

console.log(printName('bellroute', 'bell'));

// 출력 결과 : name is bellroute

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

 

 

함수 표현식

함수는 아래 printName과 같이 표현할 수도 있다.

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

function test() { 
    console.log(printName()); 
    var printName = function() {
        return 'anonymouse';
    }
}

test();
//TypeError: printName is not a function

console.log 안에 printName을 함수로 인식하지 못하고 있어서 TypeError가 발생한다.

 

하지만 신기하게도 printName을 함수 선언문으로 변경하면 함수가 출력 코드보다 밑에 있어도 정상 작동한다.

function test() { 
	
    var result = printName();
    console.log(result); 
    
    function printName() {
        return 'anonymouse';
    }
}

test();
// anonymouse

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

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

 

 

표현식과 호이스팅

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

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

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

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

printName(); //아직, printName이 undefined으로 할당된 상태다. 
var printName = function(){}

printName이라는 변수가 존재하고 아직 값이 할당되기 전이므로 printName에는 'undefined'이라는 기본 값이 할당된 셈이다.

function test() {

	// 함수 선언문이 호이스팅 되면 이렇게 함수 코드 자체가 위로 올라기 때문에 타입이 function
    function inner() {
    }
    
    // 함수 표현식은 다음과 같이 올라오기 때문에 타입이 undefined가 됨
    var a;
    
    ...
    var result = inner();
    var a= function() {};
}

 

 

반환값과 undefined

아래 함수의 반환값은?

function printName(firstname) {
    var myname = "bellroute";
    var result = myname + " " +  firstname;
}

정답은 undefined이다.

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

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

 

 

arguments 객체

함수가 실행되면 그 안에는 arguments라는 특별한 지역변수가 자동으로 생성된다.

arguments의 타입은 객체이다. (console.log(typeof arguments)로 확인 가능)

자바스크립트 함수는 선언한 파라미터보다 더 많은 인자를 보낼 수도 있다.

이때 넘어온 인자를 arguments로 배열의 형태로 하나씩 접근할 수 있다.

aruments는 배열타입은 아니다.

따라서 배열의 메서드를 사용할 수 없다.

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

function b() {
 console.log('my name is ', arguments[2]);
}
b(1,2,"bell");
// my name is bell

자바스크립트의 가변인자를 받아서 처리하는 함수를 만들때 등에서 arguments속성을 유용하게 사용할 수가 있다. 하지만, arguments를 너무 많이 사용하면 코드의 의도를 알기 어려울 수도 있다.

 

 

arrow function

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

하지만 점점 많이 사용되고 있는 syntax임으로 같이 알아두어도 좋다.

function getName(name) {
   return "Kim " + name ;
}

//위 함수는 아래 arrow함수와 같다.
var getName = (name) => "Kim " + name;

 

 

[부스트코스 관련 강의 링크]

자바스크립트 함수 - https://www.edwith.org/boostcourse-web/lecture/16695/

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