[JS] 10장: 자바스크립트 함수 다루기

개요

이번 글에서는 역시나 2일 분량에 해당하는 10장 전문, 자바스크립트 함수에 대해 다룰 예정이다. 이미 다른 언어에서 함수 개념에 익숙한 상태이기 때문에, 처음 절반은 복습하는 차원에서 학습을 진행할 계획이다. C++에서는 함수 오버로딩과 포인터를 활용한 유연한 함수 호출이 가능하다. C#에서는 델리게이트와 람다 표현식을 통해 함수를 더 강력하게 사용할 수 있다. Java는 메서드 오버로딩과 함께 객체 지향적으로 함수를 처리하는 방식이 특징이다. 그렇다면 JS는 어떤 특징을 가지고 있는지 지금부터 배워보자.

함수란

함수 : 목적을 가지고 작성한 코드를 모아둔 블록문.

gugudan(); //함수 선언 전 호출도 가능

/* 구구단 함수 정의 */
function gugudan() { 
    
    for (let i = 1; i <= 9; i++) {
        console.log(`3 * ${i} = ${3 * i}`);
    }
}

gugudan(); //함수 호출

함수를 정의하는 방법

함수 선언문으로 함수 정의하기

function functionName(){}

다른 많은 언어에서도 사용하는 기본적인 정의 방법.

함수 표현식으로 함수 정의하기

const 변수명 = function(){}; //익명 함수
const 변수명 = function 식별자(){}; //네이밍 함수

자료형에 할당함으로써 사용하는 표현식. 식별자 유무에 따라 없으면 익명, 있으면 네이밍으로 불린다. 후자의 경우 외부에서 호출될 때는 변수명으로 호출되지만, 내부적으로 재귀 함수를 만들 때는 사용될 수 있다. 즉, 접근성 설정이 필요할 때 사용된다.

함수 표현식을 사용할 때는 주로 const를 활용한다. 보통 함수는 일관된 목적을 가진 코드 집합이라 재정의해서도, 재할당해서도 안되는 경우가 많기 때문이다. 

 

화살표 함수로 함수 정의하기

C++, C#의 람다 함수가 생각나는 정의법이다. 

const gugudan = () => {
    for (let i = 1; i <= 9; i++) {
        console.log(`3 * ${i} = ${3 * i}`);
    }
};

함수 기능 확장하기

매개변수와 인수

매개변수 : 함수를 정의할 때 외부에서 전달하는 데이터를 함수에서 받을 수 있도록 정의하는 변수

인수(인자) : 정의한 함수를 호출할 때 소괄호 안에 적는 데이터

즉, 함수를 선언할 때 function name(let i) 처럼 쓰는 "i"는 매개변수, 실제로 사용할 때 넣는 값(ex : name(i)) 은 인수라 한다. 

때로 인자를 parameter라고 오용할 때가 있는데, 인수와 인자는 모두 argument로 같은 말이라 한다.

매개변수의 특징

명명 규칙 : 변수 식별자 명명 규칙과 같음.

데이터 전달 : 호출 시의 데이터와 일대일 대응. 개수 제한은 없지만 클린코드를 위해 최소한으로 정의하는 것이 좋다. 매개변수가 없는 상태에서 인자를 전달해도 오류는 안나지만, 전달되지 않는다. 다른 언어에서는 오류가 나는 걸로 아는데 javascript는 꽤나 자비로운 편인듯 하다. (애초에 안하는 것이 좋겠지만...)

기본값 할당 : 매개변수에 = 기호를 활용해 미리 할당할 수도 있다. 호출 시 인자가 없다면, 기본값을 사용하게 된다. 

return 문

함수 외부로 데이터를 반환한다. 

1분 퀴즈 답

function getArrayMaxNumber(arr) {
let result = 0;
for (let a of arr) {
    if (a > result) result = a;
}
return result;
}

const max = getArrayMaxNumber([10, 50, 30]);
console.log(max);

책의 답안에서는 정석적인 for문과 함께 arr.length를 사용했지만, 위와 같이 하면 더 간단하다. 

처음에는 다른 언어와 for...in으로 실수를 했지만, 이 방식으로 하면 for문은 index를 순환하는걸 알게 되었다.
(다른 언어 C# : foreach문 + in)

함수의 특징 이해하기

스코프

코드 내에서의 접근 범위. 

함수 스코프 : 함수에서 정의한 블록문만 스코프의 유효 범위로 인정하는 방식.

블록 스코프 : {}로 구성된 블록문 기준으로 유효 범위를 나누는 방식.

전역 스코프 : 범위 상관없이 모든 곳에서 참조할 수 있는 방식. 즉, 함수 내에서도 전역 스코프로 선언된 변수를 사용할 수 있다.

지역 스코프 : 전역 스코프가 아닌 다른 모든 작은 범위들. (함수/블록 스코프)

참조 우선순위 : 같은 스코프영역에서 동일 식별자의 중복 선언 불가. 다른 스코프라면 가능.
전역과 지역에 같은 식별자가 있다면, 지역 우선시함.

함수 호이스팅

코드를 선언과 할당으로 분리해 선언부를 최상부로 끌어올리는 것.

var 키워드는 호이스팅 대상이지만, let은 아니다.

함수 선언문으로 정의된 함수 : 호이스팅 대상.
함수 표현식, 화살표로 정의된 함수 : 호이스팅 불가.

즉시 실행 함수 사용하기

형식 : (function(){})(); 

전역 스코프의 오염을 방지하기 위해 사용됨. 선언과 동시에 사용되고 재사용을 시도하면 정의되지 않았다는 reference error가 뜨게 된다.