자바스크립트 함수

함수 

함수는 어떤 작업을 수행하거나 값을 계산하는 문장 집합을 말하며, 필요에 따라 재사용하고자 할 때 생성합니다. 
여러 동작을 묶은 덩어리를 함수라고 생각하면 됩니다. 동작해야 할 목적대로 묶은 명령이 함수입니다. 

함수를 사용하면 각 명령의 시작과 끝을 명확하게 구별할 수 있고, 묶은 기능에 이름을 붙여서 어디서든 같은 이름으로 명령을 실행할 수 있습니다. 
함수는 function 키워드 다음에 함수 명을 작성하고 해당 함수가 수행할 일을 중괄호({}) 안에 기술합니다.

function 함수_명() {  }

내장 함수는 자바스크립트 엔진에 내장된 함수를 말합니다. 내장 함수는 미리 만들어져 있어서 개발자는 가져다 사용하기만 하면 됩니다. 함수는 개발자가 함수를 선언하고 호출해야만 함수 내 실행문을 실행할 수 있지만, 내장 함수는 함수 선언 없이 단지 호출만으로 함수를 사용할 수 있습니다.

내장 함수의 예시입니다.     

parseInt()는 문자형 데이터를 정수형 데이터로 변경합니다. 
parseFloat()는 문자형 데이터를 실수형 데이터로 변경합니다. 
string()는 문자형 데이터로 변경합니다. 
number()는 숫자형 데이터로 변경합니다. boolean()는 논리형 데이터로 변경합니다. 
alert()는 알림 창을 표시할 때 씁니다. 
document.write()는 웹 문서(document)에서 괄호 안의 내용을 표시(write) 하는 명령문입니다. 

 

함수의 구조

함수의 구조는 크게 입력, 할 일, 출력 3가지로 구성됩니다. 입력 값은 여러 개가 될 수 있고, 없을 수도 있습니다. 입력되는 값은 매개변수(parameter)라고 하며 전달인자(argument)는 함수를 실행할 때 넘겨지는 값을 말합니다.

한 번만 사용하는 함수가 아니라면, 프로그램 안에서 여러 번 사용하는 함수인데 입력값을 바꾸지 못한다면 매우 불편할 것입니다. 이처럼 변숫값이 자주 변하는 상황에서 사용하려면 값을 고정하지 않고 어떤 숫자든지 2개만 sub() 함수로 넘겨서 빼주면 됩니다. 즉, 함수를 실행하는 데 필요한 값을 함수 밖에서 제공하는 것이다. 이렇게 하려면 함수를 선언할 때부터 외부에서 값을 받아 줄 변수를 미리 만들어야 합니다. 이것이 매개변수(parameter)이다. 함수를 호출할 때 괄호 안에 매개변수의 이름을 넣는다. 매개변수는 선언된 함수 안에서만 사용하며, 매개변수를 여러 개 사용할 때는 매개변수 이름 사이에 쉼표(,)를 찍어 나열합니다. 매개변수 기본값 지정할 수 있습니다. 다음은 예시입니다.

function division(a, b = 10, c = 10) { // b = 10, c = 10으로 기본값 지정
	return a * b + c;
}
division(5, 5, 15 ); // a = 5, b = 5, c = 15
division(30); // a = 30, b = 10(기본값), c = 10(기본값)

함수의 결괏값을 반환할 때는 예약어 return을 사용해서 넘겨줄 값을 지정합니다. 결괏값을 함수 밖에서 사용하려면 값을 반환한다고 합니다.  함수의 선언이 끝났다면 이제 실행할 함수를 호출해야 합니다. 매개변수가 있는 함수를 호출할 때 실제 값 부분을 전달인자(argument)라고 합니다.
간단한 뺄셈을 수행하는 함수를 작성하고 값이 출력되는 것을 확인하겠습니다. 

function sub(a,b)  
{ // a,b 매개변수(parameter)
	let total = a - b;
    	return total;
 }
 let result = sub(50,20); // 50, 20 전달 인자(argument)
 document.write(result);

작성한 코드에서 구조를 설명하면 sub라는 함수에 들어오는 값 a, b를 매개변수라고 하고, sub 함수에 값을 전달할 때 50, 20은 전달인자라고 합니다. sub라는 함수는 매개변수로 들어오는 두 값을 a, b라는 변수 명으로 함수 내에서 변수 total에 저장한 다음에 그 결과는 return을 이용하여 함수의 결과로 출력하고 있습니다.  

함수를 작성할 때 주의사항은 전역변수와 지역변수를 구분하여 사용해야 한다는 것입니다. 

sub 함수 안에서 생성한 변수 total은 함수 안에서만 사용 가능한 지역변수입니다. 그래서 함수 바깥 영역에서는 total이라는 변수를 사용할 수 없는 것입니다. 
자바스크립트에서 변수를 선언하고 사용할 때 변수가 적용되는 범위를 스코프(scope)라고 합니다.

변수가 어디까지 유효한지 범위를 가리키는 영역이 필요하다.

한 함수 안에서만 사용할 수 있는 변수를 지역변수(local variable)라고 합니다.

스크립트 소스 전체에서 사용할 수 있는 변수를 전역변수(global variable)라고 합니다. 

호스팅 hoisting 

호스팅이란 javascript 코드를 해석하는 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것입니다.

호스팅이란 '끌어올린다'를 뜻합니다. 상황에 따라 변수의 선언과 할당을 분리해서 선언 부분을 스코프의 가장 위쪽으로 끌어올리는 것입니다. var로 선언한 변수의 경우 호스팅 시 undefined로 변수를 초기화합니다. 하지만 let과 const로 선언한 변수의 경우는 변수를 초기화하지 않습니다.

console.log(num0); // 선언이 없기 때문에 ReferenceError
num0 = 5; // 초기화
console.log(num1); // 호스팅한 var 선언으로 인해 undefined 출력
var num1; // 선언
num1 = 10; // 초기화
console.log(num2); // num 선언 전으로 ReferenceError
let num2; // 선언
num2 = 15; // 초기화

console.log(num); // num3 선언 전으로 SyntaxError
const num3; // 선언
num3 = 6; // 초기화

var를 사용한 변수는 선언한 것과 같은 효과가 있습니다. 변수를 실행하기 전이지만 '이런 변수가 있구나'하고 기억해 두기 때문입니다. var를 사용한 변수는 재선언과 재할당을 할 수 있습니다. 다음은 예시입니다.

function addNum(num1, num2) {
	return num1 + num2; // 2개의 수 구하기
}
var sum = addNum(30,40); // sum 변수 선언, 함수 호출
console.log(sum);
sum = 50; // sum 변수 재할당
console.log(sum); 
var sum = 100; // sum 변수 재선언

let 예약어로 선언한 변수는 변수를 선언한 블록에서만 유효하고 블록을 벗어나면 사용할 수 없습니다.

let 예약어를 사용하여 선언한 변수는 값을 재할당할 수는 있지만 변수를 재선언할 수는 없습니다. 

const 예약어로 선언한 변수는 상수 변수입니다. 상수는 프로그램 안에서 변하지 않는 값을 뜻합니다.

const 예약어는 블록 레벨의 스코프를 가집니다. 즉, 변하지 않는 값을 변수로 선언할 때 예약어 const를 사용하는 것이 편리합니다. 

const 예약어를 사용하여 선언한 변수는 값을 재할당할 수는 있지만 변수를 재선언할 수는 없습니다. 

함수의 종류

일반 함수

일반 함수는 function 키워드로 함수 명을 기술하는 방식입니다. 일반 함수는 스크립트 어디에서든 다시 호출하여 실행이 가능합니다.

익명함수

익명 함수는 이름이 없는 함수를 말합니다. 

let sum = function (u,v) {
	let w = u + v;
    	return w;
}

document.write(sum(1,2));

코드를 살펴보면 function 키워드 뒤에 함수 명이 없이 바로 매개변수를 썼습니다. 이렇게 이름이 없는 함수를 만들면 해당 함수를 호출할 수가 없습니다. 그래서 함수 자체를 변수 명에 문자 그대로 할당하면 함수를 호출할 수 있게 되는 것입니다. 그리고 함수를 호출하는 문장을 보면 변수 명 sum에 전달인자를 쓰는 것입니다.

즉시실행함수

(function() {

}()); // 또는
(function() {

})();

즉시 실행 함수는 말 그대로 함수를 작성함과 동시에 바로 실행되는 함수입니다.

let res = (function(u,v) {
	reutrn u+v;
})(10,20);
document.write(res);

덧셈이 실행되는 즉시 실행 함수를 만들고 그 결과를 변수 명 res에 할당하고 그 값을 출력했습니다. 작성 후 브라우저에서 확인해 보면 30이 정상적으로 출력됩니다. 

화살표 함수

=> 표기법(화살표 표기법)을 사용해 함수 선언을 좀 더 간단하게 작성할 수 있습니다.

이 방법은 익명 함수에서만 사용할 수 있습니다. 

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

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

function hello = () => { return "안녕하세요~" }

중괄호 안에 함수 내용이 한 줄뿐이라면 중괄호를 생략해서 작성할 수도 있습니다.

function hello = () => "안녕하세요~";

 

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

let hi = user => { document.write(user + "님, 환영합니다!"); }

매개변수가 둘 이상인 경우 화살표 함수는 (매개변수) => { ... }처럼 사용합니다. 매개변수를 추가하려면 괄호 안에 쉼표(,)로 구분합니다. 

let total = function(u,v) {
	return u + v;
 }
 // 또는
let total = (u,v) => u + v;