<JavaScript> Arrow Function 화살표 함수

Lown Kim·2021년 9월 29일
0
post-thumbnail

🐥자바스크립트 기초




학습 목표
Arrow Function(화살표 함수)의 형태를 익히고 함수를 더 간략히 작성하는 방법에 대해 알아본다.


JavaScript는 매번 새로운 버전이 업데이트되는데, 자바스크립트 뒤에 버전명을 붙일때 우리는 ES라는 약어를 사용한다. ES는 ECMA Script를 의미하며 이는 JavaScript를 표준화시키고 규격화하기 위해 만들어진 스크립트언어이다.

우리가 주로 사용하는 자바스크립트 버전은 ES6이고, ES6에서 새로 등장한 문법중 하나는 화살표 함수이다. 오늘은 이 화살표 함수에 대해 알아볼것이다!


이전 버전에서의 함수 작성법
function 함수이름(인자) {실행되는 코드}


ES6버전에서의 함수 작성법
함수이름 = (인자) => {실행되는 코드}
function 부분이 사라지고 equal기호와 화살표모양이 생겼다!


const getName = (name) => {}
const getName = name => {}

ES6버전에서는 인자가 단 하나일 경우에 한해 이처럼 소괄호를 생략할 수 있다.
그러나 인자가 두 개 이상일 경우에는 소괄호를 생략할 수 없다.


//ES5버전
function getName(name) {
  return name;
}
//ES6버전
const hi = name => name;

허걱~ return이 사라졌닭,, 함수가 다른 실행내용 없이 단순히 return만 한다면 return 키워드와 중괄호 생략이 가능하다! 그러나 중괄호와 return문이 생략될 경우 화살표 오른쪽에는 리턴될 값만 덜렁 쓰여야 한다!


//ES5버전
function getFullName(first, family) {
  return first + family;
}

//ES6버전
const hi = (first, family) => { return first + family };
const hi = (first, family) => first + family;

ES5버전의 함수에서 화살표함수+괄호, 키워드생략을 거치니
ES6버전에서는 훨씬 쾌적한 모습의 함수를 볼 수 있었다!




화살표함수로 문법이 바뀌면서 무척 불편하고 헷갈렸던 기억이 난다
그치만 지금은 아무생각없이 끄적끄적 쓰는 중
적응의 동물 린간,,


0개의 댓글