대가는 결과를 만든다

자바스크립트는 2015년 이래로 매년 6월마다 새로운 ECMAScript 표준이 계속 나오고 있다. 'ES5', 'ES6', 'ECMAScript 2015', 'ES2018', 'ECMA 2017' 등으로 버전을 칭하는데 햇갈린다... 그래서 정리한다. 표기는 다음과 같이 두가지 방법이 있다. ECMAScript/ECMA/ES 연도 - 예)ECMA 2015, ES2015 ES 버전 번호 - 예)ES5, ES6, .... 따라서, 다음과 버전과 주요 차이점을 간단히 적어보자면 다음과 같다. ECMA 2015, ES2015 = ES6 : 클래스, promise 등 ECMA 2016, ES2016 = ES7 : 제곱 연산자, includes ECMA 2017, ES2017 = ES8 : async/await

ES6(ECMA2015) Promise를 좀 더 편하게 사용하기 위한 것으로 ES8(ECMA 2017)에서 발표된 문법이다. async await에 대해 정리해본다. 1. async는 function 앞에 위치 한다. 2. async를 function 앞에 붙이면 해당 함수는 항상 Promise륻 return한다. (항상 resolved promise로 값을 감싸 반환되도록 한다.) async function f() { return 1; } f().then(alert); // 1 // 혹은 명시적으로 promise를 return (위와 동일) async function f() { return Promise.resolve(1); } f().then(alert); // 1 3. await는 async함수 안..

javascript에서 this가 가르키는 것들에 대해 정리해본다. 기본적으로 this는 window이다. 하지만 이 this가 가리키는 것은 this가 위치하는 곳 마다 바뀌게 된다. * 화살표 함수 사용시 this가 또 달라지니 유의해야 한다. 1) 객체 메서드 안의 this는 객체자신을 가리킨다. var obj = { a: function () { console.log(this);} }; obj.a(); //obj를 출력 2) 하지만 아래처럼 호출하면, a2는 obj.a를 꺼내온 것이기에 더이상 obj 객체의 메서드가 아니므로 this는 window를 가리킨다. * 호출하는 시점에 함수가 객체의 메서드 인지 그냥 함수인지가 중요 var a2 = obj.a; a2(); //window 를 출력 => ..

함수의 메서드! 생소한 문법이었는데 정리해본다. 이전에 javascript this에 대한 이해가 먼저 선행되는게 좋다. 우리가 정의하는 함수에도 사용할 수 있는 기본 메서드가 있다는 것이다. (Array 메서드, Object 메서드 같이...) 함수의 메서드 중 call, apply, bind가 대표적이다. 1. call, apply 함수를 호출하는 일반적인 방법은 '함수명( )'이다. call, apply는 함수를 호출하는 또다른 방법이라고 생각하면 쉽다. let example = function (a,b,c) { return a+b+c; } //== 아래 세개의 함수호출은 모두 똑같은 동작을 한다. ==// example(1,2,3); example.call(null, 1, 2, 3); exampl..

INTRO promise 패턴과 array method를 활용한 비동기 시퀀스 처리에 대해 예제와 함께 정리해보았다. 아직도 복잡하고 좀 익숙치 않다. 특히 맨마지막 4.개선은 아직 좀 더 익숙해져야 하겠다. array method에 대해 정리가 필요하다면 여기 참고 : https://developers.google.com/web/fundamentals/primers/promises?hl=ko 참고하여 예제를 정리했다. 예제 케이스가 참 좋은 것 같은데 설명 번역이 좀 엉성하긴하다. 여러개의 비동기 처리 콜은 하되, 결과 값은 순차적으로 저장 하도록 하는 예제를 살펴본다. 4.개선에서는 이전 비동기 콜 실행이 끝나는 것을 기다리는 것이 아니라 콜은 모두 동시에 하되, 결과는 순서대로 표시하도록 효율적인 ..

아래의 Array 메서드들이 ES6에서부터 사용가능한 메서드들인 줄 알았으나, 아니다. 모두 ES5에서 사용 가능한 메서드이다. 하나씩 예제코드와 함께 정리해보겠다. 목차 1. forEach 2. mp 3. some 4. every 5. filter 6. reduce 7. find 내용 다음 배열을 공통적으로 사용한다는 전제하에 예제 코드를 설명하겠다. var testArray = ["a", "b", "c", "d"]; 1. Array.forEach - 배열 전체를 돌며 해당 배열의 요소에 직접 어떤 작업 수행하고 싶을 때 "배열자체를 변경" - callback parameter : item, index, array testArray.forEach( function (item, index, array){..

Export 방법에는 두가지가 있다. 1. Named Export : 변수/함수/객체 명을 export, 초기화와 export 동시에 가능 //초기화와 동시에 export export const something = 5; export function sum(a,b){ return a+b; } //선언된 객체의 export const something = 5; const sum = function(a, b) { return a + b; }; export {something, sum}; - alias 지정 const somthing = 5; export {something as somethingNew}; //something이라는 상수는 somethingNew라는 이름으로 export된다. - 다른 모듈의 ..

1. 비구조화 할당 : 객체의 필드를 꺼내 새로운 변수를 대입하는 상황을 단순화 //ES5 var example ={ name : "james", age: "15", school: "some" }; var name = example.name; var age = example.age; //ES6 비구조화 할당 const example ={ name : "james", age: "15", school: "some" }; let {name, age} = example; console.log(name, age);//james 15 //ES6 함수 파라미터 응용 const example ={ name : "james", age: "15", school: ["some", "any", "how"] }; functio..