함수
style 태그
<style>
/* code태그 */
/* code{
color: red;
font-size: 20px;
font-weight: bold;
} */
/* btn1 */
#btn1{
width: 50px;
height: 50px;
font-size: 30px;
font-weight: bold;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
</style>script 태그
외부 js 파일과 연결하는 태그
<script src="js/14_함수.js"></script>// 기본 함수
function clickCount(btn){
btn.innerHTML = Number(btn.innerHTML) + Number(1);
}
//-----------------------------------------------------------------------------
// 즉시 실행 함수 확인하기
function test1(){ // 기본함수 선언&정의
console.log("기본함수")
}
test1(); // 호출
// 즉시 실행 함수
(function(){
console.log("즉시 실행 함수");
// 호출하지 않아도 자동으로 수행
})();
// *즉시 실행 함수의 변수명 중복 해결
const str = "전역변수";
(function(){
const str = "즉시실행함수의 전역변수";
console.log(str);
})();
console.log(str);
//--------------------------------------------------------------------------------
// 화살표 함수(Arrow Function)
// 1. 기본 형태 : ([매개변수]) => {}
document.getElementById("btn2-1").addEventListener("click",() => {
alert("화살표 함수 기본형태입니다.");
})
// 2. 매개변수 1개 : (매개변수) => {}
document.getElementById("btn2-2").addEventListener("click", e => {
e.target.style.backgroundColor = "yellow";
})
// 3. {}, return 생략
document.getElementById("btn2-3").addEventListener("click", () => {
// 함수 호출(익명 함수)
printConsole(function(num){return num*10});
// 함수 호출(화살표 함수)
printConsole(num=> num*10);
// 반환값이 Object면 {}, return 생략 불가
// -> 화살표(=>) 다음에 함수 정의 부분이 있어야 하는데
// 객체(Object)가 작성되어 있어 문법 오류 발생
// printConsole((num)=>{price : num*100, n : num}); // 문법 오류
printConsole((num)=>{return {price : num*100, n : num}});
})
function printConsole(fn){
console.log(fn(2));
}
// this(이벤트가 발생한 요소) 사용 불가
// 1) 익명 함수는 this 사용 가능
document.getElementById("btn2-4").addEventListener("click", function(){
this.style.backgroundColor ="pink";
})
// 2) 화살표 함수 this 사용 불가
document.getElementById("btn2-4").addEventListener("click", e => {
// 화살표 함수에서 this는 창 자체를 나타내는 객체(window)이다.
console.log(this);
//this.style.color = "white"; // 글자색 변경
e.target.style.color = "white"; // 글자색 변경
})기본적인 함수의 선언, 정의, 호출
<code>
function 함수명(매개변수){ // 함수선언
// 함수정의
}
함수명(); // 함수호출
</code><!-- 매개변수 this : 클릭된 요소를 의미 -->
<div id="btn1" onclick="clickCount(this)">0</div>
익명함수(이름이 없는 함수)
이름이 없는 함수이기 때문에 필요할 때 마음대로 호출하는 것이 불가능
이벤트 핸들러와 같이 바로 동작하는 함수가 필요한 경우 또는 변수, 매개변수에 함수를 저장해야 하는 경우 사용
<h3>익명함수(이름이 없는 함수)</h3>
<code>
function(매개변수){ // 함수 선언
// 함수 정의
}
</code>즉시 실행 함수
익명 함수의 한 종류로써 함수가 정의되자마자 바로 실행되는 함수
즉시 실행 함수 사용 이유
(1) 함수 선언, 정의, 호출의 일련 과정을 수행하지 않아도 바로 실행된다.
→ 호추룹가 없으므로 일반적인 함수보다 속도적 우위를 가지고 있음
(2) 사용하려는 변수명이 전역변수로 사용되어지고 있는 경우 즉시 실행 함수를 이용하여 내부의 지역변수로 작성하여 변수명 충돌 문제를 해결할 수 있다.
<h3>즉시 실행 함수</h3>
<code>
(function(매개변수){ // 함수 선언
// 함수 정의
})();
</code> 화살표 함수
익명함수의 표현식을 간단히 표현한 표기법
-
1️⃣ 작성법1. 기본 형태( [매개변수] ) => { 함수 정의 }
익명함수 : function(){}
화살표함수 : () => {}익명함수 : function(num){return num*2;} 화살표함수 : (num) => {return num*2;} -
2️⃣ 작성법2. 매개변수가 "하나"인 경우 () 생략 가능
익명함수 : function(e){e.target.style.backgroundColor = "yellow";}
화살표함수 : e => {e.target.style.backgroundColor = "yellow";}
-
3️⃣ 작성법3. 매개변수가 없을 경우 무조건 "()" 작성
-
4️⃣ 작성법4. 함수의 정의 부분이 return [식 또는 값]으로만 작성되어 있는 경우
{}, return 생략 가능 -
5️⃣ 작성법5. 함수 정의 부분이 return 구문만 있으나 return되는 값이 객체(Object)인 경우 {}, return 생략 불가능
<h3>화살표 함수</h3>
<button id="btn2-1">기본형태</button>
<button id="btn2-2">매개변수 1개</button>
<button id="btn2-3">(), return 생략</button>
<button id="btn2-4">this 사용 불가</button>
전체코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>14_함수</title>
<style>
/* code태그 */
/* code{
color: red;
font-size: 20px;
font-weight: bold;
} */
/* btn1 */
#btn1{
width: 50px;
height: 50px;
font-size: 30px;
font-weight: bold;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
</style>
</head>
<body>
<h3>기본적인 함수의 선언, 정의, 호출</h3>
<pre>
<code>
function 함수명(매개변수){ // 함수선언
// 함수정의
}
함수명(); // 함수호출
</code>
</pre>
<!-- 매개변수 this : 클릭된 요소를 의미 -->
<div id="btn1" onclick="clickCount(this)">0</div>
<hr>
<h3>익명함수(이름이 없는 함수)</h3>
<pre>
<code>
function(매개변수){ // 함수 선언
// 함수 정의
}
</code>
- 이름이 없는 함수이기 때문에 필요할 때 마음대로 호출하는 것이 불가능
- 이벤트 핸들러와 같이 바로 동작하는 함수가 필요한 경우 또는
변수, 매개변수에 함수를 저장해야 하는 경우 사용
</pre>
<hr>
<h3>즉시 실행 함수</h3>
<pre>
<code>
(function(매개변수){ // 함수 선언
// 함수 정의
})();
</code>
- 익명 함수의 한 종류로써
함수가 정의되자마자 바로 실행되는 함수
*** 즉시 실행 함수 사용 이유
1) 함수 선언, 정의, 호출의 일련 과정을 수행하지 않아도 바로 실행된다.
-> 호추룹가 없으므로 일반적인 함수보다 속도적 우위를 가지고 있음
2) 사용하려는 변수명이 전역변수로 사용되어지고 있는 경우
즉시 실행 함수를 이용하여 내부의 지역변수로 작성하여
변수명 충돌 문제를 해결할 수 있다.
</pre>
<hr>
<h3>화살표 함수</h3>
<pre>
익명함수의 표현식을 간단히 표현한 표기법
작성법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 생략 불가능
</pre>
<button id="btn2-1">기본형태</button>
<button id="btn2-2">매개변수 1개</button>
<button id="btn2-3">(), return 생략</button>
<button id="btn2-4">this 사용 불가</button>
<script src="js/14_함수.js"></script>
</body>
</html>
Hello! My Name is oYJo