{"componentChunkName":"component---src-templates-blog-post-js","path":"/javascript/es6-화살표-함수-arrow-function/","result":{"data":{"site":{"siteMetadata":{"title":"Bottlehs Tech Blog","description":"웹·앱·AI 개발자 전병훈(bottlehs)의 기술 블로그. AI·LLM, JavaScript·Vue, Spring Boot, 알고리즘, 블록체인 실무 가이드를 다룹니다","siteUrl":"https://www.bottlehs.dev","author":{"name":"Jeon Byung Hun","summary":"개발을 즐기는 bottlehs - Engineer, MS, AI, FE, BE, OS, IOT, Blockchain, 설계, 테스트"},"social":{"github":"bottlehs","codepen":"bottlehs"}}},"markdownRemark":{"id":"90196b25-2c30-5e6f-ab8f-6a189b6671d1","excerpt":"ES6 화살표 함수 (arrow function expression) ES6에서는 익명함수를 표현하기 위해 화살표 함수(Arrow function) 표현식을 지원한다.\n기존에는 아래와 같이 함수를 선언 하였다. 위와 같은 함수를 ES6 화살표 함수(Arrow function…","html":"

\"ES6

\n

ES6에서는 익명함수를 표현하기 위해 화살표 함수(Arrow function) 표현식을 지원한다.\n기존에는 아래와 같이 함수를 선언 하였다.

\n
var coffee = function (americano, espresso) {\n  var cart = americano * espresso\n  return cart\n}\n\nvar result = coffee(10, 20)\nconsole.log(result) // 200
\n

위와 같은 함수를 ES6 화살표 함수(Arrow function) 을 사용하면 아래와 같이 간결하게 선언할 수 있다.

\n
let coffee = (americano, espresso) => {\n  let cart = americano * espresso\n  return cart\n}\n\nvar result = coffee(10, 20)\nconsole.log(result) // 200
\n

즉 function 이 생략되고 => 기호가 그 자리에 추가 된다. 또한 아래와 같이 구문이 하나밖에 없으면 {} 기호를 생략할 수 있다.

\n
let coffee = (americano, espresso) => americano * espresso\nvar result = coffee(10, 20)\nconsole.log(result) // 200
\n

return 을 생략한 것으로서, return americano * espresso 와 같다. 만약, 화살표 앞에 줄을 분리하면 SyntaxError 가 발생 한다.

\n
let coffee = (americano,espresso) = > americano * espresso; // SyntaxError
\n

파라미터가 하나이면 소괄호 ()를 제외하고 해당 파라미터만 작성이 가능하다.

\n
let coffee = americano => americano * 20\nvar result = coffee(10)\nconsole.log(result) // 200
\n

파라미터가 없는 경우, 소괄호 () 만 작성한다.

\n
let coffee = () => 10 * 20\nvar result = coffee()\nconsole.log(result) // 200
\n

Arrow function은 IE환경에서 아직 제공하지 않는다.

\n

\"화살표

\n

사용할려면 babel 을 사용해야 하는데 babel 은 다음에 자세히 알아 보도록 하겠다.

","tableOfContents":"","wordCount":{"words":110},"fields":{"slug":"/javascript/es6-화살표-함수-arrow-function/","image":"/assets/es6.png","faq":[]},"frontmatter":{"title":"ES6 화살표 함수 (arrow function expression)","date":"2020년 10월 21일","dateISO":"2020-10-21T13:00:33.383Z","updatedISO":null,"category":"javascript","description":"ES6에서는 익명함수를 표현하기 위해 화살표 함수 (Arrow function) 표현식을 지원한다.","tags":["화살표 함수","Arrow function","ES6","ECMA2015","익명함수","JS"]}}},"pageContext":{"slug":"/javascript/es6-화살표-함수-arrow-function/","previous":{"fields":{"slug":"/etc/chrome-cross-origin/"},"frontmatter":{"title":"Chrome cross origin","tags":["OSX","Windows","Chrome"]}},"next":{"fields":{"slug":"/javascript/es6-클래스-class/"},"frontmatter":{"title":"ES6 클래스 (Class)","tags":["ES6","Class","객체지향","Function","JavaScript"]}}}},"staticQueryHashes":["213619243","3262363727"]}