ArrowFunction

ArrowFunction 

- 함수 표현 방식을 보다 간결하게 만들어주는 방법

- Arrow function은 익명함수 이기 때문에 이름을 가진 변수에 할당하거나 다른 함수의 argument로 선언이 될 때 사용 

 

// 함수 선언 
function getTwice(number){
        return number *2; 
    }

// 함수 표현 
const getTwice = function(number) {
    return number*2; 
}

// 화살표 함수 
const getTwice = number => number * 2;

매개변수에 따른 선언 

// parameter가 여러개 일 때 m 소괄호 안에 parameter를 쓴다 
const arrow = (x,y) => {...}; 


// parameter가 한 개인 경우 소괄호()를 생략할 수 있다 
const arrow = x => {...}; 

// parameter가 없는 경우 소괄호()를 생략할 수 없다 
const arrow = () => {...};

const sum = (a,b) => {
    return a + b;
}; 


const getTwice = number => {
    return number *2; 
}

const getCodeit = () => {
    return {name: "YUNA"}; 
}

함수 내부구조에 따른 선언 

- 표현식이 아닌 문(즉, 값으로 평가가 되지 않는 문)이면은 중괄호{} 를 생략할 수 없다 

- 함수 내부가 return 문 하나면은 중괄호 {} 생략 가능

- 함수 내부에 return문 외에 변수 할당, 조건문, 반복문 등이 있으면 중괄호 {} 생략 불가

- 객체 리터럴을 반환하는 경우 객체 리터럴을 소괄호()로 감싸주어야 한다

// 리턴문 하나인 경우 중괄호 생략가능

const power = x => { return x ** 2}; 
const power = x => x ** 2 ;

// 값을 할당한 경우 {} 생략 못함
const arrow = () => { return const x=1;}; 
const arrow = () => const x=1; // unexpeted token 'const'

 

// return문이 객체인경우은  소괄호로 감싸줘야한다

const create = (id, content) => {return {id, content}; };  
const create = (id, content) => ( {id, content} );

화살표 함수는 기존의 함수 선언 방식을 좀 더 간결하게 만들어주는 문법입니다. (영준: O)

그렇기 때문에 다양한 상황에 따라 축약된 형태로 함수를 만들 수 있는데요.

rest parameter를 사용한다거나 파라미터의 기본값을 지정하는 방식들은 기존의 함수와 똑같기 때문에 기존에 사용하던 함수 선언 방식들은 대부분 화살표 함수로 변환할 수가 있습니다. (희준, 상준: O)

단, 화살표 함수는 arguments 객체가 없어서 예외적으로 arguments 객체를 활용하는 함수는 화살표 함수로 변환하기가 어렵습니다. (효준: O)

그리고 또 한 가지 주의할 점은 모든 화살표 함수는 익명 함수라서, 변수에 할당하거나 다른 함수를 호출할 때 아규먼트로 사용된다는 점을 잘 기억해두셔야 합니다. (대준: X)

보기 중 화살표 함수에 대해서 잘못 이해한 친구는 4번: 대준입니다.