항해99 javascript 과제

JavaScript의 자료형과 JavaScript만의 특성은 무엇일까?

느슨한 타입(loosely typed)의 동적(dynamic)언어

• javascript 언어 타입

1. 원시값 : boolean, null, undefined, number, biglnt, string, symbol
2. 객체
3. 느슨한 타입의 언어 : 타입없이 변수 선언 <---> 강력한 타입의 언어 : 언어 타입과 함꼐 변수 선언

   JavaScript Example (loose typing)
   var a = 13; // Number 선언
   var b = "thirteen"; // String 선언

   Java Example (strong typing)
   int a = 13; // int 선언
   String b = "thirteen"; // String 선언

4. 동적 타입 언어 : 자료의 타입은 있지만 변수에 저장되는 값의 타입은 언제든지 바꿀 수 있음

   let message = "hello";
   message = 123456;

JavaScript 형변환

• 내부적으로 타입이 관리되기 때문에 내부적으로 타입이 바뀔때가 있음

  1 == true; // = true
  1 === true; // = false

• String -> Number
  - parseInt(문자) : 정수형 숫자
  - parseFloat(문자) : 실수형 숫자
  - Number(문자) : 정수&실수형 숫자

• Number -> String
  - string(숫자)
  - 숫자.toString(진법) : 진법 변경
  - 숫자.toFixed(소수자리수) : 소수점 자리 지정
  - 숫자 + "문자열" : 한개의 문자열이 됨

• 이중부정(!!)를 사용해서 Number를 Boolean으로 변환 가능

  true == !"0"; // = false
  true == !!"0"; // = true

==,===

• 두개 모두 equal 연산자이지만, '==='는 엄격한 연산자이다. 값의 형태가 같은 것뿐만 아니라 데이터 타입도 같아야지 true이다.

  1 == '1' // true
  1==='1' // false

느슨한 타임(loosely typed)의 동적(dynamic) 언어의 문제점은 무엇이고 보완할 수 있는 방법에는 무엇이 있을지 생각해보세요.

• 컴파일을 한 후 실행하는 것이 아니라, 한줄씩 읽으며 실행되기 때문에 타입 오류를 실행전에 체크 할 수 없다.

  컴파일(원시코드 -> 목적파일), 링크(목적파일 -> 실행파일), 실행파일(.exe 파일과 같은것들), 인터프리터(고급언어로 작성된 프로램을 한줄씩번역 및 실행), 컴파일러(전체를 목적프로그램으로 번역한 후 링킹)

  -> 예상되는 타입에러를 예외 처리 한다.
  -> type이 추가된 타입스크립트 사용

• const라는 키워드 만으로는 불변성 실현이 어렵다.
  함수형 프로그래밍 지원이라는 자바스크립트의 장점과 모순되게 불변성이 지원되지 않는다.

  -> immutable.js 라이브러리를 사용한다..?

undefined와 null의 미세한 차이들을 비교해보세요.

• undefined : 변수를 선언하고 값을 할당하지 않은상태(type: undefined)
• null : 변수를 선언하고 빈 값을 할당한 상태(type: object)
• null은 undefineds 처럼 전역 객체의 속성 중 하나가 아니라 리터럴 값이다.

JavaScript객체와 불변성이란?

기본형 데이터와 참조형 데이터

• 기본형 타입 : 숫자, 문자열, 불리언, null, undefined, 심볼
  - 할당이나 연산시 데이터 복제
  - '1'이라는 데이터가 존재하면, 또 다른 '1'이라는 데이터를 만드는것이 아니라 해당 변수에 주소값을 할당해줌(데이터의 불변성)
• 참조형 타입 : 객체, 배열, 함수, 날짜, 정규표현식, map, weekmap, set, weakset
  - 객체의 변수(프로퍼티) 영역이 별도로 존재

불변 객체를 만드는 방법

• const : 바인딩된 값을 상수로 만듬. 할당된 값이 상수가 되는것이 아니기때문에 객체의 속성은 변경 가능하지만, 객체 재할당은 불가능하다. 완벽한 불변객체라고 보기 힘듬
• Object.freeze : 바인딩된 변수를 동결 객체로 만들어서 속성 변경이 불가능하다. 객체의 재할등은 가능하다. 완벽한 불변 객체라 보기 힘듬
  ------> const + objedct 로 객체와 속성을 모두 불변성으로 만들 수 있다.

얕은 복사와 깊은 복사

• 두 복사의 차이점은 복합 객체(리스트 또는 클래스 인스턴스들과 같은 다른 객체를 포함한 객체)에만 유효함.
• 얕은복사 : 객체가 같은 데이터 주소를 할당받은 상태, 원본의 데이터 값 또는 사본의 데이터값을 바꾸면 따라 바뀜.
• 깊은복사 : 새로운 객체를 생성하여 데이터 주소를 할당받은상태
  - Object.assign() :배열을 복사할때 1레벨 깊이에서만 효과적으로 작동하므로, 다차원 배열을 복사하는것에는 적합하지 않을 수 있음
  - JSON.parse(), Json.stringify()

호이스팅과 TDZ는 무엇일까?

스코프

• 기본적으로 자바스크립트는 함수 레벨 스코프를 사용
• 전역 스코프 : 어디서든 참조가능
• 전역 변수 : 전역스코프를 갖는 변수, 어디서든 참조가능
• 지역 스코프 : 함수 자신과 하위 함수에서만 참조가능(let, const)
• 지역 변수 : 지역 스코프를 갖는 변수, 함수 내에서 선언된 변수로 해당 함수와 해당 함수의 하위 함수에서 참조 가능

호이스팅

• 함수를 실행하기전에 변수와 함수의 메모리 공간을 선언전에 미리 할당하는것
• 변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것

  console.log(num); // 호이스팅한 var 선언으로 인해 undefined 출력
  var num; // 선언
  num = 6; // 초기화

  var 호이스팅 시 선언과 초기화가 있으면 기본초기화상태가 됨(undefinde)

  console.log(num); // ReferenceError
  num = 6; // 초기화

  선언없이 초기화만 있으므로 기본초기화상태가 아니기때문에 referenceError 예외가 발생(현재 범위에 존재하지않거나 아직 초기화되지않은 변수가 참조되었을 때의 에러)

TDZ(temporal dead zone, 일시적 사각지대)

• 코드의 작성 순서가 아니라 코드의 실행 순서에 의해 영향
• 영향을 받는 구문 const, let, class

함수 선언문과 함수 표현식에서 호이스팅 방식의 차이

• 함수 선언문 : 함수명이 정의되어있고, 별도의 할당 명령이 없는것
• 함수 표현식 : 정의한 함수를 별도의 변수에 할당하는 것
• 호이스팅 차이 발생
  - 함수선언식은 함수 전체를 호이스팅, 함수 선언 전에 함수 사용 가능
  - 함수 표현식은 별도의 변수를 할당하게 되는데, 변수는 선언부와 할당부를 나누어 호이스팅. 선언부반 호이스팅하게 됨

let, const, var, function 실행 원리

• let : 블록스코프 지역변수 선언, 선언과 동시에 초기화
• const 블록스코프 상수 선언,상수의 값은 재할당 및 선언 불가, 객체 값은 변경 가능
• var : 현재 함수 또는 전역 스코프에 선언, 선택적으로 초기화
• function : 독립적인 블록으로 움직임, 하나의 데이터 타입으로 변수에 저장이 가능하며 함수의 파라미터로 전달 할수 있음

실행 컨텍스트와 콜 스택

• 실행할 코드에 제공할 환경 정보들을 모아놓은 객체
• 호이스팅 발생, 외부 환경 정보 구성, this 값 설정
• 스택은 후입선출 구조로 나열
• 전역 실행 컨텍스트는 세션이 종료될때까지 유지
• 함수 실행이 끝나면 해당 함수의 실행 컨텍스트를 콜스택에서 제거하고 이전의 실행 컨텍스트에 컨트롤을 반환
• 콜스택을 상자라고 생각하면 실행컨텍스트는 그 속에 들어가는 크기가 딱 맞는 물건이라고 생각하면 된다. 처음 넣은 실행 컨텍스트는 마지막에 뺄 수 있다.
• 자바스크립트는 위와 같이 하나의 콜스택에서 한번에 한작업만 수행할 수 있지만, 브라우저 환경에서 이벤트 루프를 기반으로 브라우저의 구성요소와 함께 동시에 많은 작업 수행

스코프 체인, 변수 은닉화

• 스코프 체인 : 일종의 리스트로서 전역 객체와 중첩된 함수의 스코프의 레퍼런스를 차례로 저장하고, 각각의 스코프가 어떻게 연결되고 있는지 보여주는 것

하위 함수 내에서 상위 함수의 스코프와 전역 스코프까지 참조할때 스코프체인을 통해 탐색. 즉, 스코프에 담긴 순서대로 탐색!

• 은닉화 : 외부 객체로부터 속성 등의 값을 감추는 특성