this 가 동작하는 원리와 용법을 아는대로 설명해주세요. 평소 코드 중에서는 어떤 부분에서 가장 큰 차이가 생기나요?
this
- 자바스크립트 엔진에 의한 생성. 함수가 실행될 때마다 함수 내부에 this 객체 추가
- 자신이 속한 객체나 생성할 인스턴스를 가리키는 자기 참조 변수 → 프로퍼티, 메소드 참조 가능
- 코드 어디서든 참조 가능
this 바인딩
: this와 this가 가리킬 객체를 연결
자바스크립트에서의 this
- 함수 호출 방식에 따라 this 바인딩이 동적으로 결정됨
동적 바인딩
- 전역 this: 전역 객체 window
- 일반 함수 this: 전역 객체 window ⇒ 사용할 필요가 없음 (자기 참조 변수이기에)
- strict mode
라면 undefined가 바인딩됨
- 메서드 내부의 this: 해당 메서드를 호출한 객체
- 생성자 함수 this: 생성자 함수가 생성할 인스턴스
명시적 this 바인딩
apply()
, call()
: 함수 호출 시 첫 번째 인수로 전달한 특정 객체를 호출한 함수의 this에 바인딩
- apply: 호출 할 함수의 인수를 배열로 묶어 전달
- call: 호출 할 함수의 인수를 쉼표로 구분한 리스트 형식으로 전달
bind()
: 첫 번째 인수로 전달한 값으로 this 바인딩이 교체된 함수를 생성하여 리턴 → 호출하지는 않기 때문에 명시적 호출 필요
브라우저 저장소에 대해서 차이점을 설명해주세요(local storage, session storage, cookie)
Web storage
key,value
쌍으로 브라우저에 데이터를 저장. key
값을 통해 데이터를 조회
- cookie와의 차이
1. 서버 전송
- 저장된 데이터는 클라이언트에 존재할 뿐 서버로 전송하지 않음 ⇒ 네트워크 트래픽 비용 감소
2. 용량 제한
- 용량에 제한 없음
3. 영구 데이터 보존
- 만료 기간의 설정 없음 → 한 번 저장한 데이터 영구적으로 존재
local storage
웹 페이지 세션 종료 후에도 데이터가 남아있음
session storage
웹 페이지 세션 종료와 함께 저장된 데이터 삭제 ← 각 세션마다 데이터가 독립적으로 저장
브라우저에서 같은 웹페이지를 여러 탭 또는 창으로 열었을 때
- local storage는 여러 탭과 창끼리 데이터가 공유. 해당 탭, 창을 닫아도 데이터는 브라우저에 남아있음
- 반면 여러 개의 session storage에 데이터가 분리되어 저장. 해당 탭, 창이 닫힐 때 저장해 둔 데이터도 사라짐
- 📌 데이터 유지와 범위에서 차이점 발생
cookie
- 매번 서버로 전송
- 용량 제한
- 하나의 사이트에서 저장 가능한 쿠키는 최대 20개, 최대 크기 4KB
- 만료기간 지정
- 지정하지 않을 시 세션 쿠키
- 만료기간을 길게 지정하면 영구 쿠키로 동작