JS문법2 - 함수

여러 동작을 묶은 덩어리, 함수

- 함수를 사용하면 좋은 점

• 각 명령의 시작과 끝을 명확하게 구별할 수 있다.
• 함수에 별도의 이름을 붙이면 같은 기능이 필요할 때마다 해당 함수를 실행할 수 있다.

- 함수 선언(정의)

• 함수가 어떤 명령을 처리해야 할지 미리 알려주는 것
• function 예약어를 사용하고, { } 안에 실행할 명령을 작성

- 함수 호출(함수 실행)

• 함수 이름을 사용해 함수 실행

//함수의 선언: 여러가지 명령을 묶어 놓은 것.
function addNumber() {
	var sum = 10 + 20;
    console.log(sum);
}

//함수의 호출
addNumber(); //30

- 함수 선언은 어디에 두어야 할까

• 함수를 선언해 놓기만 하면 선언한 위치와는 상관없이 함수를 실행할 수 있다.
• 하지만 일반적으로는 함수를 선언하고 실행한다.

let과 const

- var 변수의 스코프

• 변수 이름 앞에 var를 붙이면 지역 변수, 즉 함수 안에서만 사용할 수 있는 변수가 된다.
• var가 없으면 전역 변수, 즉 프로그램 전체에서 사용할 수 있는 변수가 된다.

var myVar = 100; //var이 있는 지역변수
test(); //함수 호출
document.write("myVar is " + myVar); //50, 왜냐하면 함수가 호출되면서 밖에 있는 지역변수 값을 변경시키기 때문이다.

function test() {
	myVar = 50; // var이 없는 전역변수
}

- var 변수의 호이스팅

• 변수를 선언하기 전에 변수를 사용했을 때 변수 선언이 앞에 있는 것처럼 끌어올려 hoisting한다.
• 오류가 발생하진 않는다.

var x = 100; //x 변수 선언

test(); //함수의 호출: x is 100, y is undefined

function test() { //변수가 선언만 되고 값이 할당되지 않았으므로 undefined가 된다.
	document.write("x is " + x + ", y is " + y); //var y;로 인식
    var y = 200;
}

- var 변수의 재선언

• 이미 있는 변수를 다시 선언할 수 있다.
  • 실수로 서로 다른 위치에서 같은 변수를 선언할 수 있다는 것은 문제
  • 재선언하면 이전 변수를 덮어쓰기 때문에 예상하지 못한 오류가 생길 수 있다.

- let: 프로그램 안에서 값이 변하는 변수

- const: 프로그램 안에서 값이 변하지 않느 상수

• 변수의 스코프: let과 const는 블록 영역의 스코프이다. 전역변수를 사용되지 않음. 함수 블록 안에서만 사용 가능.

function calcSum(n) {
	let sum = 0; //블록 변수 선언
    
    for(let i=1; i<n+1; i++) {
    	sum += i;
    }
    console.log(sum); //블록 변수 사용
}

calcSum(10);

• 호이스팅 없음: 변수를 선언하지 않고 사용한다면 오류가 발생할 것이다.
• 변수의 재선언 불가: 같은 변수를 다시 선언하면 오류가 발생할 것이다.

변수의 사용법

- 전역 변수는 최소한으로 사용하자.

- var 변수는 함수의 시작 부분에서 선언한다. (호이스팅을 방지하기 위함, 변수를 선언하기도 전에 사용함으로 undefined가 되는 것을 방지하자. 제대로 선언!)

- for문의 카운터 변수는 블록 변수인 let을 사용하는 것이 좋다.

여러 번 사용할 수 있는 함수 만들기

- 매개변수(parameter)

• 함수를 실행하기 위해 필요하다고 지정하는 값
• 함수를 선언할 때 함수 이름 옆의 괄호 안에 매개변수 이름을 넣는다.

function addNumber(a,b) { //괄호 안의 a,b가 매개변수
	var sum = a + b;
    console.log(sum);
}

- 인수(argument)

• 함수를 실행하기 위해 필요하다고 지정하는 값
• 함수를 실행할 때 매개변수로 넘겨주는 값

addNumber(2,3);

- return문

• 함수를 실행한 결과값을 함수 밖으로 넘기는 것
• 반환된 값은 함수를 실행한 소스 위치로 넘겨짐

var num1 = parseInt(prompt("첫 번째 숫자는 ?")); //1
var num2 = parseInt(prompt("두 번째 숫자는 ?")); //1
var result = addNumber(num1, num2); //2. 함수 호출 6. result 변수에 return 값 저장
alert("두 수를 더한 값은 " + result + "입니다."); //7. result 변숫값을 출력

function addNumber(a,b) { //3
	var sum = a + b; //4
    return sum; //5
}

익명 함수

- 이름이 없는 함수

- 함수 자체가 식이므로 함수를 변수에 할당하거나 다른 함수의 매개변수로 사용할 수도 있다.

var add = function(a, b) { //함수 선언후 add변수에 할당
	return a + b;
}

var sum = add(10, 20); //익명 함수 add 실행 후 결과값을 변수 sum에 저장
sum //변수 sum 값 확인

즉시 실행 함수

- 함수를 정의함과 동시에 실행하는 함수

- 즉시 실행 함수는 변수에 할당할 수 있고 함수에서 반환하는 값을 변수에 할당할 수도 있다.

- 매개변수와 인수를 사용한다면?

var result = (function(a, b) { //매개변수
	return a + b;
) (10, 20)); //인수
console.log(result); //30

화살표 함수

- ES6 이후 버전에서 표기법을 사용해 함수 선언을 간단하게 작성

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

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

- 매개변수가 있을 때

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

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

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

let sum = (a,b) => { return a + b; } //function 예약어 생략
let sum = (a,b) => a + b; //return문 생략

이벤트

- 웹 브라우저나 사용자가 행하는 모든 동작

- 사용자가 웹 문서 영역을 벗어나 하는 동작은 이벤트가 아님!

이벤트 처리기

- 이벤트가 발생했을 때 어떤 함수를 실행할지 알려줌

- 태그 안에서 이벤트를 처리할 때는 "on"+"이벤트명" 사용

//event.html
<button class-"" id="" onclick="showDetail()">상세 설명 보기</button>
<script src="js/event.js"></script>

//event.js
function showDetail() {
	
}