TIL_221130_ ❓❗✅🚩JavaScript 심화_2

내일배움캠프 4기 스파르타코딩 React B반

---

📒 오늘의 공부

1. JavaScript 기본 자료(notion)_2

기초 문법(1)

• Function

  • 함수를 표현하는 다른 방법
    const variable = function() { return '함수가 반환할 값';}
variable(); 이렇게 사용!
  • 일반적인 변수명이 아닐 때(Key에 '', * 등을 사용할 때)
    -> 객체. 이 아니라 객체[]로 접근해야 함
    -> let bObject = {'Hello Yunny': 'Hello', 'Whoaaaa':'whoa'}
    -> bObject['Hello Yunny']

• Boolean 연산

  • Falsy : ''(빈 문자열), 0, false, null, undefined, NaN

• 논리 연산자

  • AND 연산자(&&)를 사용할 때 모든 값이 Truthy할 경우 맨 뒤에 있는 값이 result 변수에 할당
  • OR 연산자(||)를 사용할 때, 가장 먼저 오는 Truthy한 값이 name변수에 할당

• 반복문

  • break - 조건에 상관없이 반복문 중단
    -> for(let i=0~) 반복문에서 if(i ===2) break; 하면 i는 0,1 까지만 출력

  • continue - 해당 명령문 중단후 다음 단계 증감문부터 실행
    -> if (i === 2) continue;
    i=0일 때 0부터 2를 제외하고 출력

  • for..of
    -> Array, Map과 같은 반복 가능한(Iterable) 객체의 value(요소)를 하나씩 반복(배열을 하나씩 반복해주는 문법)

  • for..in
    -> 선언한 변수에 값이 직접 들어가지 않고 요소의 key를 전달

---

❗

• Object는 반복 가능한 객체에 해당하지 않는다
  • 반복문 사용하기
    ->

---

기초 문법(2)

• Function

  • Arrow function 방식 - 익명 함수
    -> 간단한 함수를 일회성으로만 사용할 때
    ->

• 구조 분해 할당

  • 함수에서의 구조 분해 할당
    -> const getUserName = ({name, age}) => { return name;};

• Hoisting

  • var를 사용하면 hoisting이 발생(사용 지양)
  • let const는 JS내 TDZ영역에 존재해 호이스팅 되지 않는다고 하는 것
    -> TDZ는 선언 전에 변수에 접근하는 것을 금지
    -> 선언 이후에 사용해야 'ReferenceError'가 안 남

• spread operator (전개 구문)

  • 기존 객체나 배열의 내용을 그대로 복사해 와서 내용을 변경시킬 수 있음(기존 객체, 배열에 영향을 주지 않음)

---

❗

• forEach()

  • 주어진 함수를 배열 요소 각각에 대해 실행

• map()

  • 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환

• filter()

  • 주어진 함수의 테스트를 통과한 모든 요소를 모아 새로운 배열로 반환

• reduce()

  • 배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결과값을 반환

---

2. JavaScript 심화_2

실행 컨텍스트

1) 실행 컨텍스트

• call stack
  • 실행할 코드에 제공할 환경 정보들을 모아 놓은 객체
  • 함수가 실행되는 순간에 실행 컨텍스트가 생성
• 실행 컨텍스트에 담기는 정보
  • VariableEnvironment
    -> 선언 시점: LexicalEnvironment의 snapshot
  • LexicalEnvironment
    -> VariableEnvironment와 내용은 동일
    -> 변경사항이 실시간으로 반영
  • ThisBinding
  2) EnvironmentRecord(record)
• 함수 선언문
  • 선언문 자체가 hoisting 되어 최상위로 올라가 위에 먼저 만든 함수에 영향을 준다.
• 함수 표현식
  • 좌측의 변수명만 hoisting 되어 뒤에 만든 함수가 위에 만든 함수에 영향을 주지 않는다.

3) OuterEnvironmentReference(Outer)

• 스코프 체인이 가능하도록 하는 외부 환경의 참조정보
• 스코프 체인
  • 식별자의 유효범위를 안에서부터 바깥으로 차례로 검색
  • C라는 실행 컨텍스트에서 console.log(a)를 찍을 때
    -> a의 값을 record(내부)에서 먼저 찾고 없으면 outer에 적시된 B라는 Lexical 환경(record)에서 찾고 없으면 B에 적시된 outer인 A~~~> 전역에서 찾는다.

---

❓

• 아님!!!

❗

• 참조카운트 = 0 -> Garbage Collector가 수거해간다!
  • 위에서 var a = 3는 여전히 존재하기 때문에(참조 카운트가 0이 아님) Garbage Collector가 수거하지 않는다.
  • 만약 아래에서 var a = 7이라고 선언하면
    a=3의 참조카운트가 0이 되어 수거해간다!

---

3. Modern JavaScript Tutorial_1

• 튜토리얼 읽는 법 안내대로 튜토리얼 읽기!

• 코어자바스크립트

• 소개

  • JS 엔진마다 특유의 코드 네임이 있다.
    ex. V8 - Chrome과 Opera에서 쓰임

• 자바스크립트 기본
  -"use strict"
  -> 스크립트 전체가 "모던한" 방식으로 작용
  -> 반드시 최상단에 위치
  -> 코드를 module로 쓰면 자동으로 적용

  • 대문자 상수(const)

  • prompt

  • confirm

  • ** 거듭제곱 연산자
    -> alert( 4 ** (1/2) ); 제곱근
    -> alert( 8 ** (1/3) ); 세제곱근 구할 수 있음

  • undefined는 숫자형으로 변환시 NaN

  • label - 반복문 앞에 콜론과 함께 쓰이는 식별자

  • switch문
    -> case

• 10% 정도는 다시 반복해서 볼 필요가 있음!

---

✅

Git

• 어제 만든 JS_A 브랜치. github에서 read.me 파일을 생성후 오늘 공부한 내용을 push하려고 하니 어제 JS_A이 origin이어서 push가 안 됨
  • sourcetree에서 origin/js 부분을 누르고 병합하니 최근 커밋이 JS_A/origin이 되어 push 가능해짐!
  • 원격 저장소와 로컬의 내용이 다를 땐 merge or rebase

공유

• 팀원이 getElementsByClassName이 있는 코드를 보여주셨다.
  • getElementById는 반복되는 내용을 temp(temp_html)로 붙일 때 순서를 붙일 필요가 없다
  • getElementsByClassName는
    document.getElementsByClassName('myCards')[0].append("div") 클래스 뒤에 순서 붙여야 함

---

🚩

내 생각

• 오늘 JS 심화 강의는 한 챕터 듣고 하루종일 모던 자바스크립트 튜토리얼 봤는데 다 못 끝냈다.
  • 진도 너무 느린 것 같고 유료 강의 듣는 팀원들 한 거 보면 나는 아직도 모르는 게 너무 많은데.. 시간은 왜 이렇게 빨리 가는 거냐고ㅜㅜㅜ