JavaScript 함수 소개 (화살표 함수 포함)

Source: Dev.to

JavaScript의 함수

함수는 특정 작업을 수행하는 재사용 가능한 코드 블록이며, 호출(실행)될 때만 실행됩니다. 함수는 다음을 도와줍니다:

• 코드 중복 방지
• 프로그램 구조화
• 코드를 더 이해하기 쉽고 유지보수하기 쉽게 만들기

문법

function functionName(parameters) {
    // code to be executed
}

예시

function greet() {
    console.log("Hello, Welcome!");
}
greet(); // Function call

매개변수가 있는 함수

function add(a, b) {
    return a + b;
}
console.log(add(5, 3)); // Output: 8

자주 묻는 질문

JavaScript에서 함수란 무엇인가요?
함수는 특정 작업을 수행하는 재사용 가능한 코드 블록이며, 호출될 때 실행됩니다.

왜 함수를 사용하나요?

• 코드 중복 감소
• 가독성 향상
• 코드 구조화
• 디버깅 용이

매개변수와 인수는 무엇인가요?

• 매개변수는 함수 정의에 나열된 변수입니다.
• 인수는 함수를 호출할 때 전달되는 값입니다.

function show(name) {   // name → parameter
    console.log(name);
}
show("Vinayagam");  // "Vinayagam" → argument

return과 console.log()의 차이는 무엇인가요?

• return은 값을 함수 호출자에게 반환합니다.
• console.log()는 출력을 콘솔에 표시합니다.

JavaScript에서 함수의 종류는 무엇인가요?

• Named Function (명명된 함수)
• Anonymous Function (익명 함수)
• Arrow Function (화살표 함수)
• Function Expression (함수 표현식)
• Callback Function (콜백 함수)

JavaScript의 화살표 함수

화살표 함수는 =>(화살표) 연산자를 사용해 함수 표현식을 간결하게 작성할 수 있게 해줍니다. ES6에서 도입된 화살표 함수는 코드를 더 깔끔하고 읽기 쉽게 만들어 줍니다.

문법

const functionName = (parameters) => {
    // code
};

일반 함수 예시

function add(a, b) {
    return a + b;
}
console.log(add(5, 3));

화살표 함수 예시

const add = (a, b) => {
    return a + b;
};
console.log(add(5, 3));

자주 묻는 질문

왜 JavaScript에 화살표 함수가 도입되었나요?

• 코드 길이 감소
• 가독성 향상
• this 키워드를 더 효과적으로 처리
• 콜백 함수 간소화

화살표 함수의 주요 특징은 무엇인가요?

• 짧은 문법
• 암시적 반환 (단일 표현식 함수에서 return이 필요 없음)
• 자체 this 바인딩 없음 (lexical this)
• 생성자로 사용할 수 없음
• arguments 객체 없음

화살표 함수에서 암시적 반환이란 무엇인가요?

암시적 반환은 return 키워드 없이 값을 반환하는 것을 의미합니다. 함수에 표현식 하나만 있을 때 작동합니다.

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

화살표 함수에서 this는 어떻게 동작하나요?

화살표 함수는 자체 this를 갖지 않으며, 주변(부모) 스코프에서 this를 상속받습니다. 이는 this의 lexical scoping이라고도 합니다.