티스토리 뷰
목차
프로그래밍을 처음 배우다 보면, 코드가 길어지고 복잡해질 때가 많습니다. 이럴 때 필요한 것이 바로 함수입니다. JavaScript에서 함수는 코드를 더 간결하고 효율적으로 작성할 수 있도록 도와주는 중요한 도구입니다.
그럼 오늘 JavaScript 함수가 무엇인지, 어떻게 사용하는지, 그리고 함수를 활용해 코드를 재사용하는 방법에 대해 알아보겠습니다.
1. 함수란 무엇인가요?
함수는 특정 작업을 수행하는 코드 블록을 말합니다. 함수를 사용하면 같은 코드를 반복해서 작성할 필요 없이, 재사용 가능하게 만들 수 있습니다. 즉, 함수를 정의해 두고 필요할 때마다 호출하면, 그 함수가 미리 작성해둔 작업을 수행해줍니다.
함수는 프로그래밍의 핵심 요소 중 하나로, 코드의 구조를 체계적으로 만들고, 유지보수를 쉽게 하며, 작업을 효율적으로 처리하는 데 큰 도움을 줍니다.
2. JavaScript에서 함수 만들기
JavaScript에서 함수를 만드는 방법은 여러 가지가 있지만, 가장 기본적인 방법은 함수 선언입니다. 함수 선언은 function 키워드를 사용하여 함수를 정의하는 방법입니다.
그럼 예제를 통해 살펴보겠습니다.
1) 함수 선언
function sayHello() {
console.log("Hello, World!");
}위 코드에서는 sayHello라는 이름의 함수를 선언했습니다. 이 함수는 console.log를 사용해 "Hello, World!"라는 메시지를 출력하는 간단한 작업을 수행합니다.
이렇게 선언한 함수를 실행하려면 함수 호출을 해야 합니다. 함수 호출은 함수 이름 뒤에 괄호 ()를 붙여 실행합니다.
sayHello(); // "Hello, World!" 출력함수를 호출하면, 함수 블록 안에 작성된 코드가 실행됩니다. 이렇게 함수를 사용하면 동일한 작업을 여러 번 반복할 때마다 같은 코드를 다시 작성할 필요 없이, 함수 호출만으로 작업을 수행할 수 있습니다.
2) 매개변수와 인자
함수는 작업을 더 유연하게 수행할 수 있도록 매개변수를 받을 수 있습니다. 매개변수는 함수가 호출될 때 전달되는 값을 받아서 사용할 수 있는 변수입니다. 예를 들어, 인사말을 출력하는 함수를 매개변수를 사용해 만들어보겠습니다.
function greet(name) {
console.log("Hello, " + name + "!");
}이 함수는 name이라는 매개변수를 받아서 "Hello, [name]!"라는 메시지를 출력합니다. 이 함수를 호출할 때, name에 해당하는 값을 인자로 전달할 수 있습니다.
greet("Alice"); // "Hello, Alice!" 출력
greet("Bob"); // "Hello, Bob!" 출력함수는 매개변수를 사용하여 입력 값을 받아 처리할 수 있기 때문에, 더 다양한 상황에 맞게 동작할 수 있습니다.
3) 반환 값
함수는 작업을 수행한 후, 결과를 반환(return)할 수도 있습니다. 반환 값은 함수 호출이 끝난 후 그 값을 함수 호출 위치로 돌려주는 역할을 합니다. 반환 값을 사용하면 함수의 결과를 저장하거나, 다른 작업에 활용할 수 있습니다.
function add(a, b) {
return a + b;
}
let sum = add(3, 5);
console.log(sum); // 8 출력위 예제에서 add 함수는 두 매개변수 a와 b를 받아 그 합을 반환합니다. 이 반환된 값은 sum 변수에 저장되고, console.log를 통해 출력됩니다.
3. 함수 표현식
JavaScript에서는 함수를 선언하는 또 다른 방법으로 함수 표현식을 사용할 수 있습니다. 함수 표현식은 함수 선언과 달리, 함수를 변수에 할당하는 방식으로 정의합니다. 예를 들어, 아래와 같이 함수를 변수에 할당할 수 있습니다.
let multiply = function(a, b) {
return a * b;
};
console.log(multiply(4, 5)); // 20 출력이렇게 정의된 함수는 multiply라는 변수에 할당되어 있으며, multiply를 함수처럼 호출할 수 있습니다. 함수 표현식은 함수 선언과 달리, 선언 전에 호출할 수 없다는 차이점이 있습니다.
4. 화살표 함수
화살표 함수(Arrow Function)는 ES6(ECMAScript 2015)에서 도입된 새로운 함수 표현식의 형태입니다. 화살표 함수를 사용하면 더 간결하게 함수를 정의할 수 있습니다. 화살표 함수는 => 기호를 사용해 정의합니다.
let divide = (a, b) => a / b;
console.log(divide(10, 2)); // 5 출력위 예제에서 divide 함수는 두 매개변수 a와 b를 받아 그 값을 나누는 작업을 수행합니다. 화살표 함수는 중괄호 {}와 return 키워드 없이, 한 줄로 간단하게 정의할 수 있습니다. 다만, 함수가 여러 줄에 걸쳐 복잡한 작업을 수행할 때는 여전히 중괄호와 return 키워드를 사용해야 합니다.
let subtract = (a, b) => {
let result = a - b;
return result;
};
console.log(subtract(10, 3)); // 7 출력5. 함수의 다양한 활용
함수는 JavaScript에서 매우 강력하고 유연하게 사용될 수 있습니다. 함수는 단순한 코드 블록을 넘어, 콜백 함수로 활용되거나, 클로저를 통해 상태를 유지하는 등의 복잡한 기능을 구현할 때도 사용됩니다.
1) 콜백 함수
콜백 함수는 다른 함수에 인자로 전달되어, 특정 작업이 완료된 후 호출되는 함수입니다. 콜백 함수를 사용하면 비동기 작업을 처리하거나, 코드 실행 순서를 제어할 수 있습니다.
function processUserInput(callback) {
let name = prompt("이름을 입력하세요:");
callback(name);
}
processUserInput(function(name) {
console.log("안녕하세요, " + name + "님!");
});위 예제에서 processUserInput 함수는 사용자 입력을 받고, 입력된 값을 콜백 함수로 전달하여 처리합니다. 이처럼 콜백 함수는 작업의 흐름을 유연하게 제어할 수 있는 강력한 도구입니다.
2) 클로저
클로저(Closure)는 함수가 정의될 때의 환경(스코프)을 기억하고, 그 환경에 접근할 수 있는 기능을 말합니다. 클로저를 사용하면 함수 내부에서 외부 변수에 접근하거나, 상태를 유지하는 등의 복잡한 작업을 수행할 수 있습니다.
function makeCounter() {
let count = 0;
return function() {
count++;
return count;
};
}
let counter = makeCounter();
console.log(counter()); // 1 출력
console.log(counter()); // 2 출력
위 예제에서 makeCounter 함수는 count라는 변수를 기억하는 클로저를 반환합니다. 이 클로저는 count의 상태를 유지하며, 호출될 때마다 count를 증가시키고, 그 값을 반환합니다. 클로저는 JavaScript에서 매우 중요한 개념이며, 상태를 관리하거나 비공개 데이터를 보호할 때 유용하게 사용됩니다.
함수는 JavaScript에서 코드를 더 효율적이고 유연하게 작성할 수 있게 해주는 필수 도구입니다. 함수 선언, 매개변수, 반환 값, 그리고 함수 표현식과 화살표 함수 등 다양한 방법으로 함수를 정의하고 활용할 수 있습니다. 또한, 콜백 함수와 클로저 같은 고급 기능을 통해 JavaScript의 복잡한 동작을 구현할 수 있습니다. 함수를 잘 활용하면 코드를 더 간결하게 만들고, 유지보수를 쉽게 할 수 있습니다.
이번 포스팅이 JavaScript의 함수에 대해 이해하고, 이를 실제 코딩에 적용하는 데 도움이 되길 바랍니다. 함수는 JavaScript의 심장이며, 그 활용법을 익히는 것은 더 나은 프로그래밍으로 가는 중요한 첫걸음입니다.