7장: 함수 - 선언, 표현식, 그리고 스코프

자바스크립트 함수의 세계로 첫 발을 내딛다

웹 개발에서 '함수'란 독립적인 동작 단위를 의미합니다. 버튼 클릭, 값 계산, 데이터를 가져오는 등 특정 작업을 묶어 재사용하게 돕는 코드 블록이죠. 프로그래밍을 하다 보면 같은 코드를 반복해서 쓰는 일이 자주 발생하는데, 함수를 도입하면 이런 중복을 줄이고 효율적으로 코드를 관리할 수 있습니다.

함수를 선언하는 첫 번째 방법, 함수 선언식

자바스크립트에서 함수를 만드는 가장 대표적인 방식은 함수 선언식입니다. 다음처럼 function 키워드를 활용해 이름을 붙여 정의하죠.

function sayHello() {
  console.log('안녕하세요!');
}

이렇게 만들어진 함수는 코드 어디에서든, 심지어 정의 이전에도 호출할 수 있습니다. 왜냐하면 자바스크립트는 함수 선언부를 실행 전에 미리 메모리에 올려놓기(호이스팅) 때문입니다.

두 번째 방법, 함수 표현식

함수는 변수에 할당할 수도 있습니다. 이런 방식을 함수 표현식이라 부르며, 다음과 같이 사용합니다.

const sayHi = function() {
  console.log('반가워요!');
};

함수 표현식의 특징은 함수가 변수에 저장되는 시점에 생성된다는 점입니다. 즉, 이 방식으로 만든 함수는 반드시 선언(할당) 이후에만 호출할 수 있습니다.

함수 선언식과 표현식의 차이점

두 방식 모두 함수라는 동작 단위를 만들어주지만, 코드 내에서 호출 시점에 따라 동작이 다릅니다. 함수 선언식은 코드의 어느 위치에서도 사용할 수 있지만, 함수 표현식은 선언한 위치 이후에만 사용 가능하죠. 이 차이는 자바스크립트 내부에서 변수와 함수가 처리되는 순서와 관련이 있습니다.

최신 문법, 화살표 함수 알아보기

ES6 이후부터는 더 간결한 화살표 함수(Arrow Function)가 널리 쓰입니다.

const add = (a, b) => a + b;

화살표 함수는 주로 짧은 기능이나 콜백 함수에 활용됩니다. this 키워드와의 관계에서도 기존 함수와 차이가 있으니, 차근차근 익혀나가면 좋겠습니다.

함수와 스코프의 관계

함수는 변수의 작동 범위(스코프)를 만듭니다. 함수 내에서 선언된 변수는 함수 바깥에서 보이지 않죠. 이를 "함수 스코프"라고 부릅니다.

function test() {
  let secret = '비밀';
}
// console.log(secret); // 오류 발생

이처럼 함수는 코드 조직에 있어서 중요한 경계가 됩니다. 블록({}) 단위로 변수를 제한하려면 let이나 const를 사용하는 블록 스코프 역시 기억해야 합니다.

마치며

함수는 자바스크립트의 근간을 이루는 주요 개념입니다. 작업 단위를 논리적으로 구분하고, 코드의 중복을 줄이며, 프로그램의 확장성과 유지보수성을 높여줍니다. 이제 각 함수 선언법과 스코프의 원리를 이해했다면, 실습을 통해 자신만의 함수를 직접 만들어보고 자바스크립트로 더 자유롭게 생각을 펼쳐보세요.