개발일지

개발일지 23일차

2023. 4. 6. 01:33
목차
  1. 데이터 타입
  2. 기본형
  3. 참조형
  4. 메모리와 데이터
  5.  
  6. 실행컨텍스트
  7. 스코프
  8. 변수
  9. 객체
  10. 호이스팅
  11. this

데이터 타입

- 자바스크립트에서 데이터 값의 타입은 기본형(Primitive Type)과 참조형(Reference Type)으루 구분된다.

기본형과 참조형의 구분기준은 값의 저장 방식과 불변셩 여부이다.

기본형

복제방식: 값이담긴 주소값을 바로 복제

불변성의 여부: 불변성을 띔

참조형

복제방식: 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소값을 복제

불변성의 여부: 불변성을 띄지 않음

메모리와 데이터

비트

  • 컴퓨터가 이해할 수 있는 가장 작은 단위
  • 0과 1을 가지고 있는 메모리를 구성하기위한 작은 조각들이 모여서 메모리를 구성함

바이트(byte)

  • 0과 1만 표현하는 비트를 모두 찾기는 부담됨
  • 8개로 표현하는 단위

https://namu.wiki/w/바이트

메모리

  • byte단위로 구성
  • 모든 데이터는 byte 단위의 식별자인 메모리 주소값을 통해 서로 구분됨

식별자, 변수

let value = 3

3 = 데이터

value = 변수명

  • 변수 = 데이터
  • 식별자 = 변수명

- 똑같이 동작한다.

/** 선언과 할당을 풀어 쓴 방식 */
var str;
str = 'test!';

/** 선언과 할당을 붙여 쓴 방식 */
var str = 'test!';

 

실행컨텍스트

- 실행 컨텍스트는 실행할 코드에 제공할 환경정보들을 모아놓은 객체이다. 자바스크립트는 어떤 실행 컨텐스트가 활성화 되는 시점에 다음과 같은 일을한다.

1. 선언된 변수를 위로 끌어올린다 = 호이스팅(hoisting)

2. 외부 환경정보를 구성한다.

3, this 값을 설정한다 (바인딩)

스택(Stack)

스택: LIFO(후입선출)

큐(Queue)

큐: FIFO(선입선출)

(이미지 출처 : https://velog.io/@leejuhwan/스택STACK과-큐QUEUE )

컨텍스트의 구성

- 함수 (우리가 흔히 실행컨텍스트를 구성하는 방법)

예시

// ---- 1번
var a = 1;
function outer() {
	function inner() {
		console.log(a); //undefined
		var a = 3;
	}
	inner(); // ---- 2번
	console.log(a);
}
outer(); // ---- 3번
console.log(a);

코드실행 → 전역(in) → 전역(중단) + outer(in) → outer(중단) + inner(in) → inner(out) + outer(재개) → outer(out) + 전역(재개) → 전역(out) → 코드종료 (맨위에 있는 부분이 실행)

실행 컨텍스트 객체의 실체

VariableEnvironment 

  • 현재 컨텍스트 내의 식별자 정보를 갖고 있음 let a = 2 에서 let a
  • 외부 환경정보 outer
  • 선언 시점 LexicalEnvironment의 snapshot

LexicalEnvironment :

  • VariableEnvironment와 동일하지만, 변경사항을 실시간으로 반영해요.

ThisBinding

  • this 식별자가 바라봐야할 객체

VE와 LE는 완벽하게 동일하다 한가지 다른점은 VE는 스냅샷을 유지한다.

결국, 실행 컨텍스트를 생성할 때, VE에 정보를 먼저 담은 다음, 이를 그대로 복사해서 LE를 만들고 이후에는 주로 LE를 활용한답니다.

 

스코프

변수

객체

호이스팅

this

'개발일지' 카테고리의 다른 글

개발일지 1주차 WIL  (3) 2023.04.09
개발일지 24일차  (0) 2023.04.06
개발일지 22일차  (0) 2023.04.05
개발일지 21일차  (0) 2023.04.03
개발일지 20일차  (0) 2023.04.01
  1. 데이터 타입
  2. 기본형
  3. 참조형
  4. 메모리와 데이터
  5.  
  6. 실행컨텍스트
  7. 스코프
  8. 변수
  9. 객체
  10. 호이스팅
  11. this
'개발일지' 카테고리의 다른 글
  • 개발일지 1주차 WIL
  • 개발일지 24일차
  • 개발일지 22일차
  • 개발일지 21일차
index.ys
index.ys
머리속에 떠도는 코드조각들을 맞추는 공간입니다.
index.ys
코린이 개발일지
index.ys
전체
오늘
어제

공지사항

블로그 메뉴

  • 홈
  • 방명록
  • Github
  • Notion
  • Figma
  • 타닥타닥 (235)
    • 개발일지 (124)
    • html , css (0)
    • Javascript (30)
    • Node.js (8)
    • React (2)
    • 네트워크 (1)
    • DB, SQL (5)
    • AWS (11)
    • CS (21)
    • 면접 (13)
    • 사진 (4)
    • 북로그 (3)
    • 머릿속 (5)

인기 글

최근 글

최근 댓글

hELLO · Designed By 정상우.
index.ys
개발일지 23일차
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.