[기본 개념] 1 | (1.1) 함수 선언 및 호출, var let const, 함수 표현식

[기본 개념] 1 | (1.1) 함수 선언 및 호출, var let const, 함수 표현식

1 함수 선언 및 호출

2 var, let, const

3 함수 표현식

4 이벤트와 이벤트 처리기

5 DOM을 이용한 이벤트 처리기

1 함수 선언 및 호출

기본형

function 함수명( ) {

    명령

}

 

기본형

함수명( ) 또는 함수명(변수)

 

 함수 선언 위치는 프로그램의 흐름에 영향을 주지 않는다. 따라서 보통 한 파일 안에 여러 함수를 선언했을 때 스크립트 소스의 앞부분이나 뒷부분에 함수 선언 부분을 모아놓고 필요할 때마다 함수를 호출해 사용한다.

2 var, let, const

var

 

 var 는 지역 변수로 함수 안에서 선언하고 함수 안에서만 사용한다. 이때 var 예약어를 사용하지 않으면 전역 변수가 된다.

 

 자바스크립트 해석기는 함수 소스를 훑으며 var를 사용한 변수는 따로 기억하여 마치 선언한 것과 같은 효과를 내는 데 이를 호이스팅이라고 한다.

 

 예를 들어 선언하기 전에 실행하더라도 할당되지 않은 자료형인 undefined값을 가질 수 있다. 따라서 선언하기 전에 사용하면 오류를 발생시킬 수도 있다.

 

 var를 사용한 변수는 재선언과 재할당을 할 수 있다.

 

let, const

 

 var 예약어를 사용할 때 실수로 빠뜨리면 의도치 않게 전역 변수가 되기도 하고, 실수로 재선언 하거나 재할당 하는 일이 생기기 때문에 ES6에서는 let과 const가 추가되었다.

 

 let 예약어로 선언한 변수는 선언한 블록({ })에서만 유효하다. 또한 값을 재할당할 수는 있지만 재선언은 할 수 없다.

 

 또한 var 예약어와 달리 호이스팅이 없기 때문에 선언하기 전에 사용할 경우 오류가 발생한다.

 

 const 예약어는 변하지 않는 값을 변수로 선언할 때 사용한다. 이때 재선언과 재할당을 할 수 없으며 let 예약어와 같이 블록 레벨({ }) 스코프를 갖는다.

 

 변수 때문에 생기는 오류를 줄이려면 var 예약어 대신, 값이 자주 바뀔 때는 let 예약어와 재할당이 없는 변수라면 const 예약어를 사용하는 것이 좋다.

 

3 함수 표현식

익명 함수

 

 이름이 없는 함수를 말한다. 익명 함수는 함수 자체가 식이므로 변수에 할당할 수 있으며, 다른 함수의 매개변수로 사용할 수 있다.

 

(ex. 익명 함수 선언하고 실행하기)

 

...
var sum = function(a, b) {		// 익명 함수를 선언 후 변수 sum에 할당
  return a + b;
}
document.write("함수 실행 결과 : " + sum(10, 20));	// 익명 함수 실행
...

 

즉시 실행 함수

 

기본형

(function( ) {

    명령

}( ));

 

또는

 

기본형

(function(매개변수) {

    명령

}(인수));

 

 한 번만 실행하는 함수라면 함수를 정의하는 동시에 실행할 수 있다. 그리고 함수를 식 형태로 선언하므로 마지막에 세미콜론(;)을 붙인다.

 

(ex. 매개변수 없는 즉시 실행 함수 만들기)

 

...
<script>
  (function() {
    var userName = prompt("이름을 입력하세요.");
    document.write("안녕하세요? <span class='accent'>" + userName + "</span>님!");
  }());
</script>
...

 

(ex. 매개변수 있는 즉시 실행 함수 만들기)

 

...
<script>
  (function(a, b) {
    sum = a + b;
  }(100, 200));
  document.write("함수 실행 결과 : " + sum);
</script>
...

 

화살표 함수

 

기본형

(매개변수) => {함수 내용}

 

 ES6 버전부터 함수 선언을 더 간단하게 작성할 수 있다. 이 방법을 화살표 함수라 하는데 익명 함수에서만 사용할 수 있다.

 

 매개변수가 없는 경우 매개변수를 넣는 괄호 안은 비워둔다.

 

(ex. 매개변수가 없는 함수)

 

const hi = function() { 
  return "안녕하세요?";
}

 

(ex. 매개변수가 없는 화살표 함수)

 

const hi = () => { return "안녕하세요?" };

 

 중괄호 안에 함수 내용이 한 줄이라면 중괄호를 생략할 수 있다. 이때 return문도 생략한 것으로 간주한다.

 

(ex. 매개변수가 없는 화살표 함수(중괄호 생략))

 

const hi = () => "안녕하세요?";

 

 매개변수가 하나인 경우 매개변수의 괄호는 생략할 수 있다.

 

(ex. 매개변수가 1개인 함수)

 

let hi = function(user) {
  document.write(user + "님, 안녕하세요?");
}

 

(ex. 매개변수가 1개인 화살표 함수)

 

let hi = user => { document.write(user + "님, 안녕하세요?"); }

 

 매개변수가 둘 이상인 경우 화살표 함수는 (매개변수) => { ... } 처럼 사용한다.

 

(ex. 매개변수가 2개인 함수)

 

let sum = function(a, b) {
  return a + b;
}

 

(ex. 매개변수가 2개인 화살표 함수)

 

let sum = (a, b) => a + b;

 

 

 

 

 

 

 

 

 

출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)