[네이버 부스트코스 웹 프로그래밍] JavaScript 함수, 함수표현식, 호이스팅, 아규먼트

함수와 함수표현식

함수

함수

function getName(name) {
    return "Kim" + name;
}
console.log(getName("SuHanMu"));
/*결과:KimSuHanMu*/

함수표현식

var getName = function(name) {
    return "Kim" + name;
}
console.log(getName("SuHanMu"));
/*결과:KimSuHanMu*/

Arrow Function (ES2015에서 추가)

var getName = (name) => "kim" + name;
console.log(getName("SuHanMu"));
/*결과: kimSuHanMu*/

 

자바스크립트는 매개변수(파라미터) 개수와 인자(아규먼트)의 개수가 일치하지 않아도 오류가 발생하지 않음.

인자의 개수가 매개변수 개수보다 적은 경우: 남은 매개변수들은 undefined로 할당됨.

function foo(a) {
    console.log(a);
    return a;
}

console.log(foo());

//결과
//undefined
//undefined

인자의 개수가 매개변수 개수보다 많은 경우: 남은 인자는 무시됨.

자바스크립트는 오버로딩이 존재하지 않음. 아래와 같은 방식으로 함수 오버로딩처럼 사용 가능.
출처) https://www.zerocho.com/category/JavaScript/post/59c17a58f40d2800197c65d6

function overload(a, b, c) {
  if (typeof c === 'function') { // 문자열 두 개와 콜백
    c(a, b);
  } else if (typeof b === 'function') { // 옵션 객체와 콜백
    b(a);
  } else { // 콜백 하나
    a();
  }
}

 

return 이 없으면 - undefined 반환

 

 

호이스팅

정의: 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 블럭 안 최상단에 선언하는 것.

• var 선언문과 함수선언문만 호이스팅이 일어남.
• let/const 변수 선언, 함수 표현식에서는 호이스팅이 일어나지 않음.
• 선언만 위로 올라가고 할당은 올라가지 않음 => 함수표현식에선 var 선언만 올라가므로 에러가 발생할 수 있음.

상세 규칙:

• 변수 선언이 함수 선언보다 위로 올라간다.
  => 같은 이름의 값이 할당되지 않은 변수, 함수가 있으면 변수가 나중에 나오는 함수로 덮어씌워짐.
• 선언만 위로 올라가고 할당은 올라가지 않는다.
  => 같은 이름의 값이 할당된 변수와 함수가 있으면 함수 선언이 변수를 덮어씌우고,
       변수 할당이 다시 함수를 덮어씌움. 

코드의 가독성과 유지보수를 위해 호이스팅이 일어나지 않도록 설계하고, let/const를 적극 사용한다.

 

아규먼트

함수가 실행되면 자동으로 arguments라는 특별한 array-like 지역 변수가 생성됨.

function a() {
    console.log(arguments);
    console.log(typeof arguments);
    console.log(toString.call(arguments));
}
a(1,2,3);
/*결과
[Arguments] { '0': 1, '1': 2, '2': 3 }
object
[object Arguments]
*/

배열의 형태로 arguments[2]과 같이 하나씩 접근 가능.

arguments.length로 인자의 개수를 받을 수 있음.

배열은 아니므로 배열의 메소드 사용 불가능.

가변 인자를 받아서 처리하는 함수를 만들 때 유용하지만 arguments 속성을 남용하면 코드의 작동을 예측하기 힘들므로 주의해서 써야 한다.

 

응용해보기

arguments속성을 사용해서 , 1~무한대까지 인자를 받아 합을 구하는 함수를 만들어봅시다.

function sum() {
    a = 0;
    for (var n of arguments) {
        a += n;
    }
    return a;
}
console.log(sum(1));
console.log(sum(1,2,3,4,5,6,7,8,9,10));
/*결과
1
55
*/

function sum() {
    a = 0;
    for (var n in arguments) {
        a += arguments[n];
    }
    return a;
}
console.log(sum(1));
console.log(sum(1,2,3,4,5,6,7,8,9,10));
/*결과
1
55
*/

참고: https://jsdev.kr/t/for-in-vs-for-of/2938

자바스크립트 for in vs for of 반복문 정리

 반복문 속도에 관한 이슈, reduce 사용하기: https://www.zerocho.com/category/JavaScript/post/5acafb05f24445001b8d796d

(JavaScript) map, reduce 활용하기 - 함수형 프로그래밍