๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
์‹œ๋„/Code-States

[D+28] ๋„ท์งธ ์ฃผ ํ›„๊ธฐ

by ๐Ÿ‡๋ฐ•๋ด‰๋ด‰๐Ÿ‡ 2020. 10. 5.

 

 

D+28

-  ์ฝ”๋“œ์Šคํ…Œ์ด์ธ  ๋„ท์งธ ์ฃผ ํ›„๊ธฐ -

(๋„ท์งธ ์ฃผ ํ›„๊ธฐ)

 


 

 

< ๋„ท์งธ ์ฃผ ํ›„๊ธฐ๋Š” D+28์ด ์•„๋‹Œ D+30๊นŒ์ง€ ํฌํ•จ๋œ ๋‚ด์šฉ์ž…๋‹ˆ๋‹ค. >

 

๋ฉฐ์น  ์ „๊นŒ์ง€๋งŒ ํ•ด๋„ ๋‚˜๋Š” ์ฝ”๋“œ์Šคํ…Œ์ด์ธ ๋ฅผ ์‹ ์ฒญํ• ์ง€ ์—„์ฒญ ๋ง์„ค์˜€์—ˆ๊ณ ,

์ง€์›ํ•˜๊ธฐ ์œ„ํ•ด ์ž๊ธฐ์†Œ๊ฐœ์„œ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ์‹œ๊ฐ„๊นŒ์ง€๋„

๋‚ด๊ฐ€ ๊ณผ์—ฐ ์ž˜ํ•œ ์„ ํƒ์ผ๊นŒํ•˜๋Š” ์—„์ฒญ๋‚œ ๊ณ ๋ฏผ์— ๋น ์ ธ์žˆ์—ˆ๋‹ค.

 

ํ•˜์ง€๋งŒ ์ง€๊ธˆ์€ ์–ด๋Š๋ง ํ”„๋ฆฌ์ฝ”์Šค์˜ ๋งˆ์ง€๋ง‰ ๋‹จ๊ณ„๊นŒ์ง€ ๋งˆ์น˜๊ฒŒ ๋˜์—ˆ๊ณ ,

ํ˜„์žฌ๋Š” ํ”„๋ฆฌ์ฝ”์Šค์—์„œ ๋‚˜๊ฐ€์•„ ์ด๋จธ์‹œ๋ธŒ ์ฝ”์Šค๋กœ ๊ฐ€๊ธฐ ์œ„ํ•œ ๋งˆ์ง€๋ง‰ ๊ด€๋ฌธ๋งŒ ๋‚จ๊ธด ์ƒํƒœ์ด๋‹ค.

 

๊ฐ‘์ž๊ธฐ ๋น ๋ฅด๊ฒŒ ์ง€๋‚˜๊ฐ„ ์‹œ๊ฐ„ ๋•Œ๋ฌธ์— ์•„์ง์€ ์‹ค๊ฐ์ด ๋‚˜์ง€๋Š” ์•Š์ง€๋งŒ

ํ™•์‹คํ•œ ๊ฑด ์ฒซ๋‚ ์˜ ๋‚˜์™€ ์ง€๊ธˆ์˜ ๋‚˜๋ฅผ ๋น„๊ตํ–ˆ์„ ๋•Œ

ํ™•์‹คํžˆ ๋‚ด๊ฐ€ ๋ฌด์–ธ๊ฐ€๋ฅผ ๋ณผ ์ˆ˜ ์žˆ๋Š” ๋ˆˆ๊ณผ ๋“ค์„ ์ˆ˜ ์žˆ๋Š” ๊ท€๊ฐ€ ์ƒ๊ฒผ๋‹ค๋Š” ๊ฒƒ์„

์ถฉ๋ถ„ํžˆ ๋Š๋ผ๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์‹œ๊ฐ„์€ ํ—›์œผ๋กœ ๋ณด๋‚ด์ง€๋Š” ์•Š์•˜๋‹ค๋Š” ๋งˆ์Œ์— ์•ˆ์‹ฌ์ด ๋œ๋‹ค.

 

ํ”„๋ฆฌ์ฝ”์Šค ๊ณผ์ •์„ ๊ฑฐ์น˜๋ฉด์„œ ๋‚ด๊ฒŒ ๋‹ฌ๋ผ์ง„ ์ ์„ ๋ช‡ ๊ฐ€์ง€ ์ •ํ•˜์ž๋ฉด

ํŽ˜์–ด ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ด ๋” ์ด์ƒ ๋‘๋ ต์ง€ ์•Š๊ฒŒ ๋˜์—ˆ๋‹ค.

 

์ดˆ๋ฐ˜์—๋Š” ๋งˆ์ฃผ ๋ณด๊ณ  ์ƒ๋Œ€๋ฐฉ๊ณผ ๋Œ€ํ™”๋ฅผ ํ•˜๋ ค๋‹ˆ ๋„ˆ๋ฌด ๋ถ€๋„๋Ÿฌ์› ๊ณ 

๊ทธ ๊ณผ์ •์—์„œ ๊ณผ์ œ์— ๋Œ€ํ•œ ๋Œ€ํ™”๋ฅผ ๋‚˜๋ˆ„๋ ค๊ณ  ํ•ด๋„ ๊ฐ‘์ž๊ธฐ ์ƒ๊ฒจ๋ฒ„๋ฆฌ๋Š” ๋ฏผ๋งํ•จ์—

์•Œ๊ณ  ์žˆ์—ˆ๋˜ ๊ฒƒ๋„ ๊ฐ‘์ž๊ธฐ ์ƒ๊ฐ์ด ๋‚˜์ง€ ์•Š๋Š” ์ˆœ๊ฐ„์ด ๋งŽ์•˜์œผ๋ฉฐ,

ํŽ˜์–ด์—๊ฒŒ ํ”ผํ•ด๋ฅผ ๋ผ์น˜์ง€ ์•Š์œผ๋ ค๊ณ  ํ™•์‹คํ•˜๊ฒŒ ์•Œ์ง€ ๋ชปํ•˜๋Š” ๋‹ต์€ ๋ง์„ ํ•˜์ง€ ์•Š์œผ๋ ค๊ณ  ํ•˜๋‹ค ๋ณด๋‹ˆ

์„œ๋กœ ๊ฐ„์˜ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜์ด ๋ถ€์กฑํ•œ ๊ฒฝํ–ฅ์ด ์žˆ์—ˆ๋‹ค.

 

ํ•˜์ง€๋งŒ ํ˜„์žฌ๋Š” ์ตœ์†Œํ•œ ๋‚ด๊ฐ€ ํ•˜๊ณ ์ž ํ•˜๋Š” ๋ง์€ ๊ผญ ํ•˜๋ ค๊ณ  ํ•˜๊ณ 

์ƒ๋Œ€๋ฐฉ์˜ ์˜๊ฒฌ์— ์‚ด์„ ๋ถ™์—ฌ ์™„์„ฑ๋„ ๋†’์€ ์˜๊ฒฌ์„ ๋งŒ๋“ค๋ ค๋Š” ์‹œ๋„๊นŒ์ง€ ํ•˜๊ณ  ์žˆ๋‹ค.

 

๋ฌผ๋ก  ํ˜„์žฌ๋„ ํŽ˜์–ด ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ด ์ •๋ง ์ข‹๊ฑฐ๋‚˜ ๊ธฐ๋Œ€๋˜๋Š” ๊ฑด ์•„๋‹ˆ์ง€๋งŒ

๊ทธ๋ž˜๋„ ์ดˆ๋ฐ˜์˜ ๋‚˜์™€ ๋น„๊ตํ•ด ๋ณด์•˜์„ ๋•Œ ๋‘๋ ค์›Œํ•˜์ง€๋Š” ์•Š๋Š” ๋‚ด ๋ชจ์Šต์— ์•„์ฃผ ๋งŒ์กฑํ•œ๋‹ค.

 

๊ทธ๋ฆฌ๊ณ  ํ˜ผ์žฃ๋ง์ด ๋งŽ์•„์กŒ๋‹ค. ใ…Žใ…Ž

 

์ด๊ฑด ์ข‹์€ ์ ์ธ์ง€ ์•„๋‹Œ์ง€๋Š” ์ž˜ ๋ชจ๋ฅด๊ฒ ์œผ๋‚˜

ํ•œ ๋ฒˆ์— ํ•ด๊ฒฐ๋˜์ง€ ์•Š๋Š” ๋ฌธ์ œ์—์„œ๋Š” ํ˜ผ์žฃ๋ง๋กœ ๋‚ด๊ฐ€ ์„ ์ƒ๋‹˜์ด ๋˜์–ด

๋ˆ„๊ตฐ๊ฐ€๋ฅผ ๊ฐ€๋ฅด์นœ๋‹ค๋Š” ๋Š๋‚Œ์œผ๋กœ ๋ฌธ์ œ๋ฅผ ํ’€์–ด๋‚˜๊ฐ€๊ณ  ์žˆ๋Š”๋ฐ

์ด๊ฒŒ ์€๊ทผ ์ž˜ ํ’€๋ฆฌ๊ธฐ๋„ ํ•˜๊ณ  ๋งž์ถ”๋ฉด ์พŒ๊ฐ์ด ์žฅ๋‚œ ์•„๋‹ˆ๋‹ค โ˜บ๏ธ

 

์ง€๊ธˆ๊นŒ์ง€ ์ข‹์€ ์ ๋งŒ ๋งŽ์ด ์ด์•ผ๊ธฐํ•ด์„œ ์š”๋ฒˆ ์ฃผ๊ฐ€ ์•„์ฃผ ๋งŒ์กฑ์Šค๋Ÿฝ๋‹ค๊ณ  ๋Š๊ปด์งˆ ์ˆ˜๋„ ์žˆ๊ฒ ์ง€๋งŒ

์š”๋ฒˆ 4์ฃผ ์ฐจ๊ฐ€ ์˜จ์ „ํžˆ ๋งˆ์Œ์— ๋“ค์—ˆ๋‹ค๋Š” ๊ฒƒ์€ ์•„๋‹ˆ๋‹ค.

 

ํ˜„์žฌ์—๋„ ๋‚˜๋Š” ๋ชจ๋ฅด๋Š” ๊ฒƒ์ด ๋งŽ๊ณ  ์ƒˆ๋กœ์šด ๊ฒƒ๋“ค์„ ์•Œ์•„๊ฐ€๋Š” ๊ณผ์ •์„ ๊ฑฐ์น˜๊ณ  ์žˆ๊ธฐ์—

์ด์ „๋ณด๋‹ค, ๊ทธ๋ฆฌ๊ณ  ์ง€๊ธˆ๋ณด๋‹ค ๋” ๋งŽ์€ ๊ฒƒ๋“ค์„ ์•Œ์•„๊ฐ€๋Š” ๊ณผ์ •์„ ๊ฑฐ์ณ์•ผ ํ•  ๊ฒƒ์ด๋‹ค.

 

ํŠนํžˆ ์ด๋ฒˆ ์ฃผ๋Š” ์—ฐํœด๋กœ ์‰ฌ๋Š” ๋‚ ์ด ๋งŽ์•˜๊ธฐ์—

์Šค์Šค๋กœ ์˜์ž์— ์•‰์•„ ์ฑ…์ƒ์— ๊ณต๋ถ€ํ•˜๋ ค๋Š” ๋งˆ์Œ๊ฐ€์ง ๋ถ€์กฑ๊ณผ

๋‚˜ํƒœํ•จ์œผ๋กœ ๋ฐ˜์„ฑํ•ด์•ผ ํ•  ๋‚ ์ด ๋ฌด์ฒ™์ด๋‚˜ ๋งŽ๋‹ค.

 

ํ•˜์ง€๋งŒ ์ „์ฒด์ ์œผ๋กœ ๋ดค์„ ๋•Œ๋Š” ์ด๋ฒˆ ํ•œ ์ฃผ๋„ ์•ž์œผ๋กœ ๋‚˜์—๊ฒŒ ๋„์›€์„ ์ค„ ๊ณผ์ •์ด๋ผ๊ณ  ์ƒ๊ฐํ•˜๋‹ˆ

๊ทธ๋ ‡๊ฒŒ ํž˜๋“ค๊ฒŒ ๋Š๊ปด์ง€์ง€๋Š” ์•Š์•˜๋˜ ๊ฒƒ ๊ฐ™๋‹ค.

 

๋งค๋ฒˆ ๊ทธ๋ ‡๋“ฏ์ด ๋งค๋ฒˆ ์•„์‰ฌ์šด ํ•œ ์ฃผ์˜€์ง€๋งŒ

๋‹ค์Œ ์ฃผ์— ๋”์šฑ ๋ฐœ์ „๋  ๋‚ด ๋ชจ์Šต์„ ์œ„ํ•ด ๋‚จ๊ฒจ๋‘” ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•˜๊ณ 

์—ด์‹ฌํžˆ ๊ณต๋ถ€ํ•˜์ž.

 

 


 

 

๋งˆ์ง€๋ง‰์œผ๋กœ ์•„์ง๋„ ํ—ท๊ฐˆ๋ฆฌ๋Š” this...

๊ณ„์† ๊ณต๋ถ€๊ฐ€ ์•„๋ฌด๋ž˜๋„ ํ•„์š”ํ•  ๋“ฏ...

 

 

Global & Function ํ˜ธ์ถœ

var name = 'Global Variable';
console.log(this.name); // "Global Variable"

function foo() {
	console.log(this.name); // "Global Variable"
}

foo();

์—ฌ๊ธฐ ํ•จ์ˆ˜ foo๊ฐ€ ์žˆ๊ณ , ์ „์—ญ ๋ณ€์ˆ˜๋กœ name์ด ์žˆ๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

 

์—ฌ๊ธฐ์„œ foo๋ฅผ ์‹คํ–‰ํ•˜๋ฉด์„œ ์ฝ˜์†” ๋กœ๊ทธ๋กœ this.name์„ ์‹คํ–‰ํ–ˆ์„ ๋•Œ์™€

์ „์—ญ์—์„œ this.name์„ ์ฐ์€ ๊ฐ’์ด ๊ฐ™์€ ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

 

์™œ๋ƒํ•˜๋ฉด name์€ ์ „์—ญ ์˜์—ญ์ธ window์— ๋ฌถ์—ฌ์žˆ๋Š” ๊ฐ’์ด๋‹ค.

 

๋•Œ๋ฌธ์— name์€ window.name๊ณผ ๊ฐ™๋‹ค๊ณ  ํ•  ์ˆ˜ ์žˆ๋‹ค.

 

๊ทธ๋ ‡๊ฒŒ ๋”ฐ์ง€๊ฒŒ ๋  ๊ฒฝ์šฐ ์ „์—ญ ์˜์—ญ์— ์žˆ๋Š” this๋„ window๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ํ•ด๋‹น ๊ฒฐ๊ณผ๊ฐ€ ๋‚˜์˜ค๋ฉฐ,

๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ํ•จ์ˆ˜ foo์•ˆ์— ์žˆ๋Š” this๋„ window๋ฅผ ๋‚˜ํƒ€๋‚ด๋ฏ€๋กœ ๊ฐ™์€ ๊ฒฐ๊ณผ๊ฐ€ ๋‚˜์˜จ๋‹ค๊ณ  ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

 

์ฝ˜์†”๋กœ๊ทธ๋ฅผ ํ†ตํ•œ ๊ตฌ์ฒด์ ์ธ ์„ค๋ช…

 

์ฝ˜์†”๋กœ๊ทธ์— ํ•จ์ˆ˜ ์•ˆ์—์„œ๋„ this๊ฐ€ window์ธ์ง€ ํ™•์ธํ•˜๋Š” ๋ชจ์Šต

 

var name = 'Global Variable';

function outer() {
	function inner() {
    	console.log(this.name); // "Global Variable"
    }
    
    inner();
}

outer();

์ด์™€ ๊ฐ™์€ ๊ฒฝ์šฐ์—๋„ this๋Š” window๋ฅผ ๊ฐ€๋ฆฌ์ผœ "Global Variable"๋ฅผ ์ฐ์–ด๋‚ด๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค.

 

์ฆ‰ this๋Š” ์Šค์ฝ”ํ”„๊ฐ€ ์—ฌ๋Ÿฌ ๊ฐœ ๋ฌถ์—ฌ์žˆ๋‹ค๊ณ  ํ•ด์„œ outer๋‚˜ inner๊ฐ€ ๋˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ window์ธ this๊ฐ€ ๋˜๋Š” ๊ฒƒ์ด๋‹ค.

 

 

Method ํ˜ธ์ถœ : ๋ถ€๋ชจ object

์œ„์— ๊ฐ™์€ ๊ฒฝ์šฐ์™€ ๋‹ค๋ฅธ ๊ฒฝ์šฐ๊ฐ€ ์žˆ๋Š”๋ฐ ๋ฐ”๋กœ ๋ฉ”์†Œ๋“œ ํ˜ธ์ถœ์ด๋‹ค.

 

๋ถ€๋ชจ ์—†์ด ๋ฐ”๋กœ ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ํ•˜๋Š” ๊ฒƒ์ด ํ•จ์ˆ˜ ํ˜ธ์ถœ์ด๋ผ ํ•œ๋‹ค๋ฉด,

๋ฉ”์†Œ๋“œ ํ˜ธ์ถœ์€ ๊ฐ์ฒด์— ๋‹ด๊ธด ํ•จ์ˆ˜, ์ฆ‰ ๋ถ€๋ชจ๊ฐ€ ์žˆ๋Š” ๊ฒƒ์ด๋ผ๊ณ  ๋ณด๋ฉด ๋  ๊ฒƒ ๊ฐ™๋‹ค.

 

์ด๋•Œ, ๋ถ€๋ชจ๊ฐ€ ์žˆ๋Š” ๋…€์„์—์„œ ๋ฉ”์†Œ๋“œ๋กœ ํ˜ธ์ถœํ•  ๊ฒฝ์šฐ, this๋Š” ๋ถ€๋ชจ ์˜ค๋ธŒ์ ํŠธ๊ฐ€ ๋œ๋‹ค.

(๋‹จ, ์ง๊ณ„๋ถ€๋ชจ๋งŒ ๋„์ง‘์–ด๋‚ธ๋‹ค)

 

var obj = {
	fn: function(a, b) {
    	return this;
    }
};
var obj2 = {
	method: obj.fn
};

console.log(obj2.method() === obj2); //true
console.log(obj.fn() === obj); //true

์œ„์— ์‹์—์„œ this๋Š” ์‹คํ–‰ ์ฝ˜ํ…์ŠคํŠธ์ด๊ธฐ ๋•Œ๋ฌธ์— ์‹คํ–‰๋˜๋Š” ์‹œ์ ์ด ๊ต‰์žฅํžˆ ์ค‘์š”ํ•œ ๋…€์„์ด๋ฏ€๋กœ,

์‹คํ–‰๋˜๋Š” ์‹œ์ ์˜ ๋ถ€๋ชจ๋ฅผ ํ™•์ธํ•˜๋ฉด true๊ฐ’์ด ๋‚˜์˜ค๋Š” ๊ฒฐ๊ณผ๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

 

 

Construction mode

new ์—ฐ์‚ฐ์ž๋กœ ์ƒ์„ฑ๋œ ํ•จ์ˆ˜ ์˜์—ญ์˜ this๋ฅผ ๋‚˜ํƒ€๋‚ด๋ฉฐ ์ด๋•Œ์˜ this๋Š” constructor(์ƒ์„ฑ์ž)๋ฅผ ๋‚˜ํƒ€๋‚ธ๋‹ค.

 

 

.call or .apply ํ˜ธ์ถœ

๋ช…์‹œ์ ์œผ๋กœ ๋„˜๊ฒจ์ค„ ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค๊ณ  ๊ฐ„๋žตํ•˜๊ฒŒ ์„ค๋ช…ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ,

.apply๋Š” ๋ฐฐ์—ด๋กœ ๊ฐ’์„ ๋„˜๊ฒจ์ฃผ๊ณ , .call์€ ๊ทธ๋ƒฅ ๋‹จ์ˆœํžˆ ๊ฐ’์„ ์ž…๋ ฅํ•˜๋ฉด ๋„˜๊ฒจ์ค€๋‹ค๋Š” ์ฐจ์ด๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.

 

 

 

๋ฐ˜์‘ํ˜•

๋Œ“๊ธ€