๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๐Ÿ“ฐ ์–ธ์–ด/JS - ๋น„๊ธฐ๋„ˆ ํŽธ

(8)
๋ฉ”์†Œ๋“œ MDN_Method > 1. ๋ฉ”์†Œ๋“œ ์ •์˜ const obj = { foo() { return 'foo'; } bar: function() { return 'bar'; } }; console.log(obj.foo()); // expected output: "foo" 2. ๋ฉ”์†Œ๋“œ ํ˜ธ์ถœ ํ˜•ํƒœ 1) OOP์˜ ์ผ๋ฐ”์ ์ธ ๋ฉ”์†Œ๋“œ ํ˜ธ์ถœ ํ˜•ํƒœ var data = ["book", "์ฑ…", "123"] var obj = new Array(); var result = obj.concat(data); //concat ๋ฉ”์†Œ๋“œ ํ˜ธ์ถœ 2) JS์˜ ๋ฉ”์†Œ๋“œ ํ˜ธ์ถœ ํ˜•ํƒœ - ๋ฐ์ดํ„ฐ๋กœ ๋ฉ”์†Œ๋“œ ํ˜ธ์ถœ var data = ["book", "์ฑ…", "123"] var result = data.concat(); //Array์˜ concat ๋ฉ”์†Œ๋“œ ํ˜ธ..
ES6 - class MDN_Classes > function ์˜ค๋ธŒ์ ํŠธ๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๋ชฉ์  ๊ทธ์ € function ์˜ค๋ธŒ์ ํŠธ ๊ฐœ๋…์œผ๋กœ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜ ๋˜๋Š” ํด๋ž˜์Šค ๊ฐœ๋…์œผ๋กœ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ function ์˜ค๋ธŒ์ ํŠธ๋ฅผ ์ƒ์„ฑํ•˜์˜€๋‹ค. # ํ”„๋กœํ† ํƒ€์ž…์— ๋ฉ”์†Œ๋“œ๋ฅผ ์ž‘์„ฑ X => ๊ทธ์ € function ์˜ค๋ธŒ์ ํŠธ ๊ฐœ๋… var book = function(){}; # ํ”„๋กœํ† ํƒ€์ž…์— ๋ฉ”์†Œ๋“œ ์ž‘์„ฑ O => ํด๋ž˜์Šค ๊ฐœ๋… var Book = function(){}; Book.prototype.getBook = function(){}; ES6์ด์ „์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” prototype์— ๋ฉ”์†Œ๋“œ๋ฅผ ์—ฐ๊ฒฐํ•˜์—ฌ ํด๋ž˜์Šค ๊ฐœ๋…์„ ์‚ฌ์šฉํ•˜์˜€๋‹ค. ํ•˜์ง€๋งŒ, ES6๋ถ€ํ„ด classํ‚ค์›Œ๋“œ๊ฐ€ ์ถ”๊ฐ€๋˜๋ฉด์„œ classํ‚ค์›Œ๋“œ๋ฅผ ์ด์šฉํ•˜์—ฌ ํด๋ž˜์Šค๋ฅผ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค. class 1. class class๋Š” ์‚ฌ..
for()๊ณผ forEach() MDN_Array.prototype.forEach() > forEach() ๋ฐฐ์—ด์— ์žˆ๋Š” ๊ฐ ์š”์†Œ์— ๋Œ€ํ•ด ํ•˜๋‚˜์”ฉ ์ฝ์–ด ๊ฐ€๋ฉด์„œ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•œ๋‹ค. ์‚ญ์ œํ–ˆ๊ฑฐ๋‚˜ ์ดˆ๊ธฐํ™”ํ•˜์ง€ ์•Š์€ ์ธ๋ฑ์Šค ์†์„ฑ์— ๋Œ€ํ•ด์„œ๋Š” ์‹คํ–‰ํ•˜์ง€ ์•Š๋Š”๋‹ค. ์ฝœ๋ฐฑ ํ•จ์ˆ˜ ํŒŒ๋ผ๋ฏธํ„ฐ : ์—˜๋ฆฌ๋จผํŠธ ๊ฐ’, ์ธ๋ฑ์Šค, ๋ฐฐ์—ด ์ „์ฒด let list = ["A", "B", "C"]; list.forEach(function(el, index, all){ log(el + ":" + index + ":" + all); }); //A:0:A,B,C //B:0:A,B,C //C:0:A,B,C ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ๋ถ„๋ฆฌํ•  ์ˆ˜ ์žˆ์–ด ๋…๋ฆฝ์„ฑ์ด ์ข‹์•„์ง„๋‹ค. var list = ["A", "B", "C"]; var list2 = ["D", "F", "G"]; var fn = function(el..
ํ•จ์ˆ˜ ํ”„๋กœํผํ‹ฐ - call, apply/ bind MDN_Function.prototype.call() > MDN_Function.prototype.apply() > MDN_Function.prototype.bind() > 1. call() : ํ•จ์ˆ˜ ํ˜ธ์ถœ ์ฃผ์–ด์ง„ this ๊ฐ’ ๋ฐ ๊ฐ๊ฐ ์ „๋‹ฌ๋œ ์ธ์ˆ˜์™€ ํ•จ๊ป˜ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•œ๋‹ค. function getTotal(one, two){ return one + two; } let result = getTotal.call(this, 10, 20); log(result); //30 call() ๋ฉ”์†Œ๋“œ์˜ ์ฒซ ๋ฒˆ์งธ ํŒŒ๋ผ๋ฏธํ„ฐ์—๋Š” ํ˜ธ์ถœ๋œ ํ•จ์ˆ˜์—์„œ this๋กœ ์ฐธ์กฐํ•  ์˜ค๋ธŒ์ ํŠธ๋ฅผ ์ž‘์„ฑํ•œ๋‹ค. ์ผ๋ฐ˜์ ์œผ๋กœ this๋ฅผ ์‚ฌ์šฉํ•˜์ง€๋งŒ, ๋‹ค๋ฅธ ์˜ค๋ธŒ์ ํŠธ๋กœ๋„ ์ž‘์„ฑ์ด ๊ฐ€๋Šฅํ•˜๋‹ค. let value = {one: 10, two: 20}; function ge..
์˜ค๋ธŒ์ ํŠธ ํ”„๋กœํ† ํƒ€์ž… JavaScript : ํ”„๋กœํ† ํƒ€์ž…์˜ ์ดํ•ด > MDN_Object Prototypes > ์ƒํ™œ์ฝ”๋”ฉ_prototype > JavaScript๋Š” ๊ธฐ์กด์˜ ๊ฐ์ฒด๋ฅผ ๋ณต์‚ฌ(cloning)ํ•˜์—ฌ ์ƒˆ๋กœ์šด ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•˜๋Š” ํ”„๋กœํ† ํƒ€์ž… ๊ธฐ๋ฐ˜์˜ ์–ธ์–ด์ด๋‹ค. ํ”„๋กœํ† ํƒ€์ž… ๊ธฐ๋ฐ˜ ์–ธ์–ด๋Š” ๊ฐ์ฒด ์›ํ˜•์ธ ํ”„๋กœํ† ํƒ€์ž…์„ ์ด์šฉํ•˜์—ฌ ์ƒˆ๋กœ์šด ๊ฐ์ฒด๋ฅผ ๋งŒ๋“ค์–ด๋‚ธ๋‹ค. 1. ํ•จ์ˆ˜์™€ ๊ฐ์ฒด์˜ ๋‚ด๋ถ€ ๊ตฌ์กฐ ์ดํ•ด 1) ํ•จ์ˆ˜ ์ •์˜ ํ•จ์ˆ˜ ๋ฉค๋ฒ„๋กœ prototype์†์„ฑ์ด ์žˆ๋‹ค. ์ด ์†์„ฑ์€ ๋‹ค๋ฅธ ๊ณณ์— ์ƒ์„ฑ๋œ ํ•จ์ˆ˜์ด๋ฆ„์˜ ํ”„๋กœํ† ํƒ€์ž… ๊ฐ์ฒด๋ฅผ ์ฐธ์กฐํ•œ๋‹ค. ํ”„๋กœํ† ํƒ€์ž… ๊ฐ์ฒด์˜ ๋ฉค๋ฒ„์ธ constructor์†์„ฑ์€ ํ•จ์ˆ˜๋ฅผ ์ฐธ์กฐํ•˜๋Š” ๋‚ด๋ถ€๊ตฌ์กฐ๋ฅผ ๊ฐ€์ง„๋‹ค. function Person(){} 2) Personํ•จ์ˆ˜๋ฅผ ํ†ตํ•ด ๊ฐ์ฒด ์ƒ์„ฑ Person ํ•จ์ˆ˜์˜ prototype์†์„ฑ์ด ์ฐธ์กฐํ•˜๋Š” ํ”„๋กœํ† ํƒ€์ž… ๊ฐ์ฒด๋Š” n..
new ์—ฐ์‚ฐ์ž MDN_new operator > new ์—ฐ์‚ฐ์ž new ์—ฐ์‚ฐ์ž๋Š” ์˜ค๋ธŒ์ ํŠธ๋กœ ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•˜์—ฌ ๋ฐ˜ํ™˜ํ•œ๋‹ค. ์›๋ณธ์„ ๋ณต์‚ฌํ•˜๋Š” ๊ฐœ๋…์ด๋‹ค. ์ฝ”๋”ฉ๊ด€๋ก€๋กœ ์ฒซ ๋ฌธ์ž๋ฅผ ๋Œ€๋ฌธ์ž๋กœ ์ž‘์„ฑํ•œ๋‹ค. => ์ธ์Šคํ„ด์Šค๋ฅผ ๋งŒ๋“ค๊ฒ ๋‹ค๋Š” ์‹œ๋งจํ‹ฑ์ด๋‹ค. const obj = new Number() ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๋ชฉ์ ์€ ์ธ์Šคํ„ด์Šค๋งˆ๋‹ค ๊ฐ’์„ ๋‹ค๋ฅด๊ฒŒ ๊ฐ–๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•จ์ด๋‹ค. const oneObj = new Number("121"); const twoObj = new Number("456"); log(oneObj.valueOf()); //123 log(twoObj.valueOf()); //456
๋ฐ์ดํ„ฐ ํƒ€์ž… MDN_์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์ž๋ฃŒํ˜• > object ์ฐธ๊ณ ํ•œ ๊ฒŒ์‹œ๋ฌผ > 1. Primitive Type ๋” ์ด์ƒ ๋‚˜๋ˆ ์งˆ ์ˆ˜ ์—†๋Š” single item (string, number, bigint, boolean, null, undefined, ES6 ๋ถ€ํ„ฐ ์ถ”๊ฐ€๋œ symbol) ์›์‹œ ํƒ€์ž…์€ ๋ณ€์ˆ˜์— ํ• ๋‹น๋  ๋•Œ, ๋ฉ”๋ชจ๋ฆฌ์˜ ๊ณ ์ • ํฌ๊ธฐ๋กœ ์›์‹œ ๊ฐ’์„ ์ €์žฅํ•˜๊ณ  ํ•ด๋‹น ์ €์žฅ๋œ ๊ฐ’์„ ๋ณ€์ˆ˜๊ฐ€ ์ง์ ‘์ ์œผ๋กœ ๊ฐ€๋ฆฌํ‚ค๋Š” ํ˜•ํƒœ๋ฅผ ๋ˆ๋‹ค. Object๋ฅผ ์ œ์™ธํ•œ ๋ชจ๋“  ๊ฐ’์€ ๋ณ€๊ฒฝ ๋ถˆ๊ฐ€๋Šฅํ•œ ๊ฐ’(immutable value)์ด๋‹ค. ์žฌํ• ๋‹น ์‹œ ๊ธฐ์กด ๊ฐ’์ด ๋ณ€ํ•˜๋Š”๊ฒƒ ์ฒ˜๋Ÿผ ๋ณด์ผ์ง€ ๋ชฐ๋ผ๋„ ์‚ฌ์‹ค ์ƒˆ๋กœ์šด ๋ฉ”๋ชจ๋ฆฌ์— ์žฌํ• ๋‹นํ•œ ๊ฐ’์ด ์ €์žฅ๋˜๊ณ  ๋ณ€์ˆ˜๊ฐ€ ๊ฐ€๋ฆฌํ‚ค๋Š” ๋ฉ”๋ชจ๋ฆฌ๊ฐ€ ๋‹ฌ๋ผ์กŒ์„ ๋ฟ์ด๋‹ค. 2. Object single item๋“ค์„ ๋ฌถ์–ด์„œ ํ•œ ๋‹จ์œ„๋กœ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” ๋ฐ์ดํ„ฐ..
๋ณ€์ˆ˜ ์„ ์–ธ (var, let, const) 1. ๋ณ€์ˆ˜ ์„ ์–ธ 3๊ฐ€์ง€ ๋ฐฉ๋ฒ• 1) var ( function scope, mutable ) ๋˜๋„๋ก ์‚ฌ์šฉํ•˜์ง€ ๋ง ๊ฒƒ! # ์„ ์–ธ๊ณผ ์ดˆ๊ธฐํ™” var i; // ์„ ์–ธ, "undefined"๊ฐ€ ์ €์žฅ๋จ var sum = 0; // ์„ ์–ธ๊ณผ ์ดˆ๊ธฐํ™” # ํ•œ ๋ฒˆ์— ์—ฌ๋Ÿฌ ๊ฐœ์˜ ๋ณ€์ˆ˜๋ฅผ ํ•จ๊ป˜ ์„ ์–ธํ•  ์ˆ˜ ์žˆ์Œ var i, sum; # ์„ ์–ธ๊ณผ ์ดˆ๊ธฐํ™”๋ฅผ ๋™์‹œ์— ํ•ด์ค„ ์ˆ˜ ์žˆ์Œ var i=0, sum=10, message=”Hello”; # ์„ ์–ธ๋˜์ง€ ์•Š์€ ๋ณ€์ˆ˜๋Š” ์ „์—ญ ๋ณ€์ˆ˜๊ฐ€ ๋จ name = "javascript"; var์˜ ๋ฌธ์ œ์  ๋ณ€์ˆ˜์˜ ์ •์˜๋ฅผ ์œ„์ชฝ์œผ๋กœ ๋Œ์–ด์˜ฌ๋ฆฌ๊ธฐ(๋ณ€์ˆ˜ ํ˜ธ์ด์ŠคํŒ…) ๋•Œ๋ฌธ์—, ๋ณ€์ˆ˜๋ฅผ ์ •์˜ํ•˜๊ธฐ ์ „์— ๊ทธ ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•ด๋„ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•˜์ง€ ์•Š๋Š”๋‹ค. ๋ธ”๋ก ๋‹จ์œ„๋ฅผ ์ฒ ์ €ํžˆ ๋ฌด์‹œํ•˜๋Š” ํ•จ์ˆ˜ ์œ ํšจ๋ฒ”์œ„๋ฅผ ๊ฐ€์ง„๋‹ค. var๋กœ ์„ ์–ธํ•œ ๋ณ€์ˆ˜๋Š” ์žฌ์ •์˜๊ฐ€..