TIL - Day1

• 참조
  https://velog.io/tags/mark-and-sweep
  https://www.daleseo.com/js-closures/
  https://opentutorials.org/course/743/6544
  https://developer-talk.tistory.com/547

브라우저의 동작 과정

브라우저는 어떻게 동작하는 걸까?

통신

• 서버와의 통신(한번 or 동시)
• 브라우저가 서버에 요청을 보내면 서버는 요청에 따라 특정 값을 응답한다.

렌더링

• DOM 객체를 화면에 그리는 일
  • DOM
    

스크립트 실행

• 브라우저가 스크립트 태그를 통해 JS파일을 읽으면 실행
  • UI 이벤트 등록, 화면 다크모드 등 동적인 화면 구성

변수

변수란 무엇이고 어떻게 사용하는지 알아보자!

var(ES6이전) 와 let(ES6이후)

var를 권장하지 않는 이유는? 🎗호이스팅

• 호이스팅이란 ? 함수 내의 변수 및 함수 선언을 각 유효 범위의 최상단으로 끌어올려주는 JS의 특징이다.
• 실제로 끌어올려지는 것은 아니고, JS parser가 내부적으로 끌어올려 처리한다.

console.log(value); //undefined
var value = "Hello";
console.log(value); //"Hello"

위 예제처럼 나중에 선언되는 변수를 미리 접근할 수 있다. ReferenceError는 발생하지 않으나 JavaScript는 호이스팅 된 변수를 undefined로 초기화한다.

• 함수 표현식은 호이스팅 되지 않는다.

let variable = 126; //키워드, 변수명, 값

• 변수명은 메모리 상 주소를 의미한다.
• 그 값은 해당 주소에 기록된 값이다.

상수

• 변하지 않는 값(키워드 : const)

!!! undefined와 null의 차이

• undefinde는 값이 정의되지 않은 상태를 의미하고 null은 해당 변수가 비어있음을 사용자가 의도적으로 나타낼 때 사용한다.

JS에서 메모리를 다루는 방법

1. 변수생성 > 메모리 한 구역에 사용할 수 있도록 할당됨
2. 할당된 메모리에 값을 넣어 사용
3. 최종적으로 사용을 마치면 해제하여 메모리를 제거할 수 있음

• 메모리가 꽉차게 된다면?

  • 자바스크립트 엔진은 Garbage Collector를 통해 메모리를 정리
  • 자동 메모리 관리 알고리즘 가비지 컬렉션을 통해 사용하지 않는 메모리를 해제

• Ex) 메모리 주소를 참조

  • 

• Ex) JS에서 원시 타입은 변경이 불가하다. > 새로운 메모리 주소 할당

  • 

Virtual Machine

• 자바스크립트 엔진은 Heap 영역과 Call Stack 영역으로 나눠진 가상 머신으로 구성
  • Heap은 참조 타입, Call Stack은 원시 타입
  • 배열은 참조 타입으로 분류되어 Heap에 배열 영역이 생성
  • Call Stack에 생성된 배열 변수는 Heap에 생성된 배열 메모리 주소를 참조
  • Heap 영역 메모리는 동적으로 크기가 변할 수 있다. > Heap 메모리를 변경함
    

마크앤스윕(Mark-and-sweep) 알고리즘

• root 객체로 출발해서 도달 가능한 객체를 마킹하고, 마킹되지 않는 객체를 더 이상 사용하지 않는다고 간주하고 지우는 알고리즘.

표현식과 연산자

표현식이란?

• 어떠한 결과 값으로 평가되는 식이다.
• 숫자, 문자열, 논리값 같은 원시 값을 포함 변수, 상수, 함수 호출 등으로 조합할 수 있다.

  //결과가 나오는 값
  let a = 1+2 //3
  let b = a-1 //2
  const c = "ABC" + 3 //"ABC3"
  const d = true + true - false //1
  ``

연산자의 종류

🎈할당연산자 : 오른쪽 표현식을 왼쪽 피연산자 값에 할당
let a = 10;
a += 10; //20 (=)등호를 다른 연산자와 같이 사용하여 복합 할당 연산자
a -= 10; //10

🎈비교연산자 : 좌측/우측 피연산자를 비교 > true or false 반환
const a = 10, b = 20;
a == b; false;
a != b; true;
a < b; true;

🎈산술연산자 : 산술연산(+,-,*,/) Number를 반환

🎈비트연산자 : 2진법 비트를 직접 조작하는 연산자
a&b; //AND
a|b; //OR
a^b; //XOR
~a; //NOT
a << 1 //Left Shift
a >> 1 //Right Shift 

🎈논리연산자 : Boolean을 통해 참과 거짓을 검증하는 연산자(조건문,반복문)
a&&y; //AND
a||y; //OR 
!a; //NOT

🎈삼항연산자 : 조건에 따라 값을 선택 `조건(if)? 참 : 거짓;`

🎈관계연산자 : 객체에 속성이 있는지 확인하기 위한 연산자
const a = {
	name : "Jeong Tae Ho",
	age : 25,
};

// 객체 키 값은 문자열
"name" in a; //true 
"number" in a; //false

🎈타입연산자 : 피연산자의 타입을 문자열로 반환
const a = 25;
const b = "Male";
const c = false;

typeof a; //number
typeof b; //string;
typeof c; //boolean

스코프와 클로저

스코프 : 유효 범위라고도 부르며 변수가 어느 범위까지 참조되는지를 의미.

• 어디서든 접근 가능한 전역 스코프
• 해당 Context 내에서만 접근 가능한 지역 스코프
• var는 함수 수준 스코프 let, const는 블록 수준 스코프

var 사용 시 오류

var a = 10;
{
  //호이스팅 되어 변수 선언이 상단으로 올라간다.
  var a = 20;
  console.log(a); //20;
}
console.log(a); //20;

📌 블록 내부에 새롭게 선언해도 블록 외부 변수값도 변하게 된다.

클로저 : 함수가 선언된 환경의 스코프를 기억해 함수가 스코프 밖에서 실행될 때에도 기억한 스코프에 접근할 수 있게 만드는 문법

• 은닉화 : 클로저를 이용하여 내부 변수와 함수를 숨길 수 있음.
• 자신이 생성될 때 환경을 기억해야해서 메모리적 손해가 있을 수 있다.
• 일반적으로 어떤 함수가 내부가 아닌 외부에서 선언된 변수에 접근하는 것.
• 함수 내부에 rate 선언

function convertUsdToKrw(dollar) {
    const rate = 1113.5;
    return dollar * rate;
  }

 console.log(convertUsdToKrw(5)); //5567.5

• 함수 외부에 rate 선언

const rate = 1113.5;

function convertUsdToKrw(dollar) {
  return dollar * rate;
}

console.log(convertUsdToKrw(5)); //5567.5

동일한 인자를 넘겨 호출한 결과 동일한 값이 나오는 걸 알 수 있다. 이렇게 자바스크립트 함수는 외부에서 선언된 변수도 자유롭게 접근 할 수 있는데 함수가 자신의 밖에서 선언된 변수에 접근하는 것을 클로저라고 한다.

Day1 느낀점

호이스팅이나 클로저 모두 한번씩은 배운 것들이지만 완전히 내 것으로 만들기엔 어려움이 있었던 것 같다. 강사님께서 차분하게 잘 알려주시기 때문에 이해가 될 때까지 복습하며 깔끔하게 정리하는 습관을 더 들여나가야 겠다.. 이제 본격적인 시작이지만 좋은 사람들과 함께 공부하며 좋은 결과를 낼 수 있길!🔍