[ JavaScript ] ES6 : IIFE(즉시 실행 함수)
·
Archive/Develop
전 포스팅에서 화살표 함수를 알아봤다. 익명함수는 즉시 실행 함수 일 때도 많이 사용하기 때문에, 이번 포스팅에서는 즉시 실행 함수를 다뤄보도록 하겠다. (function(version){ console.log(version) }("ES5")); ((version)=>{ console.log(version) })("ES6"); 3. 정리 결론적으로, ES6에서는 익명함수에서는 function 키워드 대신 괄호와 화살표를 사용한다. 콜백 함수로 실행될 때 기존의 익명 함수는 글로벌 컨텍스트에 접근했지만, 화살표 함수는 콜백 함수를 할당한 당시의 컨텍스트를 그대로 활용한다. 즉시실행 함수를 사용할 때는 , 괄호로 묶고 함수를 호출해야한다.
[ JavaScript ] ES6 : Arrow Function & this (화살표 함수)
·
Archive/Develop
자바스크립트로 개발을 하다보면, function 키워드를 이용해 익명함수를 자주 사용하게 될 것이다. ES6 에서의 화살표 함수는 이러한 익명함수를 간단하게 나타낼 수 있다. 1. Arrow Function 아래와 같은 형태로 화살표 함수를 나타낼 수 있다. ( )=>{ } 소괄호와 화살표를 사용하여 function 키워드 없이 함수를 선언할 수 있다. function 대신 화살표가 생겼다고 생각하면 된다. const func = () => { console.log("arrow function"); }; func(); 화살표 함수 안에 실행문이 하나면, 중괄호도 없앨 수 있다. const func = () => console.log("arrow function"); func() 이렇게도 가능하다는 말이다..
[ JavaScript ] ES6 : class & class 의 상속(extends)
·
Archive/Develop
기존 자바스크립트에서 객체지향 구현시 function 이 생성자였다. function 으로 하다보니 표현력이 떨어지고, 코드가 점점 복잡해졌다. 그래서 ES6 에서는 class 키워드가 나타났다. 1. class class Study{ constructor(name){ this.name = name; } getName(){ return this.name; } } let study = new Study("철보빡"); console.log("study.getName();" + study.getName()); class 키워드를 이용해서 클래스를 정의하고 Study 클래스를 선언했다. 생성자 함수는 constructor 라는 이름으로 정의되어있는데, 이는 클래스가 생성될때 기본적으로 호출되는 함수이다. 클래스..
[ JavaScript ] ES6 : 비구조화 할당(Destructuring)
·
Archive/Develop
1. 비구조화 할당(Destructuring assignment) : 객체 또는 배열에서 데이터를 분석해 각각의 변수에 할당해주는 것. destructuring 을 사용하면 json 형식의 객체나 배열을 쉽게 변수에 할당할 수 있다. let data = [{ id : 1, arr: [{ name : ['철보빡','열공'], age : 100 }] }]; let [{id, arr:[{name, age}]}] = data; console.log(` id : ${id} age : ${age} `); let 선언자 옆에 배열 표현식으로 동일하게 배치만 해주면 된다. 배열이 아닌 객체도 객체 표현식으로 할당 가능하다. 함수의 리턴값도 비 구조화 할당을 통해 여러 변수로 받을 수 있다. function color(..