오늘도 끄적끄적

(ES2015+) Async/Await는 배열 표준 메소드에서 작동하지 않는다.

작성일 2017-07-17 In Programming , ECMAScript Disqus:

const nums = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

// 제대로 작동하질 않는다.
nums.forEach(async (num) => {
  await new Promise(res => {
    setTimeout(() => {
      console.log(num);
      res();
    }, 1000);
  });
});

const nums = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

// 역시 마찬가지로 제대로 작동하지 않는다.
(async() => {
  nums.forEach(async (num) => {
    await new Promise(res => {
      setTimeout(() => {
        console.log(num);
        res();
      }, 1000);
    });
  });
})();

const nums = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

// 이터레이터에서는 잘 작동한다.
(async() => {
  for(const num of nums) {
    await new Promise(res => {
      setTimeout(() => {
        console.log(num);
        res();
      }, 1000);
    });
  }
})();

const nums = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

// 물론 일반 반복문에서도 잘 작동한다.
(async() => {
  for(let i=0, len=nums.length; i<len; i++) {
    await new Promise(res => {
      setTimeout(() => {
        console.log(nums[i]);
        res();
      }, 1000);
    });
  }
})();

더 읽어보기 »

(자알쓰) 변수

작성일 2017-07-01 In Programming , ECMAScript , 자알쓰 Disqus:

자알쓰란?

자바스크립트 알고 쓰자. (잘 쓰자는 의미도 담겨있다.)
자바스크립트라는 언어 자체는 내 기준에서는 설계 상 미스가 참 많다.
함수 단위의 스코프, 호이스팅, 동적 타입 등등
자바와 같은 깐깐(?)한 언어를 배우고 바라본 자스는 허점 투성이처럼 보였다.
애초에 자바스크립트는 어떠한 프로그램을 만들기 위해서 탄생했다기 보다는
웹 페이지에 입력값에 대한 유효성 검사(데이터가 공란인지 아닌지 등등)와 같은
페이지의 동적 제어가 주된 목적 + 짧은 개발 기간(넷 스케이프 사의 새로운 브라우저에 탑재 예정) 때문에
설계 상에 미스가 있을 수 밖에 없다고 나는 생각된다.
일종의 안전 장치가 없어서 개발자가 일일이 구현해주고, 신경써야 하는 느낌이었다.
그렇다고 해서 자바스크립트를 극혐하거나 그런 것은 아니고 매우 사랑한다.
또한 그 허점을 아는 사람은 허점을 보완해서 요리조리 피해서 잘 쓰겠지만…
잘 모르는 부분들은 잘못 써도 동작이 잘 되기 마련이다.
이는 지금 당장에는 큰 문제가 안 될지 모르겠지만, 추후에 대규모 웹 어플리케이션을 만들거나
직면할 문제로부터 미리 해방시키기 위해 처음부터 좋은 습관을 들여가는 것이 좋다고 생각한다.
그 열 한 번째 시리즈는 변수를 주제로 진행하겠다.

변수란?

이번 주제는 정재남 님의 자바스크립트 세미나를 듣고 해당 자료를 토대로 내 맘대로 해석한 포스트이다.

더 읽어보기 »

(자알쓰) 자료형(객체)

작성일 2017-07-01 In Programming , ECMAScript , 자알쓰 Disqus:

자알쓰란?

자바스크립트 알고 쓰자. (잘 쓰자는 의미도 담겨있다.)
자바스크립트라는 언어 자체는 내 기준에서는 설계 상 미스가 참 많다.
함수 단위의 스코프, 호이스팅, 동적 타입 등등
자바와 같은 깐깐(?)한 언어를 배우고 바라본 자스는 허점 투성이처럼 보였다.
애초에 자바스크립트는 어떠한 프로그램을 만들기 위해서 탄생했다기 보다는
웹 페이지에 입력값에 대한 유효성 검사(데이터가 공란인지 아닌지 등등)와 같은
페이지의 동적 제어가 주된 목적 + 짧은 개발 기간(넷 스케이프 사의 새로운 브라우저에 탑재 예정) 때문에
설계 상에 미스가 있을 수 밖에 없다고 나는 생각된다.
일종의 안전 장치가 없어서 개발자가 일일이 구현해주고, 신경써야 하는 느낌이었다.
그렇다고 해서 자바스크립트를 극혐하거나 그런 것은 아니고 매우 사랑한다.
또한 그 허점을 아는 사람은 허점을 보완해서 요리조리 피해서 잘 쓰겠지만…
잘 모르는 부분들은 잘못 써도 동작이 잘 되기 마련이다.
이는 지금 당장에는 큰 문제가 안 될지 모르겠지만, 추후에 대규모 웹 어플리케이션을 만들거나
직면할 문제로부터 미리 해방시키기 위해 처음부터 좋은 습관을 들여가는 것이 좋다고 생각한다.
그 열 번째 시리즈는 자료형 중에 객체를 주제로 진행하겠다.

자료형

0과 1로 이루어진 데이터를 메모리에서 꺼내서 써야하는데 어떻게 해석할지를 결정하는 유형.
나는 위와 같이 이해하고 있는데 잘 이해가 가지 않는다면 그냥 넘어가도 무방하다.
더 딥하게 알고 싶은 사람은 정적 타입의 언어(C, Java 등등)을 공부해보자.

더 읽어보기 »

(자알쓰) 자료형(원시값)

작성일 2017-07-01 In Programming , ECMAScript , 자알쓰 Disqus:

자알쓰란?

자바스크립트 알고 쓰자. (잘 쓰자는 의미도 담겨있다.)
자바스크립트라는 언어 자체는 내 기준에서는 설계 상 미스가 참 많다.
함수 단위의 스코프, 호이스팅, 동적 타입 등등
자바와 같은 깐깐(?)한 언어를 배우고 바라본 자스는 허점 투성이처럼 보였다.
애초에 자바스크립트는 어떠한 프로그램을 만들기 위해서 탄생했다기 보다는
웹 페이지에 입력값에 대한 유효성 검사(데이터가 공란인지 아닌지 등등)와 같은
페이지의 동적 제어가 주된 목적 + 짧은 개발 기간(넷 스케이프 사의 새로운 브라우저에 탑재 예정) 때문에
설계 상에 미스가 있을 수 밖에 없다고 나는 생각된다.
일종의 안전 장치가 없어서 개발자가 일일이 구현해주고, 신경써야 하는 느낌이었다.
그렇다고 해서 자바스크립트를 극혐하거나 그런 것은 아니고 매우 사랑한다.
또한 그 허점을 아는 사람은 허점을 보완해서 요리조리 피해서 잘 쓰겠지만…
잘 모르는 부분들은 잘못 써도 동작이 잘 되기 마련이다.
이는 지금 당장에는 큰 문제가 안 될지 모르겠지만, 추후에 대규모 웹 어플리케이션을 만들거나
직면할 문제로부터 미리 해방시키기 위해 처음부터 좋은 습관을 들여가는 것이 좋다고 생각한다.
그 아홉 번째 시리즈는 자료형 중에 원시값을 주제로 진행하겠다.

자료형

0과 1로 이루어진 데이터를 메모리에서 꺼내서 써야하는데 어떻게 해석할지를 결정하는 유형.
나는 위와 같이 이해하고 있는데 잘 이해가 가지 않는다면 그냥 넘어가도 무방하다.
더 딥하게 알고 싶은 사람은 정적 타입의 언어(C, Java 등등)을 공부해보자.

더 읽어보기 »

(함수형 JS) 함수형 프로그래밍(JS)이란...?

작성일 2017-06-30 In Programming , ECMAScript , 함수형 JS Disqus:

이 포스트는 인프런에서 진행한 유인동 님의 함수형 자바스크립트를 듣고 감명 받아서 쓴 글이다.
사실 underscore, lodash 등 함수형 패러타임으로 코드를 짤 수 있게 끔
미리 이런 함수들을 제공하는 라이브러리들을 쓰고, 이 포스트는 그닥 볼 필요가 없다.
하지만 이런 원리를 알고 접근을 하다보면 위 라이브러리를 쓴다고 하더라도 추가로 필요한 나의 코드를 함수형으로 더 짜기 유용하지 않을까?

(함수형 JS) pipe

작성일 2017-06-30 In Programming , ECMAScript , 함수형 JS Disqus:

이 포스트는 인프런에서 진행한 유인동 님의 함수형 자바스크립트를 듣고 감명 받아서 쓴 글이다.
사실 underscore, lodash 등 함수형 패러타임으로 코드를 짤 수 있게 끔
미리 이런 함수들을 제공하는 라이브러리들을 쓰고, 이 포스트는 그닥 볼 필요가 없다.
하지만 이런 원리를 알고 접근을 하다보면 위 라이브러리를 쓴다고 하더라도 추가로 필요한 나의 코드를 함수형으로 더 짜기 유용하지 않을까?

pipe

다음과 같은 함수를 작성해보자.

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]이란 배열을 만든다.
이 배열의 각 요소들을 x3한 배열을 구한다.
x3한 배열에서 2의 배수만 추려내서 새로 배열을 구한다.
2의 배수들만 모아놓은 각 요소들을 합한 결과를 구하자.

더 읽어보기 »

(함수형 JS) curry

작성일 2017-06-30 In Programming , ECMAScript , 함수형 JS Disqus:

이 포스트는 인프런에서 진행한 유인동 님의 함수형 자바스크립트를 듣고 감명 받아서 쓴 글이다.
사실 underscore, lodash 등 함수형 패러타임으로 코드를 짤 수 있게 끔
미리 이런 함수들을 제공하는 라이브러리들을 쓰고, 이 포스트는 그닥 볼 필요가 없다.
하지만 이런 원리를 알고 접근을 하다보면 위 라이브러리를 쓴다고 하더라도 추가로 필요한 나의 코드를 함수형으로 더 짜기 유용하지 않을까?

curry

~~카레와 컬링과는 아무런 관련이 없다.~~
백문이 불여일견, 간단한 예제를 하나 보자.

// 기존 방식
const add = (a,b) => a+b;
const sub = (a,b) => a-b;

console.log(add(10, 10)); // 20
console.log(add(10, 20)); // 30
console.log(add(10, 30)); // 40
console.log(add(10, 40)); // 50

console.log(sub(10, 1)); // 9
console.log(sub(10, 2)); // 8
console.log(sub(10, 3)); // 7
console.log(sub(10, 4)); // 6

// 기존 방식의 함수를 커링을 이용하여 구성.
const _add = a => b => a+b;
const _sub = a => b => a-b;

const add10 = _add(10);
const sub10 = _sub(10);

console.log(add10(10)); // 20
console.log(add10(20)); // 30
console.log(add10(30)); // 40
console.log(add10(40)); // 50

console.log(sub10(1)); // 9
console.log(sub10(2)); // 8
console.log(sub10(3)); // 7
console.log(sub10(4)); // 6

더 읽어보기 »

(함수형 JS) find

작성일 2017-06-28 In Programming , ECMAScript , 함수형 JS Disqus:

이 포스트는 인프런에서 진행한 유인동 님의 함수형 자바스크립트를 듣고 감명 받아서 쓴 글이다.
사실 underscore, lodash 등 함수형 패러타임으로 코드를 짤 수 있게 끔
미리 이런 함수들을 제공하는 라이브러리들을 쓰고, 이 포스트는 그닥 볼 필요가 없다.
하지만 이런 원리를 알고 접근을 하다보면 위 라이브러리를 쓴다고 하더라도 추가로 필요한 나의 코드를 함수형으로 더 짜기 유용하지 않을까?

find

find는 두 말 하면 입 아프겠지만, 기존 데이터 사이에서 원하는 것을 찾을 때 사용한다.
아래 예제를 보자.

const nums = [1, 3, 5, 7, 100];
let no = 0;
for(const num of nums) {
  if(!(num % 2)) { // 짝수인지
    no = num;
    break;
  }
}
const users = [
  {name: 'asdf', age: 12},
  {name: 'qwer', age: 33}
];
let name = ''; 
let over30 = null;
for(const user of users) if(user.age > 30) return over30 = user;
console.log(no); // 100
console.log(over30.age ); // 33

더 읽어보기 »

(함수형 JS) reduce

작성일 2017-06-26 In Programming , ECMAScript , 함수형 JS Disqus:

이 포스트는 인프런에서 진행한 유인동 님의 함수형 자바스크립트를 듣고 감명 받아서 쓴 글이다.
사실 underscore, lodash 등 함수형 패러타임으로 코드를 짤 수 있게 끔
미리 이런 함수들을 제공하는 라이브러리들을 쓰고, 이 포스트는 그닥 볼 필요가 없다.
하지만 이런 원리를 알고 접근을 하다보면 위 라이브러리를 쓴다고 하더라도 추가로 필요한 나의 코드를 함수형으로 더 짜기 유용하지 않을까?

reduce

기본적으로 reduce는 기존 데이터들을 가공해 아예 새로운 데이터를 얻고자 할 때 쓰인다.
1~6까지의 배열이 존재할 때 해당 수들을 가지고 새로운 수를 얻고자 할 때 쓰인다.

const nums = [1, 2, 3, 4, 5, 6];
let sum = 0;
for(const num of nums) sum += num*2;
console.log(sum); // 42
sum = 0;
for(const num of nums) if(num%2) sum+= num;
console.log(sum); // 1 + 3 + 5 = 9

더 읽어보기 »

(함수형 JS) each

작성일 2017-06-26 In Programming , ECMAScript , 함수형 JS Disqus:

이 포스트는 인프런에서 진행한 유인동 님의 함수형 자바스크립트를 듣고 감명 받아서 쓴 글이다.
사실 underscore, lodash 등 함수형 패러타임으로 코드를 짤 수 있게 끔
미리 이런 함수들을 제공하는 라이브러리들을 쓰고, 이 포스트는 그닥 볼 필요가 없다.
하지만 이런 원리를 알고 접근을 하다보면 위 라이브러리를 쓴다고 하더라도 추가로 필요한 나의 코드를 함수형으로 더 짜기 유용하지 않을까?

each

기본적으로 each는 반복문을 추상화 할 때 쓰인다.
완벽할 것 같은 이 _filter와 _map도 다시 보면 중복이 존재한다.
이런 중복을 제거하고 추상화 하는 것들이 함수형의 묘미가 아닐까 싶다.

const _filter = (list, predicate) => {
  const newList = [];
  if(list.toString() === '[object Object]') {
    const objValList = [];
    for(const key of Object.keys(list)) key !== 'length' && objValList.push(list[key]);
    list = objValList;
  }
  for(const item of list) predicate(item) && newList.push(item);
  return newList;
};

const _map = (list, iteratee) => {
  const newList = [];
  if(list.toString() === '[object Object]') {
    const objValList = [];
    for(const key of Object.keys(list)) key !== 'length' && objValList.push(list[key]);
    list = objValList;
  }
  for(const item of list) newList.push(iteratee(item))
  return newList;
};

더 읽어보기 »

자알쓰란?

변수란?

자알쓰란?

자료형

자알쓰란?

자료형

목차

pipe

curry

find

reduce

each