{"id":101,"date":"2025-07-16T15:14:09","date_gmt":"2025-07-16T06:14:09","guid":{"rendered":"http:\/\/34.64.61.65\/?p=101"},"modified":"2025-07-16T15:14:09","modified_gmt":"2025-07-16T06:14:09","slug":"es6","status":"publish","type":"post","link":"https:\/\/hed-g.me\/?p=101","title":{"rendered":"ES6"},"content":{"rendered":"\n
    \n
  1. ES6 \ubb38\ubc95(ES2015)<\/li>\n<\/ol>\n\n\n\n

    \u2b50ES6\ubb38\ubc95<\/p>\n\n\n\n

    ES(ECMAScript)\ub780 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \ud45c\uc900\uc744 \ub9d0\ud558\uba70<\/p>\n\n\n\n

    \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uac00 \ub2e4\uc591\ud55c \uc6f9 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uacf5\ud1b5\uc801\uc73c\ub85c \uc798 \uc791\ub3d9\ub418\ub3c4\ub85d \ud45c\uc900\uc774 \ud544\uc694\ud574\uc9c0\uba74\uc11c \ub9cc\ub4e4\uc5b4\uc9c4 \uac83.<\/p>\n\n\n\n

    ES6\uac00 \uac00\uc7a5 \ud070 \ubcc0\ud654\uac00 \uc788\ub294 \ud45c\uc900.<\/p>\n\n\n\n

    1) const & let (\ubd88\ubcc0 \ubcc0\uc218\uc640 \uac00\ubcc0 \ubcc0\uc218)<\/p>\n\n\n\n

    (1) const<\/p>\n\n\n\n

    \ubd88\ubcc0 \ubcc0\uc218 \uc120\uc5b8\uc744 \uc704\ud55c \ud0a4\uc6cc\ub4dc\ub85c,<\/p>\n\n\n\n

    \uac1d\uccb4\uc640 \ud568\uaed8 \uc0ac\uc6a9\ud560 \ub54c \ub9d0\uace0\ub294 \uac12\uc744 \ub2e4\uc2dc \ud560\ub2f9\ud560 \uc218 \uc5c6\ub294 \ubcc0\uc218<\/strong>. (\ubc30\uc5f4\uc774\ub098 \uac1d\uccb4\uc758 \uac12\uc744 \ubcc0\uacbd\ud558\ub294 \uac83\uc740 \uac00\ub2a5\ud558\ub2e4)<\/p>\n\n\n\n

    \ubcf4\ud1b5 const\ub97c \uc0ac\uc6a9\ud558\uba70 var \uc0ac\uc6a9\ubcf4\ub2e4\ub294 const\ub098 let\uc744 \uc0ac\uc6a9.<\/p>\n\n\n\n

    (2) let<\/p>\n\n\n\n

    \uac00\ubcc0 \ubcc0\uc218 \uc120\uc5b8\uc744 \uc704\ud55c \ud0a4\uc6cc\ub4dc,<\/p>\n\n\n\n

    \uc989, \ubcc0\uacbd \uac00\ub2a5\ud55c \ubcc0\uc218\ub97c \uc0dd\uc131\ud560 \uc218 \uc788\ub2e4. const\uc640 \ub2ec\ub9ac \uc7ac\ud560\ub2f9\uc774 \uac00\ub2a5\ud55c \ubcc0\uc218.<\/p>\n\n\n\n

    \n\n\n\n

    2) \ud15c\ud50c\ub9bf \ubb38\uc790\uc5f4(Template String)<\/p>\n\n\n\n

    \ubb38\uc790\uc5f4 \uc548\uc5d0 \ubcc0\uc218, \uc5f0\uc0b0\uc2dd\uc744 \ud63c\ud569\ud558\uc5ec \uc0ac\uc6a9\ud55c\ub2e4.<\/p>\n\n\n\n

    (1) \uc791\uc740\ub530\uc634\ud45c( ‘ ‘ ) \ub300\uc2e0 \ubc31\ud2f1( ` )\uc73c\ub85c \ubb38\uc790\uc5f4 \ud45c\ud604.<\/p>\n\n\n\n

    (2) \ud15c\ud50c\ub9bf \ubb38\uc790\uc5f4\uc5d0 $\ub97c \uc0ac\uc6a9\ud558\uc5ec \ubcc0\uc218\ub098 \uc2dd \ud3ec\ud568 \uac00\ub2a5.<\/p>\n\n\n\n

    \uae30\uc874\uc758 \ucf54\ub4dc:<\/p>\n\n\n\n

    var fruit = { name: '\ub9dd\uace0', price: 9900 };\nvar getFruit = function(fruit) {\n    return fruit.price + '\uc6d0';\n};\nvar mine = '\uc120\ud0dd\ud55c \uacfc\uc77c\uc740 ' + 'fruit.name + '\uc785\ub2c8\ub2e4. \uac00\uaca9\uc740 ' + getFruit(fruit) + '\uc785\ub2c8\ub2e4.';<\/code><\/pre>\n\n\n\n
    \ud15c\ud50c\ub9bf \ubb38\uc790\uc5f4:<\/p>\n\n\n\n
    var fruit = { name: '\ub9dd\uace0', price: 9900 };\nvar getFruit = function(fruit) {\n    return ${fruit.price}\uc6d0;\n};\nvar mine = `\uc120\ud0dd\ud55c \uacfc\uc77c\uc740 ${fruit.name}\uc785\ub2c8\ub2e4. \uac00\uaca9\uc740 ${getFruit(fruit)}\uc785\ub2c8\ub2e4.`;<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    3) \uc804\uac1c \uc5f0\uc0b0\uc790(Spread Operator)<\/p>\n\n\n\n
    \ub098\uc5f4\ud615 \uc790\ub8cc\ub97c \ucd94\ucd9c, \uc5f0\uacb0\ud560 \ub54c \uc0ac\uc6a9.<\/p>\n\n\n\n
    \uc0ac\uc6a9\ud558\ub824\uba74 \ubc30\uc5f4 \ub610\ub294 \uac1d\uccb4, \ubcc0\uc218\uba85 \uc55e\uc5d0 \ub9c8\uce68\ud45c \uc138\uac1c(…) \uc785\ub825.<\/p>\n\n\n\n
    \uae30\uc874\uc758 \ucf54\ub4dc:<\/p>\n\n\n\n
    const arr1 = [1,2,3];\nconst arr2 = [4,5,6];\nconst combined = arr1.concat(arr2);<\/code><\/pre>\n\n\n\n
    \uc804\uac1c \uc5f0\uc0b0\uc790:<\/p>\n\n\n\n
    const arr1 = [1,2,3];\nconst arr2 = [4,5,6];\nconst combined = [...arr1, ...arr2];<\/code><\/pre>\n\n\n\n
    \ub610\ub2e4\ub978 \uc608\uc2dc\ub85c \uac1d\uccb4\uc758 \uacbd\uc6b0,<\/p>\n\n\n\n
    \uae30\uc874\uc758 \ucf54\ub4dc:<\/p>\n\n\n\n
    const obj1 = { one: 1, two: 2 };\nconst obj2 = { three: 3, four: 4 };\n\nvar combined = Object.assign({}, obj1, obj2);<\/code><\/pre>\n\n\n\n
    \uc804\uac1c \uc5f0\uc0b0\uc790:<\/p>\n\n\n\n
    const obj1 = { one: 1, two: 2 };\nconst obj2 = { three: 3, four: 4 };\n\nvar combined = {...obj1, ...obj2};<\/code><\/pre>\n\n\n\n
    4) \ud654\uc0b4\ud45c \ud568\uc218(Arrow function)<\/strong><\/p>\n\n\n\n
    \ud654\uc0b4\ud45c \uae30\ud638 => \ub85c \ud568\uc218\ub97c \uc120\uc5b8. function \ud0a4\uc6cc\ub4dc\ub97c \uc0dd\ub7b5\ud558\uace0 \uc778\uc790 \ube14\ub85d\uacfc \ubcf8\ubb38 \ube14\ub85d \uc0ac\uc774\uc5d0<\/p>\n\n\n\n
    \ud654\uc0b4\ud45c\ub97c \ud45c\uae30\ud558\uc5ec \uc0ac\uc6a9\ud55c\ub2e4.<\/p>\n\n\n\n
    \uae30\uc874\uc758 \ucf54\ub4dc:<\/p>\n\n\n\n
    function addNumber(a,b) {\n    return a+b;\n}<\/code><\/pre>\n\n\n\n
    \ud654\uc0b4\ud45c \ud568\uc218:<\/p>\n\n\n\n
    const addNumber = (a,b) => {\n    return a+b;\n}<\/code><\/pre>\n\n\n\n
    return \ud0a4\uc6cc\ub4dc\ub97c \uc0dd\ub7b5\ud558\uba74<\/p>\n\n\n\n
    const addNumber = (a,b) => a+b;<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    5) \ud074\ub798\uc2a4(Class)<\/p>\n\n\n\n
    \uae30\uc874 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8(ES5\uae4c\uc9c0)\uc5d0\ub294 \ud074\ub798\uc2a4\uac00 \uc5c6\uc5c8\uc73c\ub098 ES6\uc5d0 \ucd94\uac00\ub428.<\/p>\n\n\n\n
    (1) \ud074\ub798\uc2a4 \uc0ac\uc6a9\ubc95<\/p>\n\n\n\n
    \u2460 class \ud0a4\uc6cc\ub4dc: \ud074\ub798\uc2a4 \uc815\uc758<\/p>\n\n\n\n
    \u2461 constructor() \uc0dd\uc131\uc790 \ud568\uc218<\/p>\n\n\n\n
    \u2462 new \ud0a4\uc6cc\ub4dc: \ud074\ub798\uc2a4 \uc0dd\uc131<\/p>\n\n\n\n
    \uc790\uc138\ud788\ub294 Java Script – Class \uc7a5\uc5d0\uc11c \ub2e4\ub8ec\ub2e4.<\/p>\n\n\n\n
    \ud074\ub798\uc2a4\ub97c \uc0ac\uc6a9\ud55c \ucf54\ub4dc:<\/p>\n\n\n\n
    class addUser {\n    constructor(name, age) {\n        this.name = name;\n        this.age = age;\n    }\n}\n\nconst user = new addUser('AAA', 24);\n\nconsole.log(user.name);\/\/ AAA<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    6) \uac1d\uccb4 \ud655\uc7a5 \ud45c\ud604\uc2dd(Enhanced Object property) & \uad6c\uc870 \ubd84\ud574 \ud560\ub2f9(Destructuring assignment)<\/p>\n\n\n\n
    (1) \uac1d\uccb4 \ud655\uc7a5 \ud45c\ud604\uc2dd(Enhanced Object property)<\/p>\n\n\n\n
    key-value(\ud0a4 \uc774\ub984\uacfc \uac12) \ub370\uc774\ud130 \ud615\uc2dd\uc758 \uac1d\uccb4\ub97c \ud655\uc7a5\ud558\uc5ec \ud45c\ud604 \uac00\ub2a5.<\/p>\n\n\n\n
    \uac1d\uccb4 \ub0b4\ubd80\uc5d0\uc11c \ud45c\ud604\uc2dd\uc744 \uc0ac\uc6a9\ud558\uac70\ub098 \ud0a4\uc640 \ud0a4\uac12\uc744 \ud3b8\ub9ac\ud558\uac8c \uc800\uc7a5\ud560 \uc218 \uc788\uc74c.<\/p>\n\n\n\n
    \u2460 \uac1d\uccb4 \ubcc0\uc218\ub97c \uc120\uc5b8 \uc2dc \ud0a4\uac12\uc744 \uc0dd\ub7b5\ud558\uba74 \uc790\ub3d9\uc73c\ub85c \ud0a4\uc758 \uc774\ub984\uc73c\ub85c \ud0a4\uac12\uc744 \uc9c0\uc815.<\/p>\n\n\n\n
    \u2461 \uac1d\uccb4 \uc0dd\uc131 \ube14\ub85d\uc548\uc5d0 \ub300\uad04\ud638\ub85c \ubb36\uc5b4 \uadf8 \uc548\uc5d0 \ud45c\ud604\uc2dd\uc744 \uc791\uc131 \u2192 \uacc4\uc0b0\ub41c key \uac12 \uc0ac\uc6a9 \uac00\ub2a5.<\/p>\n\n\n\n
    \u2462 function \ud0a4\uc6cc\ub4dc\ub97c \uc0dd\ub7b5\ud558\uc5ec \ud568\uc218 \uc120\uc5b8 \uac00\ub2a5.<\/p>\n\n\n\n
    \uae30\uc874\uc758 \ucf54\ub4dc:<\/p>\n\n\n\n
    const a = 0;\nconst b = 0;\n\nconst obj = { a: a, b: b };\nconsole.log(obj);\/\/ { a: 0, b: 0 }const ord = \"first\";\nconst combined = {};\ncombined[ord + \"Key\"] = \"value\";\nconsole.log(combined);\/\/ { firstKey: 'value' }<\/code><\/pre>\n\n\n\n
    \uac1d\uccb4 \ud655\uc7a5 \ud45c\ud604\uc2dd:<\/p>\n\n\n\n
    const a = 0;\nconst b = 0;\n\nconst obj = { a, b };\nconsole.log(obj);\/\/ { a: 0, b: 0 }const ord = \"first\";\nconst combined = { [ord + \"Key\"]: \"value\" };\nconsole.log(combined);\/\/ { firstKey: 'value' };<\/code><\/pre>\n\n\n\n
    (2) \uad6c\uc870 \ubd84\ud574 \ud560\ub2f9(Destructuring assignment)<\/p>\n\n\n\n
    \ubc30\uc5f4\uc774\ub098 \uac1d\uccb4\uc758 \uc18d\uc131\uc744 \ud574\uccb4\ud558\uc5ec \uadf8 \uac12\uc744 \uac1c\ubcc4 \ubcc0\uc218\uc5d0 \ub2f4\uc744 \uc218 \uc788\ub3c4\ub85d \ud568.<\/p>\n\n\n\n
    \uad6c\uc870 \ubd84\ud574 \ud560\ub2f9\uc740 \ud568\uc218 \uc778\uc790\uac12\uc744 \ub2e4\ub8e8\uac70\ub098 JSON \ub370\uc774\ud130 \ubcc0\ud658\ud560 \ub54c \uc720\uc6a9\ud558\uba70 \uc804\uac1c \uc5f0\uc0b0\uc790\uc640 \ud568\uaed8 \uc0ac\uc6a9\ub428.<\/p>\n\n\n\n
    \u2460 \ubc30\uc5f4\uc5d0\uc11c \uac12\uc744 \ucd94\ucd9c\ud560 \ub54c: \uc778\ub371\uc2a4 \uc21c\uc11c\uc5d0 \ub9de\uac8c \ubcc0\uc218 \uc791\uc131<\/p>\n\n\n\n
    \u2461 \ubcc0\uc218\uc5d0 =(\uc120\uc5b8 \ubd80\ud638, \ud560\ub2f9 \uc5f0\uc0b0\uc790)\ub97c \ud568\uacc4 \uc0ac\uc6a9\ud558\uc5ec \uae30\ubcf8\uac12 \ud560\ub2f9 \uac00\ub2a5<\/p>\n\n\n\n
    \u2462 \uac1d\uccb4\uc5d0\uc11c \uac12\uc744 \ucd94\ucd9c\ud560 \ub54c \ud0a4\uc758 \uc774\ub984\uacfc \ub3d9\uc77c\ubc18 \ubcc0\uc218 \uc774\ub984 \uc0ac\uc6a9<\/p>\n\n\n\n
    \u2463 \uac1d\uccb4\uc5d0\uc11c \uac12\uc744 \ucd94\ucd9c\ud560 \ub54c \ubcc0\uc218\uc5d0 :(\ucf5c\ub860) \ubd80\ud638\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc0c8 \ubcc0\uc218\uba85\uc73c\ub85c \ud0a4\uac12\uc744 \ud560\ub2f9 \uac00\ub2a5.<\/p>\n\n\n\n
    \u2464 sqap\uc744 \uac04\ud3b8\ud558\uac8c \uad6c\ud604 \uac00\ub2a5.<\/p>\n\n\n\n
    \uae30\uc874\uc758 \ucf54\ub4dc:<\/p>\n\n\n\n
    const list = [1, 4];\nconst item1 = list[0];\nconst item2 = list[1];\n\nconst obj = {\n    key1: \"one\",\n    key2: \"four\",\n};\nconst key1 = obj.key1;\nconst key2 = obj.key2;<\/code><\/pre>\n\n\n\n
    ES6 \uad6c\uc870 \ubd84\ud574 \ud560\ub2f9:<\/p>\n\n\n\n
    const list = [1, 4];\nconst [item1, item2] = list;\n\nconst obj = {\n    key1: \"one\",\n    key2: \"four\",\n};\nconst { key1, key2, key3 = \"eight\" } = obj;<\/code><\/pre>\n\n\n\n
    7) \ube44\ub3d9\uae30 \ud568\uc218<\/p>\n\n\n\n
    (1) \ube44\ub3d9\uae30 \ucc98\ub9ac<\/p>\n\n\n\n
    \uc791\uc5c5 \uc2dc\uac04\uc744 \ub9ce\uc774 \uc694\ud558\ub294 \uc791\uc5c5\uc744 \ucc98\ub9ac\ud558\ub294 \ub3d9\uc548 \ub2e4\ub978 \uc791\uc5c5\ub4e4\uc774 \ub300\uae30 \uc0c1\ud0dc\uc778 \uacbd\uc6b0,<\/p>\n\n\n\n
    \ub2e4\ub978 \uc791\uc5c5\ub4e4\uc744 \uba3c\uc800 \uc9c4\ud589\ud558\uace0 \uc624\ub798 \uac78\ub9ac\ub294 \uc791\uc5c5\uacfc \uadf8 \uc791\uc5c5\uc5d0 \uad00\ub828\ub41c \uc791\uc5c5\uc744 \uc774\ud6c4\uc5d0 \ucc98\ub9ac\ud558\ub294 \ubc29\uc2dd.<\/p>\n\n\n\n
    (2) \ud504\ub85c\ubbf8\uc2a4(Promise)<\/p>\n\n\n\n
    \u270d\ud83c\udffb \ud504\ub85c\ubbf8\uc2a4\uc758 \uc0c1\ud0dc \uc138 \uac00\uc9c0<\/p>\n\n\n\n
      \n
    • \ub300\uae30\uc911: \uacb0\uacfc\ub97c \uae30\ub2e4\ub9ac\ub294 \uc911<\/li>\n\n\n\n
    • \ucc98\ub9ac\ub428 – \uc774\ud589\ub428: \uc218\ud589\uc774 \uc815\uc0c1\uc801\uc73c\ub85c \ub05d\ub0a8. \uacb0\uacfc\uac12\uc744 \uac16\uace0 \uc788\uc74c<\/li>\n\n\n\n
    • \ucc98\ub9ac\ub428 – \uac70\ubd80\ub428: \uc218\ud589\uc774 \ube44\uc815\uc0c1\uc801\uc73c\ub85c \ub05d\ub0a8.<\/li>\n<\/ul>\n\n\n\n
      \u2460 \ud504\ub85c\ubbf8\uc2a4 \uc0dd\uc131: new \ud0a4\uc6cc\ub4dc\ub85c \uc0dd\uc131.<\/p>\n\n\n\n
      \u2461 Promise.resolve \uc0dd\uc131: \uc774\ud589\ub428 \uc0c1\ud0dc\uc778 \ud504\ub85c\ubbf8\uc2a4 \uc0dd\uc131<\/p>\n\n\n\n
      \u2462 Promise.reject \uc0dd\uc131: \uac70\ubd80\ub428 \uc0c1\ud0dc\uc778 \ud504\ub85c\ubbf8\uc2a4 \uc0dd\uc131.<\/p>\n\n\n\n
      \u2463 then : \ucc98\ub9ac\ub428 \uc0c1\ud0dc\uac00 \ub41c \ud504\ub85c\ubbf8\uc2a4\ub97c \ucc98\ub9ac\ud560 \ub54c \uc0ac\uc6a9\ud558\ub294 \uba54\uc18c\ub4dc.<\/p>\n\n\n\n
      \uae30\uc874\uc758 \ube44\ub3d9\uae30 \ud568\uc218:<\/p>\n\n\n\n
      function work1(onDone) {\n    setTimeout ( () => onDone('\uc791\uc5c51 \uc644\ub8cc.'), 100);\n}\nfunction work2(onDone) {\n    setTimeout ( () => onDone('\uc791\uc5c52 \uc644\ub8cc.'), 200);\n}\nfunction urgentWork() {\n    console.log('\uae34\uae09 \uc791\uc5c5');\n}\n\nwork1(function(msg1) {\n    console.log('done after 100ms: ' +msg1);\n    work2(function(msg2) {\n        console.log('done after 300ms: ' +msg2);\n    });\n});\nurgentWork();<\/code><\/pre>\n\n\n\n
      \uc6b0\uc120 \uc21c\uc704: (setTimeout\uc774 \uac78\ub824\uc788\uc9c0 \uc54a\uc73c\ubbc0\ub85c) urgentWork() > work1 > work2<\/p>\n\n\n\n
      \uc9c0\uc5f0 \uc791\uc5c5(work1, work2, …)\uc758 \uc218\uac00 \ub298\uc5b4\ub0a0\uc218\ub85d \ucf5c\ubc31\uc774 \uacc4\ub2e8\uc73c\ub85c \ud615\uc131: \ucf5c\ubc31 \uc9c0\uc625(callback hell) \ubc1c\uc0dd.<\/p>\n\n\n\n
      \u270d\ud83c\udffb\ucf5c\ubc31 \uc9c0\uc625(callback hell)<\/p>\n\n\n\n
        \n
      • \uac00\ub3c5\uc131\uc774 \ub5a8\uc5b4\uc9d0(\ucf54\ub4dc\uac00 \uae38\uc5b4\uc9c4\ub2e4)<\/li>\n\n\n\n
      • \ucf54\ub4dc \uc218\uc815\uc774 \uc5b4\ub824\uc6c0<\/li>\n\n\n\n
      • \ube44\uc988\ub2c8\uc2a4 \ub85c\uc9c1\uc744 \ud55c\ub208\uc5d0 \uc54c\uc544\ubcf4\uae30 \uc5b4\ub824\uc6c0<\/li>\n<\/ul>\n\n\n\n
        ES6\uc758 \ube44\ub3d9\uae30 \ucc98\ub9ac:<\/p>\n\n\n\n
        const work1 = () =>\n    new Promise((resolve) => {\n        setTimeout(() => resolve('\uc791\uc5c51 \uc644\ub8cc.'), 100);\n    });\nconst work2 = () =>\n    new Promise((resolve) => {\n        setTimeout(() => resolve('\uc791\uc5c52 \uc644\ub8cc.'), 200);\n    });\nconst urgentWork = () => {\n    console.log('\uae34\uae09 \uc791\uc5c5');\n}\n\nconst nextWorkOnDone = (msg1) => {\n    console.log('done after 100ms: ' + msg1);\n    return work2();\n}\nwork1()\n    .then(nextWorkOnDone)\n\n    .then((msg2) => {\n        console.log('done after 300ms: ' + msg2);\n    });\nurgentWork();<\/code><\/pre>\n\n\n\n
        8) \ubc30\uc5f4 \ud568\uc218<\/p>\n\n\n\n
        (1) forEach()<\/p>\n\n\n\n
        \ubc18\ubcf5\ubb38\uc758 \uc21c\ubc88(i++)\uacfc \ubc30\uc5f4\uc758 \ud06c\uae30\ub97c \ub530\ub85c \uc120\uc5b8\ud558\ub294 \uacfc\uc815\uc744 \uc0dd\ub7b5\ud560 \uc218 \uc788\uc74c.<\/p>\n\n\n\n
        forEach()\uac00 \ub0b4\uc7a5\ud568\uc218\uc774\ubbc0\ub85c \uc18d\ub3c4 \ubd80\ubd84\uc73c\ub85c\ub294 for()\ubcf4\ub2e4 \ub354 \ube60\ub974\ub2e4.<\/p>\n\n\n\n
          \n
        • \ubc18\ud658\uac12\uc774 \uc5c6\uc5b4\ub3c4 \ub428<\/li>\n\n\n\n
        • \ubb38\ubc95<\/li>\n<\/ul>\n\n\n\n
          arr.forEach(callback(currentValue[, index[, array]])[, thisArg])<\/code><\/pre>\n\n\n\n
            \n

          • callback: \uac01 \uc694\uc18c\ub97c \uc2e4\ud589\ud560 \ud568\uc218, currentValue\uc640 index, array \uc138 \uac00\uc9c0 \ub9e4\uac1c\ubcc0\uc218\ub97c \ubc1b\uc74c.<\/p>
            <\/li>\n\n\n\n

          • currentVaule: \ucc98\ub9ac\ud560 \ud604\uc7ac\uc694\uc18c<\/p>
            <\/li>\n\n\n\n

          • index: \ucc98\ub9ac\ud560 \ud604\uc7ac \uc694\uc18c\uc758 index.<\/p>
            <\/li>\n\n\n\n

          • array: forEach()\ub97c \ud638\ucd9c\ud55c \ubc30\uc5f4.<\/p>
            <\/li>\n\n\n\n

          • thisArg: callback\uc744 \uc2e4\ud589\ud560 \ub54c this\ub85c \uc0ac\uc6a9\ud558\ub294 \uac12<\/p>
            <\/li>\n<\/ul>\n\n\n\n
            forEach()\ub97c \uc0ac\uc6a9\ud55c \ucf54\ub4dc(1):<\/p>\n\n\n\n
            const arr = [1, 2, 3, 4, 5];\nconst odd = [];\n\narr.forEach(function(num){\n    if(num%2 == 1) {\n        odd.push(num);\n    }\n});\n\nconsole.log(odd);\/\/ [1, 3, 5]<\/code><\/pre>\n\n\n\n
            forEach()\ub97c \uc0ac\uc6a9\ud55c \ucf54\ub4dc(2):<\/p>\n\n\n\n
            const useQuery = \"a=1,b=2,c=3\"\n\nfunction parser(qs) {\n\n    const queryString = qs.substr(0);\n    const splitedStr = queryString.split(',');\/\/splitedStr=['a=1','b=2','c=3']let result = {};\n\n    splitedStr.forEach((str) => {\n        const [key, value] = str.split('=');\n        result[key]=value;\n    });\n    return result;\n}\nconsole.log(parser(useQuery));\n\n\/\/ {a: '1', b: '2', c: '3'}<\/code><\/pre>\n\n\n\n
            (2) map()<\/p>\n\n\n\n
            \ubc30\uc5f4 \uc694\uc18c\ub97c \uc815\uc758\ub41c \ud568\uc218\ub97c \ud1b5\ud574 \uc0c8 \ubc30\uc5f4<\/strong>\uc744 \ub9cc\ub4dc\ub294 \ud568\uc218.<\/p>\n\n\n\n
            \u203b \ubc18\ud658\uac12 \ud544\uc694.<\/p>\n\n\n\n
              \n
            • \ubb38\ubc95<\/li>\n<\/ul>\n\n\n\n
              arr.map(callback(currentValue[, index[, array]])[, thisArg])<\/code><\/pre>\n\n\n\n
                \n

              • callback: \ubc30\uc5f4\uc758 \ubaa8\ub4e0 \uc694\uc18c\uc5d0 \uc801\uc6a9\ub418\uc5b4 \uc0c8 \ubc30\uc5f4 \uc694\uc18c\ub97c \uc0dd\uc131.<\/p>
                <\/li>\n\n\n\n

              • currentVaue: callback\uc774 \uc801\uc6a9\ub420 \ud604\uc7ac \uc694\uc18c<\/p>
                <\/li>\n\n\n\n

              • index: \ucc98\ub9ac\ud560 \ud604\uc7ac \uc694\uc18c\uc758 index<\/p>
                <\/li>\n\n\n\n

              • array: map()\ub97c \ud638\ucd9c\ud55c \ubc30\uc5f4<\/p>
                <\/li>\n\n\n\n

              • thisArg: callback\uc744 \uc2e4\ud589\ud560 \ub54c this\ub85c \uc0ac\uc6a9\ud558\ub294 \uac12<\/p>
                <\/li>\n<\/ul>\n\n\n\n
                map()\uc744 \uc0ac\uc6a9\ud55c \ucf54\ub4dc(1):<\/p>\n\n\n\n
                const arr1 = [1, 2, 4, 8];\nconst doubleArr = numbers.map((arr1) => {\n    return arr1 * 2;\n});\nconsole.log(doubleArr);\/\/ [2, 4, 8, 16]<\/code><\/pre>\n\n\n\n
                map()\uc744 \uc0ac\uc6a9\ud55c \ucf54\ub4dc(2):<\/p>\n\n\n\n
                const useQuery = \"a=10,b=20,c=30\"\nfunction parser(qs) {\n    const queryString = qs.substr(0);\/\/ queryString = a=10,b=20,c=30\"const splitedStr = queryString.split(',');\/\/ splitedStr = ['a=10', 'b=20', 'c=30']\n\n    const result = splitedStr.map((str) => {\n        const [key, value] = str.split('=');\n        return {key: key, value: value};\/\/ {key: 'a', value: '10'}\n    });\n    return result;\n}\n\nconsole.log(parser(useQuery));\n\n\/* result = [\n    {key: 'a', value: '10'},\n        {key: 'b', value: '20'},\n        {key: 'c', value: '30'}\n   ];\n*\/<\/code><\/pre>\n\n\n\n
                (3) reduce()<\/p>\n\n\n\n
                \ubc30\uc5f4\uc758 \uc694\uc18c\ub97c \uc21c\ucc28\uc801\uc73c\ub85c \uc21c\ud68c\ud558\uba70 reducer \ud568\uc218\ub97c \uc2e4\ud589\ud558\uace0 \ud558\ub098\uc758 \uacb0\uacfc\uac12<\/strong>\uc744 \ubc18\ud658,<\/p>\n\n\n\n
                \uadf8 \uacb0\uacfc\uac12\uc740 \uac1d\uccb4\ub098 \ubc30\uc5f4, \uc2a4\ud2b8\ub9c1 \ub4f1\uc774 \ub420 \uc218 \uc788\uc74c<\/p>\n\n\n\n
                  \n
                • \ubb38\ubc95<\/li>\n<\/ul>\n\n\n\n
                  arr.reduce(callback[, initialValue])<\/code><\/pre>\n\n\n\n
                    \n

                  • callback: \ubc30\uc5f4\uc758 \uac01 \uc694\uc18c\uc5d0 \ub300\ud574 \uc2e4\ud589, \ub124 \uac00\uc9c0 \uc778\uc218\ub97c \ubc1b\uc74c.<\/p>
                    <\/li>\n\n\n\n

                  • accumlator(\ub204\uc801\uac12): \ub204\uc0b0\uae30. callback\uc758 \ubc18\ud658\uac12\uc744 \ub204\uc801.<\/p>
                    <\/li>\n\n\n\n

                  • currentValue(\ud604\uc7ac\uac12): \ucc98\ub9ac\ud560 \ud604\uc7ac \uc694\uc18c<\/p>
                    <\/li>\n\n\n\n

                  • currentIndex(\ud604\uc7ac \uc778\ub371\uc2a4): \ucc98\ub9ac\ud560 \ud604\uc7ac \uc694\uc18c\uc758 index(initialValue\ub97c \uc81c\uacf5\ud55c \uacbd\uc6b0: 0, \uc544\ub2c8\uba74 1\ubd80\ud130 \uc2dc\uc791)<\/p>
                    <\/li>\n\n\n\n

                  • array(\ud604\uc7ac \ubc30\uc5f4): reduce()\ub97c \ud638\ucd9c\ud55c \ubc30\uc5f4.<\/p>
                    <\/li>\n\n\n\n

                  • initialValue(\ucd08\uae43\uac12): callback\uc758 \ucd5c\ucd08 \ud638\ucd9c\uc5d0\uc11c \uccab \ubc88\uc9f8 \uc778\uc218\uc5d0 \uc81c\uacf5\ud558\ub294 \uac12<\/p>
                    <\/li>\n<\/ul>\n\n\n\n
                    \ud83c\udf1f reduce\uc758 accumulator\uc640 currentValue<\/p>\n\n\n\n
                    \u2460 accumulator(\ub204\uc801\uac12)<\/p>\n\n\n\n
                    accumulator\ub294 callback\uc758 \ubc18\ud658\uac12\uc744 \ub204\uc801\ud558\ub294\ub370, \uc774 \ub204\uc801\uac12\uc774 \uc5c6\uac70\ub098 \ucd08\uae43\uac12\uc744 \uc81c\uacf5\ud55c \uacbd\uc6b0<\/p>\n\n\n\n
                    initialValue(\ucd08\uae43\uac12)\ub85c \uc2dc\uc791\ud568.<\/p>\n\n\n\n
                    \u2461 initialValue(\ucd08\uae43\uac12)<\/p>\n\n\n\n
                    initialValue\ub97c \uc124\uc815\ud558\uc9c0 \uc54a\uc558\uc744 \uacbd\uc6b0: accumulator\uac00 \ubc30\uc5f4\uc758 0\ubc88\uc9f8 index, currentVaule\uac00 \uccab \ubc88\uc9f8 index<\/p>\n\n\n\n
                    initialValue\ub97c \uc124\uc815\ud55c \uacbd\uc6b0: accumulator\uac00 initialValue, currentVaule\uac00 0\ubc88\uc9f8 index<\/p>\n\n\n\n
                    \uc989, reduce\uac00 \uc21c\ud68c\ud558\uba74\uc11c accumulator\uc5d0 \ubc18\ud658\uac12\uc744 \ub204\uc801\uc2dc\ud0a4\uba70 \ud558\ub098\uc758 \uac12\uc744 \ub9ac\ud134.<\/p>\n\n\n\n
                      \n
                    • \ubc30\uc5f4\uc774 \ube44\uc5b4\uc788\ub294\ub370 \ucd08\uae43\uac12\uc744 \uc81c\uacf5\ud558\uc9c0 \uc54a\uc744 \uacbd\uc6b0: \uc5d0\ub7ec \ubc1c\uc0dd<\/li>\n<\/ul>\n\n\n\n
                      reduce()\ub97c \uc0ac\uc6a9\ud55c \ucf54\ub4dc(1):<\/p>\n\n\n\n
                      const arr = [1, 2, 3, 4, 5];\nconst initialValue = 0;\n\nconst reduceArr = arr.reduce((accumulator, currentValue) =>\n    accumulator + currentValue, initialValue\n);\n\nconsole.log(reduceArr);\/\/ 15<\/code><\/pre>\n\n\n\n
                      reduce()\ub97c \uc0ac\uc6a9\ud55c \ucf54\ub4dc(2):<\/p>\n\n\n\n
                      const useQuery = \"a=1&b=3&c=5\"\nfunction parser(qs) {\n    const queryString = qs.substr(0);\/\/ queryString = a=1&b=3&c=5\"const splitedStr = queryString.split('&');\/\/ splitedStr = ['a=1', 'b=3', 'c=5']\n\n    return splitedStr\n        .map((str) => {\n            const [key, value] = str.split('=');\n            return {key, value};\n        })\n        .reduce((result, arr) => {\n            result[arr.key] = arr.value;\n            return result;\n        }, {});\n\n}\n\nconsole.log(parser(useQuery));\n\n\/\/ {a: '1', b: '3', c: '5'}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
                      \u2b50ES6\ubb38\ubc95 ES(ECMAScript)\ub780 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \ud45c\uc900\uc744 \ub9d0\ud558\uba70 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uac00 \ub2e4\uc591\ud55c \uc6f9 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uacf5\ud1b5\uc801\uc73c\ub85c \uc798 \uc791\ub3d9\ub418\ub3c4\ub85d \ud45c\uc900\uc774 \ud544\uc694\ud574\uc9c0\uba74\uc11c \ub9cc\ub4e4\uc5b4\uc9c4 \uac83. ES6\uac00 \uac00\uc7a5 \ud070 \ubcc0\ud654\uac00 \uc788\ub294 \ud45c\uc900. 1) const & let (\ubd88\ubcc0 \ubcc0\uc218\uc640 \uac00\ubcc0 \ubcc0\uc218) (1) const \ubd88\ubcc0 \ubcc0\uc218 \uc120\uc5b8\uc744 \uc704\ud55c \ud0a4\uc6cc\ub4dc\ub85c, \uac1d\uccb4\uc640 \ud568\uaed8 \uc0ac\uc6a9\ud560 \ub54c \ub9d0\uace0\ub294 \uac12\uc744 \ub2e4\uc2dc \ud560\ub2f9\ud560 \uc218 \uc5c6\ub294 \ubcc0\uc218. (\ubc30\uc5f4\uc774\ub098 \uac1d\uccb4\uc758 \uac12\uc744 \ubcc0\uacbd\ud558\ub294 \uac83\uc740 \uac00\ub2a5\ud558\ub2e4) \ubcf4\ud1b5 const\ub97c […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[47],"tags":[138,121,120],"class_list":["post-101","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-es6","tag-javascript","tag-120"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/101","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=101"}],"version-history":[{"count":1,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/101\/revisions"}],"predecessor-version":[{"id":147,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/101\/revisions\/147"}],"wp:attachment":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=101"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=101"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}