ใ‚ธใƒฃใƒใ‚นใ‚ฏใƒชใƒ—ใƒˆใ€ๆ–‡ๅญ—ๅˆ—ๆ“ไฝœ(JAVASCRIPT & STRING)

Javascriptๆ–‡ๅญ—ๅˆ—ใฎใƒกใ‚ฝใƒƒใƒ‰ : slice(), substring(), includes(), startsWith(), trim(), replace()…….

ใƒ•ใƒญใƒณใƒˆใ‚จใƒณใƒ‰(React, Vue, Angular)ใ‚‚ใƒใƒƒใ‚ฏใ‚จใƒณใƒ‰(Nodejs)ใ‚‚ใ‚ธใƒฃใƒใ‚นใ‚ฏใƒชใƒ—ใƒˆ(Javascript)ใŒไฝฟใ‚ใ‚Œใ‚‹ๆ™‚ไปฃใซใชใฃใฆใ€ใ ใ‚“ใ ใ‚“ใ‚ธใƒฃใƒใ‚นใ‚ฏใƒชใƒ—ใƒˆใฎๆ–‡ๆณ•ใŒ้‡่ฆใจใชใ‚Šใพใ™ใญใ€‚

ใใฎไธญใ€ๆ–‡ๅญ—ๅˆ—(String)้–ข้€ฃใฎใƒกใ‚ฝใƒƒใƒ‰ใฏใ‚ˆใไฝฟใ†ใฎใซใ€ใ‚ใพใ‚Š่ฆšใˆใฆใฏใ„ใชใ„ใ‚„ใคใงใ™ใญใ€‚๐Ÿ˜‚

ๆ–‡ๅญ—ๅˆ—้–ข้€ฃใฎใƒกใ‚ฝใƒƒใƒ‰ใฏไธ€ๅบฆ่ฆšใˆใฆใŠใใจ่‡ชๅ‹•ใซ่ฆšใˆใ‚‰ใ‚Œใ‚‹ใใ‚‰ใ„ไฝฟใ†้ ปๅบฆใŒ้ซ˜ใ„ใฎใงๆœ€ๅˆใ ใ‘้ ‘ๅผตใ‚Œใฐใงใ™ใญ๏ผ

ใงใฏใ€้ ป็นใซไฝฟใ†ใƒกใ‚ฝใƒƒใƒ‰ใฎไธญslice(), substring(), includes(), startsWith(), trim(), replace(), indexOf(), test()ใ‚’ใ”็ดนไป‹ใ—ใพใ™ใ€‚


sliceใƒกใ‚ฝใƒƒใƒ‰ใฏใ‚คใƒณใƒ‡ใƒƒใ‚ฏใ‚นใ‚’ใƒ‘ใƒฉใƒกใƒผใ‚ฟใงๆธกใ—ใ€ๅฟ…่ฆใชๆ–‡ๅญ—ๅˆ—ใ‚’ๆŠฝๅ‡บใ—ใพใ™ใ€‚

ใ‚นใ‚ฟใƒผใƒˆใ‚คใƒณใƒ‡ใƒƒใ‚ฏใ‚น(start index)ใจ็ต‚ไบ†ใ‚คใƒณใƒ‡ใƒƒใ‚ฏใ‚น(end indexใ€็œ็•ฅๅฏ)ใ‚’ๆธกใ—ใ€็ต‚ไบ†ใ‚คใƒณใƒ‡ใƒƒใ‚ฏใ‚นใ‚’็œ็•ฅใ™ใ‚‹ๅ ดๅˆใฏๆ–‡ๅญ—ๅˆ—ใฎๆœ€ๅพŒใพใงใซใชใ‚Šใพใ™ใ€‚

ใƒ‘ใƒฉใƒกใƒผใ‚ฟใŒ๏ผใฎๅ ดๅˆใฏ้ ญใ‹ใ‚‰ไธ€็•ช็›ฎใ€-1ใฏ้€†ใงๅพŒใ‚ใ‹ใ‚‰ไธ€็•ช็›ฎใฎๆ„ๅ‘ณใซใชใ‚Šใพใ™ใ€‚

const myWord = 'primavera';

myWord.slice(0,5);   // 'prima'
myWord.slice(-4);    // 'vera'
myWord.slice(3);     // 'mavera'

myWord.slice(3,1);    // '' -> slice()ใฏใ‚นใ‚ฟใƒผใƒˆใŒ็ต‚ไบ†ใ‚ˆใ‚Šๅคงใใ„ใจ็ฉบใ‚’่ฟ”ใ™

substringใƒกใ‚ฝใƒƒใƒ‰ใ‚‚sliceใจๅŒใ˜ใใ‚คใƒณใƒ‡ใƒƒใ‚ฏใ‚นใ‚’ๆธกใ—ใ€ๆ–‡ๅญ—ๅˆ—ใ‚’ๆŠฝๅ‡บใ—ใพใ™ใ€‚

ๅŸบๆœฌ็š„ใชๆ“ไฝœใฏๅŒๆง˜ใงใ™ใŒsubstringใฏใ‚นใ‚ฟใƒผใƒˆใŒ็ต‚ไบ†ใ‚ˆใ‚Šๅคงใใ„ใฎๅ ดๅˆ่‡ชๅ‹•ใซไฝ็ฝฎใ‚’ไบคๆ›ใ—ใฆใƒกใ‚ฝใƒƒใƒ‰ใ‚’ๅฎŸๆ–ฝใ—ใพใ™ใ€‚

ใพใŸใ€substringใซ่ฒ ๆ•ฐใ‚’ๅ…ฅใ‚Œใ‚‹ใจ๏ผใจ่ช่ญ˜ใ—ใพใ™ใ€‚

ไพ‹ใˆใฐ(3, -1)ใ‚’ๆธกใ™ใจ(3, 0)ใจใ—ใฆ่ช่ญ˜ใ—ใพใ™ใ€‚ใใ‚Œใซ(3, 0)ใฏใ‚นใ‚ฟใƒผใƒˆใŒๅคงใใ„ใฎใง่‡ชๅ‹•ไบคๆ›ใ—ใ€(0, 3)ใ‚’ๅฎŸๆ–ฝใ—ใพใ™ใ€‚

ใƒกใ‚ฝใƒƒใƒ‰ๅใŒไผผใŸใ‚ˆใ†ใชsubstrใฏโ€™ไฝ็ฝฎโ€™ใจโ€™ๆ–‡ๅญ—ๆ•ฐ’ใ‚’ใƒ‘ใƒฉใƒกใƒผใ‚ฟใซๆธกใ™ใƒกใ‚ฝใƒƒใƒ‰ใงใ™ใ€‚

const myWord = 'invierno';

myWord.substring(3);     // 'ierno'
myWord.substring(1,3);   // 'nv'

myWord.substring(3,1);   // 'nv' -> ่‡ชๅ‹•ใซใ‚นใ‚ฟใƒผใƒˆใจ็ต‚ไบ†ไฝ็ฝฎไบคๆ›

myWord.substring(3,-1);  // 'inv' -> ่ฒ ๆ•ฐใฏ0, ่‡ชๅ‹•ไฝ็ฝฎไบคๆ›

myWord.substring(-4);    // 'invierno' -> ่ฒ ๆ•ฐใฏ0, ใ‚นใ‚ฟใƒผใƒˆ(0)ใ‹ใ‚‰ๆœ€ๅพŒใพใง

myWord.substr(1,3);      // 'nvi' -> ใ‚นใ‚ฟใƒผใƒˆ1ใ‹ใ‚‰ไธ‰ใค

includesใฏๆ–‡ๅญ—ๅˆ—ใฎไธญใ€ๆŒ‡ๅฎšใ—ใŸๆ–‡ๅญ—ๅˆ—ใŒๅซใพใ‚Œใฆใ„ใ‚‹ใ‹ใ‚’ใƒใ‚งใƒƒใ‚ฏใ—ใพใ™ใ€‚

ใƒ‘ใƒฉใƒกใƒผใ‚ฟใฏๆ–‡ๅญ—ๅˆ—(ๅฟ…้ ˆ)ใจใ‚คใƒณใƒ‡ใƒƒใ‚ฏใ‚น(็œ็•ฅๅฏ)ใ‚’ๆธกใ—ใ€่ฟ”ใ™ใฎใฏtrueๆˆ–ใฏfalseใงใ™ใ€‚

ใ“ใฎใƒกใ‚ฝใƒƒใƒ‰ใฏๆŒ‡ๅฎšๆ–‡ๅญ—ใฏใ‚‚ใกใ‚ใ‚“ใ€้…ๅˆ—ใฎไธญใง็ฉบใฎๅ€คใ‚’็ขบ่ชใ™ใ‚‹ใŸใ‚ใซใฏไฝฟใˆใพใ™ใ€‚

const myWord = 'alegria';

myWord.includes('le');       // true
myWord.includes('i');        // true
myWord.includes('rio');      // false

const myArray = ['dream','','king'];
myArray.includes('');       // true   -> myArray[1]ใŒ็ฉบใชใฎใงtrue
myArray.includes('dream');  // true   -> myArray[0]ใจไธ€่‡ด
myArray.includes('drea');   // false  -> ่ฆ็ด ใฏๅฎŒๅ…จไธ€่‡ดใ™ใ‚‹ๅ ดๅˆใฎใฟtrue

startsWithใƒกใ‚ฝใƒƒใƒ‰ใ‚‚ๆ–‡ๅญ—ๅˆ—ใŒๅซใพใ‚Œใฆใ„ใ‚‹ใ‹ใ‚’ใƒใ‚งใƒƒใ‚ฏใ—ใพใ™ใ€‚

ๆ–‡ๅญ—ๅˆ—ใฎใฟๆธกใ™ใจ0ใ‚คใƒณใƒ‡ใƒƒใ‚ฏใ‚นใ‹ใ‚‰ๅง‹ใพใ‚‹ๆŒ‡ๅฎšๆ–‡ๅญ—ใฎๅญ˜ๅœจใ‚’็ขบ่ชใ—ใ€BOOLEANใ‚’่ฟ”ใ—ใพใ™ใ€‚

endsWithใฏๆŒ‡ๅฎšๆ–‡ๅญ—ใง็ต‚ใ‚ใ‚‹ใ“ใจใ‚’ใƒใ‚งใƒƒใ‚ฏใ—ใพใ™ใ€‚

const mySentence = 'cafe con leche';

mySentence.startsWith('cafe');     // true
mySentence.startsWith('fe');       // false
mySentence.startsWith('fe',2);     // true

mySentence.endsWith('eche');      // true

trimใฏๆ–‡ๅญ—ๅˆ—ไธกๆ–ญใฎ็ฉบ็™ฝใ‚’้™คใใƒกใ‚ฝใƒƒใƒ‰ใงใ™ใ€‚

ๆ–‡ๅญ—ๅˆ—ๅค‰ๆ›ใฎ้Ž็จ‹ใงๅ…ฅใ‚‰ใ‚ŒใŸ็ฉบ็™ฝใพใŸใฏใ‚ฟใ‚คใƒ—ใƒŸใ‚นใงๅ…ฅใฃใŸๆ–‡ๅญ—ๅˆ—ใฏๆ–‡ๅญ—ๆฏ”่ผƒใฎๆ™‚falseใ‚’่ฟ”ใ—ใ€ใ‚จใƒฉใƒผใซใชใ‚ŠใŒใกใงใ™ใ€‚

ใชใฎใงtrimใง็ฉบ็™ฝใ‚’ไบ‹ๅ‰ใซ้™คใใ€ใ‚จใƒฉใƒผใ‚’ไบˆ้˜ฒใ™ใ‚‹ใ“ใจใŒใงใใพใ™ใ€‚

ๆ–‡ๅญ—ๅˆ—ไธกๆ–ญใฎ็ฉบ็™ฝใ€ใ‚ฟใƒƒใƒ—ใ€ๆ”น่กŒ(/n)ๆ–‡ๅญ—ใ‚’้™คใใ“ใจใŒใงใใพใ™ใŒใ€ไธกๆ–ญใงใฏใชใๆ–‡ๅญ—ๅˆ—ไธญใซๅ…ฅใฃใฆใ„ใ‚‹ใฎใฏไฝœๅ‹•ใ—ใพใ›ใ‚“ใ€‚

const mySentence = '  la casa de papel   ';

mySentence.trim();        // 'la casa de papel'

const mySentence = ' el amor \n';

mySentence.trim();       // 'el amor'

replaceใฏๆ–‡ๅญ—ๅˆ—ใ‹ใ‚‰ๆŒ‡ๅฎšใ—ใŸๆ–‡ๅญ—ใ‚’ๆŽขใ—ใฆๅค‰ๆ›ๆ–‡ๅญ—ใซๅค‰ๆ›ใ—ใพใ™ใ€‚

ๆ–‡ๅญ—ๅˆ—ใฎไธญใซๆŒ‡ๅฎšๆ–‡ๅญ—ใŒไธ€ใคไปฅไธŠๅญ˜ๅœจใ™ใ‚‹ใจใใ€ๆœ€ๅˆใซ่ฆ‹ๅฝ“ใŸใ‚‹ใฎใ ใ‘ใŒๅค‰ๆ›ดๅฏพ่ฑกใซใชใ‚Šใพใ™ใ€‚

ไพ‹ใˆใฐ ‘my_name_is_Ron’ใ‹ใ‚‰ใ‚ขใƒณใƒ€ใƒผใƒใƒผใ‚’ๅ…จ้ƒจ็ฉบ็™ฝใซใ™ใ‚‹ใŸใ‚replace(‘_’,’ ‘)ใซใ—ใฆใ‚‚็ตๆžœใฏโ€™my name_is_Ron’ใซใชใ‚Šใพใ™ใ€‚

ใชใฎใงใ€ๆ–‡ๅญ—ๅˆ—ใฎไธญใงๅญ˜ๅœจใ™ใ‚‹ๅ…จใฆใ‚‚ๆŒ‡ๅฎšๆ–‡ๅญ—ใ‚’ๅค‰ๆ›ใ—ใŸใ„ๆ™‚ใฏๆญฃ่ฆ่กจ็พใ‚’ไฝฟใ†ใจ่กŒใ‘ใพใ™ใ€‚

const mySentence = 'my name is:Ron';

mySentence.replace(':',' ');        //'my name is Ron'

const mySentence = 'my_name_is_Ron';

mySentence.replace('_',' ');      // 'my name_is_Ron'

//ๆญฃ่ฆ่กจ็พใงใ™ในใฆใฎๆ–‡ๅญ—ใ‚’ๅค‰ๆ›
mySentence.replace(/_/g, ' ');    // 'my name is Ron'

indexOfใฏๆŒ‡ๅฎšๆ–‡ๅญ—ใฎไฝ็ฝฎใ‚’่ฟ”ใ—ใพใ™ใ€‚

ใ“ใฎใƒกใ‚ฝใƒƒใƒ‰ใฏๆŒ‡ๅฎšๆ–‡ๅญ—ใฎๅ‰ใพใŸใฏๅพŒใงๆ–‡ๅญ—ๅˆ—ใ‚’ๅˆ‡ใ‚Šๅ–ใ‚‹ใจใๆœ‰็”จใชใ‚‚ใฎใงใ™ใ€‚

ใŸใจใˆใ€’Z001-03’ใ‹ใ‚‰ๅพŒใ‚ใฎ’03’ใ ใ‘ใ‚’ๆŠฝๅ‡บใ—ใŸใ„ใจใใ€indexOfใง’-‘ๆ–‡ๅญ—ใ‚’ๆŽขใ—ใ€่ฟ”ใ—ใฎindex +1ไฝ็ฝฎใ‹ใ‚‰ๆœ€ๅพŒใพใงใ‚ซใƒƒใƒˆใ™ใ‚‹ใจ’03’ใ‚’ๅˆ‡ใ‚Šๅ–ใ‚‹ใ“ใจใŒใงใใพใ™ใ€‚

ใ‚‚ใ—ๆ–‡ๅญ—ๅˆ—ใฎไธญๆŒ‡ๅฎšๆ–‡ๅญ—ใŒไธ€ใคไปฅไธŠใฎๅ ดๅˆใ€้ ญใ‹ใ‚‰ๆŽขใ—ๅง‹ใ‚ๆœ€ๅˆใซ่ฆ‹ๅฝ“ใŸใ‚‹ๆ–‡ๅญ—ไฝ็ฝฎใ‚’่ฟ”ใ—ใพใ™ใ€‚

ใงใ‚‚ใƒ‘ใƒฉใƒกใƒผใ‚ฟใซindexใ‚’ๆธกใ™ใจๆŒ‡ๅฎšใ•ใ‚ŒใŸไฝ็ฝฎใ‹ใ‚‰ๆŒ‡ๅฎšๆ–‡ๅญ—ใ‚’ๆŽขใ—ใพใ™ใ€‚

ๆณจๆ„็‚นใฏstart indexใ‚’ๆธกใ—ใฆใ‚‚่ฟ”ใ™ๅ€คใฏๅ…จไฝ“ใฎๆ–‡ๅญ—ๅˆ—ใ‹ใ‚‰ไฝ•็•ช็›ฎใงใ‚ใ‚‹ใจใ„ใ†ๆ•ฐๅญ—ใ‚’่ฟ”ใ—ใพใ™ใ€‚

ๅพŒใ‚ใ‹ใ‚‰ๆคœ็ดขใ™ใ‚‹ใฎใฏlastIndexOfใงใ€ๅพŒใ‚ใ‹ใ‚‰ๆœ€ๅˆใฎๆŒ‡ๅฎšๆ–‡ๅญ—ใฎไฝ็ฝฎใ‚’่ฟ”ใ—ใพใ™ใ€‚

ใ“ใฎๆ™‚ใ‚‚่ฟ”ใ™ๅ€คใฏ้ ญใ‹ใ‚‰ไฝ•็•ช็›ฎใงใ‚ใ‚‹ใจใ„ใ†ๆ•ฐๅญ—ใงใ™ใ€‚

ๆŒ‡ๅฎšๆ–‡ๅญ—ใŒใชใ‘ใ‚Œใฐ-1ใ‚’่ฟ”ใ—ใพใ™ใ€‚

const mySentence = 'Z001-03';

mySentence.indexOf('-');     // 4

mySentence.substring(mySentence.indexOf('-')+1);    // '03'

mySentence.indexOf('D');    // -1

const mySentence = 'Z001-03-02';

mySentence.indexOf('-');    // 4
mySentence.indexOf('-', 5);   // 7

mySentence.lastIndexOf('-')   // 7

testใฏไธ€่ˆฌ็š„ใซๆญฃ่ฆ่กจ็พใจไธ€็ท’ใซไฝฟใ„ใ€ๆธกใ™ๆ–‡ๅญ—ๅˆ—ใจๆฏ”่ผƒใ—ๆœ‰ๅŠนๆ€งใ‚’็ขบ่ชใ—ใพใ™ใ€‚

ใƒ‘ใ‚นใƒฏใƒผใƒ‰ใ€ใ‚ขใƒซใƒ•ใ‚กใƒ™ใƒƒใƒˆใ€็‰นๆฎŠๆ–‡ๅญ—ใ€็”Ÿๅนดๆœˆๆ—ฅใชใฉใฎๅฝขๅผๆคœๆŸปใซไฝฟใˆใพใ™ใ€‚

const mySentence = /a/;
const myWord = 'baby';

mySentence.test(myWord);   // true

/\d/.test('cookie');       // false \dใฏๆ•ฐๅญ—ใ‚’ๆ„ๅ‘ณ(ๆญฃ่ฆ่กจ็พ)
/\d/.test('cookie1');      // true

ไธŠใฎไพ‹ไปฅๅค–ใซใ‚‚ๅฑฑใปใฉใƒกใ‚ฝใƒƒใƒ‰ใŒๅคšใ„ใ—ใ€ใพใŸๆ–ฐใ—ใไฝœใ‚‰ใ‚Œใ‚‹ใƒกใ‚ฝใƒƒใƒ‰ใ‚‚ใŸใใ•ใ‚“ใ‚ใ‚Šใพใ™ใญใ€‚

ใพใŸๅฟ…่ฆใชๆฉŸ่ƒฝใฎใƒกใ‚ฝใƒƒใƒ‰ใŒใ‚ใ‚Œใฐ็ขบ่ชใ—ใฆใ„ใใพใ—ใ‚‡๏ผ

ใ‚ใ–ใƒผใ™๏ผ

์‰ฝ๊ณ  ๋น ๋ฅด๊ฒŒ ์ปค๋ง(Currying) ๊ธฐ๋ฒ• ์ดํ•ดํ•˜๊ธฐ(feat.์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ)

์ปค๋ง(Currying) ๊ธฐ๋ฒ•์˜ ์ดํ•ด์™€ ์‚ฌ์šฉ, ๊ทธ๋ฆฌ๊ณ  ์žฅ๋‹จ์ 

์ปค๋ง(Currying)์€ ์นด๋ ˆ์™€ ๊ฐ™์€ ์ŠคํŽ ๋ง์„ ๊ฐ–๊ณ  ์žˆ์ง€๋งŒ ๊ทธ ์œ ๋ช…ํ•œ ํ•˜์Šค์ผˆ(Haskell)์ด๋ผ๋Š” ์ด๋ฆ„์˜ ์ถœ์ฒ˜์ธ ์ˆ˜ํ•™&๋…ผ๋ฆฌํ•™์ž ํ•˜์Šค์ผˆ ๋ธŒ๋ฃฉ์Šค ์ปค๋ฆฌ(Haskell Brooks Curry)์˜ ์„ฑ(Family Name)์ž…๋‹ˆ๋‹ค.

์ปค๋ง์€ ํ•˜๋‚˜ ์ด์ƒ์˜ ๋งค๊ฐœ๋ณ€์ˆ˜(Parameter)๋ฅผ ๊ฐ–๋Š” ํ•จ์ˆ˜๋ฅผ ๋ถ€๋ถ„์ ์œผ๋กœ ๋‚˜๋ˆ„์–ด ๊ฐ๊ฐ ๋‹จ์ผ ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ๊ฐ–๋Š” ํ•จ์ˆ˜๋กœ ์„ค์ •ํ•˜๋Š” ๊ธฐ๋ฒ•์ž…๋‹ˆ๋‹ค.

์‹์œผ๋กœ ์„ค๋ช…ํ•˜๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

func(a, b, c) -> f(a)(b)(c)

์œ„ ์‹์„ ์ฝ”๋“œ๋กœ ๋ณ€๊ฒฝํ•˜๋ฉด ํ•จ์ˆ˜๋ฅผ ๋ฆฌํ„ดํ•˜๋ฉด์„œ ๋‹ค์Œ ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ๋ฐ›์•„ ๋˜ ํ•จ์ˆ˜๋ฅผ ๋ฆฌํ„ดํ•ฉ๋‹ˆ๋‹ค.

//non-curried
function plusFunc(a, b, c){
  console.log(a + b + c);
}

plusFunc(1, 2, 3);   // 6

//curried
function plusFunc(a){
    return function(b){
       return function(c){
          console.log(a + b + c);
       }
    }
}

plusFunc(1)(2)(4);  // 7

๋…ผ์ปค๋ฆฌ์™€ ์ปค๋ฆฌ์˜ ์ฐจ์ด๋ฅผ ํ™•์ธํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

non-curried : ํ•จ์ˆ˜ ์‹คํ–‰ ์‹œ ํŒŒ๋ผ๋ฏธํ„ฐ๊ฐ€ ๋ชจ์ž๋ผ๋„ ๋ฌธ์ œ ์—†์ด ์‹คํ–‰์ด ๊ฐ€๋Šฅํ•จ
๐Ÿ‘‰ ํ•จ์ˆ˜ ์ •์˜ : func(a, b, c)
๐Ÿ‘‰ ํ•จ์ˆ˜ ์‹คํ–‰ : func(a)
๐Ÿ‘‰ ์‹คํ–‰ ๊ฒฐ๊ณผ : func(a, undefined, undefined)

curried : ํ•จ์ˆ˜๊ฐ€ ์ธ์ˆ˜๋ฅผ ์ „๋ถ€ ๋ฐ›์„ ๋•Œ๊นŒ์ง€ ์‹คํ–‰์„ ๋ณด๋ฅ˜ํ•จ.
๐Ÿ‘‰ ํ•จ์ˆ˜ ์ •์˜ : func(a, b, c)
๐Ÿ‘‰ ํ•จ์ˆ˜ ์‹คํ–‰ : func(a)
๐Ÿ‘‰ ์‹คํ–‰ ๊ฒฐ๊ณผ : func(a)์ƒํƒœ์—์„œ b ํ•จ์ˆ˜ ์ž…๋ ฅ ๋Œ€๊ธฐ

์œ„ ํŠน์ง•์— ๋”ฐ๋ผ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

function setAppell(appell){
    return function(name) {
       console.log(appell + name);   
    }
}

const setName = setAppell('Mr.');
setName('Right');  // Mr.Right
setAppell('Mr.')('Baker'); //Mr.Baker

//ES6 ํ™”์‚ดํ‘œ ํ•จ์ˆ˜
const setAppell = appell => name => console.log(appell + name);

const setName = setAppell('Miss.');
setName('Dior');  // Miss.Dior

๋˜ํ•œ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ด๋ฒคํŠธ์™€ ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ๋™์‹œ์— ์ „๋‹ฌํ•  ๋•Œ๋„ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค.

const setNumber = (num) => (event) => {
     console.log(event.target.id+':'+num);
}

<div onClick="setNumber(2)(event)" id='myNum'>
  click
</div>

// myNum:2

๊ทธ๋Ÿผ ์ปค๋ง์˜ ์žฅ์ ์„ ์š”์•ฝํ•˜๋ฉด ๋ฌด์—‡์ด ์žˆ์„๊นŒ์š”?

์žฅ์ ๐Ÿ‘
์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅ
– ์ƒ์‚ฐ์„ฑ ํ–ฅ์ƒ(์ฝ”๋“œ ์–‘ ๊ฐ์†Œ)
– ๊ฐ€๋…์„ฑ ํ–ฅ์ƒ

๊ทธ๋ ‡๋‹ค๋ฉด ์ปค๋ง์˜ ๋‹จ์ ์€ ๋ฌด์—‡์ผ๊นŒ์š”?

๋‹จ์ ๐Ÿ‘Ž
– ํ•จ์ˆ˜๊ฐ€ ๊นŠ์ด ๊นŠ์ด ์ค‘์ฒฉ๋˜๋ฉด ๋ฉ”๋ชจ๋ฆฌ๋ฅผ ๊ณผ๋‹คํ•˜๊ฒŒ ์ ์œ ํ•  ๊ฐ€๋Šฅ์„ฑ์ด ์žˆ๋Š” ๊ฒƒ๊ณผ ๊ฐ™์€ ๋งฅ๋ฝ์—์„œ ์ปค๋ง์„ ๊ณผ์šฉํ•˜๋ฉด
๋ฉ”๋ชจ๋ฆฌ์™€ ์†๋„์— ๋ฌธ์ œ์  ๋ฐœ์ƒ ๊ฐ€๋Šฅ์„ฑ์ด ์žˆ์Œ

์ปค๋ง์˜ ์ˆ˜ํ•™์ ์ธ ์„ค๋ช…์ด ํ•„์š”ํ•˜์‹  ๋ถ„์„ ์œ„ํ•œ ๋งํฌ



์ปค๋ง์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š์•„๋„ ์›ํ•˜๋Š” ๊ธฐ๋Šฅ์„ ๋Œ€๋ถ€๋ถ„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์ง€๋งŒ ์žฌ์‚ฌ์šฉ์„ฑ์ด๋‚˜ ๊ฐ€๋…์„ฑ์— ๋”ฐ๋ฅธ ์ƒ์‚ฐ์„ฑ ํ–ฅ์ƒ์„ ์œ„ํ•ด ์ปค๋ง์„ ์‚ฌ์šฉํ•˜๋ฉด ์ข‹์€ ํšจ๊ณผ๋ฅผ ๊ธฐ๋Œ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ปค๋ง์„ ์ง์ ‘ ๊ตฌํ˜„ํ•˜์ง€ ์•Š๋”๋ผ๋„ ์ปค๋ง์˜ ๊ฐœ๋…๊ณผ ์‚ฌ์šฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋‘๋ฉด ๋‹ค๋ฅธ ์‚ฌ๋žŒ์˜ ์ฝ”๋“œ๋ฅผ ์ฝ๊ฑฐ๋‚˜ ๋กœ์ง์„ ์ดํ•ดํ•˜๋Š”๋ฐ ํฐ ๋„์›€์ด ๋  ๊ฒƒ์ด๋ผ ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

target๊ณผ currentTarget, ์ฐจ์ด๊ฐ€ ๋ญ˜๊นŒ?(feat.์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ)

target๊ณผ currentTarget์„ ์ƒํ™ฉ์— ๋งž๊ฒŒ ์ฒ˜๋ฆฌํ•˜๊ธฐ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ์ด๋ฒคํŠธ๋ฅผ ๋‹ค๋ฃฐ ๋•Œ target๊ณผ currentTarget์˜ ํ”„๋กœํผํ‹ฐ๋ฅผ ์‚ฌ์šฉํ•ด ์š”์†Œ์— ์ ‘๊ทผ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

๊ทธ๋Ÿผ target๊ณผ currentTarget์˜ ์ฐจ์ด๋Š” ๋ฌด์—‡์ผ๊นŒ์š”?

1. target๊ณผ currentTarget

๊ฐ„๋‹จํ•˜๊ฒŒ ์„ค๋ช…ํ•˜๋ฉด target์€ ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•œ ๋ฐ”๋กœ ๊ทธ ์š”์†Œ๋ฅผ ์ง์ ‘ ๊ฐ€๋ฆฌํ‚ค๊ณ  currentTarget์€ ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ(EventListener)๋ฅผ ๊ฐ€์ง„ ์š”์†Œ๋ฅผ ๊ฐ€๋ฆฌํ‚ต๋‹ˆ๋‹ค.

‘๋ฐฑ๋ฌธ๋ถˆ์—ฌ์ผ์ฝ”๋“œ(็™พ่ž๏ฅงๅฆ‚ไธ€code)’์ด๋ฏ€๋กœ ์ฝ”๋“œ๋ฅผ ํ†ตํ•ด ๋ฌด์—‡์„ ์˜๋ฏธํ•˜๋Š”์ง€ ํ™•์ธํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

<style>
  .upper{
    background:gold;
    width:80px;
    text-align:center;
  } 
  .lower{
    background:pink;
    width:50px;
  }
</style>

<script>
  function clicked(event){
    alert(event.target.id+" clicked");
  }
</script>

<div class="upper" onClick="clicked(event)" id="div">
  <span class="lower" id="span">                  
    span
  </span>
</div>

์œ„์˜ ์ฝ”๋“œ๋ฅผ ํ†ตํ•ด ๊ฐ๊ฐ์ด ์˜๋ฏธํ•˜๋Š” ๋ฐ”๋ฅผ ํ™•์ธํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

๋จผ์ € ์œ„ ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•˜๋ฉด ๋‹ค์Œ ๊ทธ๋ฆผ๊ณผ ๊ฐ™์€ ๊ฒฐ๊ณผ๊ฐ€ ๋‚˜ํƒ€๋‚ฉ๋‹ˆ๋‹ค.

์—ฌ๊ธฐ์„œ ๋…ธ๋ž‘์€ div, ํ•‘ํฌ๋Š” span์ด๋ฉฐ, ํ•‘ํฌ๊ฐ€ ๋…ธ๋ž€์ƒ‰ ์œ„์— ์•‰์•„์žˆ๋Š” ๊ฒƒ์ด๋ผ๊ณ  ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋Ÿฐ๋ฐ onClick ์ด๋ฒคํŠธ๋Š” div์—์„œ ์„ค์ •ํ–ˆ์ง€๋งŒ ๋…ธ๋ž‘์„ ๋ˆŒ๋Ÿฌ๋„, ํ•‘ํฌ๋ฅผ ๋ˆŒ๋Ÿฌ๋„ ๋ชจ๋‘ ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

div์—๋งŒ ์ด๋ฒคํŠธ๋ฅผ ์„ค์ •ํ–ˆ๋Š”๋ฐ ์™œ ์ž์‹์ธ span๋„ ์ด๋ฒคํŠธ๋ฅผ ์ƒ์† ๋ฐ›๋Š” ๊ฒƒ์ผ๊นŒ์š”?

์ด๋Š” ์ด๋ฒคํŠธ ๋ฒ„๋ธ”๋ง๊ณผ ์ด๋ฒคํŠธ ์บก์ณ์™€ ๊ด€๋ จ์ด ์žˆ์œผ๋ฉฐ, ๊ด€๋ จ ๋‚ด์šฉ์€ ์•„๋ž˜ ํฌ์ŠคํŠธ์—์„œ ํ™•์ธํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

์ด๋ฒคํŠธ ๋ฒ„๋ธ”๋ง๊ณผ ์ด๋ฒคํŠธ ์บก์ณ ํฌ์ŠคํŠธ

์ด๋ฒคํŠธ ๋ฐœ์ƒ์— ๋”ฐ๋ฅธ target์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

– ํ•‘ํฌ ๋ถ€๋ถ„์„ ํด๋ฆญ
target -> ํ•‘ํฌ (ํ•‘ํฌ๋ฅผ ๋ˆŒ๋ €์œผ๋ฏ€๋กœ ํ•‘ํฌ๊ฐ€ ์ด๋ฒคํŠธ ๋ฐœ์ƒ ์‹œ์ ์ด ๋จ)
currentTarget -> ๋…ธ๋ž‘ (onClick ์ด๋ฒคํŠธ๋Š” ๋…ธ๋ž‘์ด ๊ฐ–๊ณ  ์žˆ์Œ)

๋…ธ๋ž€ ๋ถ€๋ถ„์„ ํด๋ฆญ
target -> ๋…ธ๋ž‘(๋…ธ๋ž‘์„ ๋ˆŒ๋ €์œผ๋ฏ€๋กœ ๋…ธ๋ž‘์ด ์ด๋ฒคํŠธ ๋ฐœ์ƒ ์‹œ์ ์ด ๋จ)
currentTarget -> ๋…ธ๋ž‘(onClick ์ด๋ฒคํŠธ๋Š” ๋…ธ๋ž‘์ด ๊ฐ–๊ณ  ์žˆ์Œ)

๋”ฐ๋ผ์„œ ๋…ธ๋ž‘์„ ๋ˆ„๋ฅด๋ฉด ‘div clicked’, ํ•‘ํฌ๋ฅผ ๋ˆ„๋ฅด๋ฉด ‘span clicked’ ์•Œ๋ฆผ์ฐฝ์„ ๋„์›๋‹ˆ๋‹ค.

๋งŒ์•ฝ ํ•‘ํฌ๋ฅผ ๋ˆŒ๋Ÿฌ๋„ ์ด๋ฒคํŠธ๋ฅผ ๊ฐ€์ง„ ๋…ธ๋ž‘์˜ ์†์„ฑ์— ์ ‘๊ทผํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด currentTarget๊ณผ getAttribute๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

<style>
  .upper{
    background:gold;
    width:80px;
    text-align:center;
  } 
  .lower{
    background:pink;
    width:50px;
  }
</style>

<script>
  function clicked(event){
    alert(event.currentTarget.getAttribute('id')+" clicked");
  }
</script>

<div class="upper" onClick="clicked(event)" id="div">
  <span class="lower" id="span">                  
    span
  </span>
</div>

์œ„ ์ฝ”๋“œ๋Š” ํ•‘ํฌ, ๋…ธ๋ž‘ ๋‘˜ ๋‹ค ์ด๋ฒคํŠธ๋ฅผ ๊ฐ€์ง„ ๋…ธ๋ž‘ ์†์„ฑ์—๋งŒ ์ ‘๊ทผํ•ฉ๋‹ˆ๋‹ค.

target์€ ๋ˆ„๋ฅธ ๋ฐ”๋กœ ๊ทธ ๊ฒƒ, currentTarget์€ ์ด๋ฒคํŠธ๋ฅผ ์‹คํ–‰ํ•˜๋Š” ๋ฐ”๋กœ ๊ทธ ๊ฒƒ์œผ๋กœ ์ดํ•ดํ•˜๋ฉด ๋  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.



target๊ณผ currentTarget๋Š”์ด๋ฒคํŠธํ•ธ๋“ค๋ง๊ณผ ์ด๋ฒคํŠธ ์บก์ณ์™€ ํ•จ๊ป˜ ์ด๋ฒคํŠธ ๋ฐœ์ƒ ๊ด€๋ จํ•˜์—ฌ ์ค‘์š”ํ•œ ์†์„ฑ๊ณผ ๊ฐœ๋…์ž…๋‹ˆ๋‹ค.

๋ฐฑ๋ฌธ๋ถˆ์—ฌ์ผ์ฝ”๋“œ(code)์ด๋ฏ€๋กœ ์ฝ”๋“œ๋ฅผ ํ†ตํ•ด ํ™•์ธํ•˜๊ณ  ์—ฐ์Šตํ•˜๋Š” ์Šต๊ด€์„ ๊ธฐ๋ฅด๋ฉด ์–ด์ œ์˜ ์ •๋ณด๊ฐ€ ๋‚ด์ผ์˜ ๋‚˜์˜ ๋ฌด๊ธฐ๊ฐ€ ๋  ์ˆ˜ ์žˆ์„ ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

์ด๋ฒคํŠธ ๋ฒ„๋ธ”๋ง๊ณผ ์ด๋ฒคํŠธ ์บก์ณ, ์ด์ œ๋Š” ๋‚ด ๊ฒƒ์œผ๋กœ ๋งŒ๋“ค์ž(์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ)

์ด๋ฒคํŠธ๋ฒ„๋ธ”๋ง๊ณผ ์ด๋ฒคํŠธ์บก์ณ, ๊ฐœ๋…๊ณผ ํ™œ์šฉ

1. ์ด๋ฒคํŠธ ๋ฒ„๋ธ”๋ง

(์ด๋ฒคํŠธ ๋ฒ„๋ธ”๋ง์€ ๊ฑฐํ’ˆ์ด ํํํํ ์ผ์–ด๋‚˜๋“ฏ์ด ์ด๋ฒคํŠธ๊ฐ€ ํํํํ ์ผ์–ด๋‚˜ ‘๋ฒ„๋ธ”๋ง(Bubbling)’์ด๋ผ๋Š” ์ด๋ฆ„์„ ๊ฐ–๊ฒŒ ๋˜์—ˆ๋‹ค๋Š” ๊ธ€์„ ์–ด๋””์„ ๊ฐ€ ๋ณธ ์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค..)

์ด๋ฒคํŠธ ๋ฒ„๋ธ”๋ง์€ ์ด๋ฒคํŠธ ๋ฐœ์ƒ ์š”์†Œ์—์„œ๋ถ€ํ„ฐ ์ˆœ์„œ๋Œ€๋กœ ์ตœ์ƒ์œ„ ๋ถ€๋ชจ ์š”์†Œ๊นŒ์ง€ ํํํํ ์ด๋ฒคํŠธ๊ฐ€ ์—ฐ๋‹ฌ์•„ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

๋™์ž‘์„ ํ™•์ธํ•˜๊ธฐ ์œ„ํ•ด ๋‹ค์Œ ์ฝ”๋“œ์˜ ๊ฒฐ๊ณผ๋ฅผ ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

<style>
  .upper{
    background:gold;
    width:70px;
    text-align:center;
  } 
  .middle{
    background:orange;
    width:50px;
    text-align:center;
  }
  .lower{
    background:pink;
    width:30px;
  }
</style>

<script>
  function clicked(event){
    alert(event.currentTarget.getAttribute('id'));
  }
</script>

<div class="upper" onClick="clicked(event)" id="์Œ‰">a
  <div class="middle" onClick="clicked(event)" id="๊ฐ€">b
    <div class="lower" onClick="clicked(event)" id="๋Šฅ">c
    </div>
  </div>
  
</div>

์œ„ ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•˜๋ฉด ๋‹ค์Œ ๊ทธ๋ฆผ๊ณผ ๊ฐ™์€ ๊ฒฐ๊ณผ๊ฐ€ ๋‚˜์˜ต๋‹ˆ๋‹ค.

์—ฌ๊ธฐ์„œ ๊ฐ€์žฅ ๋‚ด๋ถ€์— ์ž๋ฆฌ ์žก๊ณ  ์žˆ๋Š” c๋ฅผ ํด๋ฆญํ•˜๋ฉด ์–ด๋–ค ์ˆœ์„œ๋Œ€๋กœ ์ด๋ฒคํŠธ๊ฐ€ ์‹คํ–‰๋ ๊นŒ์š”?

์ด๋ฒคํŠธ ๋ฒ„๋ธ”๋ง์ด default๋กœ ์„ค์ •๋˜์–ด ์žˆ์œผ๋ฏ€๋กœ c, b, a์˜ ์ˆœ์„œ๋Œ€๋กœ ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋ฏ€๋กœ ์œ„ ์ฝ”๋“œ๋ผ๋ฉด ‘๋Šฅ’ -> ‘๊ฐ€’ -> ‘์Œ‰’ ์˜ ์ˆœ์„œ๋Œ€๋กœ ์•Œ๋ฆผ์ฐฝ์ด ๋œน๋‹ˆ๋‹ค.

b๋ฅผ ํด๋ฆญํ•˜๋ฉด ‘๊ฐ€’ -> ‘์Œ‰’ ์˜ ์ˆœ์„œ๋กœ ์•Œ๋ฆผ์ฐฝ์ด ๋œน๋‹ˆ๋‹ค.

๊ทธ๋ ‡๋‹ค๋ฉด ์ˆœ์„œ๋ฅผ ‘์Œ‰’ -> ‘๊ฐ€’ -> ‘๋Šฅ’ ์œผ๋กœ ๋งŒ๋“ค๋ ค๋ฉด ์–ด๋–ป๊ฒŒ ํ•ด์•ผ ํ• ๊นŒ์š”? ๋ฐ”๋กœ ์ด๋ฒคํŠธ ์บก์ณ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

2. ์ด๋ฒคํŠธ ์บก์ณ

์ด๋ฒคํŠธ ์บก์ณ๋ฅผ ์‚ฌ์šฉํ•˜๋ ค๋ฉด addEventListener ๋‚ด๋ถ€์— capture ๊ฐ’์„ ๋ช…์‹œ์ ์œผ๋กœ true๋กœ ๋ณ€๊ฒฝํ•ด์ค˜์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๊ธฐ๋ณธ๊ฐ’์€ false์ด๋ฉฐ, false๋Š” ์ด๋ฒคํŠธ ๋ฒ„๋ธ”๋ง, true๋Š” ์ด๋ฒคํŠธ ์บก์ณ๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

function clicked(event){
    alert(event.currentTarget.getAttribute('id'));
}

const divs = document.querySelectorAll('div');
divs.forEach(function(div) {
	div.addEventListener('click', clicked,{
  	capture:true
  }
  );
});  

<div class="upper" id="์Œ‰">a
  <div class="middle" id="๊ฐ€">b
    <div class="lower" id="๋Šฅ">c
    </div>
  </div>
</div>

์œ„ ์ฝ”๋“œ์—์„œ capture:true๋กœ ์„ค์ •ํ•ด์ฃผ๊ณ  ๋‹ค์‹œ c๋ฅผ ํด๋ฆญํ•˜๋ฉด ์ด๋ฒˆ์—๋Š” ๋ฐ˜๋Œ€ ์ˆœ์„œ์ธ ์œ„์—์„œ ์•„๋ž˜๋กœ ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

์ด์ œ๋Š” ‘์Œ‰’ -> ‘๊ฐ€’ -> ‘๋Šฅ’ ์˜ ์ˆœ์„œ๋กœ ์•Œ๋ฆผ์ด ๋œน๋‹ˆ๋‹ค.

๊ทธ๋ ‡๋‹ค๋ฉด ‘์ด๋ฒคํŠธ ๋ฒ„๋ธ”๋ง๋„ ์‹ซ๊ณ , ์ด๋ฒคํŠธ ์บก์ณ๋„ ์‹ซ์œผ๋‹ˆ ๋‘˜ ๋‹ค ํ•˜์ง€๋งˆ!’๋ผ๊ณ  ๋ช…๋ นํ•  ๋•Œ๋Š” ์–ด๋–ป๊ฒŒ ํ•ด์•ผ ํ• ๊นŒ์š”?

๊ฐ„๋‹จํ•˜๊ฒŒ ์ด๋ฒคํŠธ์™€ ํ•จ๊ป˜ ์‹คํ–‰๋  ํ•จ์ˆ˜ ๋‚ด๋ถ€์— event.stopPropagation()์„ ๋„ฃ์–ด์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

ํ”„๋กœํŒŒ๊ฐ„๋‹ค(propaganda)๋ฅผ ๋‹ฎ์€ ๊ทธ ๋‹จ์–ด ‘propagation’์€ ‘๋ฒˆ์‹, ์ฆ์‹, ์ „ํŒŒ’๋“ฑ์˜ ์˜๋ฏธ๋ฅผ ๊ฐ–๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

๋”ฐ๋ผ์„œ ‘์ด๋ฒคํŠธ์˜ ์ฆ์‹ ๋˜๋Š” ์ „ํŒŒ๋ฅผ ๋ฉˆ์ถ”๊ฒ ๋‹ค’๋Š” ์˜๋ฏธ๋กœ event.stopPropagation() ๋ฉ”์†Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

<style>
  .upper{
    background:gold;
    width:70px;
    text-align:center;
  } 
  .middle{
    background:orange;
    width:50px;
    text-align:center;
  }
  .lower{
    background:pink;
    width:30px;
  }
</style>

<script>
  function clicked(event){
    event.stopPropagation();
    alert(event.currentTarget.getAttribute('id'));
  }
</script>

<div class="upper" onClick="clicked(event)" id="์Œ‰">a
  <div class="middle" onClick="clicked(event)" id="๊ฐ€">b
    <div class="lower" onClick="clicked(event)" id="๋Šฅ">c
    </div>
  </div>
  
</div>

์œ„ ๋ฉ”์„œ๋“œ๋Š” ๋” ์ด์ƒ ‘์Œ‰ ๊ฐ€ ๋Šฅ’ ๋˜๋Š” ‘๋Šฅ ๊ฐ€ ์Œ‰’ ๋”ฐ์œ„์˜ ๋‹จ์–ด๋ฅผ ์™„์„ฑํ•˜๋„๋ก ๋‚ด๋ฒ„๋ ค๋‘์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

c๋ฅผ ๋ˆŒ๋Ÿฌ๋„ ‘์Œ‰’ ๋˜๋Š” ‘๋Šฅ’๋งŒ ๋„์šธ ๋ฟ์ž…๋‹ˆ๋‹ค.



์ด๋ฒคํŠธํ•ธ๋“ค๋ง๊ณผ ์ด๋ฒคํŠธ ์บก์ณ๋Š” ์˜๋„ํ•œ ๋Œ€๋กœ ์ด๋ฒคํŠธ๋ฅผ ๋ฐœ์ƒ์‹œํ‚ค๊ธฐ ์œ„ํ•œ ์ค‘์š”ํ•œ ์†์„ฑ๊ณผ ๊ฐœ๋…์ž…๋‹ˆ๋‹ค.

์œ„ ๊ฐœ๋…์€ ๋‹ค์Œ ํฌ์ŠคํŠธ์™€ ๊ด€๋ จ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

target, currentTarget ์ฐจ์ด๊ฐ€ ๋ญ˜๊นŒ?

๋ฐฑ๋ฌธ๋ถˆ์—ฌ์ผ์ฝ”๋“œ(code)์ด๋ฏ€๋กœ ์ฝ”๋“œ๋ฅผ ํ†ตํ•ด ํ™•์ธํ•˜๊ณ  ์—ฐ์Šตํ•˜๋Š” ์Šต๊ด€์„ ๊ธฐ๋ฅด๋ฉด ์–ด์ œ์˜ ์ •๋ณด๊ฐ€ ๋‚ด์ผ ๋‚˜์˜ ๋ฌด๊ธฐ๊ฐ€ ๋  ์ˆ˜ ์žˆ์„ ๊ฒƒ์ด๋ผ ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

ใ‚ธใƒฃใƒใ‚นใ‚ฏใƒชใƒ—ใƒˆใง้…ๅˆ—ใ‚’็ตๅˆ(ใƒžใƒผใ‚ธ)ใ™ใ‚‹่‰ฏใ„ๆ–นๆณ•(javascript)

้…ๅˆ—ใ‚’็ตๅˆใ™ใ‚‹ไพฟๅˆฉใชไธ‰ใคใฎใ‚„ใ‚Šๆ–น(concat(), โ€ฆspread, push())

ใ‚ธใƒฃใƒใ‚นใ‚ฏใƒชใƒ—ใƒˆใ‚’ไฝฟใฃใฆใƒ‡ใƒผใ‚ฟใ‚’ๆ‰ฑใ†ใ“ใจใŒๅคšใใชใ‚Šใ€้…ๅˆ—ใ‚’ไฝฟ็”จใ™ใ‚‹ไป•็ต„ใฟใ‚‚ๅข—ใˆใฆใ„ใใพใ™ใ€‚

ใใฎไธญใ€ใƒžใƒผใ‚ธ๏ผˆ็ตๅˆ๏ผ‰ใซใคใ„ใฆใกใ‚‰ใฃใจ่ชฟในใฆใฟใพใ™ใญใ€‚


้…ๅˆ—(array)ใฏใ‚คใƒณใƒ‡ใƒƒใ‚ฏใ‚นใ‚’ๆŒใค่ฆ็ด ใ‚’้ †ใซไธฆในใ‚‹ๆง‹้€ ใงใ™ใ€‚

ไธ€ใคใฎ้…ๅˆ—ใชใ‚‰ใ‚คใƒณใƒ‡ใƒƒใ‚ฏใ‚นใพใŸใฏใƒกใ‚ฝใƒƒใƒ‰๏ผˆunshift(), push(), shift(), pop(), splice(), find(), includes(), join(), indexOf()ใชใฉ๏ผ‰ใ‚’ไฝฟใฃใฆ้…ๅˆ—ไธญใฎใƒ‡ใƒผใ‚ฟใ‚’ไพฟๅˆฉใซๆ“ไฝœใ™ใ‚‹ใ“ใจใŒใงใใพใ™ใ€‚

้…ๅˆ—้–“ใฎใƒžใƒผใ‚ธๆ–นๆณ•ใ‚‚ๅŒใ˜ใconcat(), push(), …spreadใชใฉใŒๅญ˜ๅœจใ—ใพใ™ใ€‚

ไธ€ใคใฅใค็ขบ่ชใ—ใฆใฟใพใ™ใ€‚

1. ้…ๅˆ—็ตๅˆใฎไธ‰ใคๆ–นๆณ•

concatenate(้€ฃ็ตใ™ใ‚‹ๆ„ๅ‘ณ)ใฎ็•ฅๅญ—ใงใ‚ใ‚‹concat()ใฏๆ„ๅ‘ณ้€šใ‚Š้…ๅˆ—ไธกๆ–นใ‚’็น‹ใŽใพใ™ใ€‚

ๆฌกใฎใ‚ˆใ†ใซๆ‰ฑใ†ใฎใงใ€ใ‚ตใƒณใƒ—ใƒซใ‹ใ‚‰็ขบ่ชใ—ใฆใฟใพใ™ใ€‚

  • [array1].concat([array2]…..)
  • [].concat([array1], [array2]……)
  • const color1 = ['blue', 'pink', 'white'];
    const color2 = ['black', 'orange', 'yellow'];
    const num1 = [100, 200, 300];
    const num2 = [400, 500, [600, 700]];
    
    const allColor = color1.concat(color2); 
    //['blue', 'pink', 'white', 'black', 'orange', 'yellow']
    console.log(allColor); 
    
    const colorPlus = color1.concat('gold', ['silver', 'bronze']); 
    //['blue', 'pink', 'white', 'gold', 'silver', 'bronze']
    console.log(colorPlus);
    
    const colorAndNum = color1.concat(num1);   
    //['blue', 'pink', 'white', 100, 200, 300]
    console.log(colorAndNum); 
    
    const allNum = num1.concat(num2);   
    //[100, 200, 300, 400, 500, [600, 700]]
    console.log(allNum); 
    

    concatใฏไธ€ใคไปฅไธŠใฎ้…ๅˆ—ใ‚’็ตๅˆใ—ใ€ไธ€ใคใฎ้…ๅˆ—ใซใ—ใพใ™ใ€‚

    ้…ๅˆ—ไธญใฎใƒ‡ใƒผใ‚ฟใฎๅฝขๅผ๏ผˆใ‚ฟใ‚คใƒ—๏ผ‰ใซใ‹ใ‹ใ‚ใ‚‰ใš็ตๅˆใงใใ‚‹ใ—ใ€ใƒใ‚นใƒˆใ•ใ‚Œใฆใ„ใ‚‹้…ๅˆ—๏ผˆ้…ๅˆ—ไธญใซใพใŸ้…ๅˆ—ใŒใ‚ใ‚‹ๆง‹้€ ๏ผ‰ใฎ็ตๅˆใ‚‚ใงใใพใ™ใ€‚


    ES6ใ‹ใ‚‰่ฟฝๅŠ ใ•ใ‚ŒใŸๆ–‡ๆณ•ใฎไธ€ใคใงใ‚ใ‚‹ใ‚นใƒ—ใƒฌใƒƒใƒ‰ๆง‹ๆ–‡ใฏ้…ๅˆ—ๆˆ–ใฏใ‚ชใƒ–ใ‚ธใ‚งใ‚ฏใƒˆใ‚’้€Ÿใใฆๅฎ‰ๅ…จใซใ‚ณใƒ”ใƒผใ™ใ‚‹ใ“ใจใŒใงใใพใ™ใ€‚

    ๆทฑใ„ใ‚ณใƒ”ใƒผ(deep copy)ๆ–นๆณ•ใงใ‚ณใƒ”ใƒผใ™ใ‚‹ใฎใงใ€ๆ—ขๅญ˜ใฎใƒ‡ใƒผใ‚ฟใจใฏ้•ใ†ใƒกใƒขใƒชใƒผใ‚ขใƒ‰ใƒฌใ‚นใ‚’ไฝฟใ„ใพใ™ใญใ€‚

    ใชใฎใง้…ๅˆ—ใฎ็ตๅˆๆ–นๆณ•ใฎไธญใงใฏไธ€็•ชใ„ใ„ๆ–นๆณ•ใ ใจ่จ€ใˆใพใ™ใ€‚

    const musician = ['Chet Baker', 'Miles Davis'];
    const actor = ['Clint Eastwood', 'George Clooney'];
    
    const favorites = [...musician, ...actor];    
    // ['Chet Baker', 'Miles Davis', 'Clint Eastwood', 'George Clooney'];
    console.log(favorites); 
    
    const favoritesReverse = [...actor, ...musician];
    // ['Clint Eastwood', 'George Clooney', 'Chet Baker', 'Miles Davis'];
    console.log(favoritesReverse)
    
    

    ใพใŸใ€ใ‚นใƒ—ใƒฌใƒƒใƒ‰ๆง‹ๆ–‡ใฏๆฌกใฎใ‚ˆใ†ใซ้žๆง‹้€ ๅŒ–ใงใฏใ‚ˆใใคใ‹ใ‚ใ‚Œใฆใ„ใพใ™ใ€‚

    const myColor = ['beige', 'burgundy', 'charcoal', 'ivory'];
    
    const [color1, color2, ...others  ] = myColor;
    console.log(color1);   // 'beige'
    console.log(color2);   // 'burgundy'
    console.log(others);   // ['charcoal', 'ivory']

    push()ใฏ้…ๅˆ—ใฎๆœ€ๅพŒใซ่ฆ็ด ใ‚’่ฟฝๅŠ ใ™ใ‚‹ใจใใ‚ˆใไฝฟใ†ใƒกใ‚ฝใƒƒใƒ‰ใงใ™ใ€‚

    push()ใƒกใ‚ฝใƒƒใƒ‰ใจใ‚นใƒ—ใƒฌใƒƒใƒ‰ๆง‹ๆ–‡ใ‚’ไธ€็ท’ใซไฝฟใ†ใจ้…ๅˆ—ใฎ็ตๅˆใŒใงใใพใ™ใ€‚

    ใงใ‚‚ใ“ใฎๆ–นๆณ•ใฏๆ—ขๅญ˜ใƒ‡ใƒผใ‚ฟใฎไธŠใซๆ–ฐใ—ใ„ใƒ‡ใƒผใ‚ฟใ‚’ไธŠๆ›ธใใ™ใ‚‹ใฎใงๆ—ขๅญ˜ใƒ‡ใƒผใ‚ฟใฎๅค‰ๆ›ดใซๆณจๆ„ใ™ใ‚‹ๅฟ…่ฆใŒใ‚ใ‚Šใพใ™ใ€‚

    const pizza = ['dough', 'cheese', 'meat', 'source'];
    const pizzaAdd = ['parmesan', 'tabasco'];
    
    pizza.push(...pizzaAdd);   
    
    // ['dough', 'cheese', 'meat', 'source', 'parmesan', 'tabasco'];
    console.log(pizza); 
    

    2. ็ทๅˆ

    ้…ๅˆ—ใ‚’็ตๅˆใ™ใ‚‹ๆ–นๆณ•ใฎไธญconcat(), …spread, push()ใซใคใ„ใฆ่ชฟในใฆใฟใพใ—ใŸใ€‚

    ็Šถๆณใซใ‚ˆใ‚Šๅฟ…่ฆใชๆ–นๆณ•ใŒ้•ใ†ใฎใงใ€ใ‚ทใ‚นใƒ†ใƒ ใ‚„ใƒญใ‚ธใƒƒใ‚ฏใ‚’่€ƒใˆใŸไธŠใง้ธใ‚“ใ ใ‚‰ๅ•้กŒใฏใชใ„ใจๆ€ใ„ใพใ™ใ€‚

    ใ‚ใ–ใƒผใ™๏ผ

    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ, ํŽธ๋ฆฌํ•œ ๋ฐฐ์—ด ๋ณ‘ํ•ฉ ๋ฐฉ๋ฒ•(Merge Arrays in Javascript)

    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋ฐฐ์—ด ๋ณ‘ํ•ฉ ๋ฐฉ๋ฒ•(concat(), …spread, push())

    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•ด ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ค๋ฃจ๋Š” ์ผ์ด ์ ์  ๋” ๋งŽ์•„์ง€๊ณ , ๋ฐฐ์—ด์„ ์‚ฌ์šฉํ•˜๋Š” ๊ด€๋ จ ์ž‘์—…์„ ๋งŽ์ด ํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

    ๊ทธ ์ค‘์—์„œ๋„ ๋ณ‘ํ•ฉ๊ณผ ๊ด€๋ จ๋œ ๋ถ€๋ถ„์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.


    ๋ฐฐ์—ด์€ ์ธ๋ฑ์Šค(Index)๋ฅผ ๊ฐ–๋Š” ์š”์†Œ๋ฅผ ์ˆœ์„œ๋Œ€๋กœ ๋‚˜ํƒ€๋‚ธ ๋ฐ์ดํ„ฐ ๊ตฌ์กฐ์ž…๋‹ˆ๋‹ค.

    ํ•˜๋‚˜์˜ ๋ฐฐ์—ด์ด๋ผ๋ฉด ์ธ๋ฑ์Šค ๋˜๋Š” ๋ฉ”์†Œ๋“œ(unshift(), push(), shift(), pop(), splice(), find(), includes(), join(), indexOf() ๋“ฑ)๋ฅผ ์‚ฌ์šฉํ•ด ๋ฐฐ์—ด ๋‚ด๋ถ€์˜ ๋ฐ์ดํ„ฐ๋ฅผ ์‰ฝ๊ฒŒ ๋‹ค๋ฃฐ ์ˆ˜ ์žˆ์ฃ .

    ๋ฐฐ์—ด์˜ ๋ณ‘ํ•ฉ(Merge) ๋˜ํ•œ ๋งˆ์ฐฌ๊ฐ€์ง€์ž…๋‹ˆ๋‹ค.

    concat(), push(), ์Šคํ”„๋ ˆ๋“œ ์—ฐ์‚ฐ์ž(…spread), ๋“ฑ ๋ฐฐ์—ด์˜ ๋ณ‘ํ•ฉ์„ ์œ„ํ•œ ์—ฌ๋Ÿฌ ๋ฐฉ๋ฒ•์ด ์กด์žฌํ•ฉ๋‹ˆ๋‹ค.

    ํ•˜๋‚˜์”ฉ ํ™•์ธํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

    1. ๋ฐฐ์—ด ๋ณ‘ํ•ฉ์˜ 3๊ฐ€์ง€ ๋ฐฉ๋ฒ•

    concatenate(์—ฐ๊ฒฐ์‹œํ‚ค๋‹ค, ์‚ฌ์Šฌ๊ฐ™์ด ์ž‡๋‹ค)์˜ ์•ฝ์ž์ธ concat()์€ ๋ง ๊ทธ๋Œ€๋กœ ๋‘ ๋ฐฐ์—ด์„ ์—ฐ๊ฒฐํ•˜๋Š” ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค.

    ํฌ๊ฒŒ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋ฐฉ์‹์œผ๋กœ ์‚ฌ์šฉํ•˜๋ฉฐ, ์ƒ˜ํ”Œ ์ฝ”๋“œ๋ฅผ ํ†ตํ•ด ์กฐ๊ธˆ ๋” ์ƒ์„ธํ•œ ๋ถ€๋ถ„์„ ํ™•์ธํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

    • [array1].concat([array2]…..)
    • [].concat([array1], [array2]……)
    const color1 = ['blue', 'pink', 'white'];
    const color2 = ['black', 'orange', 'yellow'];
    const num1 = [100, 200, 300];
    const num2 = [400, 500, [600, 700]];
    
    const allColor = color1.concat(color2); 
    //['blue', 'pink', 'white', 'black', 'orange', 'yellow']
    console.log(allColor); 
    
    const colorPlus = color1.concat('gold', ['silver', 'bronze']); 
    //['blue', 'pink', 'white', 'gold', 'silver', 'bronze']
    console.log(colorPlus);
    
    const colorAndNum = color1.concat(num1);   
    //['blue', 'pink', 'white', 100, 200, 300]
    console.log(colorAndNum); 
    
    const allNum = num1.concat(num2);   
    //[100, 200, 300, 400, 500, [600, 700]]
    console.log(allNum); 
    

    ์œ„์™€ ๊ฐ™์ด concat์€ ํ•˜๋‚˜ ์ด์ƒ์˜ ๋ฐฐ์—ด์„ ํ•ฉ์ณ ํ•˜๋‚˜์˜ ๋ฐฐ์—ด๋กœ ๋งŒ๋“ญ๋‹ˆ๋‹ค.

    ๋ฐฐ์—ด ๋‚ด๋ถ€ ๋ฐ์ดํ„ฐ ํƒ€์ž…์— ์ƒ๊ด€์—†์ด ๋ณ‘ํ•ฉ์ด ๊ฐ€๋Šฅํ•˜๋ฉฐ, ์ค‘์ฒฉ๋œ ๋ฐฐ์—ด์˜ ๋ณ‘ํ•ฉ๋„ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

    ES6์—์„œ ์ถ”๊ฐ€๋œ ๋ฌธ๋ฒ•์ธ ์Šคํ”„๋ ˆ๋“œ ์—ฐ์‚ฐ์ž๋Š” ๋ฐฐ์—ด์ด๋‚˜ ๊ฐ์ฒด๋ฅผ ๋น ๋ฅด๊ณ  ์•ˆ์ „ํ•˜๊ฒŒ ๋ณต์‚ฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    ๊นŠ์€ ๋ณต์‚ฌ(Deep copy) ๋ฐฉ์‹์œผ๋กœ ๋ณต์‚ฌ๋ฅผ ์ง„ํ–‰ํ•ด ๊ธฐ์กด์˜ ๋ฐฐ์—ด ๋ฐ์ดํ„ฐ์™€๋Š” ๋‹ค๋ฅธ ๋ฉ”๋ชจ๋ฆฌ ์ฃผ์†Œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฏ€๋กœ ๋ฐฐ์—ด ๋ณ‘ํ•ฉ ๋ฐฉ๋ฒ• ์ค‘์—์„œ๋Š” ๊ฐ€์žฅ ์ข‹์€ ๋ฐฉ์‹์ด๋ผ๊ณ  ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    const musician = ['Chet Baker', 'Miles Davis'];
    const actor = ['Clint Eastwood', 'George Clooney'];
    
    const favorites = [...musician, ...actor];    
    // ['Chet Baker', 'Miles Davis', 'Clint Eastwood', 'George Clooney'];
    console.log(favorites); 
    
    const favoritesReverse = [...actor, ...musician];
    // ['Clint Eastwood', 'George Clooney', 'Chet Baker', 'Miles Davis'];
    console.log(favoritesReverse)
    
    

    ์Šคํ”„๋ ˆ๋“œ ์—ฐ์‚ฐ์ž๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋น„๊ตฌ์กฐํ™” ํ• ๋‹น์—์„œ๋„ ์ž์ฃผ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

    const myColor = ['beige', 'burgundy', 'charcoal', 'ivory'];
    
    const [color1, color2, ...others  ] = myColor;
    console.log(color1);   // 'beige'
    console.log(color2);   // 'burgundy'
    console.log(others);   // ['charcoal', 'ivory']

    push() ๋ฉ”์†Œ๋“œ๋Š” ๋ฐฐ์—ด ๋์— ๋ฐ์ดํ„ฐ๋ฅผ ์ถ”๊ฐ€ํ•  ๋•Œ ์ž์ฃผ ์‚ฌ์šฉํ•˜๋Š” ๋ฉ”์†Œ๋“œ์ž…๋‹ˆ๋‹ค.

    push() ๋ฉ”์†Œ๋“œ์™€ ์Šคํ”„๋ ˆ๋“œ ์—ฐ์‚ฐ์ž๋ฅผ ๊ฐ™์ด ์‚ฌ์šฉํ•˜๋ฉด ๋ฐฐ์—ด ๋ณ‘ํ•ฉ์ด ๊ฐ€๋Šฅํ•˜์ง€๋งŒ ๊ธฐ์กด ๋ฐฐ์—ด์— ๋ฐ์ดํ„ฐ๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ๋ฐฉ์‹์ด๋ฏ€๋กœ ๊ธฐ์กด ๋ฐฐ์—ด์ด ๋ณ€๊ฒฝ๋˜๋Š” ๋ถ€๋ถ„์„ ์ฃผ์˜ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

    const pizza = ['dough', 'cheese', 'meat', 'source'];
    const pizzaAdd = ['parmesan', 'tabasco'];
    
    pizza.push(...pizzaAdd);   
    
    // ['dough', 'cheese', 'meat', 'source', 'parmesan', 'tabasco'];
    console.log(pizza); 
    

    2. ๋งˆ๋ฌด๋ฆฌ

    ๋ฐฐ์—ด์„ ๋ณ‘ํ•ฉํ•˜๋Š” ์—ฌ๋Ÿฌ ๊ฐ€์ง€ ๋ฐฉ๋ฒ• ์ค‘ concat(), …spread, push() ์„ธ ๊ฐ€์ง€๋ฅผ ์†Œ๊ฐœํ•˜์˜€์Šต๋‹ˆ๋‹ค.

    ๊ฐ ์ƒํ™ฉ์— ๋”ฐ๋ผ ํ•„์š”ํ•œ ๋ฐฉ๋ฒ•์ด ๋‹ค๋ฅด๋‹ˆ ํ•„์š”์— ๋”ฐ๋ผ ๋งž๋Š” ๊ฒƒ์„ ๊ณจ๋ผ ์‚ฌ์šฉํ•˜๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

    ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ, ๋ฌธ์ž์—ด ํ•จ์ˆ˜ ๋งˆ์Œ๋Œ€๋กœ ๋‹ค๋ฃจ๊ธฐ(Javascript works with string)

    Javascript String Methods : slice(), substring(), includes(), startsWith(), trim(), replace()…….

    ํ”„๋ก ํŠธ์—”๋“œ(React, Vue, Angular)์™€ ๋ฐฑ์—”๋“œ(Node.js)๊ฐ€ ๋ชจ๋‘ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์‹œ๋Œ€์— ๋“ค์–ด์„œ๋‹ˆ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๊ธฐ์ดˆ๊ฐ€ ๋ช‡ ๋ฐฐ๋Š” ๋” ์ค‘์š”ํ•ด์ง„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋ฌธ๋ฒ• ์ค‘ ๋ฌธ์ž์—ด(String) ๊ด€๋ จ ํ•จ์ˆ˜๋Š” ์ฐธ ์“ธ ์ผ์ด ๋งŽ์œผ๋ฉด์„œ๋„ ๊ฐ€๋ณ๊ฒŒ ์—ฌ๊ฒจ์ ธ ์‰ฝ๊ฒŒ ์™ธ์›Œ์ง€์ง€ ์•Š๋Š” ์Šฌํ”ˆ ํ•จ์ˆ˜ ์ค‘ ํ•˜๋‚˜์ธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.๐Ÿ˜ข

    ๋ฌธ์ž์—ด ๊ด€๋ จ ํ•จ์ˆ˜๋Š” ํ•œ ๋ฒˆ ์™ธ์›Œ๋‘๋ฉด ๋ฐ˜๋ณต ํ•™์Šตํ•  ์ผ์ด ๋งŽ์œผ๋ฏ€๋กœ ์ฒซ ๋‹จ์ถ”๋งŒ ์ž˜ ๊ฟฐ๋ฉด ๋  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

    ๊ทธ๋Ÿผ ๋ฌธ์ž์—ด ๊ด€๋ จํ•˜์—ฌ ์‚ฌ์šฉ ๋นˆ๋„๊ฐ€ ๋†’์€ ํ•จ์ˆ˜์ธ slice(), substring(), includes(), startsWith(), trim(), replace(), indexOf(), test() ํ•จ์ˆ˜์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.


    slice ํ•จ์ˆ˜๋Š” ์œ„์น˜(์ธ๋ฑ์Šค)๋ฅผ ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ์ „๋‹ฌํ•˜์—ฌ ์›ํ•˜๋Š” ๋ฌธ์ž์—ด์„ ์ถ”์ถœํ•ฉ๋‹ˆ๋‹ค.

    ์‹œ์ž‘ ์œ„์น˜(ํ•„์ˆ˜)์™€ ์ข…๋ฃŒ ์œ„์น˜(์˜ต์…˜)๋ฅผ ์ „๋‹ฌํ•˜๋ฉฐ, ์‹œ์ž‘ ์œ„์น˜๋งŒ ์ „๋‹ฌํ•˜๋Š” ๊ฒฝ์šฐ ์‹œ์ž‘ ์œ„์น˜๋ถ€ํ„ฐ ๋ฌธ์ž์—ด ๋๊นŒ์ง€ ์ถ”์ถœํ•ฉ๋‹ˆ๋‹ค.

    0์€ ์ˆœ๋ฐฉํ–ฅ์œผ๋กœ ์ฒซ ๋ฒˆ์งธ(์•ž์—์„œ 1๋ฒˆ ์งธ), ์Œ์ˆ˜์ธ -1์€ ์—ญ๋ฐฉํ–ฅ์œผ๋กœ ์ฒซ ๋ฒˆ์งธ(๋’ค์—์„œ 1๋ฒˆ ์งธ)๋ฅผ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.

    const myWord = 'primavera';
    
    myWord.slice(0,5);   // 'prima'
    myWord.slice(-4);    // 'vera'
    myWord.slice(3);     // 'mavera'
    
    myWord.slice(3,1);    // '' -> sliceํ•จ์ˆ˜๋Š” ์‹œ์ž‘์ธ๋ฑ์Šค๊ฐ€ ์ข…๋ฃŒ์ธ๋ฑ์Šค๋ณด๋‹ค ํฌ๋ฉด ๋นˆ ๊ฐ’์„ ๋ฐ˜ํ™˜

    substring ํ•จ์ˆ˜๋„ slice์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์œ„์น˜(์ธ๋ฑ์Šค)๋ฅผ ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ์ „๋‹ฌํ•˜์—ฌ ์›ํ•˜๋Š” ๋ฌธ์ž์—ด์„ ์ถ”์ถœํ•ฉ๋‹ˆ๋‹ค.

    ๊ธฐ๋ณธ์ ์ธ ์ž‘๋™ ๋ฐฉ์‹์€ ๊ฐ™์œผ๋‚˜ slice์™€ ๋‹ฌ๋ฆฌ ์‹œ์ž‘์ธ๋ฑ์Šค๊ฐ€ ์ข…๋ฃŒ์ธ๋ฑ์Šค๋ณด๋‹ค ํฐ ๊ฒฝ์šฐ์—๋Š” ์ž๋™์œผ๋กœ ๋‘ ๊ฐ’์˜ ์œ„์น˜๋ฅผ ๋ณ€๊ฒฝํ•˜์—ฌ ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ํ•ฉ๋‹ˆ๋‹ค.

    ๋˜ํ•œ substring์€ ๋งค๊ฐœ๋ณ€์ˆ˜์— ์Œ์ˆ˜๋ฅผ ๋„ฃ์œผ๋ฉด ์ด ๊ฐ’์„ 0์œผ๋กœ ์ธ์‹ํ•ฉ๋‹ˆ๋‹ค.

    ๋”ฐ๋ผ์„œ (3, -1)์„ ์ „๋‹ฌํ•˜๊ฒŒ ๋˜๋ฉด (3, 0)์œผ๋กœ ์ธ์‹ํ•ฉ๋‹ˆ๋‹ค. (3, 0)์€ ์‹œ์ž‘ ์ธ๋ฑ์Šค๊ฐ€ ๋” ํฌ๋ฏ€๋กœ ์œ„์น˜๋ฅผ ๋ณ€ํ™˜ํ•˜์—ฌ (0, 3)์˜ ๊ฐ’์„ ๊ณ„์‚ฐํ•œ ๊ฒฐ๊ณผ๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

    ํ•จ์ˆ˜๋ช…์ด ๋น„์Šทํ•œ substr์˜ ๊ฒฝ์šฐ ‘์œ„์น˜’์™€ ‘์ถ”์ถœํ•  ๋ฌธ์ž์˜ ์ˆ˜’๋ฅผ ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ ์ „๋‹ฌํ•˜๋Š” ํ•จ์ˆ˜์ž…๋‹ˆ๋‹ค.

    const myWord = 'invierno';
    
    myWord.substring(3);     // 'ierno'
    myWord.substring(1,3);   // 'nv'
    
    myWord.substring(3,1);   // 'nv' -> ์‹œ์ž‘์ด ์ข…๋ฃŒ์ธ๋ฑ์Šค๋ณด๋‹ค ํฌ๋ฉด ์ž๋™์œผ๋กœ ์œ„์น˜ ๋ณ€๊ฒฝ ํ›„ ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰
    
    myWord.substring(3,-1);  // 'inv' -> ์Œ์ˆ˜๋Š” 0, ์‹œ์ž‘์ธ๋ฑ์Šค์™€ ์ข…๋ฃŒ์ธ๋ฑ์Šค๋Š” ์œ„์น˜ ๋ณ€๊ฒฝ ํ›„ ๊ณ„์‚ฐ
    
    myWord.substring(-4);    // 'invierno' -> ์Œ์ˆ˜๋Š” 0, ์‹œ์ž‘์ธ๋ฑ์Šค๋งŒ ์ „๋‹ฌํ•˜์—ฌ 0๋ถ€ํ„ฐ ๋๊นŒ์ง€ ๊ณ„์‚ฐ
    
    myWord.substr(1,3);      // 'nvi' -> ์‹œ์ž‘์ธ๋ฑ์Šค 1๋ถ€ํ„ฐ ๋ฌธ์ž 3๊ฐœ๋ฅผ ์ถ”์ถœ
    

    includes ํ•จ์ˆ˜๋Š” ์ง€์ •ํ•œ ๋ฌธ์ž์—ด์˜ ํฌํ•จ ์—ฌ๋ถ€๋ฅผ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค.

    ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ๋ฌธ์ž์—ด(ํ•„์ˆ˜)๊ณผ ์œ„์น˜์ธ๋ฑ์Šค(์˜ต์…˜)๋ฅผ ์ „๋‹ฌํ•˜๋ฉฐ, ๋ฐ˜ํ™˜๊ฐ’์€ true ๋˜๋Š” false ์ž…๋‹ˆ๋‹ค.

    ๋ฌธ์ž์—ด ๋‚ด ์ง€์ • ๋ฌธ์ž์—ด ํ™•์ธ์€ ๋ฌผ๋ก  ๋ฐฐ์—ด ๋‚ด ๋นˆ ๊ฐ’์„ ํ™•์ธํ•˜๋Š” ์šฉ๋„๋กœ๋„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    const myWord = 'alegria';
    
    myWord.includes('le');       // true
    myWord.includes('i');        // true
    myWord.includes('rio');      // false
    
    const myArray = ['dream','','king'];
    myArray.includes('');       // true   -> myArray[1]์ด ๋นˆ ๊ฐ’์ด๋ฏ€๋กœ true. ๋ฐฐ์—ด ๋‚ด ๋นˆ ๊ฐ’์„ ์ฐพ๋Š” ์šฉ๋„
    myArray.includes('dream');  // true   -> myArray[0]์˜ ๊ฐ’๊ณผ ์ผ์น˜
    myArray.includes('drea');   // false  -> ๋ฐฐ์—ด ๋‚ด ๊ฐ’๊ณผ ์ •ํ™•ํ•˜๊ฒŒ ์ผ์น˜ํ•˜๋Š” ๊ฒฝ์šฐ์—๋งŒ true๋ฅผ ๋ฐ˜ํ™˜
    

    startsWith ํ•จ์ˆ˜๋„ ๋ฌธ์ž์—ด์˜ ํฌํ•จ ์—ฌ๋ถ€๋ฅผ ํ™•์ธํ•˜๋Š” ํ•จ์ˆ˜๋ผ๊ณ  ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    startsWith์™€ ํ•จ๊ป˜ ๋ฌธ์ž์—ด๋งŒ ์ „๋‹ฌํ•˜๋ฉด 0 ์ธ๋ฑ์Šค๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜์—ฌ ํ•ด๋‹น ๋ฌธ์ž์—ด์˜ ์กด์žฌ ์—ฌ๋ถ€๋ฅผ ํ™•์ธํ•˜์—ฌ BOOLEAN ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

    ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ endsWith๋Š” ๋๋‚˜๋Š” ๋ฌธ์ž์—ด์„ ๋น„๊ตํ•ฉ๋‹ˆ๋‹ค.

    const mySentence = 'cafe con leche';
    
    mySentence.startsWith('cafe');     // true
    mySentence.startsWith('fe');       // false
    mySentence.startsWith('fe',2);     // true
    
    mySentence.endsWith('eche');      // true
    

    trim ํ•จ์ˆ˜๋Š” ๋ฌธ์ž์—ด ์–‘ ๋์˜ ๊ณต๋ฐฑ์„ ์ œ๊ฑฐํ•˜๋Š” ํ•จ์ˆ˜์ž…๋‹ˆ๋‹ค.

    ๋ฌธ์ž์—ด ๋ณ€ํ™˜ ๊ณผ์ •์ด๋‚˜ ์‹ค์ˆ˜๋กœ ๋ณด์ด์ง€ ์•Š๋Š” ๊ณต๋ฐฑ์„ ์‚ฝ์ž…ํ•˜๊ฒŒ ๋˜๋ฉด ๋ฌธ์ž์—ด ๋น„๊ต ์‹œ ๊ฒ‰์œผ๋กœ๋Š” ๋™์ผํ•˜์ง€๋งŒ ๊ฒฐ๊ณผ๋Š”

    false๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋ฏ€๋กœ ์ด trim ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    ๋ฌธ์ž์—ด ์–‘ ๋์˜ ๊ณต๋ฐฑ, ํƒญ, ์ค„๋ฐ”๊ฟˆ ๋ฌธ์ž(/n)๋ฅผ ์ œ๊ฑฐํ•˜๋ฉฐ, ๋ฌธ์ž์—ด ์–‘ ๋์ด ์•„๋‹Œ ๋ถ€๋ถ„์—๋Š” ํšจ๊ณผ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

    const mySentence = '  la casa de papel   ';
    
    mySentence.trim();        // 'la casa de papel'
    
    const mySentence = ' el amor \n';
    
    mySentence.trim();       // 'el amor'

    replace ํ•จ์ˆ˜๋Š” ๋ฌธ์ž์—ด์—์„œ ๋ณ€๊ฒฝํ•  ๊ธฐ์กด๋ฌธ์ž๋ฅผ ์ฐพ์•„ ๋ณ€๊ฒฝ๋ฌธ์ž๋กœ ๋ณ€๊ฒฝํ•ฉ๋‹ˆ๋‹ค.

    ๋ฌธ์ž์—ด์—์„œ ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ์ „๋‹ฌํ•œ ๊ธฐ์กด๋ฌธ์ž๊ฐ€ ์—ฌ๋Ÿฌ ๊ฐœ ์กด์žฌํ•˜๋Š” ๊ฒฝ์šฐ ์ฒซ ๋ฒˆ์งธ๋กœ ํƒ์ƒ‰ํ•œ ๋ฌธ์ž์—ด๋งŒ ๋ณ€๊ฒฝํ•ฉ๋‹ˆ๋‹ค.

    ์˜ˆ๋ฅผ ๋“ค์–ด, ‘my_name_is_Ron’์—์„œ ‘_’๋ฌธ์ž๋ฅผ ๋ชจ๋‘ ๊ณต๋ฐฑ์œผ๋กœ ๋ณ€๊ฒฝํ•˜๊ธฐ ์œ„ํ•ด replace(‘_’,’ ‘) ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•ด๋„ ๊ฒฐ๊ณผ๋Š” ‘my name_is_Ron’์ด ๋ฐ˜ํ™˜๋ฉ๋‹ˆ๋‹ค.

    ๋”ฐ๋ผ์„œ ๋ฌธ์ž์—ด์—์„œ ํ•ด๋‹นํ•˜๋Š” ๋ฌธ์ž๋ฅผ ๋ชจ๋‘ ๋ณ€๊ฒฝํ•˜๊ณ  ์‹ถ์€ ๊ฒฝ์šฐ์—๋Š” ์ •๊ทœํ‘œํ˜„์‹์„ ์‚ฌ์šฉํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

    ์ •๊ทœํ‘œํ˜„์‹ ๊ด€๋ จ ํฌ์ŠคํŠธ

    const mySentence = 'my name is:Ron';
    
    mySentence.replace(':',' ');        //'my name is Ron'
    
    const mySentence = 'my_name_is_Ron';
    
    mySentence.replace('_',' ');      // 'my name_is_Ron'
    
    //์ •๊ทœํ‘œํ˜„์‹ ์‚ฌ์šฉํ•ด์„œ ๋ชจ๋“  ๋ฌธ์ž ๋ณ€๊ฒฝํ•˜๊ธฐ
    mySentence.replace(/_/g, ' ');    // 'my name is Ron'

    indexOf ํ•จ์ˆ˜๋Š” ์ „๋‹ฌํ•˜๋Š” ๋ฌธ์ž์˜ ์œ„์น˜๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

    ์ด ๊ธฐ๋Šฅ์€ ์›ํ•˜๋Š” ๋ฌธ์ž์—ด์˜ ์•ž ๋˜๋Š” ๋’ค์—์„œ ๋ฌธ์ž์—ด์„ ์ž๋ฅผ ๋•Œ ์œ ์šฉํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    ์˜ˆ๋ฅผ ๋“ค์–ด, ‘Z001-03’์ด๋ผ๋Š” ๋ฌธ์ž์—ด์—์„œ ๋’ค์˜ ’03’๋งŒ ์ถ”์ถœํ•˜๊ณ  ์‹ถ์€ ๊ฒฝ์šฐ indexOf๋กœ ‘-‘ ๋ฌธ์ž์—ด์˜ ์œ„์น˜๋ฅผ ์ฐพ๊ณ  ํ•ด๋‹น ์œ„์น˜์˜ +1 ์œ„์น˜๋ถ€ํ„ฐ ๋๊นŒ์ง€ ๋ฌธ์ž์—ด์„ ์ž˜๋ผ๋‚ด๋ฉด ์›ํ•˜๋Š” ๊ฐ’์„ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    ๋งŒ์•ฝ ๊ฐ™์€ ๋ฌธ์ž๊ฐ€ ์—ฌ๋Ÿฌ ๊ฐœ ์กด์žฌํ•˜๋Š” ๊ฒฝ์šฐ ์ฒซ ๋ฒˆ์งธ ๋ฌธ์ž์˜ ์œ„์น˜๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋ฉฐ, ๋‘ ๋ฒˆ์งธ ๋งค๊ฐœ๋ณ€์ˆ˜์— ์‹œ์ž‘ ์œ„์น˜๋ฅผ ์ „๋‹ฌํ•˜๋ฉด ์‹œ์ž‘ ์œ„์น˜๋ถ€ํ„ฐ ๊ฒ€์ƒ‰์„ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค(์‹œ์ž‘ ์œ„์น˜๋ฅผ ์ „๋‹ฌํ•˜๋”๋ผ๋„ ๋ฐ˜ํ™˜ ๊ฐ’์€ ์ „์ฒด ๋ฌธ์ž์—ด์—์„œ ๋ช‡ ๋ฒˆ์งธ์ธ์ง€๋ฅผ ์ „๋‹ฌํ•ฉ๋‹ˆ๋‹ค).

    ๋’ค์—์„œ๋ถ€ํ„ฐ ๊ฒ€์ƒ‰์„ ์‹œ์ž‘ํ•˜๋Š” ํ•จ์ˆ˜๋Š” lastIndexOf์ด๋ฉฐ, ๋’ค์—์„œ๋ถ€ํ„ฐ ์ฒซ ๋ฒˆ์งธ๋กœ ๋‚˜์˜ค๋Š” ๋ฌธ์ž์˜ ์œ„์น˜๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค(๋ฐ˜ํ™˜ ๊ฐ’์€ ํ•ด๋‹น ๋ฌธ์ž๊ฐ€ ์•ž์—์„œ๋ถ€ํ„ฐ ๋ช‡ ๋ฒˆ์งธ์ธ์ง€๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค).

    ์ „๋‹ฌํ•˜๋Š” ๋ฌธ์ž๊ฐ€ ์กด์žฌํ•˜์ง€ ์•Š์œผ๋ฉด -1์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

    const mySentence = 'Z001-03';
    
    mySentence.indexOf('-');     // 4
    
    mySentence.substring(mySentence.indexOf('-')+1);    // '03'
    
    mySentence.indexOf('D');    // -1
    
    const mySentence = 'Z001-03-02';
    
    mySentence.indexOf('-');    // 4
    mySentence.indexOf('-', 5);   // 7
    
    mySentence.lastIndexOf('-')   // 7
    

    test ํ•จ์ˆ˜๋Š” ์ •๊ทœํ‘œํ˜„์‹๊ณผ ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜์—ฌ ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ์ „๋‹ฌํ•˜๋Š” ๋ฌธ์ž์—ด์˜ ์œ ํšจ์„ฑ์„ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค.

    ๋น„๋ฐ€๋ฒˆํ˜ธ์— ์•ŒํŒŒ๋ฒณ, ํŠน์ˆ˜๋ฌธ์ž ๋“ฑ ํฌํ•จ์—ฌ๋ถ€ ํ™•์ธ์ด๋‚˜ ์ƒ๋…„์›”์ผ ํ˜•์‹์— ์•ŒํŒŒ๋ฒณ ๋“ฑ ๋ถˆํ•„์š”ํ•œ ๋ฌธ์ž์˜ ํฌํ•จ ์—ฌ๋ถ€๋ฅผ ํšจ๊ณผ์ ์œผ๋กœ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    const mySentence = /a/;
    const myWord = 'baby';
    
    mySentence.test(myWord);   // true
    
    /\d/.test('cookie');       // false \d๋Š” ์ˆซ์ž(0~9)๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ์ •๊ทœํ‘œํ˜„์‹
    /\d/.test('cookie1');      // true
    
    const typedError = /[ใ„ฑ-ใ…Žใ…-ใ…ฃ]/gi;
    const inputData = '๊น€ใ…Š์น˜์™€ ๋‚˜๋ฌผ';
    
    typedError.test(inputData);    // true 

    ์ด ์™ธ์—๋„ ๋‹ค์–‘ํ•œ ํ•จ์ˆ˜๋“ค์ด ๋งŽ๊ณ  ๋˜ ์—ฌ๋Ÿฌ ์š”๊ตฌ์— ๋งž์ถฐ ์ƒˆ๋กญ๊ณ  ํŽธ๋ฆฌํ•œ ํ•จ์ˆ˜๊ฐ€ ๊ณ„์† ๋‚˜์˜ค๊ธฐ ๋•Œ๋ฌธ์— ๋Š์ž„์—†๋Š” ๊ด€์‹ฌ๊ณผ ์—…๋ฐ์ดํŠธ ๊ด€๋ จํ•˜์—ฌ ๋ชจ๋‹ˆํ„ฐ๋ง์ด ํ•„์š”ํ•  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋น„๊ตฌ์กฐํ™” ํ• ๋‹น ์‚ฌ์šฉํ•˜๊ธฐ(Beautiful Destructuring in JS)

    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๊ฐ์ฒด ๋น„๊ตฌ์กฐํ™”(Object Destructuring)๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์•„๋ฆ„๋‹ค์šด ๋ฐฉ๋ฒ•
    from. How to Use Object Destructuring in Javascript(Dmitri Pavlutin)

    ๋น„๊ตฌ์กฐํ™” ํ• ๋‹น(Destructuring Assignment)์ด๋ž€ ๋ฐฐ์—ด ๋˜๋Š” ๊ฐ์ฒด ์•ˆ์˜ ์†์„ฑ๊ฐ’๋ฅผ ํ’€์–ด ํŽธ๋ฆฌํ•˜๊ฒŒ ๋ณ€์ˆ˜์— ๋„ฃ๋Š” ๊ฒƒ์„ ๋งํ•ฉ๋‹ˆ๋‹ค.
    ํ•œ ๋ฒˆ ์„ ์–ธ์œผ๋กœ ์—ฌ๋Ÿฌ ์†์„ฑ๊ฐ’ ์ถ”์ถœ, ํ•˜๋ถ€ ๊ฐ์ฒด์—์„œ ์ ‘๊ทผ, ๊ฐ’์ด ์กด์žฌํ•˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ ๊ธฐ๋ณธ๊ฐ’ ์„ค์ • ๋“ฑ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

    ๋ฐฑ ๋ฒˆ์˜ ์„ค๋ช…๋ณด๋‹ค ํ•˜๋‚˜์˜ ์ƒ˜ํ”Œ ์ฝ”๋“œ๊ฐ€ ๋” ์œ ์šฉํ•˜๋ฏ€๋กœ ํ•˜๋‚˜์”ฉ ์•Œ์•„๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

    1. ๋น„๊ตฌ์กฐํ™” ํ• ๋‹น์˜ ํ•„์š”์„ฑ

    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ES2015 ํ™˜๊ฒฝ์—์„œ ๊ฐ์ฒด์˜ ์†์„ฑ๊ฐ’์„ ๊ฐ€์ ธ์˜ค๋ ค๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ฝ”๋“œ๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

    const flower = {
      name: 'Rose',
      color: 'Red'
    };
    
    const name = flower.name;
    const color = flower.color;
    
    console.log(name);    // 'Rose'
    console.log(color);    //  'Red'

    flower.name ๊ฐ’์„ name ๋ณ€์ˆ˜์— ๋„ฃ๊ณ , flower.color ๊ฐ’์„ color ๋ณ€์ˆ˜์— ๋„ฃ์Šต๋‹ˆ๋‹ค.

    ํ•˜์ง€๋งŒ ์œ„์™€ ๊ฐ™์ด ๊ฐ’์„ ๋Œ€์ž…ํ•˜๋ฉด ๋ฐ˜๋ณต๋˜๋Š” ๋ถ€๋ถ„์ด ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ๋ฐ”๋กœ ‘name’๊ณผ ‘color’์ž…๋‹ˆ๋‹ค.

    ๋Œ€์ž… ๊ณผ์ •์—์„œ name์ด ๋ณ€์ˆ˜ ์„ ์–ธ์— ํ•œ ๋ฒˆ, ๊ทธ๋ฆฌ๊ณ  flower ๊ฐ์ฒด์˜ ์†์„ฑ ์ ‘๊ทผ์— ํ•œ ๋ฒˆ, ์ด ๋‘ ๋ฒˆ์ด ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

    color๋„ ๋งˆ์ฐฌ๊ฐ€์ง€์ž…๋‹ˆ๋‹ค.

    ๋น„๊ตฌ์กฐํ™” ํ• ๋‹น์€ ์ด๋Ÿฐ ๋ฒˆ๊ฑฐ๋กœ์›€์„ ์—†์• ๊ณ ์ž ํ•  ๋•Œ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

    ๋น„๊ตฌ์กฐํ™” ํ• ๋‹น์„ ์‚ฌ์šฉํ•˜๋ฉด ๊ฐ์ฒด์—์„œ ์†์„ฑ์„ ๊ฐ€์ ธ์™€ ๊ฐ™์€ ์ด๋ฆ„์˜ ๋ณ€์ˆ˜์— ๋Œ€์ž…ํ•  ๋•Œ ์†์„ฑ๋ช…์„ ํ•œ๋ฒˆ ๋” ๋ช…์‹œํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

    ๊ฒŒ๋‹ค๊ฐ€ ์†์„ฑ์ด ์—ฌ๋Ÿฌ ๊ฐœ์ผ์ง€๋ผ๋„ ํ•œ๋ฒˆ์˜ ์„ ์–ธ์œผ๋กœ ํ•ด๊ฒฐ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

    ์•„๋ž˜ ์ฝ”๋“œ์—์„œ๋Š” ์œ„ ์ฝ”๋“œ๋ฅผ ๋ฆฌํŒฉํ† ๋งํ•˜์—ฌ ๋น„๊ตฌ์กฐํ™” ํ• ๋‹น์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

    const flower = {
     name: 'Rose',
     color: 'Red'
    };
    
    const { name, color } = flower;
    
    console.log(name);   // 'Rose'
    console.log(color);  // 'Red'

    ‘const { name, color } = flower’๊ฐ€ ๋ฐ”๋กœ ๊ฐ์ฒด ๋น„๊ตฌ์กฐํ™”์ž…๋‹ˆ๋‹ค.
    ์ด ๊ตฌ๋ฌธ์œผ๋กœ name๊ณผ color ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•˜๊ณ , flower.name๊ณผ flower.color ์†์„ฑ์˜ ๊ฐ’์„ ๊ฐ™์€ ์ด๋ฆ„ ๋ณ€์ˆ˜์— ํ• ๋‹นํ•ฉ๋‹ˆ๋‹ค.

    ๋‹ค์Œ์€ ๊ฐ์ฒด์˜ ์†์„ฑ๊ฐ’์— ์ ‘๊ทผํ•˜๋Š” ๋‘ ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค.

    const name = flower.name;
    const color = flower.color;
    
    // ์œ„์™€ ์•„๋ž˜๋Š” ๊ฐ™์€ ๊ฒฐ๊ณผ
    
    const { name, color } = flower;

    ์†์„ฑ๋ช…๊ณผ ๋ณ€์ˆ˜๋ช…์ด ์ค‘๋ณต๋˜์ง€ ์•Š์œผ๋ฏ€๋กœ ๋น„๊ตฌ์กฐํ™”๊ฐ€ ํ›จ์”ฌ ๊น”๋”ํ•˜๊ณ  ํŽธ๋ฆฌํ•œ ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    2. ์†์„ฑ๊ฐ’ ๊ฐ€์ ธ์˜ค๊ธฐ

    ๊ฐ์ฒด ๋น„๊ตฌ์กฐํ™”์˜ ๊ธฐ๋ณธ ๋ฌธ๋ฒ•์€ ๊ฐ„๋‹จํ•ฉ๋‹ˆ๋‹ค.

    const { identifier } = expression;

    ์—ฌ๊ธฐ์„œ identifier๋Š” ์†์„ฑ์— ์ ‘๊ทผํ•  ์ด๋ฆ„์ด๊ณ , expression์€ identifier๊ฐ€ ์ ‘๊ทผํ•˜๋Š” ๊ฐ์ฒด์ž…๋‹ˆ๋‹ค.

    ๋น„๊ตฌ์กฐํ™”๋ฅผ ํ•˜๋ฉด identifier ๋ณ€์ˆ˜๋Š” ์ ‘๊ทผํ•œ ์†์„ฑ๊ฐ’์„ ๊ฐ–๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

    ์œ„์™€ ๊ฐ™์€ ์ฝ”๋“œ์ด์ง€๋งŒ ์†์„ฑ ์ ‘๊ทผ์ž๋ฅผ ์‚ฌ์šฉํ•˜๊ฒŒ ๋˜๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

    const identifier = expression.identifier;

    ์œ„ ๋‚ด์šฉ์„ ํ† ๋Œ€๋กœ ๋น„๊ตฌ์กฐํ™” ํ• ๋‹น์„ ์—ฐ์Šตํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

    const flower = {
      name: 'Rose',
      color: 'Red'
    };
    
    const { name } = flower;
    
    console.log(name);  // 'Rose'

    ‘const { name } = flower;’๋Š” name ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•˜๊ณ , flower.name์˜ ์†์„ฑ๊ฐ’์„ ๋Œ€์ž…ํ•˜๋Š” ๋น„๊ตฌ์กฐํ™” ํ• ๋‹น์ž…๋‹ˆ๋‹ค.

    3. ์—ฌ๋Ÿฌ ์†์„ฑ๊ฐ’ ํ•œ๋ฒˆ์— ๊ฐ€์ ธ์˜ค๊ธฐ

    ์—ฌ๋Ÿฌ ์†์„ฑ๊ฐ’์„ ๊ฐ€์ง„ ๊ฐ์ฒด์˜ ๋น„๊ตฌ์กฐํ™”๋Š” ์‰ผํ‘œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

    const { identifier1, identifier2, ..., identifierN } = expression;

    ์—ฌ๊ธฐ์„œ identifier1, identifier2, …, identifierN์€ ์†์„ฑ์— ์ ‘๊ทผํ•  ์ด๋ฆ„์ด๊ณ , expression์€ identifier๊ฐ€ ์ ‘๊ทผํ•˜๋Š” ๊ฐ์ฒด์ž…๋‹ˆ๋‹ค. ๋น„๊ตฌ์กฐํ™”๋ฅผ ํ•˜๋ฉด ๊ฐ identifier ๋ณ€์ˆ˜๋Š” ์ ‘๊ทผํ•œ ์†์„ฑ๊ฐ’์„ ๊ฐ–๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

    ์†์„ฑ ์ ‘๊ทผ์ž๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ฝ”๋“œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

    const identifier1 = expression.identifier1;
    const identifier2 = expression.identifier2;
    // ......
    const identifierN = expression.identifierN;

    ๊ทธ๋Ÿผ ๋‘ ๊ฐœ์˜ ์†์„ฑ๊ฐ’์„ ํ• ๋‹นํ•˜๋Š” ์ฒซ ๋ฒˆ์งธ ์ƒ˜ํ”Œ ์ฝ”๋“œ๋ฅผ ๋‹ค์‹œ ํ™•์ธํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

    const flower = {
     name: 'Rose',
     color: 'Red'
    };
    
    const { name, color } = flower;
    
    console.log(name);   // 'Rose'
    console.log(color);  // 'Red'

    ‘const { name, color } = flower;’๋Š” name, color ๋‘ ๋ณ€์ˆ˜๋ฅผ ์ƒ์„ฑํ•˜๊ณ , ๊ฐ๊ฐ flower.name๊ณผ flower.color์˜ ์†์„ฑ๊ฐ’์„ ํ• ๋‹นํ•ฉ๋‹ˆ๋‹ค.

    4. ๊ธฐ๋ณธ๊ฐ’ ์„ค์ •ํ•˜๊ธฐ

    ๋น„๊ตฌ์กฐํ™”๋ฅผ ํ•˜๋”๋ผ๋„ ๊ฐ์ฒด์— ๋™์ผํ•œ ์†์„ฑ๋ช…์ด ์กด์žฌํ•˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ undefined๊ฐ€ ํ• ๋‹น๋ฉ๋‹ˆ๋‹ค.

    const flower = {
      name: 'Rose',
      color: 'Red'
    };
    
    const { meaning } = flower;
    
    console.log(meaning);  // undefined 

    ์œ„์™€ ๊ฐ™์ด ์†์„ฑ์ด ์กด์žฌํ•˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ ๊ธฐ๋ณธ๊ฐ’ ์„ค์ •์ด ๊ฐ€๋Šฅํ•˜๋ฉฐ, ๋ฌธ๋ฒ•์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

    const { identifier = defaultValue } = expression;

    identifier๊ฐ€ expression ๊ฐ์ฒด์˜ ์†์„ฑ์— ์ ‘๊ทผํ•˜๋Š” ์ด๋ฆ„์ด ๋ฉ๋‹ˆ๋‹ค. expression ๊ฐ์ฒด ๋‚ด identifier ์†์„ฑ์ด ์กด์žฌํ•˜์ง€ ์•Š์œผ๋ฉด ์ง€์ •ํ•œ ๊ธฐ๋ณธ๊ฐ’์ธ defaultValue๊ฐ€ ๋Œ€์ž…๋ฉ๋‹ˆ๋‹ค.

    ๋‹ค์Œ ์ฝ”๋“œ์™€ ๊ฐ™์€ ๊ธฐ๋Šฅ์„ ํ•ฉ๋‹ˆ๋‹ค.

    const identifier = expression.identifier === undefined ? defaultValue : expression.identifier;

    ๊ธฐ๋ณธ๊ฐ’ ์„ค์ • ์˜ต์…˜์„ ๋”ํ•ด ์ฝ”๋“œ๋ฅผ ์ˆ˜์ •ํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

    const flower = {
      name: 'Rose',
      color: 'Red'
    }
    
    const { meaning = 'love' } = flower;
    
    console.log(meaning)  // 'love'

    undefined ๋Œ€์‹  ‘love’๊ฐ€ ๋Œ€์ž…๋ฉ๋‹ˆ๋‹ค.

    5. ๋ณ„๋ช…(alias) ์ •ํ•˜๊ธฐ

    ๊ฐ์ฒด์˜ ์†์„ฑ๋ช…๊ณผ ๋‹ค๋ฅธ ์ด๋ฆ„์œผ๋กœ ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•˜๊ณ  ์‹ถ์„ ๋•Œ๋Š” ๋ณ„๋ช…์„ ์ง€์ •ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

    const { identifier: aliasIdentifier } = expression;

    ์—ฌ๊ธฐ์„œ identifier๋Š” ์†์„ฑ์— ์ ‘๊ทผํ•˜๋Š” ์ด๋ฆ„์ด๋ฉฐ, aliasIdentifier๋Š” ๋ณ€์ˆ˜๋กœ ์‚ฌ์šฉํ•  ์ด๋ฆ„์ž…๋‹ˆ๋‹ค. ๋น„๊ตฌ์กฐํ™”๋ฅผ ํ•˜๋ฉด aliasIdentifier๊ฐ€ ์†์„ฑ๊ฐ’์„ ๊ฐ–์Šต๋‹ˆ๋‹ค.

    ๋‹ค์Œ ์ฝ”๋“œ์™€ ๊ฐ™์€ ์˜๋ฏธ์ž…๋‹ˆ๋‹ค.

    const aliasIdentifier = expression.identifier;

    ์‹ค์ œ ๋ณ„๋ช…์„ ์ ์šฉํ•œ ์ฝ”๋“œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

    const flower = {
      name: 'Rose',
      color: 'Red'
    };
    
    const { color: realColor } = flower;
    
    console.log(realColor); // 'Red'
    console.log(color); // ์—๋Ÿฌ ๋ฐœ์ƒ(color is not defined)

    ์œ„ ์ฝ”๋“œ๋Š” realColor๋กœ ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•˜๊ณ , flower.color๊ฐ’์„ ํ• ๋‹นํ•˜์—ฌ ๋น„๊ตฌ์กฐํ™”๋ฅผ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค.

    6. ๋‚ด๋ถ€ ๊ฐ์ฒด์˜ ์†์„ฑ๊ฐ’ ๊ฐ€์ ธ์˜ค๊ธฐ

    ์•ž์—์„œ ํ™•์ธํ•œ ์ƒ˜ํ”Œ์€ ์›์‹œํ˜• ๋ฐ์ดํ„ฐ ํƒ€์ž…(String, Number ๋“ฑ)์˜ ์†์„ฑ์„ ๊ฐ–๋Š” ์ผ๋ฐ˜ ๊ฐ์ฒด์ž…๋‹ˆ๋‹ค.

    ๊ทธ๋Ÿฌ๋‚˜ ์ผ๋ถ€๋Š” ๊ฐ์ฒด ์•ˆ์— ๋˜ ๋‹ค๋ฅธ ๊ฐ์ฒด๋ฅผ ๊ฐ–์Šต๋‹ˆ๋‹ค. ๋ฌผ๋ก  ์ด๋Ÿฌํ•œ ํ˜•ํƒœ๋ฅผ ๊ฐ€์ง„ ๊ฐ์ฒด๋„ ๋น„๊ตฌ์กฐํ™” ํ• ๋‹น์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

    const { nestedObject: { identifier } } = expression;

    nestedObject๋Š” ๋‚ด๋ถ€ ๊ฐ์ฒด๋ช…์ด๊ณ , identifier๋Š” ๋‚ด๋ถ€ ๊ฐ์ฒด์˜ ์†์„ฑ๋ช…์ž…๋‹ˆ๋‹ค.

    ๋น„๊ตฌ์กฐํ™” ํ• ๋‹น์„ ํ†ตํ•ด identifier๊ฐ€ ๋‚ด๋ถ€ ๊ฐ์ฒด์˜ ์†์„ฑ๊ฐ’์„ ๊ฐ€์ง€๋ฉฐ, ๋‹ค์Œ ์ฝ”๋“œ์™€ ๊ฐ™์€ ์˜๋ฏธ์ž…๋‹ˆ๋‹ค.

    const identifier = expression.nestedObject.identifier;

    ๋‚ด๋ถ€ ๊ฐ์ฒด์˜ ๊นŠ์ด๋Š” ์ œํ•œ์ด ์—†์œผ๋ฉฐ, ์ค‘๊ด„ํ˜ธ{ }๋งŒ ์ถ”๊ฐ€ํ•ด์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

    const { propA: { propB: { propC: {......} } } } = object;

    ๋‹ค์Œ ์ƒ˜ํ”Œ์„ ํ†ตํ•ด ๋‚ด๋ถ€ ๊ฐ์ฒด์— ์ ‘๊ทผํ•˜์—ฌ ๋น„๊ตฌ์กฐํ™” ํ• ๋‹น์„ ์ง„ํ–‰ํ•˜๋Š” ์ฝ”๋“œ๋ฅผ ํ™•์ธํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

    const flower = {
      name: 'Rose',
      color: 'Red',
      blooming: {
       season: 'spring'
      }
    };
    
    //Object destructuring
    const { blooming: { season } } = flower;
    
    console.log(season) // 'spring'

    ‘const { blooming: { season } } = flower;’๋Š” ๋‚ด๋ถ€ ๊ฐ์ฒด blooming์˜ season ์†์„ฑ๊ฐ’์„ ํ• ๋‹นํ•ฉ๋‹ˆ๋‹ค.

    7. ๋™์  ์ด๋ฆ„์œผ๋กœ ์†์„ฑ๊ฐ’ ๊ฐ€์ ธ์˜ค๊ธฐ

    ๋™์  ์ด๋ฆ„(Dynamic Name)์˜ ์‚ฌ์šฉ๋„ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

    const { [propName]: identifier } = expression;

    propName์€ ์†์„ฑ๋ช…(์ฃผ๋กœ string ํƒ€์ž…)์ด๋ฉฐ, identifier๋Š” ๊ฐ’์ด ํ• ๋‹น๋  ๋ณ€์ˆ˜์˜ ์ด๋ฆ„์ž…๋‹ˆ๋‹ค.

    ๋‹ค์Œ ์ฝ”๋“œ์™€ ๊ฐ™์€ ์˜๋ฏธ๋ฅผ ๊ฐ–์Šต๋‹ˆ๋‹ค.

    const identifier = expression[propName];

    ๋‹ค์Œ ์ƒ˜ํ”Œ์„ ํ†ตํ•ด ์†์„ฑ๋ช…์œผ๋กœ ์‚ฌ์šฉ๋˜๋Š” prop์„ ํ™•์ธํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

    const flower = {
      name: 'Rose',
      color: 'Red'
    };
    
    const prop = 'name';
    const { [prop]: flowerName } = expression;
    
    console.log(flowerName); // 'Rose'

    ‘const { [prop]: flowerName } = expression’์—์„œ flowerName ๋ณ€์ˆ˜์— flower[prop] ์†์„ฑ๊ฐ’์„ ํ• ๋‹นํ•˜๋ฉฐ, prop์€ ์ ‘๊ทผํ•  ์†์„ฑ๋ช…์„ ๊ฐ€์ง„ ๋ณ€์ˆ˜์ž…๋‹ˆ๋‹ค.

    8. ๋น„๊ตฌ์กฐํ™” ํ• ๋‹น ํ›„ ๋‚จ๊ฒจ์ง„ ๊ฐ์ฒด

    ๋‚˜๋จธ์ง€ ๋ฐ์ดํ„ฐ๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” ๋ฌธ๋ฒ•์€ ๋น„๊ตฌ์กฐํ™” ํ• ๋‹น์—์„œ ์œ ์šฉํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    const { identifier, ...rest } = expression;

    ์œ„ ์ฝ”๋“œ์—์„œ identifier๋ฅผ ์ œ์™ธํ•œ ๋‚˜๋จธ์ง€ ์†์„ฑ์€ rest ๋ณ€์ˆ˜์— ํ• ๋‹น๋ฉ๋‹ˆ๋‹ค.

    ์•„๋ž˜ ์ฝ”๋“œ์—์„œ name ์†์„ฑ์„ ์ œ์™ธํ•œ ๋‚˜๋จธ์ง€ ์†์„ฑ์„ ์ •๋ฆฌํ•˜๋Š” ์ƒ˜ํ”Œ์„ ํ™•์ธํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

    const flower = {
      name: 'Rose',
      color: 'Red'
    };
    
    const { name, ...realColor } = flower;
    
    console.log(realColor) // { realColor: 'Red' }

    name ์†์„ฑ๊ฐ’์„ ํ• ๋‹นํ•œ ๋’ค ๋‚˜๋จธ์ง€ ์†์„ฑ๋“ค์€ realColor ๋ณ€์ˆ˜์— ํ• ๋‹นํ•ฉ๋‹ˆ๋‹ค.

    9. ์ž์ฃผ ์‚ฌ์šฉ๋˜๋Š” ๊ตฌ๋ฌธ

    ์•ž์—์„œ ํ™•์ธํ•œ๋Œ€๋กœ ๋น„๊ตฌ์กฐํ™”๋Š” ์†์„ฑ๊ฐ’์„ ๋ณ€์ˆ˜์— ํ• ๋‹นํ•ฉ๋‹ˆ๋‹ค.

    ๋ณ€์ˆ˜ ํƒ€์ž…์€ const, let, var ๋ชจ๋‘ ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•˜๋ฉฐ, ์ด๋ฏธ ์„ ์–ธ๋œ ๋ณ€์ˆ˜์—๋„ ํ• ๋‹น์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

    let์„ ์‚ฌ์šฉํ•œ ๋ฐฉ๋ฒ•์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

    //let
    const flower = {
      name: 'Rose',
    };
    
    let { name } = flower;
    
    console.log(name); // 'Rose'

    var๋ฅผ ์‚ฌ์šฉํ•œ ๋ฐฉ๋ฒ•์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

    //var
    const flower = {
      name: 'Rose',
    };
    
    var { name } = flower;
    
    console.log(name); // 'Rose'

    ์ด๋ฏธ ์„ ์–ธ๋œ ๋ณ€์ˆ˜์— ํ• ๋‹นํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

    //existing variable
    
    let name;
    
    const flower = {
      name: 'Rose',
    };
    
    ({ name } = flower);
    
    console.log(name); // 'Rose'

    for…of ๋ฐ˜๋ณต๋ฌธ์„ ์‚ฌ์šฉํ•œ ๋น„๊ตฌ์กฐํ™” ํ• ๋‹น์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

    const flowers = [
      { name: 'Rose' },
      { name: 'Lily' }
    ];
    
    for (const { name } of flowers) {
      console.log(name) //'Rose', 'Lily'
    }

    ์‚ฌ์‹ค ๋น„๊ตฌ์กฐํ™”๋Š” ํ• ๋‹น์ด ๊ฐ€๋Šฅํ•œ ๊ณณ์ด๋ฉด ์–ด๋””๋“ ์ง€ ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•˜๋‹ค๊ณ  ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    ์˜ˆ๋ฅผ ๋“ค๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์ด ํ•จ์ˆ˜ ํŒŒ๋ผ๋ฏธํ„ฐ์˜ ๋น„๊ตฌ์กฐํ™”๋„ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

    const flowers = [
      { name: 'Rose' },
      { name: 'Lily' }
    ];
    
    const names = flowers.map(
      function({ name }) {
        return name;
      }
    )
    
    console.log(names); // ['Rose', 'Lily']

    ‘function({ name })’์€ ํ•จ์ˆ˜์˜ ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ๋น„๊ตฌ์กฐํ™”ํ•˜์—ฌ, name ๋ณ€์ˆ˜์— name ์†์„ฑ์„ ํ• ๋‹นํ•ฉ๋‹ˆ๋‹ค.

    10. ๋ณ€์ˆ˜ ๊ฐ’ ์„œ๋กœ ๊ตํ™˜(swap)

    ๋น„๊ตฌ์กฐํ™” ํ• ๋‹น์„ ์‚ฌ์šฉํ•˜๋ฉด ๋‘ ๋ณ€์ˆ˜์˜ ๊ฐ’์„ ํŽธ๋ฆฌํ•˜๊ฒŒ ๊ตํ™˜ํ•  ์ˆ˜๋„ ์žˆ์œผ๋ฉฐ, ๊ธฐ์กด์ฒ˜๋Ÿผ ๋ฐ์ดํ„ฐ๋ฅผ ์ž„์‹œ๋กœ ๋ณด๊ด€ํ•  ๋ณ€์ˆ˜๊ฐ€ ํ•„์š”ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

    let a = 1;
    let b = 2;
    
    //๊ธฐ์กด ๊ตํ™˜ ๋ฐฉ๋ฒ•
    const temp = a;
    a = b;
    b = temp;
    
    //๋น„๊ตฌ์กฐํ™”๋ฅผ ํ†ตํ•œ ๊ตํ™˜
    [a, b] = [b, a];

    11. ์ •๋ฆฌ

    ๋น„๊ตฌ์กฐํ™” ํ• ๋‹น์€ ๊ฐ์ฒด์˜ ์†์„ฑ๊ฐ’์„ ๋น ๋ฅด๊ณ  ์‰ฝ๊ฒŒ ๋ณ€์ˆ˜์— ํ• ๋‹นํ•  ์ˆ˜ ์žˆ๋Š” ์•„์ฃผ ๊ฐ•๋ ฅํ•œ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.
    ํŠนํžˆ ๊ฐ„๊ฒฐํ•œ ๋ฌธ๋ฒ•๊ณผ ์—ฌ๋Ÿฌ ๋ณ€์ˆ˜๋ฅผ ํ•œ ๋ฒˆ์— ์„ ์–ธํ•  ์ˆ˜ ์žˆ๋Š” ์ ์ด ๋งค๋ ฅ์ ์ž…๋‹ˆ๋‹ค.


    ๋น„๊ตฌ์กฐํ™” ํ• ๋‹น์— ๋Œ€ํ•ด ๊ฐ„๊ฒฐํ•˜๋ฉด์„œ๋„ ๋ˆ„๊ตฌ๋‚˜ ์ดํ•ดํ•˜๊ธฐ ์‰ฝ๋„๋ก ์ž‘์„ฑ๋œ ์ข‹์€ ๊ธ€์„ ์ ‘ํ•˜๊ฒŒ ๋˜์–ด ์ข‹์€ ์ •๋ณด๋ฅผ ๋‚˜๋ˆ„๊ณ ์ž ์–‘ํ•ด๋ฅผ ๊ตฌํ•˜์—ฌ ๊ตญ๋‚ด์— ๋งž๊ฒŒ ๋ฒˆ์—ญํ•˜๊ณ  ์ผ๋ถ€ ๋‚ด์šฉ์„ ์ถ”๊ฐ€ํ•˜์—ฌ ๊ธ€์„ ์˜ฌ๋ฆฌ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๊ถ๊ธˆํ•˜์‹  ์‚ฌํ•ญ์€ ๋Œ“๊ธ€ ๋‚จ๊ฒจ์ฃผ์„ธ์š”.

    ์ถœ์ฒ˜: https://dmitripavlutin.com/javascript-object-destructuring/

    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํด๋กœ์ € ํŒŒํ—ค์น˜๊ธฐ(What is Javascript Closure)

    Venezia

    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๋ณ€์ˆ˜๋Š” ์ „์—ญ(global)๋ณ€์ˆ˜์™€ ์ง€์—ญ(local)๋ณ€์ˆ˜๊ฐ€ ์žˆ์–ด์š”.

    ์ „์—ญ๋ณ€์ˆ˜๋Š” ์œ„์น˜์— ์ƒ๊ด€์—†์ด ๋ชจ๋“  ํ•จ์ˆ˜๊ฐ€ ์ ‘๊ทผ ๊ฐ€๋Šฅํ•˜์ง€๋งŒ ์ง€์—ญ๋ณ€์ˆ˜๋Š” ํ•ด๋‹น ์Šค์ฝ”ํ”„ ๋‚ด๋ถ€์—์„œ๋งŒ ์ ‘๊ทผ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

    ํ•˜์ง€๋งŒ ํด๋กœ์ €๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ „์—ญ๋ณ€์ˆ˜์ฒ˜๋Ÿผ ์ง€์—ญ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์–ด์š”. ์•ˆ์ „์„ฑ์„ ๋ณด์žฅํ•˜๋ฉด์„œ์š”.

    ์ „์—ญ๋ณ€์ˆ˜

    ํ•จ์ˆ˜๋Š” ํ•จ์ˆ˜ ๋‚ด ์„ ์–ธ๋œ ๋ชจ๋“  ๋ณ€์ˆ˜์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์–ด์š”.

    ์ƒ˜ํ”Œ1


    function testFunction( ) {

      let abc = 10;

       return abc * 2;

    }


    ๋˜ํ•œ ํ•จ์ˆ˜ ์™ธ๋ถ€์˜ ๋ณ€์ˆ˜์—๋„ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์–ด์š”.

    ์ƒ˜ํ”Œ2


    let abc = 10;

    function testFunction( ) {

       return abc * 2;


    ์ƒ˜ํ”Œ2์—์„œ abc๋Š” ์ „์—ญ๋ณ€์ˆ˜์ž…๋‹ˆ๋‹ค. ์›น ํŽ˜์ด์ง€์—์„œ ์ „์—ญ ๋ณ€์ˆ˜๋Š” window ๊ฐ์ฒด์— ์†ํ•ฉ๋‹ˆ๋‹ค. 

    ์ „์—ญ๋ณ€์ˆ˜๋Š” ํŽ˜์ด์ง€ ๋‚ด ๋ชจ๋“  ์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์ ‘๊ทผํ•˜์—ฌ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ์–ด์š”.

    ์ƒ˜ํ”Œ1์—์„œ abc๋Š” ์ง€์—ญ๋ณ€์ˆ˜์ž…๋‹ˆ๋‹ค. ์ง€์—ญ๋ณ€์ˆ˜๋Š” ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•œ ํ•จ์ˆ˜ ๋‚ด์—์„œ๋งŒ ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•ด์š”. 

    ๋‹ค๋ฅธ ํ•จ์ˆ˜๋‚˜ ์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ์—๊ฒŒ๋Š” ๊ฐ์ถฐ์ ธ ์žˆ๋Š” ๊ฒƒ์ด์ฃ .

    ์ „์—ญ๋ณ€์ˆ˜์™€ ์ง€์—ญ๋ณ€์ˆ˜๋Š” ์ด๋ฆ„์ด ๊ฐ™์•„๋„ ๋‹ค๋ฅธ ๋ณ€์ˆ˜์ž…๋‹ˆ๋‹ค. ํ•˜๋‚˜๋ฅผ ์ˆ˜์ •ํ•ด๋„ ๋‹ค๋ฅธ ๋ณ€์ˆ˜๋Š” ์˜ํ–ฅ์„ ๋ฐ›์ง€ ์•Š์ฃ .

    ์„ ์–ธ์ž(var, let, const) ์—†์ด ์ƒ์„ฑ๋œ ๋ณ€์ˆ˜๋Š” ๋ชจ๋‘ ์ „์—ญ๋ณ€์ˆ˜์ž…๋‹ˆ๋‹ค. ํŠน์ • ํ•จ์ˆ˜ ์•ˆ์—์„œ ์ƒ์„ฑ ๋˜์—ˆ๋‹ค๊ณ  ํ•ด๋„ ๋ง์ด์ฃ .

    function testFunction() {

       abc = 10;

    }

    ๋ณ€์ˆ˜์˜ ์ƒ๋ช… ์ฃผ๊ธฐ(lifetime)

    ์ „์—ญ๋ณ€์ˆ˜๋Š” ํŽ˜์ด์ง€๊ฐ€ ์ข…๋ฃŒ๋  ๋•Œ(๋‹ค๋ฅธ ํŽ˜์ด์ง€๋กœ ๋„˜์–ด๊ฐ€๊ฑฐ๋‚˜ ์œˆ๋„์šฐ ์ฐฝ์„ ์ข…๋ฃŒ)๊นŒ์ง€ ์œ ํšจํ•ฉ๋‹ˆ๋‹ค.

    ๊ทธ๋ฆฌ๊ณ  ์ง€์—ญ๋ณ€์ˆ˜๋Š” ํ•จ์ˆ˜๊ฐ€ ํ˜ธ์ถœ๋  ๋•Œ ์ƒ์„ฑ๋˜์–ด ํ•จ์ˆ˜๊ฐ€ ์ข…๋ฃŒ๋  ๋•Œ๊นŒ์ง€ ์œ ํšจํ•ฉ๋‹ˆ๋‹ค.

    ์ˆซ์ž ์นด์šดํŒ…์˜ ๋ฌธ์ œ

    ๋ชจ๋“  ํ•จ์ˆ˜์—์„œ ์ ‘๊ทผ์ด ๊ฐ€๋Šฅํ•œ ๋ณ€์ˆ˜๋ฅผ ๋งŒ๋“ค์–ด ์ˆซ์ž ์นด์šดํŒ…์— ์‚ฌ์šฉํ•ด๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

    ์ „์—ญ ๋ณ€์ˆ˜์™€ ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•ด ์ˆซ์ž๋ฅผ ์นด์šดํŒ…ํ•ฉ๋‹ˆ๋‹ค.

    ์ƒ˜ํ”Œ3


    let cnt = 0;

    function addNum(){

       cnt += 1;

    }

    addNum();

    addNum();      

    // ๊ฒฐ๊ณผ:2


    ํ•˜์ง€๋งŒ ์œ„์˜ ์ฝ”๋“œ๋Š” addNum() ํ•จ์ˆ˜๊ฐ€ ์•„๋‹Œ ๋‹ค๋ฅธ ์ฝ”๋“œ๋กœ๋„ cnt ๋ณ€์ˆ˜์— ์ ‘๊ทผํ•˜์—ฌ ์ˆ˜์ •์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. 

    ๋”ฐ๋ผ์„œ cnt ๋ณ€์ˆ˜๋Š” addNum() ํ•จ์ˆ˜ ๋‚ด๋ถ€์— ์กด์žฌํ•ด์•ผ ๋‹ค๋ฅธ ์ฝ”๋“œ์—์„œ ์ ‘๊ทผํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

    ์ƒ˜ํ”Œ4


    let cnt = 0;

    function addNum() {

       let cnt = 0;

      cnt += 1;

    }

    addNum();

    addNum();

    // ๊ฒฐ๊ณผ๋Š” 2์ผ ๊ฒƒ ๊ฐ™์ง€๋งŒ 0์ด ๋ฐ˜ํ™˜


    ๊ฐ™์€ ์ด๋ฆ„์˜ ์ „์—ญ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•˜์˜€๊ธฐ ๋•Œ๋ฌธ์— ๊ฒฐ๊ณผ๋Š” 2๊ฐ€ ์•„๋‹Œ 0์ด ๋ฉ๋‹ˆ๋‹ค. 

    ๊ทธ๋Ÿผ ํ•จ์ˆ˜์˜ ๋ฐ˜ํ™˜๊ฐ’์„ ์‚ฌ์šฉํ•ด ์ „์—ญ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ์ ‘๊ทผ ๋ฐฉ๋ฒ•์„ ํ™•์ธํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

    ์ƒ˜ํ”Œ5


    function addNum() {

       let cnt = 0;

       cnt += 1;

       return cnt;

    }

    addNum();

    addNum();

    // cnt๋Š” 2๊ฐ€ ๋˜์–ด์•ผ ํ•˜์ง€๋งŒ ๊ฒฐ๊ณผ๋Š” 1์ด ๋ฐ˜ํ™˜


    ํ•จ์ˆ˜ ๋‚ด๋ถ€์— ์„ ์–ธํ•œ ์ง€์—ญ๋ณ€์ˆ˜๋Š” ํ•จ์ˆ˜ ํ˜ธ์ถœ ์‹œ๋งˆ๋‹ค ๋ฆฌ์…‹๋˜๋ฏ€๋กœ ์˜๋„ํ•œ๋Œ€๋กœ ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์ด ๋ฌธ์ œ๋ฅผ ๋‚ด๋ถ€ ํ•จ์ˆ˜(inner function)๋ฅผ ์‚ฌ์šฉํ•ด ํ•ด๊ฒฐํ•ฉ๋‹ˆ๋‹ค.

    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์ค‘์ฒฉ ํ•จ์ˆ˜(Nested function)

    ๋ชจ๋“  ํ•จ์ˆ˜๋Š” ์ „์—ญ ์Šค์ฝ”ํ”„์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. 

    ๊ทธ๋ฆฌ๊ณ  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋ชจ๋“  ํ•จ์ˆ˜๋Š” ์ž์‹ ์„ ๊ฐ์‹ธ๊ณ  ์žˆ๋Š” ๋ถ€๋ชจ ์Šค์ฝ”ํ”„์— ์ ‘๊ทผ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. 

    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์ค‘์ฒฉ ํ•จ์ˆ˜๋ฅผ ์ง€์›ํ•˜๋ฉฐ, ์ค‘์ฒฉ ํ•จ์ˆ˜ ์—ญ์‹œ ์ž์‹ ์„ ๊ฐ์‹ธ๊ณ  ์žˆ๋Š” ๋ถ€๋ชจ ์Šค์ฝ”ํ”„์— ์ ‘๊ทผ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

    ์•„๋ž˜ ์ƒ˜ํ”Œ์„ ํ™•์ธํ•ด๋ณด๋ฉด ๋‚ด๋ถ€ํ•จ์ˆ˜ plus()๋Š” ๋ถ€๋ชจ ํ•จ์ˆ˜์— ์žˆ๋Š” cnt ๋ณ€์ˆ˜์— ์ ‘๊ทผ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

    ์ƒ˜ํ”Œ6


    function addNum() {

       let cnt = 0;

       function plus() {

          cnt += 1;

       }

       plus();  

       return cnt;

    }


    cnt = 0์„ ํ•œ๋ฒˆ๋งŒ ์„ ์–ธํ•  ๋ฐฉ๋ฒ•๊ณผ plus() ํ•จ์ˆ˜์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์„ ์ฐพ์œผ๋ฉด ์œ„์—์„œ ํ™•์ธํ•œ ์ˆซ์ž ์นด์šดํŒ…์˜ ๋”œ๋ ˆ๋งˆ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    ์—ฌ๊ธฐ์„œ ์šฐ๋ฆฌ๋Š” ํด๋กœ์ €๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    ํด๋กœ์ €๋ฅผ ํ™•์ธํ•˜๊ธฐ ์ „์— ๋จผ์ € ์ฆ‰์‹œ์‹คํ–‰ํ•จ์ˆ˜(IIFE, Immediately Invoked Function Expressions)์— ๋Œ€ํ•ด ๊ฐ„๋žตํžˆ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

    ์ฆ‰์‹œ์‹คํ–‰ํ•จ์ˆ˜๋Š” ํ˜ธ์ถœ์—†์ด ์ž๋™์œผ๋กœ ์‹คํ–‰๋˜๋Š” ํ•จ์ˆ˜๋กœ, ํ•จ์ˆ˜๋ฅผ ๊ด„ํ˜ธ๋กœ ๋ฌถ๊ณ  ๋ฐ˜๋“œ์‹œ ๋์— ()๋ฅผ ๋ถ™์—ฌ์•ผ ํ•ฉ๋‹ˆ๋‹ค.

    ์•„๋ž˜๋Š” ์ฆ‰์‹œ์‹คํ–‰ํ•จ์ˆ˜์˜ ํ‘œํ˜„์‹ ์ƒ˜ํ”Œ์ž…๋‹ˆ๋‹ค.

    ์ƒ˜ํ”Œ7


    (function() {

      let abc = โ€œself-invokingโ€;

    })();


    ๊ทธ๋Ÿผ ์ด์ œ ํด๋กœ์ €๋ฅผ ํ™•์ธํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

    Austria(2013)

    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํด๋กœ์ €(Closure)

    ํด๋กœ์ €๋Š” ์ฆ‰์‹œ์‹คํ–‰ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•ฉ๋‹ˆ๋‹ค.

    ์ƒ˜ํ”Œ8


    const addNum = (function() {

       let cnt = 0;

       return function() {

       cnt += 1

    ย ย  return cnt;

       })();

    addNum();

    addNum();

    // ๊ฒฐ๊ณผ:2


    addNum ๋ณ€์ˆ˜์—๋Š” ์ฆ‰์‹œ์‹คํ–‰ํ•จ์ˆ˜์˜ ๋ฐ˜ํ™˜๊ฐ’์ด ํ• ๋‹น๋ฉ๋‹ˆ๋‹ค. 

    ์ฆ‰์‹œ์‹คํ–‰ํ•จ์ˆ˜๋Š” ํ•œ๋ฒˆ๋งŒ ์‹คํ–‰๋˜๋ฉฐ, cnt๋ฅผ 0์œผ๋กœ ์„ ์–ธํ•œ ํ›„ ํ•จ์ˆ˜ ํ‘œํ˜„์‹์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

    ์ด๋ฅผ ํ†ตํ•ด addNum์€ ํ•จ์ˆ˜๊ฐ€ ๋˜๋ฉฐ, ๋ถ€๋ชจ ์Šค์ฝ”ํ”„๊ฐ€ ์ข…๋ฃŒ๋˜์–ด๋„ ๋ถ€๋ชจ ์Šค์ฝ”ํ”„์— ์กด์žฌํ•˜๋Š” cnt ๋ณ€์ˆ˜์— ์ ‘๊ทผ์ด ๊ฐ€๋Šฅํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

    ์ด๊ฒƒ์ด ๋ฐ”๋กœ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํด๋กœ์ €์ž…๋‹ˆ๋‹ค. ํด๋กœ์ €๋Š” ์ด์™€ ๊ฐ™์ด ํ•จ์ˆ˜์—์„œ ์ƒํƒœ ์œ ์ง€๊ฐ€ ๊ฐ€๋Šฅํ•œ ๊ฐœ๋ณ„์ ์ธ ๋ณ€์ˆ˜๋“ค์„ ๊ฐ–๋„๋ก ํ•ฉ๋‹ˆ๋‹ค. 

    cnt๋Š” ์ต๋ช…ํ•จ์ˆ˜์˜ ์Šค์ฝ”ํ”„์— ์˜ํ•ด ๋ณดํ˜ธ๋ฐ›์œผ๋ฉฐ, ์˜ค์ง addNum ํ•จ์ˆ˜๋งŒ์„ ์‚ฌ์šฉํ•ด ์ ‘๊ทผ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.


    ํด๋กœ์ €๋Š” ๋ถ€๋ชจ ํ•จ์ˆ˜๊ฐ€ ์ข…๋ฃŒ๋œ ํ›„์—๋„ ๋ถ€๋ชจ ์Šค์ฝ”ํ”„์˜ ๋ณ€์ˆ˜์— ์ ‘๊ทผ์ด ๊ฐ€๋Šฅํ•œ ํ•จ์ˆ˜๋กœ, ํŠน์ • ํ•จ์ˆ˜๋งŒ ๋ณ€์ˆ˜์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๊ธฐ ์œ„ํ•œ ์•ˆ์ „ ์žฅ์น˜๋ผ๊ณ  ๋ณด๋ฉด ๋ฉ๋‹ˆ๋‹ค. 
    ์ฐธ๊ณ ๋กœ ํด๋กœ์ €๋กœ ์ ‘๊ทผํ•˜๋Š” ๋ณ€์ˆ˜์™€ ๋ถ€๋ชจ ์Šค์ฝ”ํ”„์— ์กด์žฌํ–ˆ๋˜ ๋ณ€์ˆ˜๋Š” ์™„์ „ํžˆ ๊ฐ™์€ ๊ณต๊ฐ„์„ ์ฐธ์กฐํ•˜๋Š” ๊ฒƒ์€ ์•„๋‹ˆ๊ณ  ๊ฐ๊ฐ ๋…๋ฆฝ์ ์ธ ๊ฐ์ฒด์ž…๋‹ˆ๋‹ค.


    ์ฐธ๊ณ ์ž๋ฃŒ https://www.w3schools.com/js/js_function_closures.asp