JavaScript - 함수 (3)

1. 화살표 함수

화살표 함수는 기존의 함수 표현식보다 더 간결하게 표현해 낼 수 있다.

const square = (x) => {
	return x * x;
}

const sum = (x, y) => {
	return x + y;
}

• function을 사용하지 않고 표현할 수 있다.
• 화살표 함수는 함수 표현식을 만들 때 사용한다.

// 함수 표현식은 단독으로 존재할 수 없는 값이므로 변수에 저장할 수 있다.

const add = function(x,y) {
	return x + y;
}

// 화살표 함수도 마찬가지로 화살표 함수 단독으로 사용할 수 없다.
(x, y) => {
	
}

// 하지만 화살표 함수도 함수 표현식처럼 변수로 저장할 수 있다.
const add = (x, y) => {
	return x + y;
}

const square = (x) => {
	return x * x;
}

만약 매개변수가 없는 경우엔 어떻게 작성해줘야 할까?

// 받을 인수나 매개변수가 존재하지 않으면 () 안에 공백으로 남겨둔다.
const rollDie = () => {
	return Math.floor(Math.random() * 6) + 1
}

여기서 매개변수가 하나인 화살표 함수를 표현하고자 할 때 유의할 점이 있다.

// 매개변수가 하나인 경우엔 소괄호를 없애준 채로 작성해도 작동이 된다.
const square = x => {
	return x * x;
}

하지만 매개변수가 0개 or 1개 이상인 경우에는 괄호 없이 작성하면 오류가 나타나니 주의해야 한다.

2. 화살표 함수의 암시적 반환

화살표 함수를 더 간결하게 줄일 수 있는 방법이 암시적 반환이다.

// 화살표 함수의 예시 1
const rollDie = () => {
	return Math.floor(Math.random() * 6) + 1
}

// 예시 1의 화살표 함수를 조금 더 간결하게 줄여보자
const rollDie = () => (
	Math.floor(Math.random() * 6) + 1
)

// 화살표 함수를 한줄로 나타내기 ( 암시적 반환은 모두 한줄로 표기가 가능)
const add = (a, b) => a + b

이렇게 {}를 ()로 바꿔주게 되면 암시적 반환을 의미하게 되어 return을 적어주지 않아도 함수로 인식하게 된다.

온전한 함수 표현식에서 화살표 함수를 한줄로 표현하기까지..

const square = function(num) {		// 함수 표현식
	return num * num;
}

const square = (num) => {		// 화살표 함수 기본형
	return num * num;
}

const square = num => {			// 매개변수 1개를 갖는 화살표 함수
	return num * num 
}

const square = num => (			// 암시적 반환을 갖는 화살표 함수
	num * num;
)

const square = num => num * num; 		//암시적 반환을 한줄로 표현한 화살표 함수

위의 예시는 하나의 함수식을 통해 여러 모습으로 표현한 방법이다.

여기서 주의해야 할 점이 있다.

:암시적 반환에서 중요한 건 함수의 바디에 있는 표현식은 단 1개만 있어야 한다는 점이다.
if) 함수 바디에 표현식 말고도 하나의 변수가 더 들어있다면 그 함수는 작동하지 않는다.

그렇기 때문에 암시적 반환은 깔끔한 표현식이 단 하나만 있어 값이 유일할 때만 비로소 작동된다.

---

3. 화살표 함수 연습을 위한 예시

movies 라는 객체에서 제목과 평점을 나타내고자 할 떄

const movies = [
	{
    	title: '기생충',
        score: 95
	},
    {
    	title: '아바타2',
        score: 93
    },
    {
    	title: '극한직업',
        score: 95
    },
    {
    	title: '설국열차',
        score: 88
    },
    {
    	title: '영웅',
        score: 92
    }
]

// map 메서드 함수를 함수 표현식으로 나타냈을 때

const movieChart = movies.map(function (movie) {
	return `${movie.title} - ${movie.score / 10}`
})

// 위의 함수 표현식을 화살표 함수로 바꿔줬을 때

const movieChart = movies.map(movie => {
	return `${movie.title} - ${movie.score / 10}`
})

// 위의 함수 표현식을 화살표 함수 중에서도 암시적 반환을 사용한 경우

const movieChart = movies.map(movie => (
	`${movie.title} - ${movie.score / 10}`
))

// 암시적 반환을 한줄로 표현한 경우

const movieChart = movies.map(movie => `${movie.title} - ${movie.score / 10}`)

이렇게 함수 표현식을 통해서 한줄로 간결하게 코드를 표현해낼 수 있다.

다만 조금 헷갈릴 뿐 많이 연습하면 잘 되는듯 ..ㅎㅎㅎ 재밌다.