JavaScript - 화살표 함수, 디폴트 매개변수

JavaScript

화살표 함수(Arrow Function)

• 자바 언어의 람다식과 동일
• function 키워드 대신 화살표(=>)를 사용하여 더 간략한 방법으로 함수를 선언하는 방식
• 기본 문법
  • 매개변수 => {실행부분}
  • ( ) => {return name;} // 매개변수가 없는 경우. 괄호 생략 불가
  • x => { ... } // 매개변수 1개인 경우 괄호 생략 가능
  • (x, y) : { ... } // 매개변수가 여러 개인 경우. 괄호 생략 불가
  • x => x * x // 수행 문장이 한 줄인 경우 중괄호 생략 가능

arrowFunction1.html

<script type="text/javascript"> 
    // 화살표 함수
    // 익명함수. 매개변수 2개(a,b)
    // 화살표 함수 사용
    let sum = (a,b) => a + b;

    alert(sum(10,20));
</script>

<script type="text/javascript">
    // 화살표 함수를 사용하지 않을 경우
    let sum = function(a, b) {
        return a+b
    };
    alert(sum(10,20));
</script>

arrowFunction2.html

• forEach() 함수를 화살표 함수를 사용해서 변경

<script type="text/javascript">
    var fruits = ["딸기", "포도", "망고"];

    fruits.forEach((item, index, fruits) => {
        document.write(index+ "" + item + "" + fruits + "<br>");
    });
</script>

화살표 함수 사용 예

• 이벤트 리스너 처리할 때 사용
• 원래 형식

객체.addEventListener('click', function(){
    수행 문장;
});

• 화살표 함수 사용

객체.addEventListener('click',() =>{
    수행 문장;
});

디폴트 매개변수

• 함수의 매개변수에 기본값을 설정하는 것
• 전달되는 값이 없을 때 매개변수의 값 사용
• 일반 매개변수와 같이 사용할 경우 디폴트 매개변수는 맨 뒤에 이ㅜ치

예제

defaultParam.html

 <script type="text/javascript">
     function rect(width=10, height=20){
         document.write("width: " + width);
         document.write("height: " + height + "<br>");
         return width*height;
     }

     document.write(rect()+ "<br>");
     document.write(rect(30)+ "<br>");
     document.write(rect(100,200));

     document.write("<hr>");

     function showInfo(name, year=4, score) {
         document.write("name : " + name + "<br>");
         document.write("year : " + year + "<br>");
         document.write("score : " + score + "<br>");
     }

     showInfo();
     showInfo("김준면");
     showInfo("김준면",80);
</script>