JS 함수
#기본 형태
function 함수명(매개변수){ // 함수 선언
// 함수 코드
}
함수명(); // 함수 호출#익명함수 ( 함수 이름이 없는 함수 )
function(매개변수){ // 함수 선언
// 함수 정의
}이름이 없는 함수이기 때문에 필요할 때 마음대로 호출하는 것이 불가능
이벤트 핸들러와 같이 바로 동작하는 함수가 필요한 경우 또는
변수, 매개변수에 함수를 저장 해야하는 경우 사용함.
# 즉시 실행 함수
(function(매개변수){
// 함수 정의
})();
- 익명 함수의 한 종류로써
함수가 정의 되자마자 바로 실행되는 함수
*** 즉시 실행 함수 사용 이유
1) 함수 선언, 정의, 호출의 일련의 과정을 수행하지 않아도 바로 실해된다.
-> 호출부가 없으므로 일반적인 함수보다 속도적 우위를 가지고 있음.
2) 사용하려는 변수명이 전역변수로 사용되어지고 있는 경우
즉시 실행 함수를 이용하여 내부의 지역 변수로 작성하여
변수명 충돌 문제를 해결할 수 있다.
//기본함수.
//작성 후 메서드를 호출해 사용해야한다.
function test1(){
console.log("비교를 위해 제작된 기본함수.");
}
test1();//호출
//즉시 실행 함수
//페이지가 로딩되고 렌더링이 되고 바로 실행된다.
(function(){
console.log("즉시 실행된 함수");
//호출하지 않아도 자동을 수행.
})();
//즉시 실행 함수의 변수명 중복 해결
const str = "전역 변수.";
//전역변수를 즉시 실행 함수안에서 같은 변수명을 사용해도 오류가 발생하지 않는다.
(function(){
const str = "즉시 실행 함수에서의 지역변수";
console.log(str);
})();화살표 함수 =>
익명 함수의 표현식을 간단히 표현한 표기법. (es6)
작성법 1. 기본 형태 ([매개변수]) => { 함수 정의 }
익명 함수 : function(){ }
화살표 함수 : () => { }
익명 함수 : function(num){ return num * 2; }
화살표 함수 : (num) => { return num * 2; }
작성법 2. 매개변수가 "하나"인 경우 () 생략 가능
익명 함수 : function(e){ e.target.style.backgroundColor = "yellow"; }
화살표 함수 : e => { e.target.style.backgroundColor = "yellow"; }
작성법 3. 매개변수가 없을 경우 "무조건" () 작성
작성법 4. 함수 정의 부분이 return [식 또는 값] 으로만 작성되어 있는 경우
{}, return 생략 가능
작성법 5. 함수 정의 부분이 return 구문만 있으나
return 되는 값이 객체(object)인 경우 {}, return 생략 불가능
/ 1.기본형태 ([매개변수]) => { 함수 }
document.getElementById("btn2-1").addEventListener("click",() => {alert("화살표 함수 기본형태.")})
// 2.매개변수 1개 매개변수 => { 함수 }
document.getElementById("btn2-2").addEventListener("click",
e => {e.target.style.backgroundColor="yellow"})
document.getElementById("btn2-3").addEventListener("click",() => {
//함수 호출 (익명)
printConsole( function(num){return num*10});
//함수 호출(화살표 함수)
printConsole( num => {return num*5} )
printConsole( num => num*3 )
//반환값이 Object 이면 {} , retunr 생략 불가
//화살표 다음에 함수 정의 부분이 있어야 하는데
//객체(JS Object) 가 작성되서 생략이 불가능
printConsole( (num) => { return {price:num*1000 , n:num}})
})
function printConsole(fn){//매개변수 함수가 전달됨.
console.log( fn(2) );
}
//this 사용 불가
//익명함수는 this 사용 가능
document.getElementById("btn2-4").addEventListener("click",function(){
this.style.backgroundColor="red";
})
//화살표 함수는 this 사용 불가능
document.getElementById("btn2-4").addEventListener("click",e=>{
//화살표 함수에서 this는 window를 가르친다.
//this.style.color="white";
e.target.style.color="white";
})