기본 문법|함수

정의

자바스크립트에서 함수의 정의는 function 키워드로 시작되며, 다음과 같은 구성요소를 가집니다.

  1. 함수의 이름

  2. 괄호 안에 쉼표(,)로 구분되는 함수의 매개변수(parameter)

  3. 중괄호({})로 둘러싸인 자바스크립트 실행문

필수 : 함수 이름
옵션 : 매개 변수, 반환결과

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

문법

function 함수이름(매개변수1, 매개변수2,...) {

    함수가 호출되었을 때 실행하고자 하는 실행문;

}

ex)
function addNum(x, y) { // x, y는 이 함수의 매개변수임.
return x + y;
}

document.write(addNum(2, 3));
//addNum() 함수에 인수로 2와 3을 전달하여 호출함. 값은 5가 출력됨.

함수 호출

arguments[0] 및 [1]은 호출 값 자리이다. (0번째 숫자, 1번째 숫자..)

함수 반환

자바스크립트에서 함수는 반환(return)문을 포함할 수 있습니다.

이러한 반환문을 통해 호출자는 함수에서 실행된 결과를 전달받을 수 있습니다.

반환문은 함수의 실행을 중단하고, return 키워드 다음에 명시된 표현식의 값을 호출자에게 반환합니다.

반환문은 배열이나 객체를 포함한 모든 타입의 값을 반환할 수 있습니다.

ex)

function multiNum(x, y) {

    return x * y;         // x와 y를 곱한 결과를 반환함.

}

var num = multiNum(3, 4); // multiNum() 함수가 호출된 후, 그 반환값이 변수 num에 저장됨.

document.write(num);

값으로서의 함수

자바스크립트에서 함수는 문법적 구문일뿐만 아니라 값(value)이기도 합니다.

따라서 함수가 변수에 대입될 수도 있으며, 다른 함수의 인수로 전달될 수도 있습니다.

다음 예제는 함수를 변수에 저장하여 사용하는 예제입니다.

예제
unction sqr(x) { // 제곱의 값을 구하는 함수 sqr를 정의함.

return x * x;

}

var sqrNum = sqr; // 변수 sqrNum에 함수 sqr을 대입함.

document.write(sqr(4) + "<br>"); // 함수 sqr을 호출함.

document.write(sqrNum(4)); // 변수 sqrNum를 함수처럼 호출함.

재귀 함수

콜백 함수

넘기는 함수를 콜백함수, 콜백함수를 실행하는 함수를 고차함수라 한다.

call by

  • call by value :

    b의 값에 a 값을 넣어주므로써 b는 2가 됨.
    a는 영향을 받지않고 그대로 1임.
    각각 다른 메모리 영역이므로 b가 업데이트 되어도 a에 영향을 미치지 않음
    이걸 값에 대한 복사라고 한다.

  • call by reference

    함수가 호출될 때, 메모리 공간 안에서는 함수를 위한 별도의 임시 공간이 생성된다. (예: stack frame) 함수가 종료되면 해당 공간은 사라진다.
    call-by-reference 참조에 의한 호출방식은 함수 호출시 인자로 전달되는 변수의 레퍼런스를 전달한다. (해당 변수를 가르킨다.)
    `따라서 함수 안에서 인자의 값이 변경되면, 아규먼트로 전달된 객체의 값도 함께 변경된다.

연습문제

즉시실행함수

함수 표현(Function expression)은 함수를 정의하고, 변수에 함수를 저장하고 실행하는 과정을 거칩니다. 하지만 즉시 실행 함수는 함수를 정의하고 바로 실행하여 이러한 과정을 거치지 않는 특징이 있습니다. 함수를 정의하자마자 바로 호출하는 것을 즉시 실행 함수라고 이해하면 편할 것 같습니다.

블럭 스코프를 흉내내는 새로운 스코프를 만들어냄.

문법

즉시 실행 함수의 기본 형태는 아래와 같습니다.

(function () {
    // statements
})();

ex)

(function (num) {
  console.log(num);
})(1);    // 1 출력

화살표함수

ex)

(() => {console.log("HI");})();   // HI 출력

좋은 웹페이지 즐겨찾기