자바스크립트 강의 EP_19 | 함수(Function) | ES6+ 최신 문법 | DOM API | BOM API

📚 함수란 무엇인가?

함수는 프로그래밍에서 특정 작업을 수행하는 코드 블록을 말하며, 자바스크립트에서도 이러한 함수를 통해 코드의 재사용성을 높일 수 있습니다. 함수는 명명된 코드 블록으로, 필요할 때마다 호출하여 사용할 수 있으며, 특히 자바스크립트에서는 함수가 객체로 취급되기 때문에 더욱 다양한 활용이 가능합니다. 함수는 여러 명령문을 그룹화하여 하나의 단위로 실행할 수 있게 해주며, 이러한 구조는 코드를 더욱 직관적이고 관리하기 쉽게 만듭니다.

🔧 함수 생성 방법

자바스크립트에서는 함수를 생성하는 주된 두 가지 방법이 있습니다: 함수 선언식과 함수 표현식입니다. 함수 선언식은 'function' 키워드를 이용해 명시적으로 함수를 선언하는 방식이며, 코드의 최상단으로 끌어올려지는 호이스팅 현상의 영향을 받습니다. 반면, 함수 표현식은 함수를 변수에 할당하는 방법으로, 호이스팅의 영향을 받지 않으며 더 유연한 코드 작성이 가능합니다. 이러한 차이점은 코드 작성 시 선택의 폭을 넓혀주며, 상황에 맞는 최적의 방법을 선택할 수 있도록 도와줍니다.

🧩 함수 호출 및 실행

함수를 호출하는 것은 매우 간단합니다. 함수명 뒤에 괄호를 붙여 호출할 수 있으며, 필요한 경우 파라미터를 함께 전달하여 다양한 입력값에 따라 동작을 다르게 설정할 수 있습니다. 또한, 함수는 반환값을 가질 수 있어, 함수 내부에서 처리된 결과를 호출한 쪽으로 전달할 수 있습니다. 이러한 기능은 함수의 활용도를 더욱 높여주며, 복잡한 계산이나 데이터를 처리할 때 매우 유용하게 사용됩니다.

🚀 함수의 다양한 활용

함수는 단순히 호출되고 실행되는 것뿐만 아니라, 콜백 함수나 애로우 함수와 같은 고급 개념으로 확장되어 사용됩니다. 콜백 함수는 특정 이벤트가 발생했을 때 호출되는 함수로, 비동기적 작업을 처리할 때 유용합니다. 또한, ES6에서 도입된 애로우 함수는 간결한 문법으로 함수 표현을 더욱 단순화시켜 주며, 특히 this 바인딩에서의 차이점으로 인해 특정 상황에서 더욱 적합한 선택이 될 수 있습니다.

🏆 콜백 함수와 애로우 함수

콜백 함수는 다른 함수의 인자로 전달되어, 특정 시점에 호출되는 함수입니다. 이는 비동기 프로그래밍에서 특히 유용하며, 이벤트 처리 시 자주 사용됩니다. 애로우 함수는 함수 표현식의 간소화된 형태로, 'function' 키워드 없이도 함수를 정의할 수 있습니다. 또한, 애로우 함수는 자신의 this 값을 상위 스코프에서 가져오기 때문에, 특정 상황에서 더욱 직관적이고 효율적인 코드 작성을 가능하게 합니다.

🌐 공식사이트

공식사이트 바로가기