[TIL🔥]Day10(8/16)

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지만...나에게 내가 주는 생일 선물로 모니터 선물해서 오늘 설치했는데, 진짜 신세계다...
화면 너무 크고 거북목 치료된 느낌~ 모니터암도 한 몫했다...
이제 진짜 공부 더 열심히 할꺼야!!!! 🔥