inno r 1

09 Aug 2022

Sparta coding

Innovation Camp

React report

JavaScript의 자료형과 JavaSscript만의 특성
- 느슨한 타입(loosely typed)의 동적(dynamic) 언어
  - JS의 변수는 특정한 타입와 연결되지 않음
  - 변수에 저장되는 값의 타입은 언제든지 바뀔 수 있음
- JavaScript 형변환
  - Implicit conversion(암시적변환)
    - JS가 필요에따라 자동으로 data type을 변환
  - explicit conversion명시적변환
    - 개발자가 의도를 가지고 data type 변환
- ==, === (equal, strick equal operator)
  - == : ‘값’만 같은지 확인
  - === : data의 type까지 같은지 확인
    (코드를 작성할 땐 엄격하게 비교하는 것을 추천)
- 느슨한 타입(loosely typed)의 동적(dynamic) 언어의
  문제점은 무엇이고 보완할 수 있는 방법에는 무엇이
  있을지 생각해보세요.
  - JS에 능숙한 개발자라면 type이 불분명해 일어나는
    문제가 적겠지만, 배우는 사람이나 익숙하지 않은
    주니어 개발자라면 사용하는 함수와 메소드간의
    type변화나 필요 조건을 캐치하지 못하고 실수 할
    가능성이 높은 듯 하다.
    실제로 알고리즘을 배우며 JS를 익히는 과정에서
    JS의 type변화에 익숙하지 못해 저지른 실수가 많았다.
  - 이를 보완하려면 JS의 type취급을 정확하게 이해하고
    함수나 메소드를 사용함에 있어 어떤 type을 받아,
    무엇을 return하는지 확실하게 인지하고 사용 할
    필요가 있다고 생각한다.
- undefined와 null의 미세한 차이들을 비교해보세요.
  - undefined : 개발자의 의도와 다르게 정의되지 않은 값
    코드를 작성할 때 실수로 값을 할당하지 않으면 자주보임
  - null : 의도적으로 비운,없는 값
    개발자가 의도적으로 빈 값을 참조할 때 쓰는 듯 (빈객체)

JavaScript 객체와 불변성
immutability : object 생성후 그 상태를 변경할 수 없음
immutable object를 사용할 때 조작 단순화 / 성능 개선 가능
- 기본형 데이터와 참조형 데이터
  - primitive type(원시형)
    - Number, string, Boolean, null, undefined / symbol
      값을 그대로 할당
  - reference type(참조형)
    - object, array, function, regexp / map set 등
      값이 저장된 주소를 할당(참조)
      주소에 있는 값이 변경되면
      주소를 따라가 그 안의 바뀐 값을 가져옴
- 불변 객체를 만드는 방법
  - 우리가 자주 사용하는 const 를 통해 만들 수 있음
    var, let과 다르게 const는 불변
  - 이외에 Object.freeze()라는 메소드가 있는 듯
- 얕은 복사와 깊은 복사
  - 주소를 참조하여 의도와 다르게 변경되지 말아야 할 data의
    값이 바뀌는 일이 생기지 않게 방지하려면
    얕은 복사가 아니라 깊은 복사를 해야 한다.
    - 방어적 복사 : Object.assign
      - 값은 같지만 새로운 메모리에 넣고 주소를 다르게 함
    - 불변객체화 : Object.freeze
      - primitive type처럼 변하지 않는 객체로 만들어 버림

Hoisting / TDZ
- 스코프, 호이스팅, TDZ
  - scope : 변수등이 유효하게 작동하는 범위
    global, local variable
  - hoisting : 함수의 선언을 끌어올려 해당함수의
    유효범위의 최상단에 선언
  - TDZ : 변수생성시 ‘선언부터 초기화전’까지의 구간
    - Declaration phase 선언
      변수를 실행 컨텍스트의 변수 객체에 등록
    - Initalization phase 초기화
      등록한 변수를 위한 메모리 / 처음엔 undefined
    - Assaignment phase 할당
      undefined인 변수에 다른 값을 할당
- 함수 선언문과 함수 표현식에서 호이스팅 방식의 차이
  - function declarion(함수선언식)
    함수명이 정의 되어 있고, 별도의 할당 명령이 없음
    함수 전체를 hoisting, scope맨위로 hoisting해서
    함수 선언전에 함수를 사용할 수 있음
  - function expression(함수표현식)
    정의한 함수를 별도의 변수에 할당
    변수는 선언부와 할당부를 나누어 hoisting
- 여러분이 많이 작성해온 let, const, var, function이
  어떤 원리로 실행되는지 알 수 있어요.
  (선언과 초기화가 따로 이루어지는 let, const 등은
  TDZ에 영향을 받음)
  - var : 선언과 초기화 단계가 동시에 이루어짐
  - let, const : 각각 따로
  - function : 선언, 초기화, 할당이 동시에
- 실행 컨텍스트와 콜 스택
  - Execution Context
    Last in, First out
    - global execution context
      default 처음 load되었을 때 실행되는 환경
    - funtion execution context
      함수가 호출되고 실행됨에 따라 함수안에서 생성되는
      함수는 고유의 context를 가지고 언제나 접근가능
  - callstack
    - 호출, stack은 출입구가 하나뿐인 우물같은 구조
      항상 맨위의 함수를 우선으로 실행
      이방식으로 JS는 전체 코드의 환경과 순서를 보장함
- 스코프 체인, 변수 은닉화
  - scope chain : scope간의 연결
  - global stack에 쌓임 > 함수호출 > 나중에 호출된함수 >
    그안의 변수 > 없으면 외부함수 > 없다면 전역 객체 >
    여기마저 없으면 is not defined error
  - 은닉화 : ‘직접적으로 변경해선 안되는 변수’에 대한접근을 막는 것
    closure 참고

Code review
- 콘솔에 찍힐 b 값을 예상해보고, 어디에서 선언된
  “b”가 몇번째 라인에서 호출한 console.log에 찍혔는지,
  왜 그런지 설명해보세요.
- 주석을 풀고 오류가 난다면 왜 오류가 나는 지 설명하고
  오류를 수정해보세요.
```
let b = 1;

function hi() {
  const a = 1;

  let b = 100;

  b++;

  console.log(a, b);
}

//console.log(a);

console.log(b);

hi();

console.log(b);
```

inno r 1

Sparta coding

Innovation Camp

React report

reference