본문 바로가기

cu TIL/ES6

(3)
Array - funtion of Array 1. Array.from - array-like object 를 array로 만들어준다. - getElementsByClassName 으로 만들어진 buttons 는 얼핏 array 와 비슷하게 생겼지만 array-like object인 HTMLCollection 이다. 이러한 객체들을 array로 바꿔주는 함수가 Array.from이다.
string 해당 글에서는 es6 에서 달라진 HTML fragment 에 대해서 알아보고 그 활용법에 대해 포스팅 하고자 한다. 아래가 훨신 직관적으로 보임을 알수있다. 바뀐 fragment 의 사용법은 여기서 끝이 아니다! 바뀐 string의 사용법은 html의 수정이 일어났때 매우 유용하다. 위는 똑같은 동작을 하는 코드이다. es6 이전에는 줄바꿈을 지원하지 않았기 때문에 저렇게 html 형식으로 추가시킬수 없었다. 하지만 이제는 자바스크립트에서 html처럼 코드를 작성한뒤 넣는것이 가능하게 되었다. 뿐만 아니라 이제는 function (arg) 으로 함수를 부르는것이 아닌 function`arg` 로 호출하는 것이 가능하게 되었다. 이 방식은 react 에서 사용하는 방식이기 때문에 알아둘 필요가 있다.
Arrow Function - ES6 에서 권장하는 함수 작성 방법 - 기본적으로 익명함수 이기 때문에 생성자로서 사용할 수 없다. - 특징 1. 파라미터가 하나일 경우 () 생략가능 2. {} 를 생략하면 return 을 적지 않아도 가능 3. this 의 범의가 기존 함수와 다르다. es6 이전의 함수 호출에서는 this의 범위가 함수가 어떻게 호출되었는지에 따라서 동적으로 할당되었다. 하지만 es6에서 arrow function 은 정적으로 상위 scope 의 this를 정적으로 가르킨다.