js-화살표 함수arrow function

쁘띠경·2024년 7월 31일

js

목록 보기
28/41

ES6버전부터는 => 표기법(화살표 표기법)을 사용해서 함수선언을
좀 더 간결하게 할 수 있다. 화살표 함수는 익명함수에서만 사용할 수 있다.

    [기본형]
    1. let 변수 = (매개변수) => {자바스크립트 코드}; →선언문
        변수명(인수); →호출문


이런 공식이다. return을 대입하면 이런식이다.


  • addNum에다가 1,3을 넣고,
    1+3이 return에 의해 나오게 됨.

그걸 cup에다가 담고, 컵 안엔 4라는 값이 나옴.









  • 만약 인수를 보내지 않고 같은 4라는 값을 보내고 싶다면??????????

    기본값을 정해줘서 굳이 인수를 써주지 않아도 4라는 값을 보내줄 수 있다.





  • 동그라미 친 두개는 같은 것이다.
    같은 걸 부르려면 앞에 변수이름을 없애고 불러줌.

    원래 있던 기본 값은 사라지고, 새로운 인수값이 적용이 됨.
    그래서 9가 나오게 된다.





1.매개변수가 없을 경우

: 매개변수가 없을 경우에는 매개변수에 괄호 안을 비워둔다. 호출문의 인수자리도 비워둔다.


2.매개변수가 없고, 실행할 자바스크립트 코드가 1줄인 경우

     : 실행할 자바스크립트 코드가 1줄이라면 중괄호를 생략할 수 있다.
    이때 return문은 생략된 것으로 간주한다.
    
   만약!!! 실행할 자바스크립트 코드가 두 줄 이상이면 {}와 return 생략 불가능
    let변수 =()=>{
    자바스크립트 코드1;
    자바스크립트 코드2;
    return 반환값;
    }
    
    


hi라는 함수를 호출하여 결과값을 화면에 표시함.
3줄을 1줄로 줄인격임.


3.매개변수가 1개인 경우

: 매개변수가 한개인 경우 매개변수 자리의 ()를 생략할 수 있다. 

이 함수를 화살표 함수로 바꿔보자 !!


이런식으로 바꿔볼 수 있다.

매개변수가 한개일 경우에만 중괄호를 생략할 수 있다.

4. 매개변수가 2개 이상인 경우

: 매개변수가 둘 이상인 경우 (매개변수)=>{코드} 형태를 사용한다. 
    일반적인 익명함수와 마찬가지로 매개변수끼리는 , 로 구분한다. 

let 변수 = (매개변수1, 매개변수2)=>자바스크립트 코드;


이렇게 생긴 식을 한줄로 고쳐줄 수 있다.

profile
안녕하세요 ! 발전을 위해 매일 도전하는 퍼블리셔 류영경입니다.

0개의 댓글