코어자바스크립트 총정리1

KHW·2021년 3월 9일
0

코어자바스크립트

목록 보기
18/19
post-custom-banner

1장

기본형(불변성) vs 참조형(가변성)

메모리의 변수영역 vs 데이터영역

가비지 컬렉터 (참조 카운트가 0인 수거대상)

객체의 복사 영향과 해결방법

얕은복사 vs 깊은복사

깊은복사의 방법 3가지 (재귀함수, 라이브러리 함수사용, JSON 변환)

undefined vs null

undefined == null //true
undefined === null //false


2장

호이스팅 : var, 함수 선언문

함수 선언문 vs 함수 표현식

실행컨텍스트

컨텍스트 내부 구조

VariableEnvironment : 최초 실행 시의 스냅 샷을 유지
LexicalEnvironment : VariableEnvironment 을 복사 해 만들어져, 이후 주로 활용
ThisBinding

VariableEnvironment, LexicalEnvironment 내부

environmentRecord : 그 함수 환경 내부에서 가지고 있는 것 (지역변수와 같은 것)
outerEnvironmentReference : 바깥과 연관된 것
=> outerEnvironmentReference로 인해서 내부부터 외부까지 값이 있는지를 찾아 나간다.

스코프 : 식별자에 대한 유효범위 (스코프체인을 통해 스코프가 커질수있다.)

스코프체인


3장

함수 vs 메소드 (.으로 구분)

ex) ojb['method'](2) 의 method는 예외로 .이없어도 메소드다

this를 우회하는 방법 (화살표 함수)

우회하는 이유 : 호출하는 주체가 없을 때는(함수사용시) 자동으로 전역객체를 바인딩하지 않고 호출 당시 주변 환경의 this를 그대로 상속받기 위해서

this바인딩이 진행되는 경우

함수 혹은 메소드가 호출 되었을 때 (함수는 전역객체를 가리키고 메소드는 그때에 해당하는 바로앞의 객체를 나타낸다.)

this바인딩 주의할 부분

let obj = {
  outerFunc : function(){
  	console.log(this);
  },
  outerArrowFunc : ()=>{
  	console.log(this);
  },
  innerFunc : function(){
  	let innerF = function(){
  		console.log(this);
  	}
  	innerF();
  },
  innerArrowFunc : function(){
    let innerF = ()=>{
      console.log(this);
    }	   
    innerF();
  }
}
obj.outerFunc();	//obj객체
obj.outerArrowFunc();	//전역객체	
obj.innerFunc();	//전역객체
obj.innerArrowFunc();	//obj객체
  1. 메소드로 obj를 나타내므로 this는 obj
  2. 메소드로 obj를 나타내나 화살표함수이므로 this 바인딩을 하지않은 상태의 전역객체를 나타낸다.
  3. 메소드로 obj를 나타내는 innerFunc 상황에서 innerF()라는 함수를 실행한 this는 this가 bind되므로 전역객체를 나타낸다.
  4. 메소드로 obj를 나타내는 innerArrowFunc 상황에서 innerF()라는 함수를 실행하나 화살표함수로 진행되므로 this 바인딩이 진행되지않아 이전의 this인 obj객체가 this형태로 남아있다.
  • 주의할 점 (중요)
  1. this를 관련한 묶음을 실행한 것이 함수냐 메소드냐
  2. 해당 함수 혹은 메소드가 this 바인딩을 했냐 안했냐 (화살표 함수 or 그냥 함수)

객체1.메서드실행 - 함수 : 객체
객체1.메서드실행 - 화살표함수 : 이전this(혹은 전역객체)
객체1.메서드실행 - 함수 - 함수실행 : 함수이므로 전역객체
객체1.메서드실행 - 함수 - 화살표함수실행 : 이전this이므로 해당하는 객체1

유사배열객체(Dom객체) vs 객체

this 바인딩 하는 방법

  1. call 메소드 (값을 받을때)
  2. apply 메소드 (배열을 받을때)
  3. bind 메소드

Array.from()

apply,call대신 사용하는 spread operator

bind 메서드

즉시가 아닌 새로운함수를 반환하기만 하는 메서드

profile
나의 하루를 가능한 기억하고 즐기고 후회하지말자
post-custom-banner

0개의 댓글