[JS] 함수와 이벤트 (1)

Preface

 

이번 장에선 함수 선언 방법과 let, const를 사용한 변수 선언 방법을 공부했다.

 

화살표 함수같은 특정 방식을 제외하곤 내가 알고 있던 기존 방식과 비슷해서 딱히 어려운 내용이 없었다.

 

다만 내용이 너무 많아 두 파트로 나눠서 업로드한다.

---

 

1. 함수 알아보기

 

 

- 함수: 동작해야 할 목적대로 묶은 명령

 

 

- 함수를 선언할 때는 예약어 function을 사용하고, 중괄호 안에 실행할 명령을 넣는다.

→ 명령이 한 줄이라면 중괄호를 생략할 수 있다.

function 함수명() {
	명령
}

 

 

- 함수 호출 방식: 함수명( ) 또는 함수명(변수)

 

 

- 두 수를 더하는 함수

unction addNumber() { 								
	var num1 = 2;
	var num2 = 3;
	var sum = num1 + num2;			
	alert("결과 값: " + sum);
}
addNumber();
addNumber();

 

 

- 원하는 곳에 함수를 선언해 놓기만 하면 선언 위치와 상관없이 함수를 실행할 수 있다.

1) 함수 선언 위치가 프로그램 흐름에 영향을 주지 않는다.

2) 스크립트 소스의 앞부분이나 뒷부분에 함수 선언 부분을 모아 놓는 것이 좋다.

 

---

 

2. var를 사용한 변수의 특징

 

 

- 스코프: 변수가 적용되는 범위

 

 

- 지역(로컬) 변수: 한 함수 안에서만 사용할 수 있는 변수

1) 함수 안에서 선언하고 함수 안에서만 사용한다.

2) 예약어 var과 함께 변수 이름을 지정해야 한다.

 

 

- 전역(글로벌) 변수: 스크립트 소스 전체에서 사용할 수 있는 변수

1) 함수 밖에서 선언한다.

2) 함수 안에서 예약어를 빼고 선언한다.

 

 

- 호이스팅(hoisting): 상황에 따라 변수의 선언과 할당을 분리해서 선언 부분을 스코프의 가장 위쪽으로 끌어올리는 것

1) 실제 코드를 끌어올리는 것은 아니고 소스를 그런 식으로 해석한다는 의미이다.

2) var를 사용한 변수에선 변수 선언 부분이 명령 아래 부분에 있어도 변수 자체를 선언한 것으로 본다.

→ 값은 정해지지 않았으므로 undefined이다.

 

 

- var를 사용한 변수는 재선언과 재할당이 가능하다.

 

---

 

3. let과 const의 등장

 

 

- var는 함수 영역의 스코프를 갖지만, let과 const는 블록 영역의 스코프를 가진다.

 

 

- 블록 영역의 스코프: 변수를 선언한 블록({ }로 묶은 부분)에서만 유효한 것

→ 블록 변수: 블록 안에서만 사용할 수 있는 변수

 

 

- let을 사용한 변수의 특징

1) 블록 안에서만 쓸 수 있는 변수

→ 전역 변수를 선언하고 싶다면 let 예약어를 쓰지 않으면 된다.

2) 재할당은 가능하지만 재선언은 할 수 없는 변수

3) 호이스팅이 없는 변수

→ let 예약어를 사용한 변수는 선언하기 전에 사용할 경우 오류를 출력한다.

 

 

- consts를 사용한 변수의 특징

1) 상수 변수이다.

→ 변하지 않는 값을 변수로 선언할 때 사용한다.

2) 재선언하거나 재할당 할 수 없다.

3) 블록 레벨의 스코프를 갖는다.

 

 

- 자바스크립트 변수의 스타일 가이드

1) 전역 변수는 최소한으로 사용한다.

2) var 변수는 함수의 시작 부분에서 선언한다.

3) ES6를 사용한다면 예약어 var보다 let을 사용하는 것이 좋다.

4) for 문에서 카운터 변수를 사용할 때는 var 예약어를 사용하지 않는다.

// 블록 밖에서 var로 선언
var i;
for(i = 1; i <= n; i++) {
...
}


// let을 사용하여 블록 변수로 선언
for(let i = 1; i <= n; i++) [
...
]

 

 

---

 

4. 재사용할 수 있는 함수 만들기

 

 

- 매개변수: 외부에서 값을 받아 줄 변수

1) 선언된 함수 안에서만 사용한다.

2) 매개변수 이름 사이에 쉼표를 찍어 나열한다.

3) 기본값을 지정할 수 있다.

unction multiple(a, b = 5, c = 10) { 	// b = 5, c = 10으로 기본값 지정
		return a * b + c;
	}
    
var result1 = multiple(5, 10, 20); // a = 5, b = 10, c = 20
document.write("multiple(5, 10, 20)을 실행하면 결과는 " + result1 + "입니다. <br>")
var result2 = multiple(10, 20);    // a = 10, b = 20, c = 10(기본값)
document.write("multiple(10, 20)을 실행하면 세번째 매개변수는 기본값을 사용하고 결과는 " + result2 + "입니다.<br>")
var result3 = multiple(30);        // a = 30, b = 5(기본값), c = 10(기본값)
document.write("multiple(30)을 실행하면 두번째,  세번째 매개변수는 기본값을 사용하고 결과는 " + result3 + "입니다.")

 

 

- 인수: 매개변수가 있는 함수를 호출할 때 실제 값 부분

function addNumber(num1, num2){ 								
	var sum = num1 + num2;			
	return sum;
}
var result = addNumber(2, 3);
document.write("두 수를 더 한 값 : " + result);

 

---

 

5. 함수 표현식

 

 

- 익명 함수: 이름이 없는 함수

→ 함수 자체가 식이므로 함수를 변수에 할당할 수 있으며, 다른 함수의 매개변수로 사용할 수도 있다.

var sum = function(a, b){
	return a + b;
}
document.write("<b><big>함수 실행 결과 : </big></b>" + sum(10, 20) );

 

 

- 즉시 실행 함수: 정의하면서 동시에 실행하는 함수

→ 함수를 식 형태로 선언하므로 마지막에 세미콜론을 붙인다.

// 매개변수가 없는 즉시 실행 함수
(function() {
	명령
}());


// 매개변수가 있는 즉시 실행 함수
(function(매개변수) {
	명령
}(인수));

 

 

- 화살표 함수: 익명 함수에서만 사용할 수 있는 함수로, 화살표 표기법을 사용해 함수를 간단히 작성하는 방법

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

 

 

- 매개변수가 없는 화살표 함수

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

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

 

 

- 매개변수가 1개인 경우

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

 

 

- 매개변수가 2개 이상인 경우

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

        // let sum = (a, b) => { return a + b }

        let sum = (a, b) => a + b;
        
        document.write("두 수의 합 : " + sum(10, 20));