[TIL๐Ÿ”ฅ]Day10(8/16)

dasssseulยท2021๋…„ 8์›” 17์ผ
0

Today I Learned

๋ชฉ๋ก ๋ณด๊ธฐ
10/22
post-thumbnail

Introduction

Day10์ด๋ผ ์“ฐ๊ณ , Day11์ด๋ผ ์ฝ๋Š”๋‹ค...
์ €๋ฒˆ์ฃผ ๊ธˆ์š”์ผ์— ๋„ˆ๋ฌด ํ”ผ๊ณคํ•ด์„œ TIL์„ ์ ์ง€ ๋ชปํ•˜๊ณ ... ์›”์š”์ผ์ด ๋˜์—ˆ๋‹ค.
์‚ฌ์‹ค TIL ๋งค์ผ ์จ์•ผํ•œ๋‹ค๋Š” ๋ถ€๋‹ด๊ฐ์„ ๋‚ด๋ ค๋†“๊ณ  ๋ฐฐ์šด ๊ฒƒ์— ์ง‘์ค‘ํ•˜๊ธฐ๋กœ ํ•œ ๊ฒฐ๊ณผ๋‹ค.
์ ๋Š” ๊ฒƒ, ์ •๋ฆฌํ•˜๋Š” ๊ฒƒ์— ์น˜์ค‘ํ•˜๋‹ค๋ณด๋ฉด ์ •์ž‘ ์ค‘์š”ํ•œ ๊ฒƒ์„ ๋†“์น  ๋•Œ๊ฐ€ ์žˆ๋‹ค.
์˜ค๋Š˜์€ ๋“œ๋””์–ด ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ์™„๊ฐ•ํ•˜๊ณ , ๋ฐ”๋‹๋ผ JS๋กœ ๋„˜์–ด์™”๋‹ค.
์‚ฌ์‹ค ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ์™„๋ฒฝํ•˜๊ฒŒ ์ดํ•ดํ•˜์ง„ ๋ชปํ–ˆ์ง€๋งŒ, ์—ด์‹ฌํžˆ ๊ณ ๋ฏผํ•˜๊ณ  ๋…ธ๋ ฅํ•œ ๋‚˜ ์ž์‹ ์„ ์นญ์ฐฌํ•˜๋ฉฐ TIL์„ ์ž‘์„ฑํ•ด๋ณด์ž!!!


์˜ค๋Š˜ ์ƒˆ๋กญ๊ฒŒ ๋ฐฐ์šด ๊ฒƒ

1. ๋ฆฌ์ŠคํŠธ ํ”„๋กœ์„ธ์‹ฑ
2. ๊ฐ์ฒด๋ฅผ ์ดํ„ฐ๋Ÿฌ๋ธ” ํ”„๋กœ๊ทธ๋ž˜๋ฐ์œผ๋กœ ๋‹ค๋ฃจ๊ธฐ
3. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ์˜ this

์˜ค๋Š˜์€ ์ž์ฃผ ์“ฐ์ง€๋งŒ ์ •ํ™•ํžˆ ์•Œ์ง€ ๋ชปํ•˜๋Š” this์— ๋Œ€ํ•ด ์ •๋ฆฌํ•˜๊ณ  ํ™•์‹คํžˆ ์•Œ์•„๊ฐ€๋ คํ•œ๋‹ค.


๐Ÿ“ this

this ๊ฐ’์€ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•œ ๋ฐฉ์‹์— ๋”ฐ๋ผ ๋‹ฌ๋ผ์ง„๋‹ค.
์—„๊ฒฉ ๋ชจ๋“œ์™€ ๋น„์—„๊ฒฉ ๋ชจ๋“œ์—์„œ๋„ ์ผ๋ถ€ ์ฐจ์ด๊ฐ€ ์žˆ๋‹ค.

์ „์—ญ ๋ฌธ๋งฅ์—์„œ์˜ this

this๋Š” ์—„๊ฒฉ ๋ชจ๋“œ ์—ฌ๋ถ€์— ์ƒ๊ด€์—†์ด ์ „์—ญ ๊ฐ์ฒด๋ฅผ ์ฐธ์กฐ

// ์ „์—ญ ๋ฌธ๋งฅ์—์„œ์˜ this

var a = "Hi";
console.log(window.a); // 'Hi'

this.b = "Bye";
console.log(window.b); // 'Bye'

var x = this;
console.log(x); // Window

ํ•จ์ˆ˜ ๋‚ด๋ถ€์—์„œ์˜ this

ํ•จ์ˆ˜ ์•ˆ์—์„œ์˜ this๋Š” ํ•จ์ˆ˜์˜ ์ฃผ์ธ์—๊ฒŒ ๋ฐ”์ธ๋”ฉ
ํ•จ์ˆ˜์˜ ์ฃผ์ธ์€ window ๊ฐ์ฒด

// ํ•จ์ˆ˜ ๋‚ด๋ถ€์—์„œ์˜ this

var number = 10;

function add10() {
  this.number = 5;
  number += 10;
  console.log(number); // 15
  console.log(this); // Window
  console.log(window.number); // 15
}

add10();

console.log(number === window.number); // true

๋ฉ”์„œ๋“œ ๋‚ด๋ถ€์—์„œ์˜ this

ํ•ด๋‹น ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•œ ๊ฐ์ฒด๋กœ ๋ฐ”์ธ๋”ฉ

// ๋ฉ”์„œ๋“œ ๋‚ด๋ถ€์—์„œ์˜ this

var person1 = {
  name: "daseul",
  age: 26,
	// person1 ๊ฐ์ฒด๋กœ ๋ฐ”์ธ๋”ฉ
  sayHello: function () {
    console.log(`Hello my name is ${this.name}`);
  },
};

person1.sayHello(); // Hello my name is daseul

var person2 = {
  name: "daseul",
  age: 26,
  greeting: {
    // greeting ๊ฐ์ฒด๋กœ ๋ฐ”์ธ๋”ฉ ๋˜์–ด name์€ undefined
    sayHello: function () {
      console.log(`Hello my name is ${this.name}`);
    },
  },
};

person2.greeting.sayHello();
// Hello my name is undefined

Comment

this๋Š” ํ•ญ์ƒ ๋ณ€ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์‚ฌ์šฉ์— ์ฃผ์˜ํ•˜์ž!
์–ด๋–ค ๊ฐ์ฒด๋ฅผ ๋ฐ”์ธ๋”ฉํ•˜๋Š”์ง€ ํ™•์‹คํžˆ ์•Œ๊ณ  ๋„˜์–ด๊ฐ€์•ผ๊ฒ ๋‹ค.
tmi์ง€๋งŒ...๋‚˜์—๊ฒŒ ๋‚ด๊ฐ€ ์ฃผ๋Š” ์ƒ์ผ ์„ ๋ฌผ๋กœ ๋ชจ๋‹ˆํ„ฐ ์„ ๋ฌผํ•ด์„œ ์˜ค๋Š˜ ์„ค์น˜ํ–ˆ๋Š”๋ฐ, ์ง„์งœ ์‹ ์„ธ๊ณ„๋‹ค...
ํ™”๋ฉด ๋„ˆ๋ฌด ํฌ๊ณ  ๊ฑฐ๋ถ๋ชฉ ์น˜๋ฃŒ๋œ ๋Š๋‚Œ~ ๋ชจ๋‹ˆํ„ฐ์•”๋„ ํ•œ ๋ชซํ–ˆ๋‹ค...
์ด์ œ ์ง„์งœ ๊ณต๋ถ€ ๋” ์—ด์‹ฌํžˆ ํ• ๊บผ์•ผ!!!! ๐Ÿ”ฅ

profile
์ธ์ƒ์€ ์šฉ๊ธฐ์˜ ์–‘์— ๋”ฐ๋ผ ์ค„์–ด๋“ค๊ฑฐ๋‚˜, ๋Š˜์–ด๋‚œ๋‹ค

0๊ฐœ์˜ ๋Œ“๊ธ€