함수가 뭐지? 자바스크립트 함수 이해하기!

 

 

안녕하세요!

 

오늘은 자바스크립트 함수에 대한 내용들을 정리해 보려고 합니다. 개인적으로 자바스크립트를 10년 이상 사용해 오면서 함수를 자주 활용해 왔지만 함수를 제외하고 자바스크립트를 개발해 본 적은 없었던 것 같습니다. 그만큼 자바스크립트에 있어서 함수는 굉장히 중요한 부분입니다.

이번에는 함수의 본질과 특징을 다시 자세히 공부하고 정리해 보려고 합니다.

 

 

---

함수의 기본 개념

함수는 프로그래밍 언어에서 코드의 재사용성을 높이고 구조를 모듈화하기 위한 핵심적인 요소입니다. 자바스크립트에서 함수는 특정 작업을 수행하는 코드 블록으로, 필요한 시점에 호출하여 실행할 수 있습니다.

 

예시 코드

function functionName(parameters) {
    // 함수의 동작을 정의하는 코드 블록
    // 파라미터를 활용하여 작업을 수행
    return result; // 함수가 값을 반환할 수 있음
}

  - functionName: 함수의 이름으로, 호출할 때 사용됩니다.
  - parameters: 함수가 입력으로 받는 값이며, 필요한 경우에만 지정됩니다.
  - return result: 함수가 결과 값을 반환할 수 있으며, 반환되는 값은 함수를 호출한 곳에서 사용될 수 있습니다.

 

 

함수는 필요한 기능을 하나로 묶어 관리하고 호출하여 사용할 수 있는 강력한 도구입니다. 함수를 효율적으로 사용하면 코드를 보다 모듈화 하고 유지 관리하기 쉬운 구조로 만들 수 있습니다.

 

---

함수의 장점

자바스크립트 함수는 코드를 논리적인 블록 단위로 나누어 구조화하고, 이를  여러 번 재사용하는데 사용됩니다.

 

 

1. 모듈화와 재사용성

함수는 비슷한 작업을 모듈화하여 코드를 구조화할 수 있습니다. 이를 통해 코드의 재사용성이 높아지며, 비슷한 기능을 하는 다른 부분에서도 같은 함수를 사용할 수 있습니다.

2. 가독성 향상

함수를 사용하면 코드의 의도가 명확해지며, 함수의 이름을 통해 어떤 작업을 수행하는지 파악할 수 있습니다. 함수 내부의 구현 세부사항을 추상화하고, 함수 호출을 통해 코드의 의미를 이해하기 쉬워집니다.

3. 유지보수 용이

함수는 코드의 특정 부분을 독립적으로 관리할 수 있도록 해줍니다. 어떤 부분의 오류나 변경 사항이 있을 때, 해당 함수만 수정하면 되므로 코드의 유지보수가 훨씬 쉬워집니다.

4. 디버깅 용이

함수 단위로 코드를 작성하면, 각 함수를 개별적으로 디버깅할 수 있습니다. 함수 내부의 오류를 찾기 쉽고, 함수가 다른 부분과 독립적으로 동작하기 때문에 전체 코드의 디버깅이 간편해집니다.

5. 코드 간결성

함수를 사용하면 반복되는 코드를 효과적으로 줄일 수 있습니다. 이로써 코드의 길이가 줄어들고, 코드의 가독성과 유지보수성이 향상됩니다.

6. 코드 재구조화

함수를 사용하면 코드의 구조를 변경하거나 개선하는 작업이 쉬워집니다. 함수 하나를 수정하면 해당 기능 전체에 영향을 미치므로, 필요한 리팩토링을 더 용이하게 수행할 수 있습니다.

 

자바스크립트에서 함수의 장점을 이해하고 활용하면, 보다 효율적이고 품질 높은 코드를 작성할 수 있습니다.

 

 

---

함수 호출과 매개변수

함수 호출

함수를 호출하는 것은 해당 함수 내부의 코드 블록을 실행하는 것을 의미합니다. 함수 호출은 함수 이름을 사용하여 호출하며, 필요한 입력 값을 전달합니다.

매개변수

함수에 전달되는 입력 값은 매개변수(parameter)를 통해 함수 내부로 전달됩니다. 함수를 정의할 때 괄호 안에 매개변수의 이름을 선언하며, 함수가 호출될 때 전달된 값을 받아올 변수로 사용됩니다.

 

예시 코드

function greet(name) {
    console.log("Hello, " + name + "!");
}

greet("Alice");  // 함수 호출, 출력: Hello, Alice!
greet("Bob");    // 함수 호출, 출력: Hello, Bob!

위의 예시 코드에서 name은 매개변수로, 함수 greet를 호출할 때 전달된 값을 받아오는 역할을 합니다.

함수 호출 시 "Alice"와 "Bob"이 각각 name에 전달되어 출력 결과가 달라집니다.

 

함수 호출 방식

 

1. 매개변수 없는 호출

일부 함수는 매개변수 없이 호출될 수 있습니다. 예를 들어, console.log() 함수는 매개변수 없이 호출하여 내용을 출력합니다.

2. 매개변수 있는 호출

함수가 매개변수를 요구할 경우, 호출 시 해당 매개변수에 값을 전달해야 합니다.

3. 여러 매개변수

함수는 여러 개의 매개변수를 가질 수 있습니다. 매개변수의 개수와 자료형은 함수 정의 시 결정됩니다.

4. 기본값 매개변수

ES6부터는 매개변수에 기본 값을 설정할 수 있습니다. 매개변수에 값이 전달되지 않을 경우, 기본값이 사용됩니다.

5. 가변 인자 함수

일부 함수는 가변 개수의 매개변수를 받을 수 있습니다. 이를 통해 다양한 개수의 인자를 전달할 수 있습니다.

 

함수 호출과 매개변수는 자바스크립트에서 코드를 모듈화 하고 유연하게 처리하는 데 도움을 주는 중요한 개념입니다.

 

---

함수의 반환

함수는 실행된 후 결과를 반환할 수 있습니다. return 문을 사용하여 함수 내부에서 값을 반환하며, 반환된 값은 함수 호출 시 받아올 수 있습니다.

 

예시 코드

function add(a, b) {
    return a + b;
}

var result = add(3, 5);  // 함수 호출 및 반환 값 저장
console.log(result);     // 출력: 8

위의 예시 코드에서 add 함수는 a와 b를 더한 값을 반환합니다. 함수 호출 후 반환된 값인 8이 result 변수에 저장되어 출력됩니다.

 

 

---

함수 스코프

 

1. 스코프 (scope)

함수 내부에서 정의된 변수는 해당 함수의 스코프 내에서만 유효합니다. 스코프는 변수의 유효 범위를 나타내며, 변수의 접근성과 생존 기간을 제어합니다.

2. 전역 스코프 (global scope)

함수 외부에서 정의된 변수는 전역 스코프에 속하며, 스크립트 전체에서 접근할 수 있습니다.

3. 지역 스코프 (local scope)

함수 내부에서 정의된 변수는 해당 함수의 지역 스코프에 속하며, 함수 내에서만 접근할 수 있습니다.

 

예시 코드

var globalVar = "I am global";  // 전역 변수

function printLocal() {
    var localVar = "I am local";  // 지역 변수
    console.log(localVar);       // 함수 내에서 localVar 접근 가능
}

console.log(globalVar);         // 스크립트 전체에서 globalVar 접근 가능
console.log(localVar);          // 오류: localVar는 함수 외부에서 접근 불가능

위의 예시 코드에서 globalVar는 전역 스코프에 속하므로 스크립트 어디서든 접근 가능합니다. 하지만 localVar는 printLocal 함수 내에서만 접근할 수 있습니다.

 

 

---

중첩 함수 (Nested Functions)

자바스크립트에서는 함수 내에 또 다른 함수를 정의할 수 있습니다. 이를 중첩 함수라고 하며, 외부 함수의 변수와 스코프에 접근할 수 있습니다.
중첩 함수를 통해 코드의 가독성을 높이고 모듈화할 수 있습니다.

 

 

예시 코드

function outer() {
    var outerVar = "I am outer";
    
    function inner() {
        var innerVar = "I am inner";
        console.log(innerVar);
        console.log(outerVar);  // outer 함수의 변수에 접근
    }
    
    inner();  // 중첩 함수 호출
}

outer();  // outer 함수 호출

중첩 함수인 inner에서는 외부 함수인 outer의 변수인 outerVar에 접근할 수 있습니다. 이를 통해 함수 간에 정보 공유 및 모듈화가 가능해집니다.

자바스크립트 함수의 반환 값, 스코프, 중첩 함수 등은 함수의 효율적인 활용과 모듈화를 지원하는 중요한 개념입니다.

 

 

 

---

최종 정리

 

오늘은 자바스크립트 함수에 대한 기본 개념과 특징들을 간략하게 알아보았습니다. 함수는 자바스크립트에서 핵심적인 역할을 하며, 코드의 재사용성과 가독성을 높이는 데 큰 역할을 합니다. 함수의 반환, 스코프, 매개변수, 중첩 함수 등 다양한 개념을 통해 자바스크립트의 함수의 중요성과 활용 방법을 조금 더 알아보았습니다. 앞으로 더 복잡하고 다양한 함수 활용 방법을 학습하면서 더욱 깊게 이해하고 활용할 수 있을 것입니다.

 

그럼 다음 포스팅에도 자바스크립트의 기본적인 내용들을 주제로 정리해 보도록 하겠습니다.

 

감사합니다.