[Javascript] 4. 함수

■ 함수란? 동작해야 할 목적대로 명령을 묶은 것

- 함수 선언 및 호출

// 선언
function 함수명() {
	명령
}

//호출
함수명() 또는 함수명(변수)

 

- 함수를 사용하는 이유 : 함수를 선언하면 필요한 곳에 불러와서 편하게 사용할 수 있다 ▷ 소스코드 줄어들며 가독성 올라감

- 함수 선언과 실행 순서 : 웹 브라우저에서 자바스크립트 소스를 해석할 때 함수 선언 부분을 가장 먼저 해석함. 함수를 선언 해놓기만 하면 위치와 상관없이 함수 실행 가능

 

■ var를 사용한 변수의 특징

- 변수의 적용 범위

1. 함수 안에서만 쓸 수 있는 지역변수와 스크립트 소스 전체에서 사용할 수 있는 전역변수가 있다.

2. 전역 변수를 사용하려면 함수 밖에서 선언하거나 함수 안에서 var 예약어를 빼고 선언해야 한다.

 

- var와 호이스팅

1. 호이스팅이란? 변수의 선언과 할당을 분리해서 선언 부분을 가장 위쪽으로 끌어올리는 것. 변수를 선언하기 전에 사용하면 발생함

 

- 변수의 재선언과 재할당 : 호이스팅 외에도 재선언과 재할당이 가능함

 

■ let와 const

- let을 사용한 변수의 특징

1. 블록안에서만 쓸 수 있다.

2. 재할당은 가능하지만 재선언은 불가능

3. 호이스팅이 없다. 변수를 선언하기 전 사용할 경우 오류 발생

 

- const를 사용한 변수의 특징 

1. const로 선언한 변수는 상수 변수로 프로그램에서 변하지 않는 값

2. 재선언, 재할당 불가능

 

■ 자바스크립트의 변수 사용 꿀팁

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

2. var 변수는 함수의 시작 부분에 선언할 것.

3. for문에서 카운터 변수를 사용할 때는 var 예약어를 사용하지 않음 ▷ for문 밖에서 선언하거나 let으로 선언

4. ES6 사용하면 var보다 let 권장 ▷ 변수의 재선언을 막기 위함

 

■ 재사용할 수 있는 함수

- 함수 선언할 때 매개변수 지정하기 ▷ 매개변수를 지정하면서 함수 호출 시 값을 유동적으로 변경할 수 있음.

- return을 사용하여 함수가 반환하는 값 지정 하기

- 매개변수에 기본값을 지정해서 값을 넘겨받지 못했을때의 값을 지정해줄 수 있음.

 

■ 함수 표현식

- 익명 함수 : 이름이 없는 함수로 함수 자체가 식으로 구분됨. 

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

document.write("함수 실행 결과: " + sum(10,20));

 

- 즉시 실행 함수 : 함수는 선언하고 필요할 때마다 호출해서 실행하는 방법

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

// 따로 호출없이 바로 실행됨

 

- 화살표 함수 : => 표기법으로 함수 선언을 더 간단하게 작성할 수 있으나 익명함수에만 사용할 수 있음

// 매개변수가 없는 함수

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

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

// 매개변수가 한 개인 경우
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) => a+b;