개발바닥 아방수

javascript 익명함수, 즉시실행함수, 화살표함수(람다식함수) 본문

웹 개발/Front

javascript 익명함수, 즉시실행함수, 화살표함수(람다식함수)

앙큼아기 2022. 7. 4. 22:59

🔎 익명함수, 즉시실행함수, 화살표 함수

 

🔎 익명 함수(Anonymous Function)

  • 익명 함수는 말 그대로 이름이 없는 함수다. 함수를 만들고 변수를 선언한 뒤 ‘변수에 함수를 저장’하는 방식인데 이런 식으로 함수를 만드는 것을 **‘함수 리터럴(Literal)’**이라고 한다.
var 변수명 = function() {
		지시문1;
		지시문2;
		...
}
변수명(); // 함수 실행
  • function으로 함수를 정의하는데 함수_명이 없고, 정의한 함수를 변수_명에 저장한 뒤, 나중에 변수_명으로 익명 함수를 호출해서 사용한다.
  • 익명 함수는 프로그램 전에 일정한 규칙을 줄 때 사용된다. (인터페이스의 상속에서 많이 사용한다. 익명 함수에 기능을 넣어놓지 않는 경우도 있다. 함수명을 동일시 하게 하는 것이다.)

 

🔎 즉시 실행 함수

  • 일반적으로 함수는 함수를 선언한 뒤 필요하면 (인자를 주어) 호출해서 실행시키는데 한 번만 실행하는 함수는 선언할 필요가 없이 실행 함수로 만들어두면 편리하게 사용할 수 있다.
(function() {
		명령어
} () );       // ( )는 인자가 필요하면 넣어주는 곳

 

🔎 화살표 함수

  • ES6부터는 Lamda 함수처럼 => 표기법으로 함수 선언을 간단하게 처리하는데 익명 함수에서만 사용될 수 있다. 반드시 가로로 써야 한다.
기본형 => \(매개변수) => { 함수 내용 }

// 매개변수가 없으면
기본형 => { 함수 내용 }

 

✅ 실습

  • 익명 함수 기본
<script>
// 예시 1
( function() { // 인자 없이 함수만 선언
    var userName = prompt("이름을 입력하세요");
		document.write("안녕하세요?" + userName + "님!!")';	
			   } () );

// 예시2
( function(a,b) {
        var sum = a + b;
			   } (100, 200) );
document.write("함수 실행 결과 : " + sum);
// 내 생각에 해당 sum은 오류가 날 것 같다. => 오류 확인

</script>

 

  • 즉시 실행 함수 기본
<script>
// 예시 1
const hi = function() { // 함수를 상수_변수에 저장 => 익명함수
        return "안녕하세요?";
    }
const hi = () => { return "안녕하세요?"}; // 하나로 처리해도 되고,
const hi => {"안녕하세요?"}; // 더 줄여서 다음과 같이도 가능하다.
</script>
// 매개변수 있을 시
// 예시 2
// 일반함수 => 람다식함수
<script>
let hi = function(user) {
        document.write(user + "님 안녕하세요?");
		}
let hi = (user) => { document.write(user + "님 안녕하세요?")}
hi("jieun");

// 예시 3 (둘다 가능하다)
let sum = (a, b) => { return a + b } 
let sum = (a, b) => a + b;
</script>

 

  • 람다식 (화살표) 함수 기본
// 매개변수 있을 시
// 예시 2
// 일반함수 => 람다식함수
<script>
let hi = function(user) {
        document.write(user + "님 안녕하세요?");
		}
let hi = (user) => { document.write(user + "님 안녕하세요?")}
hi("jieun");

// 예시 3 (둘다 가능하다)
let sum = (a, b) => { return a + b } 
let sum = (a, b) => a + b;
</script>

 

// 매개변수 있을 시
// 예시 2
// 일반함수 => 람다식함수
<script>
let hi = function(user) {
        document.write(user + "님 안녕하세요?");
		}
let hi = (user) => { document.write(user + "님 안녕하세요?")}
hi("jieun");

// 예시 3 (둘다 가능하다)
let sum = (a, b) => { return a + b } 
let sum = (a, b) => a + b;
</script>

 

  • 지역변수와 전역변수
<!DOCTYPE>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style></style>
</head>
<body>
	<script>
    // 서브 루틴
	 function func() { // 실행순서 2
        var x = 20; // 지역변수 x
        x += 10;
        document.write(x + "<br>");
     }
     // 메인루틴
     var x = 10;    // 전역변수 x
     func();        // 실행순서 1
     x *= 2;        // 실행순서 3
     document.write(x + "<br>"); // 실행순서 4
	</script>
</body>
</html>

 

  • 책 지불금액 계산
    • 책값(25000), 할인금액, 할인율(10%), 배송료(2500)를 입력받아서 지불 금액을 계산한다.
    • ‘지불금액 = 가격 - (가격 * 할인율) + 배송비’이다.
    <!DOCTYPE>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style></style>
</head>
<body>
	<script>
        var price = 25000;
        var rate = 10;
        var deliveryfee = 2500;
        var pay = price - (price * rate / 100) + deliveryfee;

        document.write("- 책값 : " + price + "원<br>");
        document.write("- 할인율 : " + rate + "%<br>");
        document.write("- 배송료 : " + deliveryfee + "원<br>");
        document.write("- 결제금액 : " + pay + "원<br>");
        
	</script>
</body>
</html>
    • 3만원 이상 무료 코드 (함수도 사용)
    <!DOCTYPE>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style></style>
</head>
<body>
	<script>
        var price = prompt("책값을 입력하세요(3만원 이상 무료)");
        var rate = 10;
        var deliveryfee;
        if ( price >= 30000 ) {
            deliveryfee = 0;
        } else {
            deliveryfee = 2500;
        }
    
        function get_money(price, rate, deliveryfee) {
            var pay = price - (price * rate / 100) + deliveryfee;
            return pay;
        }

        pay = get_money(price, rate, deliveryfee);

        document.write("- 책값 : " + price + "원<br>");
        document.write("- 할인율 : " + rate + "%<br>");
        document.write("- 배송료 : " + deliveryfee + "원<br>");
        document.write("- 결제금액 : " + pay + "원<br>");
	</script>
</body>
</html>
     
    • body에 button 넣어서 응용하기
    <!DOCTYPE>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style>
        div { border : solid 2px #cccccc; margin-bottom : 10px; }
        p { padding-left : 20px; }
        li { list-style: square; padding-left : 0px; }
    </style>
    <script>
        function get_money() {
            var price = prompt("책값을 입력하세요(3만원 이상 무료)");
            var rate = 10;
            var deliveryfee;
            if ( price >= 30000 ) {
                deliveryfee = 0;
            } else {
                deliveryfee = 2500;
            }
            var pay = price - (price * rate / 100) + deliveryfee;
            document.getElementById("price").innerHTML=price;
            document.getElementById("rate").innerHTML=rate;
            document.getElementById("deliveryfee").innerHTML=deliveryfee;
            document.getElementById("pay").innerHTML=pay;
        }
	</script>
</head>
<body>
    <div>
        <p>- 책값 : <span id="price"></span>원<br>
        - 할인율 : <span id="rate"></span>%<br>
        - 배송료 : <span id="deliveryfee"></span>원</p>
        <ul>
            <li>결제금액 : <span id="pay"></span>원<br></li>
        </ul>
    </div>
    <button onclick="get_money()">금액 확인</button>
</body>
</html>

 

 

  • onclick 사용하여 회원목록 띄우기
<!DOCTYPE>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style>
        * { margin : 0px 0px 0px 20px; padding : 0px; }
        div { margin-left : 20px; }
        table, th, td { text-align: center; padding : 5px 40px; }
        table { border-collapse: collapse;}
        th, td { border : solid 1px black; }
        th { background-color: #eeeeee;}
    </style>
</head>
<body>
    <button onclick="show_table()">회원 목록 보기</button>
    <div id="result"></div>
    <script>
        function show_table() {
            var contents = "";
            contents += "<h3>회원 목록</h3><table border : >";
            contents += "<tr><th>번호</th><th>이름</th><th>아이디</th><th>비밀번호</th><th>전화번호</th></tr>";
            var n = 1;
            while (n <= 5) {
                contents += "<tr><td>" + n + "</td><td>홍길동</td><td>hong</td><td>****</td><td>010-1234-5678</td></tr>";
                n++;
            }
            contents += "</table>";
            document.getElementById("result").innerHTML=contents;
        }
	</script>
</body>
</html>

 

'웹 개발 > Front' 카테고리의 다른 글

[Javascript] null과 undefined의 차이  (0) 2023.02.23
동기와 비동기 방식  (0) 2022.12.15
아이프레임(iframe)이란?  (0) 2022.12.15
[HTML] 가로, 세로 스크롤 없애기  (0) 2022.12.13
[HTML] img 태그 엑박일 때 onerror 처리  (0) 2022.11.17
'웹 개발/Front' Related Articles more