본문 바로가기

프로그램/javascript

[JAVASCRIPT]arrow function 문법 확인

반응형

arrow function 문법 확인



참고 url : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98



this, arguments, super, new.target 등을 바인딩 하지 않음


항상 익명함수로 만들어짐


익명함수의 경우 

() => {statements}

() => {alert("test");}


() => expression

() => "test"

() => {return "test";}

익명으로 함수 실행할 경우 

alert( (() => "test")() );

변수에 할당

var f3 = () => "f3 => test";

파라메터가 1개인 경우 () 를 생략 가능

var f5 = p1 => p1 + "=>f5";

alert(f5(1));



샘플소스

var a = [

  "Hydrogen",

  "Helium",

  "Lithium",

  "Beryl­lium"

];


var a2 = a.map(function(s){ return s.length });


var a3 = a.map( s => s.length );


객체리터럴로 반환하고 싶을 경우

var func = () => ({ foo: 1 });

call, apply 를 사용 시 객체는 전달되지 않음

f.call(b, a); => a는 전달되지 않는다는 것 같음


arguments 를 바인드 하지 않음




샘플소스


<!DOCTYPE HTML>

<html>

<head>

<title>arror test</title>

<script type="text/javascript">

function init() {

var a = [

 "Hydrogen",

 "Helium",

 "Lithium",

 "Beryl­lium"

];

var a2 = a.map(function(s){ return s.length });


var a3 = a.map( s => s.length );

alert("a2 : " + a2);

alert("a3 : " + a3);

var f1 = function() {

alert("f1");

};

f1();

var f2 = () => {alert("f2");};

f2();

//return만 있을 경우 축약 처리

var f3 = () => "f3 => test";

alert(f3());

//익명함수 형태로 바로 실행해봄

alert( (() => "f4 => test")() );

var f5 = p1 => p1 + "=>f5";

alert(f5(1));

}

</script>

</head>

<body onload="init()">

<h1>Arrow Test</h1>

</body>


</html>



참고 url https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98