함수
함수는 여러 명령어를 하나의 그룹으로 묶어서 하나의 명령어로 실행될수 있게 만든 명령어 덩어리입니다.
함수를 쓰면 좋은점
함수는 명령어의 시작과 끝을 명확하게 구분이 가능합니다. 또한 함수를 한번 선언 해놓으면 계속해서 재사용이 가능합니다.
함수 정의하고 실행하기
함수를 선언할때는 function 키워드를 이용하며 중괄호를 사용하여 함수의 범위를 설정합니다.
함수를 사용할때는 선언한 함수의 이름을 입력하면 사용이 가능합니다. 이를 '함수를 호출한다' 라고 합니다.
자바스크립트에서는 소스를 해석할때 함수의 선언부분을 가장 먼저 해석합니다. 그렇기에 함수의 선언 위치는 상관이 없습니다.
함수의 파라미터와 인수
함수를 사용할때는 함수의 괄호안에 입력값을 입력하여 사용합니다. 이때 실제로 입력하는 값을 인수라고 하며 함수에서 지정해 놓은 지정값들을 파라미터라고 합니다.
function addNumber(a, b) // a와 b는 파라미터
{
return a+b;
}
addNumber(1,2); //결과는 3, 실제로 들어가는 값 1,2는 인수ES6에서는 파라미터의 기본값을 지정하는 기능도 생겼습니다. 파라미터 부분에 인수를 입력하면 인수를 가지고 실행하지만 인수값이 없을경우, 파라미터의 기본 값을 가지고 함수를 실행합니다.
변수의 범위
자바스크립트에서는 변수를 사용할때 해당 변수가 적용되는 범위가 있다. 이런 범위를 스코프(scope) 라고 합니다. 변수가 어디까지 유효한지를 나타내는 범위입니다.
자바스크립트에는 지역변수와 전역변수 두가지의 범위가 존재합니다.
지역변수는 특정 함수내에 선언되어 함수의 범위안에서만 사용이 가능한 변수를 말합니다.
전역변수는 스크립트에 선언되어 해당 스크립트 안에서면 어디서든 이용이 가능한 변수입니다. 지역변수는 전역변수는 서로에게 영향을 주지는 않습니다. 하지만 헷갈릴 위험이 있기에 이름을 중복하여 사용하지 않는 것이 좋습니다.
ES6 버전부터는 블록변수라는 변수범위가 추가되었습니다. 블록변수는 변수를 선언한 블록{}내에서만 유효하며 벗어나면 사용할수 없는 변수입니다.
익명함수
함수를 선언할때는 함수의 이름을 지정하는것이 기본입니다. 하지만 함수의 이름을 지정하지 않고도 이름 없이 사용할수가 있습니다. 익명함수는 이름이 없는 함수를 뜻합니다. 익명함수는 함수자체가 식(Expression)이기에 변수에 할당이 가능합니다. 또한 다른 함수의 파라미터로도 사용이 가능합니다.
let add = function(a,b){ //함수 선언후 변수 add 에 할당
return a+b;
}
const sum = add(1,2); //익명함수를 할당하면 해당 변수를 함수처럼 이용이 가능하다.즉시 실행함수
즉시실행함수는 함수를 선언함과 동시에 실행하는 함수입니다. 즉시실행 함수는 변수에 할당할수도 있고 함수의 리턴값을 변수에 할당할수도 있습니다.
let result = (function(){ //선언과 동시에 실행되어 리턴값을 할당한다.
return 10 + 20;
})();
console.log(result) //값은 30
let result = (function(a,b){ //선언과 동시에 실행되어 리턴값을 할당한다.
return a + b;
})(10,20); // 함수가 매개변수가 있을 경우에는 마지막 괄호에 인수를 입력한다.즉시 실행함수를 선언할때는 두개의 괄호를 이용하여 선언한다.
let result = (function(){
return 10 + 20;
})(); //즉시함수를 선언할때는 괄호안에 함수자체를 묶는다는 느낌으로 집어넣습니다.
//그리고 함수의 인수가 들어갈 괄호를 입력합니다. 즉시실행 함수는 식이기에 맨뒤에 세미콜론을 붙입니다.
//인수를 입력하는 괄호는 함수를 입력하는 괄호 다음에 입력하거나 함수를 모두 선언하고
//마지막에 함수뒤에 붙여넣거나 두가지로 입력이 가능합니다.
(function(){})(인수가 들어가는 괄호);
(function(){}(인수가 들어가는 괄호)); //둘다 가능ES6에서 부터는 화살표 표기법을 이용하여 선언을 좀더 간단하게 할수 있습니다.
( ) ⇒ { } 괄호는 함수이면 중괄호는 함수의 내용입니다. 이때 매개변수가 하나일경우는
매개변수만 입력하여 선언이 가능합니다.
(a,b) ⇒ {}
a ⇒ {}
이벤트
자바스크립트에서는 함수가 스스로 실행되는 경우는 거의 없습니다. 버튼을 누르거나 목록에서 항목을 선택하거나 등의 무언가 행동이 일어날때 그에 해당하는 함수가 실행됩니다.
이벤트란 브라우저나 사용자가 행하는 어떤 동작을 말합니다. 웹문서에서 키보드를 누르는것도 이벤트이고 브라우저가 웹 브라우저를 불러오는 것도 이벤트 입니다.
이때, 이벤트는 오직 웹문서 영역에서만 일어나는 동작들만을 말합니다. 자바스크립트에는 다양한 이벤트가 존재합니다.
이벤트 처리기
웹사이트에서 유저가 어떠한 동작을 하면 이벤트가 발생하며 해당 이벤트에 따르는 동작이 다음에 뒤 따릅니다. 이러한 이벤트에 맞는 동작은 함수로 일어납니다.
웹문서에서 이벤트가 발생했을때 어떠한 함수를 실행해야하는지를 브라우저에 알려줘야합니다. 이벤트와 이벤트 처리함수를 서로 연결해 주는것을 이벤트 처리기 (Event handler) 라고 합니다. 이벤트 처리기는 이름앞에 on 을 붙여 사용합니다. 만약 click 이벤트라는게 존재할경우 onclick 이란 이름의 이벤트 처리기가 존재합니다.
