자바스크립트 함수선언방식 | 함수선언방식, 함수표현식, 화살표함수, function생성자 함수 , window객체 주요함수

1. 함수 선언 4가지 방법

자바스크립트에서 함수를 만드는 방법은 크게 4가지가 있습니다.

① 함수 선언문 (Function Declaration)

가장 전통적인 방식입니다. **호이스팅(Hoisting)**이 적용되어 코드 상단에서 호출해도 에러가 나지 않습니다.

• 정의: function 키워드 뒤에 함수 이름을 명시합니다.
• 예제:
• JavaScript

   

  sayHello(); // 실행 가능 (호이스팅)
  function sayHello() {
      console.log("안녕하세요!");
  }
  

② 함수 표현식 (Function Expression)

함수를 변수에 할당하는 방식입니다. 변수 선언 방식(let, const)에 따라 호이스팅 규칙을 따릅니다.

• 정의: 익명 함수를 변수에 담아 사용합니다.
• 예제:
• JavaScript

   

  const sayHi = function() {
      console.log("반가워요!");
  };
  sayHi();
  

③ 화살표 함수 (Arrow Function) - ES6+

앞서 질문하셨던 =>를 사용하는 방식입니다. 문법이 간결하고 this 바인딩이 생략되는 특징이 있습니다.

• 정의: function 키워드 대신 => 화살표를 사용합니다.
• 예제:
• JavaScript

   

  const add = (a, b) => a + b; // 중괄호와 return 생략 가능 (한 줄일 때)
  console.log(add(5, 3));
  

④ Function 생성자 함수

거의 사용되지 않지만, 문자열을 함수로 만들 때 씁니다. 보안과 성능 이슈로 권장되지 않습니다.

• 정의: new Function() 객체를 이용해 생성합니다.
• 예제:
• JavaScript

   

  const sum = new Function('a', 'b', 'return a + b');
  

---

2. Window 객체 주요 함수 3가지

브라우저 환경에서 사용자에게 메시지를 전달하거나 입력을 받을 때 사용하는 가장 기본적인 대화 상자(Dialog) 함수들입니다.

① alert() : 알림창

사용자에게 단순히 정보를 보여줄 때 사용합니다. 확인 버튼만 존재합니다.

• 예제: alert("작업이 완료되었습니다.");

② confirm() : 확인창

사용자에게 "예/아니오" 선택을 받을 때 사용합니다.

• 반환값: 확인 클릭 시 true, 취소 클릭 시 false.
• 예제:
• JavaScript

   

  if (confirm("정말로 삭제하시겠습니까?")) {
      console.log("삭제 진행");
  } else {
      console.log("삭제 취소");
  }
  

③ prompt() : 입력창

사용자로부터 텍스트 입력을 받을 때 사용합니다.

• 반환값: 입력한 문자열(String). 취소하면 null.
• 예제:
• JavaScript

   

  let userName = prompt("이름을 입력해주세요", "홍길동"); 
  // 두 번째 인자는 기본값(Placeholder 역할)
  alert(userName + "님 환영합니다!");
  

---

3. 요약 및 주의사항

• 변수 선언: var(옛날 방식), let(재할당 가능), const(상수, 재할당 불가)를 구분해서 사용하세요. 요즘은 거의 const를 기본으로 쓰고 필요할 때만 let을 씁니다.
• 이벤트(Event): 위에서 배운 함수들을 addEventListener의 콜백으로 연결하여 버튼 클릭이나 마우스 오버 시 실행되도록 만듭니다.