[코딩 자율학습 HTML + CSS + 자바스크립트] 10장 자바스크립트 함수 다루기 - 2

🎯 함수의 기본 이해

자바스크립트에서 함수는 특정 작업을 수행하는 코드 블록입니다. 함수는 선언하고 호출함으로써 실행할 수 있으며, 매개변수를 통해 외부에서 값을 받아들여 작업을 수행한 후 결과를 반환할 수 있습니다. 자바스크립트 함수는 다양한 형태로 존재하며, 함수 선언문, 함수 표현식, 화살표 함수 등이 있습니다. 함수 내부에서는 지역 변수와 전역 변수를 사용할 수 있으며, 이러한 변수의 접근 범위는 스코프라는 개념으로 설명됩니다. 기본적으로 함수는 독립적인 코드 블록으로, 다른 코드와 격리되어 작업을 수행합니다.

🧩 자바스크립트 스코프 개념

자바스크립트에서 스코프는 변수의 가시성 및 생존 기간을 결정하는 중요한 개념입니다. 자바스크립트는 기본적으로 함수 스코프와 블록 스코프를 지원합니다. 함수 스코프는 함수 내부에서 선언된 변수는 함수 외부에서 접근할 수 없도록 제한하는 반면, 블록 스코프는 블록 내부에서만 변수를 사용할 수 있도록 합니다. ES6에서는 let과 const 키워드를 통해 블록 스코프 변수를 선언할 수 있으며, 이를 통해 코드의 가독성과 유지 보수성을 높일 수 있습니다.

🔍 함수 호이스팅

호이스팅은 자바스크립트의 독특한 특징 중 하나로, 함수나 변수 선언이 코드의 최상단으로 끌어올려지는 현상입니다. 함수 선언문은 호이스팅에 의해 코드의 어느 위치에서든 호출이 가능하지만, 함수 표현식은 선언 후에만 호출할 수 있습니다. 이러한 호이스팅 개념을 이해하는 것은 자바스크립트 코드 작성 및 디버깅 시 많은 도움이 됩니다. 변수의 경우 var로 선언된 변수는 호이스팅되지만, let과 const로 선언된 변수는 호이스팅되지 않는다는 점을 유의해야 합니다.

🚀 즉시 실행 함수

즉시 실행 함수(IIFE)는 선언과 동시에 실행되는 함수로, 주로 초기화 작업이나 스코프 오염 방지를 위해 사용됩니다. 이러한 함수를 사용하면 전역 스코프를 오염시키지 않고도 코드 블록을 격리하여 실행할 수 있습니다. IIFE는 함수 전체를 괄호로 감싸고, 그 뒤에 실행을 위한 괄호를 추가하여 정의됩니다. 이는 코드의 캡슐화와 모듈화를 돕고, 전역 네임스페이스를 깨끗하게 유지하는 데 기여합니다.

🎓 ES6의 새로운 키워드

ES6에서는 자바스크립트의 기능을 확장하기 위해 새로운 키워드인 let과 const가 도입되었습니다. 이 키워드들은 블록 스코프를 지원하며, 각각 변수의 재할당과 불변성을 제어합니다. let은 재할당이 가능한 변수를 선언할 때 사용되며, const는 상수 선언에 사용됩니다. 이러한 키워드를 통해 더욱 명확하고 안전한 코드를 작성할 수 있으며, 스코프 관련 오류를 줄여줍니다.

🌐 공식사이트

• JavaScript 공식 문서

📚 추천자료

• "자바스크립트 완벽 가이드" 서적
• Codecademy의 JavaScript 과정

🔗 관련 링크

• ECMAScript 6
• W3Schools JavaScript Tutorial

❓ FAQ 섹션

• 질문> 자바스크립트에서 함수는 왜 중요한가요?
• 답> 함수는 코드를 모듈화하고 재사용성을 높여 유지 보수성과 확장성을 제공하기 때문에 중요합니다.