[JavaScript] 이벤트

🎵 함수 표현식 - 익명 함수

• 이름이 없는 함수
• 함수 자체가 ;식 (Expression)'이기 때문에 함수를 변수에 할당하거나 다른 함수의 매개변수로 사용할 수 있음

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

////////////////////////////////////////////

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

• 중간에 필요한 함수가 있을 경우에 작성하고 변수를 할당하여 사용할 수 있음

🎵 함수 표현식 - 즉시 실행 함수

• 여러 번 실행한 함수는 아닌데 어느 순간에 바로 그 자리에서 실행이 될 필요성이 있을 때 선언과 동시에 실행이 되도록 하는 함
• 함수를 정의함과 동시에 실행하는 함수
• 변수에 할당할 수 있고, 함수에서 반환하는 값을 변수에 할당할 수도 있음

(function( ) {
...
})( );

//////////////////////////////////////////

(function( ) {
.......
}( ));

• 매개변수와 인수를 사용한다면?
  • 매개변수는 function() 괄호 안에. 인수는 함수 끝에 있는 괄호 안에 입력

var result = (function( ){
	return 10 + 20;
}( ));
console.log(result);
30

///////////////////////////////////////////////////////////////

var result = (function(a, b){
	return a + b;
} (10, 20));
console.log(result);
30

🎵 화살표 함수

• ES6이후 버전부터 사용가능한 함수
• 표기법을 사용해 함수 선언을 간단하게 작성
• 이름이 없는 익명함수 또는 즉시 실행 함수에서 사용할 수 있음
• 반환해야 하는 함수가 하나라면 중괄호와 return문을 생략할 수 있음

 

• 매개변수가 없을 때

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) => {return a + b}
=> let sum = (a, b) => a + b;

🎵 이벤트

• 웹 브라우저나 사용자가 행하는 동작
• 사용자가 웹 문서 영역을 벗어나 하는 동작은 이벤트 아님
• 웹 문서를 서버에 불러오는 로딩도 이벤트에 해당

🎵 이벤트 처리기 (이벤트 핸들러)

• 이벤트가 발생했을 때 그 이벤트를 어떻게 처리할 것인지 함수와 연결해주는 역
• 이벤트가 발생했을 때 어떤 함수를 실행할지 알려줌
• 태그 안에서 이벤트를 처리할 때는 "on"+"이벤트명" 사용 

🎵 실습 - 버튼을 클릭해서 상세 설명 열고 닫기