Javascript, 함수의 기초 1

[1] 함수

함수 이름 f, 주어진 입력 값 x에 대해 출력 값 y

y = f(x)

• 자바스크립트에서 함수는 일련의 처리를 하나로 모아 언제든 호출할 수 있도록 만들어 둔 것
• 입력을 받은 후 함수 안의 프로그램에서 특정 작업을 수행
• 함수의 입력 값을 인수라 하고, 함수의 출력 값을 반환값이라 부른다.

[2] 함수 선언문으로 함수 정의하기

< function 키워드 >

function square(x) { return x * x; }

• 인수 : x
• 함수가 실행하는 작업 : { … } 안의 코드
• 함수의 반환값 : return 문에 저정된 값

(주의) return 문 다음에는 줄 바꿈을 해서는 안된다.

[3] 함수 이름

• 함수의 기능을 이해하기 쉽게 지어야 함.
• 함수 이름을 잘 붙이면, 함수의 기능을 주석을 보지 않고도 파악할 수 있어 프로그램의 가독성과 유지 보수성이 크게 높아짐.
• 동사 또는 동사로 시작되는 어휘로 만든다. 캐멀 표기법 또는 밑줄 표기법을 사용

function saveImage(img) { ... }

function getMousePosition(event) { ... }

function load_file() { ... }

[4] 함수 호출

함수를 호출하려면 함수 이름 뒤에 ()로 인수를 묶어 입력

function square(x) {
    return x * x;
}
square(3)    // → 9

1. 인수로 넘긴 값인 3이 함수 정의문 인수 x로 전달되고, ( 3 → x )

2. { } 안에 작성된 코드를 실행

3. 결과적으로 return 문의 값인 9가 함수의 반환값이 된다.

• 인수(argument) : 함수를 호출할 때 전달하는 값 – 3
• 인자(parameter) : 함수 정의문의 인수 – x

[5] 인수

함수는 인수를 여러 개 받을 수 있다. 인수와 인수는 쉼표(,)로 구분

function dist(p, q) {
    var dx = q.x - p.x;
    var dy = q.y - p.y;
    return Math.sqrt(dx*dx + dy*dy);
}

// 이 코드는 '모던 자바스크립트 입문(徹底マス夕一JavaScriptの敎科書)'에서 인용한 것입니다.
// [ISBN #978-4797388640]. Copyright 2017 by 磯博

• 함수 dist는 두 점 사이의 거리를 구하는 함수
• 이때 전달하는 인수 p와 q는 좌표평면의 점 하나를 표현하는 객체
• 각각의 객체는 {x:1, y:2} 라는 구조를 갖고 있다.
• 위 코드에 등장하는 Math.sqrt는 제곱근을 구하는 함수 < 5.2 [2] p137 >

위 코드에서 두 점 사이의 거리를 구하는 코드는 다음과 같다.

var p1 = {x:1, y:1};
var p2 = {x:4, y:5};
var d = dist(p1, p2);    // → 5

인수를 받지 않는 함수도 정의할 수 있다.

var bark = function() { console.log("Bow-wow"); };
bark()    // → Bow-wow

bark 함수에는 인수도 없고 return 문도 없다.

return 문이 실행되지 않은 상태에서 제어권이 함수를 호출한 코드로 되돌아가면 함수의 반환값이 undefined가 된다.

console.log(bark());    // → undefined

[6] 함수의 실행 흐름

• 호출한 코드에 있는 인수가 함수 정의문의 인자에 대입
• 함수 정의문의 { } 안에 작성된 프로그램이 순차적으로 실행
• return 문이 실행되면 호출한 코드로 돌아가며, return 문의 값은 함수의 반환값이 된다.
• return 문이 실행되지 않은 상태로 마지막 문장이 실행되면, 호출한 코드로 돌아간 후에 undefined가 함수의 반환값이 된다.

[7] 함수 선언문의 끌어올림

함수 선언문은 프로그램의 어떤 위치에도 작성할 수 있다.

아래와 같이 작성해도 함수 선언문을 끌어올려 문제 없이 작동한다.

console.log(square(5));    // → 25
function square(x) { return x * x; }

[8] 값으로서의 함수

자바스크립트에서는 함수가 객체

function square(x) {
    return x * x;
}

• 함수 선언문으로 함수를 선언하면
• (내부적으로는 그 함수 이름을 변수 이름으로 한) 변수와 함수 객체가 만들어지고,
• 그 변수에 함수 객체의 참조가 저장된다.

이 변수 값을 다른 변수에 할당하면 그 변수 이름으로 함수를 실행할 수 있다.

var sq = square;
console.log(sq(5));    // → 25

또한 함수를 다른 함수의 인수로 넘길 수도 있다.

[9] 참고에 의한 호출과 값에 의한 호출

함수는 원시 값을 인수로 넘겼을 때와 객체를 인수로 넘겼을 때 다르게 동작한다.

1. 인수가 원시 값일 때,

function add1(x) { return x = x + 1; }
var a = 3;
var b = add1(a);
console.log("a = " + a ", b = " + b);    // → a = 3, b = 4

• 인자 x에 변수 a의 복사본이 할당
• 인수에 원시값을 넘기면 그 값 자체가 복사되어 인자에 전달 : 값의 전달
• 이 때, 변수 a와 변수 x는 다른 영역의 메모리에 위치한 별개의 변수이다.
• 그러므로 x 값을 바꾸더라도 a 값은 바뀌지 않는다.

2. 인수가 객체일 때,

function add1(p) {
    p.x = p.x + 1;
    p.y = p.y + 1;
    return p;
}
var a = { x:3, y:4 };
var b = add1(a);
console.log(a, b)    // → Object {x=4, y=5} Object {x=4, y=5}

// 이 코드는 '모던 자바스크립트 입문(徹底マス夕一JavaScriptの敎科書)'에서 인용한 것입니다.
// [ISBN #978-4797388640]. Copyright 2017 by 磯博

• 함수가 호출될 때 변수 a의 복사본이 인자 p에 할당 (변수 a가 원시 값일 때와 동일하게 작동)
• 단, 이번에는 변수 a에 객체 { x:3, y:4 }의 참조가 저장되어 있음.
• 인수로 객체를 넘겼을 때 전달되는 값은 참조 값으로 이를 p에 대입 : 참조 전달
• 이 때 인자 p와 변수 a는 똑같은 객체를 참조하고 있다.
• 따라서 함수 안에서 p.x와 p.y를 수정하는 행위는 a.x와 a.y를 수정하는 것과 같다.
• 즉, 함수의 인수로 객체를 넘기면 함수 안에서 원래의 객체를 바꿀 수 있다.

3. 인수 여러 개를 우아하게 전달하는 방법(elegant way)

함수에 넘겨야 하는 인수가 많아지면 인수의 순서를 착각하거나, 함수가 받는 인수 개수를 바꾸면 함수 호출 방법이 바뀌므로 프로그램 전체를 수정해야 하는 문제가 발생한다.

이는 객체의 프로퍼티에 인수를 담아서 넘기면 우아하게 해결할 수 있다.

function setBallProperties(x, y, vx, vy, radius) { ... }
...
setBallProperties(0, 0, 10, 15, 5);

위 함수의 인수를 아래와 같이 객체의 프로퍼티에 담아 함수에 넘긴다.

var parameters = {
    x: 0,
    y: 0,
    vx: 10,
    vy: 15,
    radius: 5
};
function setBallProperties(params) { ... }
...
setBallProperties(parameters);

// 이 코드는 '모던 자바스크립트 입문(徹底マス夕一JavaScriptの敎科書)'에서 인용한 것입니다.
// [ISBN #978-4797388640]. Copyright 2017 by 磯博

위와 같이 하면, 함수 안에서 프로퍼티를 읽는 코드는 params.vx처럼 표현하면 되므로 인수 순서가 바뀌는 문제가 발생하지 않는다.

전달하는 인수를 추가하는 경우에도 프로퍼티만 추가하면 되므로, 함수를 호출하는 방법을 바꿀 필요가 없다.

var parameters = {
    x: 0,
    y: 0,
    vx: 10,
    vy: 15,
    radius: 5
    color: "blue"    // 프로퍼티 추
};
setBallProperties(parameters);

단, 함수 안에서 객체의 프로퍼티를 수정하면 호출한 코드에 있는 인수 객체의 프로퍼티가 함께 바뀌므로 주의해야 한다. 객체를 인수로 넘기면 함수에는 객체의 참조가 전달되기 때문이다.

< 참고문헌 >
🔹주 참고문헌 : 모던 자바스크립트 입문 – 이소 히로시 지음, 서재원 옮김
🔹MDN Web Docs