오늘 코드스테이츠 프론트엔드 부트캠프 1일차 학습을 마치고 나서의 솔직한 소감은, 좀 쉬웠다.
타입, 변수 선언 등 정말 기본적인 것들을 배웠기 때문이다.
그러나 함수 부분에서 한가지 어려운 개념이 있었다. 바로 함수 선언법이다.
나는 JS를 처음 공부하는데 JS는 함수를 선언하는 방법이 세 가지나 있다고 해서 놀랍기도 했고, 한편으로는 왜 세 가지 방법이나 만들었는지 좀 의아했다. 의문점을 해결하기 위해 각각 선언법의 장단점을 검색해봤는데 머리로는 이해가 되지만 아직 피부로 확 와닫지는 않는다. 이는 공부를 더 많이 해보면 알게 될 것이라고 생각한다.
어쨌든, JS에서 함수를 선언하는 방법은 선언식, 표현식, 화살표 함수가 있다고 한다(사실 3가지 이외에 더 있긴 한데 오늘 배운것들은 이 정도 이므로 일단 보류). 이를 간단한 곱셈 함수를 이용하여 복습해 보겠다.
1. 선언식(Function Declaration)
function multiply(x,y) {
let z = x * y;
return z;
}2. 표현식(Function Expression)
const multiply = function(x,y) {
let z = x * y;
return z;
}3. 화살표 함수(Arrow Function)
const multiply = (x,y) => {
let z = x * y;
return z;
}화살표 함수는 특이한 점이 있는데, 만약 본문에 return 한 줄만 있는 경우, return과 중괄호를 생략할 수 있다. 이 때 주의점은 return과 중괄호를 따로 생략 할 수 없고, 무조건 같이 해야한다. 또한 중괄호는 return 없이 사용 불가능 하지만, 소괄호는 사용 가능하다.
아래는 예시이다.
/*
화살표 함수에서 중괄호와 return 함께 생략하기
*/
const multiply = (x,y) => x * y;
multiply(1,2)//출력값:2/*
화살표 함수에서 소괄호 사용하기
*/
const multiply = (x,y,z) => (x + y) * z;
multiply(1,2,3)//출력값:9이상 세 가지 함수 선언문 작성법인 선언식, 표현식, 화살표 함수에 대해 알아보았다. 개인적으로 화살표 함수가 손에 익을때 까지는 꽤 오래 걸릴것 같다... 화이팅!
