화살표 함수, 어렵지 않게 사용하기

안녕하세요 〰️ 

오늘 포스팅의 주제는 'Arrow Function, 화살표 함수' 입니다. 

SOPT 서버 세미나 도중에 자세히 알려드리고 싶은데, 시간이 없어서 자세히 못알려드린 게 조금 마음에 걸리더라구요...

짧고 간단한 내용이니 가볍게 보셔도 좋을 것 같아요 〰️ 

이제 많이 사용할거니까 종종 보시면서 익숙해지시는게 좋을 것 같아요 😆

 

순서는 다음과 같습니다.

 

1. 화살표 함수❓

2. 화살표 함수 선언

3. 화살표 함수 호출

4. 화살표 함수 주의

---

첫 번째, 화살표 함수?

화살표 함수는 간단한 표기법의 함수 정의 방식입니다.

function에 비해 표현이 간단하고, 항상 익명이에요.

깔끔하고 간단하지만, 항상 익명이며 this, arguments 등이 자동으로 바인딩되지 않기 때문에 신경써서 사용해주시길 바랍니다.

 

 

두 번째, 화살표 함수 선언

  ( 매개변수 ) => {  ...  }

 

위와 같은 모양이 바로 화살표 함수입니다.

말 그대로 매개변수와 로직 사이에 '화살표'를 사용해 함수를 표시합니다.

화살표 함수는 괄호를 생략하여 더욱 더 깔끔하게 사용할 수 있습니다.

 

 

1. 매개변수가 한 개일 때, 매개 변수의 괄호를 생략

2. 한 줄만으로 바디를 표현할 수 있다면 중괄호를 생략 -> 암묵적으로 return ❗️ 

 

// 생략 전의 모습
(param) => { return console.log(param) }


// 1. 매개변수가 한 개일 때 - 매개변수의 괄호 생략 가능
param => { ... }

// 2. single line block 일 때 - 블록의 중괄호 생략 가능
param => console.log(param)

 

 

3. 객체 리터럴을 반환할 때에는 아래와 같이 괄호를 감싸서 반환해주세요 〰️ 

 

person => ({name: 'gngsn'})

 

 

4. 매개변수의 기본값을 지정할 수 있습니다.

 

(name = 'gngsn', age) => console.log(`이름은 ${name}, 나이는 ${age}입니다〰️) 

 

 

5. Spread 문법을 사용할 수 있습니다.

 

(...args) => console.log(args)

 

여기서, 잠깐 〰️ Spread 문법이 무엇일까요 ~.~

 ...  을 사용하여 배열과 같은 연속적인 데이터가 있는 구조의 값들을 참조합니다.

 

console.log(...[1,2,3]) 		// output: 1, 2, 3

console.log(...'Hello') 		// output: Hello

 

위와 같이 구성요소를 하나씩 접근하여 가지고 옵니다. 배열뿐만 아니라, Map이나 Set, String에서 사용할 수 있는데요.

이렇게 Spread 문법은 이터러블의 특징을 가진 대상에게만 사용할 수 있습니다.

일반 객체는 Spread 문법의 대상이 될 수 없기 때문에 주의하세요 〰️  

이터러블에 대한 내용은 설명이 굉장히 잘 된 곳으로 링크를 걸어두었으니 참고 바랍니다 ❗️ 

 

 

세 번째, 화살표 함수의 호출

화살표 함수는 익명함수입니다.

그렇기 때문에 항상 함수 표현식으로 변수로 선언하거나, 콜백함수의 형식으로 사용해주셔야 해요.

 

// 변수 선언
const logging = (x) => console.log(x)
logging('Hello world')


// callback
const info = ['name', 'age', 'address']
info.map((data) => {
	console.log(data)
})

 

위와 같이 사용해주시면 됩니다.

 

 

네 번째, 화살표 함수 주의

자바스크립트의 일반 함수가 this, arguments 등의 객체에 접근할 수 있죠.

하지만 화살표 함수는 자동으로 바인딩이 되지 않기 때문에 화살표 함수 내부에서 위의 요소로 접근할 수가 없습니다.

 

또, 화살표 함수는 생성자 함수로 사용할 수 없습니다.

 

const func = () => {} 	// undefined

new func() 				// Error

 

 

이상으로 화살표 함수에 대해 알아보았습니다 〰️

생각보다 별거 없죠..❓

별 거 없어도, 알고 있어야 사용할 때 당황하지 않는다는 점 ~.~

그럼, 오늘 포스팅은 이렇게 마무리하겠습니다 😆