JavaScript 주요 문법

강사 : 이선협 강사님 (현 Cobalt 수석 개발자)
MBTI가 예전에 검사하셨을 땐 ESFP였다고 하셨는데 나랑 같으셔서 뭔가 기분이 묘했다 😎

강의 컨셉

첫 한 달 간은 기본기와 상식에 집중하신다고 하셨다
개발뿐만 아니라 뭐든 기초가 제일 중요하다는 것은 누구나 알 것이다

난 이때까지 겉핥기 식으로 개발을 찍먹으로 배운 느낌이라
이번 데브코스를 통해 어쩌면 마지막 기회라고 생각하고 기초부터 초심을 찾아 공부할 것이다

1. 자료구조 및 알고리즘
2. 함수형 프로그래밍
3. 브라우저
4. 컴퓨터 과학 상식
5. 코딩 테스트

이렇게 5개의 섹션을 나누어서 강의할 예정이라고 하셨다

---

강사님 추천 개발 공부 방법

1. 기본기를 탄탄하게, 상식을 기르기
   => 뭐든 기본이 중요하다... 그리고 개발자가 되기 위해서는 언어 및 CS에 대한 상식(지식)울 길러야 한다
   
   
2. 정답을 찾는 과정을 즐기기(엄청 중요)
   => 정답을 쉽게 바로 알려고 하지 말고 스스로 찾아가는 과정이 중요하다고 하셨다. 그래야 기억에도 잘 남을 수 있다.
   
   
3. 내가 무엇을 잘하고 못하는지 파악하기
   => 메타인지 많이 들어본 단어였다. 자신의 지식에 대한 인지 상태를 확실하게 알고 있어야 한다. 그래야 뭘 더 찾아볼 지 아는 것은 어떻게 사용할 수 있는지 스스로 생각할 수 있다.
   
   
4. 공부한 것은 꼭 기록하고 가급적이면 공개하기
   => 벨로그로 블로그를 초심찾아 다시 시작한 이유다. 리처드 파인만 공부법처럼 아는 것을 정리하여 기록하고 이를 어린아이에게 설명할 수 있을 정도로 쉽고 간결한 단어로 설명할 줄 알아야 진정으로 안 것이다.
   
   
5. 질문을 두려워하지 않기
   => 메타인지와 연결되는 부분인 것 같다. 하루를 넘기지 말고 질문무새가 되어야 겠다.

---

브라우저 렌더링

간단하게 설명만 하셨지만 CS 지식이기에 추천해주신 관련 레퍼런스를 참고하여 다시 정리할 예정이다.

https://d2.naver.com/helloworld/59361
https://ko.wikipedia.org/wiki/자바스크립트_엔진
https://poiemaweb.com/js-browser

---

상수와 변수

JavaScript의 상수와 변수

기본적인 변수와 상수 선언 및 할당 방법을 배웠다.

---

자료형

JavaScript의 자료형

자바스크립트의 자료형 8가지에 대해 배웠다.

---

메모리 심화

일반적으로 메모리는 할당 => 사용 => 해제 3가지 과정을 거침
할당된 메모리에 값을 넣어 사용 가능함
최종적으로 사용을 마친 메모리를 제거 가능

변수나 상수를 선언하면 값을 바라보는 것이 아니라 메모리 주소를 바라보게 된다. (참조)
원시 타입이 변경될 때는 메모리가 새로 할당한다.

자바스크립트는 가상 머신으로 구성되어 있다.
이것은 Heap과 Call stack으로 이루어져 있다.
Heap에는 참조 타입, Call stack에는 원시 타입을 가진다.

메모리는 한정되어 있다. 따라서 메모리를 사용하다가 가득 차게 되면
자바스크립트 엔진은 Garbage Collector를 통해 메모리를 정리한다.

Garbage Collector는 아래와 같은 알고리즘을 통해 메모리를 관리한다.

Mark and Sweep Algorithm

닿을 수 없는 주소는 더이상 필요없는 주소로 정의 (화살표가 가르키지 않는 것, 참조하지 않는 것)
이를 Garbage Collector가 해당 주소를 지우는 알고리즘

---

표현식과 연산자

표현식 (Expressions)

어떠한 결과 값으로 평가되는 식
원시 값을 포함하여 변수, 상수, 함수 호출 등으로 조합 가능

const a = 11 + 45; // 56
const b = "String" + 4; // "String4"

연산자의 종류

• 할당 연산자
  오른쪽에 있는 표현식을 왼쪽 피연산자 값에 할당시킴

• 복합 할당 연산자
  =(등호)와 다른 연산자를 함께 조합하여 사용

• 비교 연산자
  좌측 우측 피연산자를 비교, true or false 반환

• 산술 연산자
  사칙연산 수행, Number 반환

• 비트 연산자
  비트를 직접 조작 (AND, OR, XOR, NOT, L Shift, R Shift)

• 논리 연산자
  Boolean을 통해 true, false 검증

• 삼항 연산자
  '조건 ? 참 : 거짓' 형태로 조건에 따라 값을 선택

• 관계 연산자
  객체에 속성이 있는지 확인하기 위한 연산자

• typeof
  피연산자의 타입을 반환, String으로 반환

참조 사이트 : https://poiemaweb.com/js-operator

---

흐름 제어

Control Flow

흐름을 제어하는 방법 중 하나
조건과 반복을 통하여 상태를 제어

• Control Flow : 일반적으로 알고 있는 조건문과 반복문
  Goto, If / Then / Else, Switch / Case, For / While

• Data Flow : 함수형 프로그래밍 방식으로 가능
  Stateless, Recursion(재귀), Pipe
  
  

조건문

조건이 맞을 때만 실행되는 문(Statements)

• if
  괄호 안 조건식이 참인 경우 실행되는 문법
  else if, else도 같이 사용 가능
  주의할 점 : false 말고도 거짓이 되는 것이 존재
  false, undefined, null, 0 , NaN, ''(빈 문자열)

• switch
  괄호 안 값에 따라 분기
  case, default와 함께 사용
  주의할 점 : case가 끝나는 곳에 break를 반드시 적용해야함 (케이스 분기)

---

반복문

반복적인 작업을 지시

• for
  가장 기초적인 반복문
  초기문, 조건문, 증감문으로 구성
  조건문의 결과가 거짓이 되면 반복문 종료

// for (초기문; 조건문; 증감문)
for (let i=0; i<10; i+=1) {
	console.log(i);
}

• while
  괄호 안 조건이 거짓이 될 때까지 반복

let x = 0;
while (x<5) {
  x += 1;
  console.log(x);
}

// 0 1 2 3 4

• do-while
  while문에서 파생
  while과 달리 먼저 진입 후 로직 우선 실행
  실행 다음으로 조건 검사

let x = 0;

do {
  console.log("Hi");
} while (x > 3);

// Hi

---

배열과 객체

여러 자료형을 다룰 수 있는 배열과 객체에 대해서 배웠다.

JavaScript의 배열

JavaScript의 객체

---

스코프와 클로저

스코프

유효 범위, 변수가 어느 범위까지 참조되는지 의미

• 전역(Global) 스코프 : 어디서나 접근 가능
• 지역(Local) 스코프 : 해당 컨텍스트에서만 접근 가능

var를 사용하면 함수 스코프가 적용되므로 호이스팅이 발생함
변수 선언이 상단으로 올라가버림

const와 let은 블록 스코프가 적용되므로 변수나 상수 선언 시에는 해당 키워드를 사용해야 함

var a = 1;

{
  var a = 5; // 호이스팅 발생되어 변수 선언이 최상단으로 감
  console.log(a);
}

console.log(a);

클로저

함수가 선언된 환경의 스코프를 기억
함수가 스코프 밖에서 실행될 때에도 기억한 스코프에 접근 가능하게 하는 문법

• 은닉화

클로저를 이용하여 내부 변수와 함수를 숨길 수 있음

클로저를 잘 알아야 하는 이유는 유용하게 사용하기 보단 알기 힘든 버그를 잘 수정하기 위해서임
<이선협 멘토님>

스코프를 잘못 지정하면 다음과 같은 오류가 발생 가능

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

counting(); // 5 5 5 5 5

0~4까지가 아닌 5가 5번 출력됨
왜 그럴까?

정답은 setTimeout 함수가 종료되면서 콜백함수가 실행될 시점에는
i가 이미 for문에 의해 5가 되어 있기 때문

따라서 이를 해결하기 위한 방법에는 2가지가 있음

1. 즉시실행함수(IIFE) 사용
   매 루프마다 클로저를 생성할 수 있음

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

counting(); // 0 1 2 3 4

2. let 키워드 사용
   let은 블록 스코프이기 때문에 매 루프마다 클로저가 생성됨

function counting() {
  let i = 0;
  for (let i = 0; i < 5; i += 1) { // for 문 루프에 let 적용
    setTimeout(function () {
      console.log(i);
    }, i * 100);
  }
}

counting(); // 0 1 2 3 4

---

😅 해당 내용은 공부하면서 정리한 글입니다. 틀린 부분이나 오해하고 있는 부분이 있다면 피드백 부탁드립니다.

관련 레퍼런스

[MDN 공식문서]
https://developer.mozilla.org/ko/docs/Web/JavaScript
[poiemaweb]
https://poiemaweb.com/
[프로그래머스 데브코스 이선협 강사님 강의]