// 함수 선언
function getDate() {
  // 함수 내부에 변수 선언 및 초기화 (함수 범위 설정)
  var date = new Date();
  return date;
}

// 함수 실행
getDate();

// 외부 영역에서는 함수 영역에 접근할 수 없어 오류를 발생 시킵니다.
// Uncaught ReferenceError: date is not defined at <anonymous>
console.log(date); 

function getDate() {

  var date = new Date();

  // 함수 내, 함수 선언
  function formatDate() {
    // 함수 영역 내부에 존재하는 함수는 상위 함수 영역에 접근 가능합니다.
    return date.toISOString().slice(0,10);
  }

  return formatDate();
}

console.log( getDate() ); // '2017-11-29'

// 플레이어 리스트(배열)
var players = 'messi ronaldo honaldo son'.split(' ');

// 함수: 문자를 포함하는 리스트 반환 
function filterWordList(words, filter) {
  var word_list = [];
  for ( let i=0, l=words.length; i<l; ++i ) {
    var word = words[i];
    // 문자 포함 여부 검증
    if ( word.indexOf('naldo') > -1 ) {
      word_list.push(word);
    }
  }
  return word_list;
}

// 함수 실행: 필터링 결과
var naldos = filterWordList(players, 'naldo');

// 결과 출력
console.log(naldos);

var kings_4 = '청룡 백호 현무 주작';

// 1. kings_4의 글자는 '백호'로 시작하는가?
kings_4.substr(0, 2) === '백호'; // false

// 2. '현무'는 kings_4 글자의 6 인덱스부터 시작하는가?
kings_4.substr(6, 2) === '현무'; // true

// 유틸리티 함수 업그레이드
function startsWith(word, find, start) {
  start = start || 0;
  return word.substr(start, find.length) === find;
}

startsWith(kings_4, '주작', 9); // true

var season = '봄 여름 가을 겨울';

// 1. season의 글자는 '겨울'로 끝나는가?
var index = season.length - 2;
season.substr(index, 2) === '겨울'; // true

// 유틸리티 함수
function endsWith(word, find, end) {
  end = (end || word.length) - find.length;
  var last_index = word.indexOf(find, end);
  return last_index !== -1 && last_index === end;
}

endsWith(season, '겨울'); // true

// season의 글자는 '가을'이 7번째 인덱스(가을 다음 위치)에서 끝나는가?
endsWith(season, '가을', 7); // true

var repeat_word = '양심과 욕심 ';

function repeat(word, count) {
  count = count || 0;
  if (count === 0) { return ''; }
  var combine = word;
  while ( --count ) {
    combine += word;
  }
  return combine;
}

repeat(repeat_word);    // ''
repeat(repeat_word, 4); // '양심과 욕심 양심과 욕심 양심과 욕심 양심과 욕심 '

// 데이터 유형 검증 유틸리티 함수

// 함수 선언(Declaration)
function isType(o) {
  return Object.prototype.toString.call(o).toLowerCase().slice(8,-1);
}

// 함수 식(Expression)
var isType = function(o) {
  return Object.prototype.toString.call(o).toLowerCase().slice(8,-1);
};

// 제곱(square) 함수
function square() {
  // arguments 객체 참조
  var args = Array.prototype.slice.call(arguments);
  var _square = function() {
    var numbers = [];
    // 참조된 args 객체 순환
    args.forEach(function(arg){
      numbers.push(arg * arg);
    }
    return numbers;
  };
  return _square();
}

// 전달된 인자의 합을 구하는 함수
function sum() {
  // arguments는 배열 객체가 아니라, 유사 배열 객체이다.
  for (var l=arguments.length, r=0, n; (n=arguments[--l]); ) {
    r += n;
  }
  return r;
}

// 전달된 인자의 개수에 상관없이 사용 가능
sum(1, 3, 10); // 13
sum(29, 102, 7, 203, 10); // 351

// 정수 배열
var integer = [0, -10, 10];

// 배열 복제
var copy_integer = integer.map(function(int) {
  return int;
});

// 정수 배열
var integer = [0, -10, 10];

// 배열 복제
var copy_integer = [...integer];

// 정수 배열
var integer = [0, -10, 10];

// 소수 배열
var decimal = [0.8, 0.43, 0.7823];

// 순차 결합
var numbers = integer.slice().concat(decimal); // [0, -10, 10, 0.8, 0.43, 0.7823]

// 정수 배열
var integer = [0, -10, 10];

// 소수 배열
var decimal = [0.8, 0.43, 0.7823];

// 전개 연산자(...)를 배열 앞에 붙여 사용하면 배열 원소를 전개함(열어 펼침).
var numbers   = [...integer, ...decimal]; // [0, -10, 10, 0.8, 0.43, 0.7823]
var r_numbers = numbers.reverse();        // [0.7823, 0.43, 0.8, 10, -10, 0]

// 정수
var integer = [3, 6, 9];

// 소수
var decimal = [0.9, 0.66];

// 중간 삽입 결합 (인덱스 2 위치에 삽입)
var numbers = integer.slice(), idx = 2;
decimal.forEach(function(int){ numbers.splice(idx++, 0, int) }); // [3, 6, 0.9, 0.66, 9]

// 정수
var integer = [3, 6, 9];

// 소수
var decimal = [0.9, 0.66];

// 중간 삽입 결합 (인덱스 2 위치에 삽입)
var numbers = [3, 6, ...decimal, 9]

// 멤버 데이터
var members = [
  {
    "gender": "male",
    "name": "hudson lewis",
    "email": "[email protected]",
    "picture": "https://randomuser.me/api/portraits/thumb/men/65.jpg"
  }, { ... }
];

// 새롭게 추가될 멤버 데이터
var new_members = [
  {
    "gender": "female",
    "name": "gina reynolds",
    "email": "[email protected]",
    "picture": "https://randomuser.me/api/portraits/thumb/women/35.jpg"
  }, { ... }
];

var animations = ['원령 공주', '센과 치히로의 대모험', '명탐정 코난', '에반게리온'];

var movies     = ['인디애나 존스', '살인자의 기억법', '범죄 도시'];

var music      = [
  {
    song: '선물',
    singer: '멜로망스'
  },
  {
    song: '피카부 (Peek-A-Boo)',
    singer: 'Red Velvet (레드벨벳)'
  },
];

var movie = {
  name: '포레스트 검프',
  director: '로버트 저메키스',
  openning: '1994-10-15',
  link: 'https://movie.naver.com/movie/bi/mi/basic.nhn?code=17159'
};

// 객체의 속성 할당
var name     = movie.name;
var director = movie.director;
var openning = movie.openning;
var link     = movie.link;

console.log('name:', name);
console.log('director:', director);
console.log('openning:', openning);
console.log('link:', link);

var utensils = [
  '그물국자',
  '건지개',
  '스패튤라',
  '뒤집개',
  '국자',
  '포테이토 매셔',
];

// 각 변수에 배열 utensils 원소 할당
var skimmer        = utensils[0]; // 그물국자
var draining_spoon = utensils[1]; // 건지개
var spatula        = utensils[2]; // 스패튤라
var turner         = utensils[3]; // 뒤집개
var ladle          = utensils[4]; // 국자
var potato_masher  = utensils[5]; // 포테이토 매셔

var people = [
  {
    "gender": "female",
    "name": "gina reynolds",
    "email": "[email protected]",
    "picture": "https://randomuser.me/api/portraits/thumb/women/35.jpg"
  }, {
    "gender": "male",
    "name": "leslie fisher",
    "email": "[email protected]",
    "picture": "https://randomuser.me/api/portraits/thumb/men/10.jpg"
  },
  {
    "gender": "female",
    "name": "brooke fuller",
    "email": "[email protected]",
    "picture": "https://randomuser.me/api/portraits/thumb/women/3.jpg"
  },
  {
    "gender": "male",
    "name": "کوروش کامروا",
    "email": "کوروش.کامروا@example.com",
    "picture": "https://randomuser.me/api/portraits/thumb/men/77.jpg"
  },
  {
    "gender": "female",
    "name": "judith gerlach",
    "email": "[email protected]",
    "picture": "https://randomuser.me/api/portraits/thumb/women/96.jpg"
  },
  {
    "gender": "male",
    "name": "hudson lewis",
    "email": "[email protected]",
    "picture": "https://randomuser.me/api/portraits/thumb/men/65.jpg"
  },
  {
    "gender": "female",
    "name": "alice french",
    "email": "[email protected]",
    "picture": "https://randomuser.me/api/portraits/thumb/women/37.jpg"
  }
];

(function(global){
  'use strict';

  // 비공개(Private) 멤버
  var _origin = '에티오피아';

  // 생성자(Constructor) 함수
  function Coffee(bean) {

    // 공개(Public) 멤버
    this.bean = bean;
  }

  // 스태틱(Static) 메서드
  Coffee.origin = function() { return _origin; };

  // 프로토타입(Prototype) 객체
  // 인스턴스(Instance) 메서드
  Coffee.prototype.parch = function(time) {};

})(window);

// 클래스 선언 이전에 사용하면 참조 오류 발생
// Uncaught ReferenceError: Bread is not defined
new Bread();

class Bread {}

// 빵(Bread) 클래스 선언
const Bread = class {};

// 잼(Jam) 클래스 선언
const Jam = class {};

// 즉시 실행 함수식(IIFE) 패턴
// 캡슐화
(function(){

  // 비공개
  var private_var = '외부(함수 밖)에서 접근 불가';
  
})();


console.log(private_var); // ReferenceError: private_var is not defined

// 노출 모듈(Revealing Module) 패턴
// 캡슐화
// 재사용
var module = (function(){
  
  // 비공개
  var private_var = '외부에서 접근 불가, 하지만 publicMethod()로는 접근 가능';
  // 외부로 공개하는 모듈
  return {
    publicMethod : function() { return private_var; }
  };

})();


module.publicMethod(); // '외부에서 접근 불가, 하지만 publicMethod()로는 접근 가능'
console.log( module.private_var ); // undefined

// -----------------------------------
// Node.js 환경
// -----------------------------------

// Export
// ./Utils.js
module.exports = {
  each: function(list, fn){
    list = Array.prototype.slice.call(list);
    list.forEach(fn);
  }
};


// Import
// ./main.js
const utils = require('./Utils');

utils.each(document.querySelectorAll('.demo a'), function(link, index) {
  console.log(index, link.textContent);
});

// -----------------------------------
// require.js 환경
// -----------------------------------

// Export
define('jqTable', ['jquery'], function($, require, factory) {

  function jqTable(){};
  jqTable.register = function(){};

  return jqTable;

});


// Import
define(['jqTable'], function(jqTable, require, factory) {

  // 테이블 객체 생성
  jqTable.register();

});

// -----------------------------------
// 서버/클라이언트 환경에서 모두 사용 가능
// -----------------------------------
(function (root, factory) {
  // AMD
  if (typeof define === 'function' && define.amd) {
    define(['module'], factory);
  } 
  // CommonJS
  else if (typeof module === 'object' && module.exports) {
    module.exports = factory(require('module'));
  } 
  // Browser
  else {
    root.returnExports = factory(root.module);
  }
}(this, function (module) {
  // 모듈
  return {};
}));

(function (factory) {
  // AMD
  if (typeof define === 'function' && define.amd) {
    define(['jquery'], factory);
  } 
  // CommonJS
  else if (typeof module === 'object' && module.exports) {
    module.exports = function( root, jQuery ) {
      if ( jQuery === undefined ) {
        jQuery = ( typeof window !== 'undefined' ) ? 
          require('jquery') : 
          require('jquery')(root);
      }
      factory(jQuery);
      return jQuery;
    };
  } 
  // Browser
  else { factory(jQuery); }
}(function ($) {
  $.fn.jqueryPlugin = function () { return this.addClass('assign jquery plugin'); };
}));

// -----------------------------------
// ES6를 지원하는 환경
// -----------------------------------

// Export
// ./Utils.js
let private_data = '비공개 데이터';

// JavaScript 모든 데이터 유형을 내보낼 수 있음.
export const utils = {
  each(list, fn) { Array.from(list).each(fn); },
};


// Import
// ./main.js
import { utils } from './Utils';

const lis = document.querySelectorAll('ul.demo li');
const li_htmls = utils.each(lis, item => item.innerHTML);

// -----------------------------------
// ES6를 지원하는 환경
// -----------------------------------

// Export
// ./Utils.js
const utils = {
  map(list, fn) { return Array.from(list).map(fn) },
};

export default utils;


// Import
// ./main.js
import utils from './Utils';

const lis = document.querySelectorAll('ul.demo li');
const li_htmls = utils.map(lis, item => item.innerHTML);

// -----------------------------------
// ES6를 지원하는 환경
// -----------------------------------

// Export
// ./Utils.js
export default {...};
export function randomNumber(n) { ... }
export class Utillity { ... };


// Import
// ./main.js
import utils, {randomNumber, Utillity} from './Utils';

const children = document.body.children;
utils.each(children, el => el.classList.add(`utils-${randomNumber(100)}`));
const el_classes = utils.map(children, el => el.getAttribute('class'));

new Utillity(); // Utillity 객체 생성

// -----------------------------------
// ES6를 지원하는 환경
// -----------------------------------

// Export
// ./Utils.js
export default {...};
export function randomNumber(n) { ... }
export class Utillity {};


// Import
// ./main.js
import utils, {randomNumber as rn, Utillity as Util} from './Utils';

const children = document.body.children;
utils.each(children, el => el.classList.add(`utils-${rn(100)}`));
const el_classes = utils.map(children, el => el.getAttribute('class'));

new Util(); // Utillity 객체 생성

// -----------------------------------
// ES6를 지원하는 환경
// -----------------------------------

// Export
// ./Utils.js
export {...};
export function randomNumber(n) { ... }
export class Utillity {};


// Import
// ./main.js
import * as $ from './Utils';

const children = document.body.children;
$.utils.each(children, el => el.classList.add(`utils-${ $.randomNumber(100) }`));
const el_classes = $.utils.map(children, el => el.getAttribute('class'));

new $.Utillity(); // Utillity 객체 생성

// 배열
var sports_shoes = ['조깅화', '축구화', '농구화'];

// for문
for ( var i=0, l=sports_shoes.length; i<l; i++ ) {
  if ( sports_shoes[i] === '축구화' ) { continue; }
  console.log(sports_shoes[i]);
}

// for~in문 (주의! 느림, 배열이 아닌 객체 순환 용도)
for ( var i in sports_shoes ) {
  if ( sports_shoes[i] === '축구화' ) { break; }
  console.log(sports_shoes[i]);
}

// forEach문 (주의! 기본적으로 배열만 활용 가능)
sports_shoes.forEach(function(shoes, index) {
  // 문법 오류: forEach문은 break, continue 사용 X
  // if ( shoes === '축구화' ) { continue; }
  console.log(sports_shoes[i]);
});

// 반복 가능한 객체(배열, 유사 배열, 문자열, 맵, 세트 등)
let sports_shoes = ['조깅화', '축구화', '농구화'];

// 반복 가능한 객체 순환
for (let shoes of sports_shoes) {
  console.log(shoes);
  // '조깅화'
  // '축구화'
  // '농구화'
}

// 반복 가능한 객체(배열, 유사배열 객체, 문자열, 맵, 세트 등)
let sports_shoes = ['조깅화', '축구화', '농구화'];

// 배열 객체
let sports_shoes = ['조깅화', '축구화', '농구화'];

// 유사 배열 객체
let like_array_obj = { length: 3, 0: '조깅화', 1: '축구화', 2: '농구화' };

// 배열 객체
let print_sports_shoesFn = [];

// const, let 동일한 결과
for ( const shoes of ['조깅화', '축구화', '농구화'] ) {
  print_sports_shoesFn.push( () => shoes );
}

console.log( print_sports_shoesFn.map(f => f()) ); // ["조깅화", "축구화", "농구화"]

console.log(shoes); // ReferenceError: shoes is not defined

// 반복 가능한 객체
const iterable_obj = {
  // 반복 가능한 객체의 조건
  [Symbol.iterator]: function() {
    // Iterator 객체 반환
  }
};

const iterable_obj = {
  // 반복 가능한 객체의 조건
  [Symbol.iterator]: function() {
    // Iterator 객체 반환
    return {
      // next 메서드를 가짐 (value, done 속성을 가진 객체 반환)
      next: function() {
        return  { value, done };
      }
    };
  }
};

// 반복 가능한(iterable) 빌트인 객체: Array
const array = [99, 9, 0];

// Iterator 객체 참조
const iterator = array[Symbol.iterator]();

// Iterator 객체의 next 메서드 사용
iterator.next(); // {value: 99, done: false}
iterator.next(); // {value: 9, done: false}
iterator.next(); // {value: 0, done: false}
iterator.next(); // {value: undefined, done: true}

// 제너레이터 함수
function* idMaker(){
  let index = 0;
  while(true) {
    yield index++;
  }
}

// 제너레이터 객체 참조
var gen = idMaker(); // "Generator { }"

// 제너레이터 객체의 next() 메서드 사용
console.log(gen.next().value); // 0
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
// ...

// DOM 객체 수집(Collection) = NodeList
// lis 변수에 참조된 값은 length 속성을 가진 유사 배열 객체
var lis = document.querySelectorAll('ul.demo li');

// 유틸리티 함수
function makeArray(o) {
   return Array.prototype.slice.call(o);
}

// 유틸리티 함수 makeArray()를 사용하여 lis 유사 배열을 배열로 변경
makeArray(lis).forEach(function (li) {
    console.log(li); // <li> 순환
});

// DOM 객체 수집(Collection) = NodeList
// links 변수에 참조된 값은 length 속성을 가진 유사 배열 객체
var links = document.querySelectorAll('ul.demo a');

// Array 객체의 .map() 메서드를 빌려 links에 사용
var links_content = Array.prototype.map.call(links, function (link) {
  return link.textContent;
});

// 0부터 100까지 채운 배열이 필요할 경우?
var array_101 = [];

for ( var i=0, l=100; i<=l; ++i ) {
  array_101[i] = i;
}

console.log(array_101); // [0, 1, 2, ..., 100]

let numbers = [100, 105, 103, 109];


// Array.prototype.keys
console.log( Array.from(numbers.keys()) ); // 0, 1, 2, 3

// Array.prototype.values
console.log( Array.from(numbers.values()) ); // 100, 105, 103, 109

// Array.prototype.entries
// Array.from() 대신 전개 연사자(...)를 사용해도 된다.
console.log( [...numbers.entries()] ); 
/*
[  
  [0, 100],
  [1, 105],
  [2, 103],
  [3, 109]
]
*/

var numbers = [100, 105, 103, 109];

// Array.prototype.copyWithin(target, start=0, end=this.length)

// 0부터 (4-1)까지 아이템을 복사한 후, 1 위치부터 붙여넣음
numbers.copyWithin(1); // target: 1, start: 0, end: 4
// [100, 105, 103, 109] → [100, 100, 105, 103]

// 0부터 (4-1)까지 아이템을 복사한 후, -2(끝에서 2번째) 위치부터 붙여넣음
numbers.copyWithin(-2); // target: -2, start: 0, end: 4
// [100, 105, 103, 109] → [100, 105, 100, 105]

// 2부터 (4-1)까지 아이템을 복사한 후, 1 위치부터 붙여넣음
numbers.copyWithin(1, 2); // target: 1, start: 2, end: 4
// [100, 105, 103, 109] → [100, 103, 109, 109]

// 1부터 (2-1)까지 아이템을 복사한 후, 2 위치부터 붙여넣음
numbers.copyWithin(2, 1, 2); // target: 2, start: 1, end: 2
// [100, 105, 103, 109] → [100, 105, 105, 109]

// -2부터 -3까지 아이템을 복사한 후, -3(끝에서 3번째) 위치부터 붙여넣음
numbers.copyWithin(-3, -2); // target: -2, start: -2, end: 4
// [100, 105, 103, 109] → [100, 103, 109, 109]

// 배열(Array)
const features = ['modules','arrow function','let, const','rest parameter','modules'];

console.log(features.length, features[0]); // 5, 'modules'


// 세트(Set)
// new Set([iterable]);
const features_set = new Set(features);

console.log(features_set.size, features_set[0]); // 4, undefined

// Set.prototype 객체
console.dir(Set.prototype);

// .constructor
// .size
// .add()
// .has()
// .delete()
// .clear()
// .forEach()
// .entries()
// .keys()
// .values()

// Set 객체 생성
const phones = new Set(); // Set(0) {}

// phones 세트
phones; // Set(4) {"iPhoneX", "Gallaxy Note 8", "V30", "Mi5"}

// phones 세트
phones; // Set(4) {"iPhoneX", "Gallaxy Note 8", "V30", "Mi5"}

// phones 세트
phones; // Set(4) {"iPhoneX", "Gallaxy Note 8", "V30", "Mi5"}

// phones 세트
phones; // Set(4) {"iPhoneX", "Gallaxy Note 8", "V30", "Mi5"}

// 객체(Object)
let capitals = {
  korea_ref : '서울',
  china     : '북경',
  usa       : '워싱턴 D.C'
};

console.log(capitals); // {korea_ref: "서울", china: "북경", usa: "워싱턴 D.C"}

// Map.prototype 객체
console.dir(Map.prototype);

// .constructor
// .size
// .set()
// .get()
// .has()
// .delete()
// .clear()
// .forEach()
// .entries()
// .keys()
// .values()

// Map 객체 생성
let capitals = new Map(); // Map(0) {}

// capitals 맵
capitals; // Map(4) {"한국" => "서울", ...}

// capitals 맵
capitals; // Map(4) {"한국" => "서울", ...}

// capitals 맵
capitals; // Map(4) {"한국" => "서울", ...}

// capitals 맵
capitals; // Map(4) {"한국" => "서울", ...}

// capitals 맵
// 배열([]) 내부에 키/값 배열([key, value])을 포함.
let capitals = new Map([
  ['한국', '서울'],
  ['중국', '북경'],
  ['미국', '워싱턴 D.C'],
  ['일본', '동경']
]);

// capitals 맵
capitals; // Map(4) {"한국" => "서울", ...}

// 맵 병합 유틸리티 함수
function combineMap(mapA, mapB) {
  return new Map( [...mapA, ...mapB] );
}

// 맵 → 배열 유틸리티 함수
function convertMap2Array(map) {
  return [...map];
}

// Map → JSON 유틸리티 함수
function map2json(map) {
  return JSON.stringify([...map]);
}

// JSON → Map 유틸리티 함수
function json2map(jsonStr) {
  return new Map(JSON.parse(jsonStr));
}

// strMap → JSON 유틸리티 함수
function strMap2json(strMap) {
  return JSON.stringify(strMap2obj(strMap));
}

// JSON → strMap 유틸리티 함수
function json2strMap(jsonStr) {
  return obj2strMap(JSON.parse(jsonStr));
}

// 비동기(Async) 프로그래밍: 거듭 제곱 함수
function exponentiationAsync(x, n, cb) {
  n = n || 2;
  var o = [];
  while(n--) { o.push(x); }
  x = o.reduce(function(a,b){return a*b;});
  window.setTimeout((cb || function(){}), 1000, x);
}

// 2의 3승(거듭제곱) 값을 시작으로 1초 마다 
// 전달 받은 값을 3승(거듭제곱)하여 비동기 처리
// 비동기 프로그래밍 코드 결과: 콜백 지옥!!!!
exponentiationAsync(2, 3, function(x){
  exponentiationAsync(x, 3, function(x2){
    exponentiationAsync(x2, 3, function(x3){
      exponentiationAsync(x3, 3, function(x4){
        console.log(x4); // 4초 뒤에 2.4178516392292583e+24 출력
      });
    });
  });  
});

// Promise를 사용하여 exponentiationPromise 유틸리티 함수 개선
function exponentiationPromise(x, n=2, time=1000) {
  return new Promise((resolve, reject) => {
    window.setTimeout(() => {
      try {
        let o = Array.from(new Array(n), () => x);
        resolve( o.reduce((a,b) => a*b) );
      } catch(e) {
        reject(e);
      }
    }, time);
  });
}

// Promise 객체 생성: 인자로 excutor 함수를 전달 받음.
// excutor 함수는 resolve, reject를 매개변수로 가지며 바로 실행된다.
// 비동기 동작을 수행/완료하면 동작이 실행(fulfilled, 성공) 상태이면 resolve 함수를 실행한다.
// 동작이 거절(rejected, 실패) 상태이면 reject 함수를 실행한다.
let is_success = true;
const promise = new Promise((resolve, reject) => {
  if ( is_success ) {
    resolve();
  } else {
    reject();
  }
});


promise
  .then(() => console.log('비동기 동작 성공 상태일 경우, 실행되는 함수'))
  .catch(() => console.error('비동기 동작 실패 상태일 경우, 실행되는 함수'));

// Ajax 유틸리티 함수
const AJAX = (url, method='GET') => {
  return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.addEventListener('readystatechange', function(){
      if ( this.readyState === 4 && this.status === 200 ) {
        resolve(this.response);
      }
    });
    xhr.addEventListener('error', function(e){
      reject(e);
    });
    xhr.send(null);
  });
};


AJAX('https://jsonplaceholder.typicode.com/albums')
  .then(response => JSON.parse(response))
  .then(data => console.log(data.filter((item, index) => index < 10)));

// Promise 객체 생성: 인자로 excutor 함수를 전달 받음.
// excutor 함수는 resolve, reject를 매개변수로 가지며 바로 실행된다.
// 비동기 동작을 수행/완료하면 동작이 실행(fulfilled, 성공) 상태이면 resolve 함수를 실행한다.
// 동작이 거절(rejected, 실패) 상태이면 reject 함수를 실행한다.
let is_success = true;
const promise = new Promise((resolve, reject) => {
  if ( is_success ) {
    resolve();
  } else {
    reject();
  }
});


promise
  .then(() => console.log('비동기 동작 성공 상태일 경우, 실행되는 함수'))
  .catch(() => console.error('비동기 동작 실패 상태일 경우, 실행되는 함수'));

// window.fetch()
fetch('https://jsonplaceholder.typicode.com/albums')
  .then(response => response.json())
  .then(data => console.log(data.filter((item, index) => index < 10)))
  .catch(error => console.error(error));

// Promise 객체 생성: 인자로 excutor 함수를 전달 받음.
// excutor 함수는 resolve, reject를 매개변수로 가지며 바로 실행된다.
// 비동기 동작을 수행/완료하면 동작이 실행(fulfilled, 성공) 상태이면 resolve 함수를 실행한다.
// 동작이 거절(rejected, 실패) 상태이면 reject 함수를 실행한다.
let is_success = true;
const promise = new Promise((resolve, reject) => {
  if ( is_success ) {
    resolve();
  } else {
    reject();
  }
});


promise
  .then(() => console.log('비동기 동작 성공 상태일 경우, 실행되는 함수'))
  .catch(() => console.error('비동기 동작 실패 상태일 경우, 실행되는 함수'));

// Promise 객체 참조
let a = new Promise((rs, rj) => {
  // 실행
  window.setTimeout(rs, 1000, 'A');
});

let b = new Promise((rs, rj) => {
  // 실행
  window.setTimeout(rs, 2000, 'B');
});


// Promise.all() 메서드 활용
// 모든 promise의 상태가 실행(fulfilled) 되거나 첫 거절(rejection)이 발생할 경우 동작.
// 병렬 비동기 프로그래밍
Promise.all([a,b])
  .then(values => console.log(values)); // 2초가 지난 후... ['A', 'B']

// Promise 객체 생성: 인자로 excutor 함수를 전달 받음.
// excutor 함수는 resolve, reject를 매개변수로 가지며 바로 실행된다.
// 비동기 동작을 수행/완료하면 동작이 실행(fulfilled, 성공) 상태이면 resolve 함수를 실행한다.
// 동작이 거절(rejected, 실패) 상태이면 reject 함수를 실행한다.
let is_success = true;
const promise = new Promise((resolve, reject) => {
  if ( is_success ) {
    resolve();
  } else {
    reject();
  }
});


promise
  .then(() => console.log('비동기 동작 성공 상태일 경우, 실행되는 함수'))
  .catch(() => console.error('비동기 동작 실패 상태일 경우, 실행되는 함수'));

// Promise 객체 참조
let a = new Promise((rs, rj) => {
  // 실행
  window.setTimeout(rs, 1000, 'A');
});

let b = new Promise((rs, rj) => {
  // 거절
  window.setTimeout(rj, 2000, 'B');
});


// Promise.all() 메서드 활용
Promise.all([a,b])
  .then(values => console.log(values))
  .catch(e => console.error(`${e} 오류 발생!`)); // B 오류 발생!

// Promise 객체 생성: 인자로 excutor 함수를 전달 받음.
// excutor 함수는 resolve, reject를 매개변수로 가지며 바로 실행된다.
// 비동기 동작을 수행/완료하면 동작이 실행(fulfilled, 성공) 상태이면 resolve 함수를 실행한다.
// 동작이 거절(rejected, 실패) 상태이면 reject 함수를 실행한다.
let is_success = true;
const promise = new Promise((resolve, reject) => {
  if ( is_success ) {
    resolve();
  } else {
    reject();
  }
});


promise
  .then(() => console.log('비동기 동작 성공 상태일 경우, 실행되는 함수'))
  .catch(() => console.error('비동기 동작 실패 상태일 경우, 실행되는 함수'));

// Promise 객체 참조
let a = new Promise((rs, rj) => {
  // 실행 (먼저 종료)
  window.setTimeout(rs, 1000, 'A');
});

let b = new Promise((rs, rj) => {
  // 거절
  window.setTimeout(rj, 2000, 'B');
});


// Promise.race() 메서드 활용
// 결과가 실행이든, 거절이든 먼저 종료된 쪽의 결과 반환
Promise.race([a,b])
  .then(values => console.log(values))          // 'A' 출력
  .catch(e => console.error(`${e} 오류 발생!`));

// Promise 객체 생성: 인자로 excutor 함수를 전달 받음.
// excutor 함수는 resolve, reject를 매개변수로 가지며 바로 실행된다.
// 비동기 동작을 수행/완료하면 동작이 실행(fulfilled, 성공) 상태이면 resolve 함수를 실행한다.
// 동작이 거절(rejected, 실패) 상태이면 reject 함수를 실행한다.
let is_success = true;
const promise = new Promise((resolve, reject) => {
  if ( is_success ) {
    resolve();
  } else {
    reject();
  }
});


promise
  .then(() => console.log('비동기 동작 성공 상태일 경우, 실행되는 함수'))
  .catch(() => console.error('비동기 동작 실패 상태일 경우, 실행되는 함수'));

// Promise 객체 참조
let a = new Promise((rs, rj) => {
  // 실행
  window.setTimeout(rs, 1000, 'A');
});

let b = new Promise((rs, rj) => {
  // 거절 (먼저 종료)
  window.setTimeout(rj, 300, 'B');
});


// Promise.race() 메서드 활용
// 결과가 실행이든, 거절이든 먼저 종료된 쪽의 결과 반환
Promise.race([a,b])
  .then(values => console.log(values))          
  .catch(e => console.error(`${e} 오류 발생!`)); // 'B 오류 발생!' 출력

// Promise 객체 생성: 인자로 excutor 함수를 전달 받음.
// excutor 함수는 resolve, reject를 매개변수로 가지며 바로 실행된다.
// 비동기 동작을 수행/완료하면 동작이 실행(fulfilled, 성공) 상태이면 resolve 함수를 실행한다.
// 동작이 거절(rejected, 실패) 상태이면 reject 함수를 실행한다.
let is_success = true;
const promise = new Promise((resolve, reject) => {
  if ( is_success ) {
    resolve();
  } else {
    reject();
  }
});


promise
  .then(() => console.log('비동기 동작 성공 상태일 경우, 실행되는 함수'))
  .catch(() => console.error('비동기 동작 실패 상태일 경우, 실행되는 함수'));

// 실행(fulfilled)된 Promise 객체를 반환하는 메소드.
let a = Promise.resolve('fulfilled');

// 거절(rejected)된 Promise를 객체를 반환하는 메소드.
let b = Promise.reject('rejected');

// 전달된 Promise 객체 중, 먼저 처리된 결과를 실행.
Promise.race([a,b])
  .then(values => console.log(values))         // fulfilled 출력       
  .catch(e => console.error(`${e} 오류 발생!`));