[js 강의]

this

실행 컨텍스트 : 실행할 코드에 제공할 환경 정보들을 모아놓은 객체
this는 함수를 호출할 때 생성됨

전역 환경에서 this는 노드 (global 객체), 브라우저 (window 객체)
=> 즉, 함수로서 독립적 호출을 할 때 전역 객체를 가리킨다는 표현

함수 vs 매서드
함수 : 자체로 수행 가능 즉, 함수명(); (호출의 주체 x -> this : 전역 개체)
매서드 : 종속적임 즉, 객체.매서드명(); (호출의 주체 o -> this : 해당 객체) . 혹은 [] 로 호출의 주체를 확인

-> 무조건 함수 내부에 매서드가 있어도 함수 this는...? 전역이다!
=> 이렇게 하고 싶지 않으므로, 개발자는 늘 방법을 만든다!!

우회하는 방법

1. 변수를 활용하는 법

내부 스코프에 이미 존재하는 this를 별도의 변수(e.g. self)에 할당하는 방법
e.g. let self = this 로 하고 console.log(self)

2. 화살표 함수 (= this binding을 하지 않는 함수)

화살표 함수의 경우는 함수 내부에서 this가 전역객체를 바라보는 문제 때문에 화살표 함수를 도입했다! => 즉, this binding 여부가 화살표 함수와 일반 함수의 차이다.

콜백 함수 호출 시 그 함수 내부에서의 this

콜백 함수란? 함수, 혹은 매서드의 인자(매개변수)로 넘겨주는 함수
=> 이름처럼, 콜백 함수도 함수이므로 this가 가리키는 것은 전역 객체다. (=this binding 전역 객체를 바라본다는 뜻)

단, 콜백 함수에 별도로 this를 지정한 경우만 예외
=> addEventListenner의 경우 콜백 함수 호출 시 자신의 this를 상속

생성자 함수 내부에서의 this

생성자? 인스턴스(객체)를 만들기 위한 틀
e.g. this.name 일 시, 각각 객체를 만들 때마다 가리키는 대상이 다름 self 가리킴

명시적 this binding

: call, apply, bind

1. call이랑 apply는 완전히 동일. 즉시 호출됨. 쓰는 방법만 살짝 다르다. apply의 경우 뒤에 [] 로 묶는 것

2. bind 매서드의 경우는 즉시 호출되지 않으며, 해당 함수 this binding 해서 새로운 함수를 리턴함.
   => 미리 적용, 부분 적용 함수
   e.g.
   let func = function(a,b,c,d)
   => 이때 this를 부르면 전역.
   let bindFunc2 = func.bind({x:1}, 4, 5)
   bindFun2(10,11)
   => this 바인딩 및 부분 적용까지 완료
   => bind매서드를 사용하면 네임 프로퍼티가 되어 bound 접두사가 붙음

우회하는 방법보다는 call, apply, bind 를 더 많이 쓴다. 보통은 bind(this) 쓴다...!

화살표 함수

this binding 과정 자체가 없으므로 전역 객체로 세팅되지 않는다.

=> call, apply, bind와 화살표 함수 중 본인이 편한 쪽으로 쓰기

유사 배열 객체란?

1. 반드시 length가 필요하다
2. index 번호가 0부터 1씩 증가 (그렇지 않아도 되나 오류 발생할 수 있음)

e.g.
var obj = {
0 : 'a'
1 : 'b'
.
.
length : 3
};

=> call이나 apply를 통해 배열 매서드를 차용할 수 있으나, 객체 -> 배열로 만드는 매서드가 생겼다. (ES6)

var arr = Array.from(obj)

[개인 과제]

null과 ''의 차이

Const needPwdel = prompt("댓글을 삭제하려면 입력한 비밀번호를 입력하세요.", "");
if (needPwdel === null) {
alert("비밀번호를 입력하지 않았습니다.")
return;
}

if (inputValue.trim() === '') {
alert("영화 제목을 입력해주세요.")
return;
}

이 두 가지가 엄청 헷갈렸다. 하나는 prompt고 하나는 input이지만 내게는 비슷하게 느껴져서... 그런데 이건 내가 속성을 이해하지 못한 탓이다.

사용자가 취소 버튼을 누르면 prompt() 함수는 null을 반환하고,
사용자가 입력을 하지 않고 확인 버튼을 누르면 빈 문자열("")을 반환합니다.

즉, prompt의 경우 두 가지 모두를 고려해야 한다.
input의 경우 취소가 없으니 빈문자열만 고려하면 되는 것... 시원하다...
코드는 수정하기로 했다.

CSS

height 설정 후
overflow-y: auto
스크롤 스르륵 나타난다!

grid 안에 flex 넣고 센터로 정렬