[DAY-1] JS 주요 문법(1)

😉 헷갈렸던 & 몰랐던 부분들만 정리하는 나만의 TIL
😯 모든 강의 내용을 적지 않아요!

▶ 오늘의 소감은?
대부분 아는 내용이어서 복습하는 차원에서 들었던 것 같다.
기본적인 내용일수록 중요하다.. 꼭 기억하기

[1] 웹 프론트엔드 개발자에게 브라우저란?

우리가 작성한 로직이 돌아가는 실행기라고 할 수 있습니다.

크게 브라우저는 통신 / 렌더링 / 스크립트실행 3가지로 동작합니다.

그렇다면 프론트엔드 개발자란?

→ 브라우저에서 동작하는 UI를 개발하는 사람들

프론트엔드 개발자의 핵심 역량은

• 커뮤니케이션
• UI
• 네트워크
• 보안
• 브라우저
• 디자인

위 여섯개라고 할 수 있습니다.

[2] 변수, 상수, 자료형

변수 : 변할 수 있어요 (var, let)

상수 : 변할 수 없어요! (const)

하지만 var는 권장되지 않습니다! → 이유는? 호이스팅 때문

자료형에는 Number, String, Boolean, Object, Array, Function, Undefined, Null이 있습니다.

[3] JS에서의 메모리 사용

일반적으로 메모리는 할당 → 사용 → 해제의 3가지 과정을 거칩니다.

메모리는 한정되어 있어 변수나 상수를 선언하게 되면 메모리 공간이 줄어듭니다.

일반적으로 우리가 변수나 상수를 생성하면, 메모리의 ‘주소’를 바라보게 됩니다.

자바스크립트 엔진은 가상 머신(Virtual Machine)으로 구성되어 있습니다.

해당 가상 머신에는 Heap 영역, Call stack 영역 두 가지의 메모리 모델이 있습니다.

Heap은 참조 타입이 들어가고

Call Stack은 원시 타입이 들어가게 됩니다.

Garbage Collector를 통해 사용하지 않는 메모리를 해제합니다.

현대의 Garbage Collector는 Mark and Sweep Algorithm을 통해 메모리를 정리합니다.

Mark and Sweep Algorithm
→ 닿을 수 없는 주소를 더는 필요없는 주소로 정의하고 지우는 알고리즘

[4] 흐름 제어

• Control Flow

조건이나 반복을 통해 상태를 제어하는 것을 말합니다.

• 조건문 포인트

If절에서 false 뿐만 아닌 undefined, null, 0, NaN, ‘’(empty string)도 거짓이 될 수 있습니다!

[5] 배열과 객체

[5-1] 배열

배열 초기화

• fill : 원하는 값으로 배열을 채우면서 초기화

 const arr = new Array(10).fill(0);

-> [0,0,0,0,0,0,0,0,0,0]

• from : 특정 규칙을 가진 값들로 배열을 채워요 (함수 생성)

const arr = Array.from(Array(10), function(v, k) {
	return k + 1
});

-> [1,2,3,4,5,6,7,8,9,10]

배열 값 추가/삭제

• push/pop : 배열의 끝부분에 값 추가/삭제
• unshift/shift : 배열의 앞부분에 값 추가/삭제
• splice(시작 idx, 끝 idx) : 배열의 특정 부분 삭제

배열 기타 함수

• join : 배열 요소들 문자열로 합치기

const arr = [1,2,3];
console.log(arr.join(","));

-> 1,2,3

• reverse : 배열 요소 뒤집기

const arr = [1,2,3];
console.log(arr.reverse());

-> [3,2,1]

→ 원래 존재하던 배열의 형태도 reverse 후의 형태로 바뀌게 됩니다.

• concat : 두 배열 합치기

const arr = [1,2,3];
const arr2 = [4,5,6];
console.log(arr.concat(arr2));

-> [1,2,3,4,5,6]

• slice : 배열 특정 부분 자르기

const arr = [1,2,3,4,5];
console.log(arr.slice(2, 4)); // 시작 인덱스는 포함, 끝 인덱스는 미포함

-> [3,4]

→ 원래 존재하던 배열에 미반영 (반영을 위해서는 splice 이용)

배열 조회

for - of 사용하는 것이 더 직관적

[5-2] 객체

객체 초기화

const obj = {};
const obj2 = new Object();
const obj3 = { key: value };

객체 값 추가/삭제

const obj = { key: "value" };
obj["key2"] = "value2";
obj.key3 = "value3";

delete obj.key2;

객체 값 유/무

const obj = { key : "value" };
console.log("key2" in obj);

-> false

키와 값

const obj = { key: "value" };
Object.keys(obj); // key 집합
Object.values(obj); // value 집합

객체 조회

for - in 사용

[6] 스코프와 클로저

[6-1] 스코프(=유효 범위)

변수가 어느 범위까지 참조되는 지를 뜻합니다. (Global Scope, Local Scope)

var는 왜?

호이스팅되어 Local Scope가 Global Scope로 변경되는 등의 문제 발생!

[6-2] 클로저

함수가 선언된 환경의 스코프를 기억하여 함수가 스코프 밖에서 실행될 때에도 기억한 스코프에 접근할 수 있게 만드는 방법

• 클로저를 사용하면 내부 변수와 함수를 숨길 수 있습니다. (은닉화)

function count() {
  let i=0;
  for (i=0; i<5; i+=1) {
    setTimeout(function() {
    	console.log(i);
    }, i*100);
  }
}
count();

-> 5 5 5 5 5

🙄 답 0, 1, 2, 3, 4라고 예측했던 나 나와..

콜백함수가 실행된 시점에는 루프가 종료되어

상위 i 값은 이미 5까지 증가한 상태이니 5가 5번 출력됩니다.

해결할 수 있는 방법에는 두 가지가 있습니다.

1. 즉시 실행 함수(IIFE) 사용

function count() {
  for (var i=0; i<5; i+=1) {
    (function (num) {
      setTimeout(function() {
      console.log(num);
      }, num*100);
    })(i);
  }
}
count();

-> 0 1 2 3 4

즉시 실행 함수를 이용하여 루프마다 클로저를 만드는 방법입니다.

1. let 사용

function count() {
  for (let i = 0; i < 5; i += 1) {
    setTimeout(function () {
      console.log(i);
    }, i * 100);
  }
}
count(); // 0 1 2 3 4

let은 블록 수준 스코프입니다.

따라서 for문 내에서 새로운 스코프를 갖기 때문에 루프마다 클로저가 생성됩니다.

for문이 한번 반복될 때마다 안에서 let 변수가 계속 새로 생성된다고 이해하면 될 것 같다!

[7] 호이스팅

간단히 말해서 var 쓰면 안 되는 이유가 바로 ‘호이스팅’입니다.

호이스팅이란, 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말합니다!

var변수와 함수선언문에서만 호이스팅이 일어납니다.

Q. 만약에 해당 함수 선언문이 있으면 실행이 될까요?

func();

function func() {
  // 함수선언문
  console.log("hello JS");
}

→ 네 실행됩니다! 함수 선언이 맨 위로 끌어올려 지기 때문이죠.

주의

[1] 코드의 가독성과 유지보수를 위해 호이스팅이 일어나지 않도록 합니다.
→ 스코프 꼬임 현상이 일어나기 쉽습니다

[2] var을 쓰면 혼란스럽고 쓸모없는 코드가 생길 수 있습니다.
→ 하지만 우리가 var와 호이스팅에 대해 공부하는 이유는, ES5로 트랜스컴파일을 해야 하기 때문이죠.
ES6를 어디에서든 쓸 수 있으려면 아직 시간이 필요하기 때문입니다.

---

출처

프로그래머스

https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures

https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html