자바스크립트 여러 지식

자바스크립트의 Number Type과 다른 언어들의 차이점?

• 정수만을 위한 타입이 없고 모든 수를 실수 처리를 함
  
  

자바스크립트 원시타입 & 참조타입의 종류

• boolean, string, number, undefined, null, symbol (ES6 때 추가) 이렇게 6가지 종류
• Object는 참조타입으로, 참조타입에는 Object, 배열, 함수, 일반적인 객체 (Map, Set)가 포함
• undefined는 데이터 타입이자 값을 나타냄 (값이 정의되지 않음), null은 객체이며 명시적으로 값이 비어있음을 의미

⭐ 원시 타입 (깊은 복사, 값만) vs 참조 타입 (얕은 복사, 주소, 데이터공유)

• 원시 타입의 값은 immutable value (변경 불가능한 값)이고 참조없이 변동되었을 때 그 값을 새로운 메모리 공간에 저장 (문자, 숫자, 불린 등등)

• 원시 타입은 복사할 때 깊은 복사가 이루어짐, 그림처럼 b를 변경해도 a의 값을 변하지 않음

• 이는 독립적인 메모리 공간에 값 자체를 할당하여 생성하는 것이라 볼 수 있음

• 참조 타입을 복사할 때 얕은 복사가 이루어진다는 것 즉, 참조(주소)값의 복사를 나타내서 데이터를 공유한다고 생각하면 됨 (배열, 객체..)

• 이는 데이터가 새로 생성되는 것이 아닌 데이터의 참조 값(메모리 주소)를 전달하여 한 데이터를 공유하는 것 결론적으로 참조하는 애의 값에 대한 화살표를 복사하는 것
  
  

원시값을 객체처럼 사용하기

• 자바스크립트 창안자는 다음의 모순적인 상황을 해결 해야했음
  -- 문자열이나 숫자와 같은 원시값을 다루어야하는 작업이 많은데 메서드를 사용하면 작업이 수월하다.
  -- 하지만 원시값은 가능한한 빠르고 가벼워야 한다.

• 그로 인한 해결책으로 다음을 제시
  -- 원시값은 원시값 그대로 남겨두지만 단일 값 형태를 유지
  -- 문자열, 숫자, 불린, 심볼의 메서드와 프로퍼티에 접근할 수 있도록 언어차원에서 허용
  -- 그렇기 때문에 원시값이 메서드나 프로퍼티에 접근하기 위한 특수한 객체인 원시 래퍼 객체를 만들어주고 실행 후 이 래퍼 객체는 삭제

• 원시 타입 종류에 따라 다양하고 래퍼 객체는 원시 자료형의 이름을 그대로 사용 String, Number, Boolean, Symbol.. 래퍼 객체마다 제공하는 메서드 역시 다름

자바스크립트의 배열은 사실 배열이 아니다.

• 자바스크립트의 배열은 배열이 아닌 객체이고 더 정확하게는 일반적인 배열의 동작을 흉내낸 특수한 객체 (해시 테이블로 제작)

• 자바스크립트에서의 배열을 일반적인 배열과 다르게 각 요소의 메모리 공간은 같은 크기를 가지지 않아도 되고, 연속적으로 이어지지 않을 수도 있음 이러한 배열을 희소 배열 (sparse array)라고 함

• 위 그림처럼 자바스크립트 배열은 인덱스를 나타내는 문자열 프로퍼티 key를 가지며 length 프로퍼티를 갖는 특수한 객체, 자바스크립트 배열 요소는 사실 프로퍼티 값

• 자바스크립트에서 사용하는 모든 값은 배열의 요소가 될 수 있으므로 어떤 타입의 값이라도 배열의 요소가 될 수 있음

• 일반적인 배열 특징
  -- 인덱스로 요소에 빠르게 접근
  -- 특정 요소를 검색하거나 삽입 or 삭제할 경우 효율적이지 않음
  

• 자바스크립트 배열 특징
  -- 해시 테이블로 구현된 객체이므로 인덱스로 배열 요소에 접근하는 경우, 일반적인 배열보다 성능적인 면에서 느림
  -- 특정 요소를 검색, 삽입, 삭제는 일반적인 배열보다 빠름

⭐ 엄격 모드(use strict)

• 'use strict' 키워드를 사용
• 함수 스코프에는 적용시킬 수 있지만 블록 스코프에는 불가능
• 전역 this는 원래 window이지만, use strict를 사용시 undefined가 됨
• ECMAScript5부터 도입된 기능으로 기존에 무시되던 에러들을 에러로 발생시켜줌

ES6 스펙에 대한 지원이 완벽하지 않을 때 해결법

• 바벨(Babel)을 사용, 바벨은 ES6이상의 문법들을 브라우저가 이해할 수 있게 ES5이하의 문법으로 변환하는 트랜스파일러

호스트 객체와 내장 객체의 차이

• 호스트 객체 : 런타임 환경에서 제공하는 window, XMLHttpRequest 같은 것

• 내장 객체 : ES사양에 정의된 자바스크립트 언어의 일부인 객체 (String, Math, 정규표현식, Object, Function 등)

⭐ == (동등 연산자)와 === (일치 연산자)의 차이

• == (동등 연산자) : 느슨한 동등성으로, 값의 자료형이 다르더라도 자료형을 자동으로 형변환을 하여 값을 비교 ex) 1 == '1' // true

• == (일치 연산자) : 엄격한 동등성으로, 두 값의 타입이 같지 않은 경우 false를 반환

• 동등 연산자를 사용시 예상치 못한 값이 나올 수 있으니 일치 연산자를 사용하는 것을 추천

⭐ require(CommonJs)와 import(ES6)

• 기본적으로 require와 import 모두 모듈 키워드, 외부 파일이나 라이브러리를 불러올 때 사용

• require는 Node.js에서 사용되는 CommonJS이고 import는 ES6에서 새로 도입된 모듈 키워드

• 공통점 : 둘 다 다른 파일의 코드를 불러온다는 점

• 차이점 : 다른 문법구조를 가지고 있고, 같이 사용할 수 없음

• import가 사용자가 필요한 모듈 부분만 선택해서 불러올 수 있고 require보다 성능이 우수하고 메모리를 절약할 수 있음

• 최근 import가 더 많이 쓰이고는 있지만 100% 대체할 순 없음

• <script> 태그를 사용하는 브라우저 환경, Node.js 환경 에서는 CommonJS를 기본 모듈 시스템으로 채택하고 있기 때문에 Babel과 같은 트랜스 파일러를 활용할 수 없을 땐 require를 활용해야함

debounce (디바운스) 와 throttle (쓰로틀)

• debounce : 특정시간이 지난 후 처음 이벤트나 마지막 이벤트만 호출하는 것
  -- 예 ) 키보드로 텍스트를 입력하거나 마우스를 움직이는 경우, 연속적인 이벤트가 발생하는데 이때 debounce를 적용하면 일정 시간 동안의 입력 이벤트를 모아두었다가 마지막 이벤트나 처음 이벤트만 실제 처리를 수행하여 불필요한 처리나 반복적인 업데이트를 피하고, 성능을 개선

• throttle : 이벤트를 일정한 주기마다 발생하도록 하는 것
  -- 예 ) Throttle의 설정시간을 1000ms로 두면 1ms동안 최대 한 번만 발생

⭐ DOM (Document Object Model)

• DOM은 XML이나 HTML문서에 접근하기 위한 일종의 인터페이스

• 웹 페이지 내의 모든 요소를 정의하고 객체로 나타내줌, 또한 각각의 요소에 접근법을 알려줌

• 웹페이지를 프로그래밍적으로 제어할 수 있게 해주는 객체모델, 최상위에는 Node가 존재

• document 객체는 페이지의 기본 진입점 역할을 함 document 객체를 이용해 페이지 내 무엇이든 변경할 수 있고 원하는 것을 만들 수 있음

⭐ BOM (Browser Object Model)

• BOM은 문서 이외의 모든 것을 제외하기 위해 브라우저 환경에서 제공하는 추가 객체 전역 객체로 window가 있음
  -- navigator 객체 : 브라우저와 운영체제에 대한 정보
  -- location 객체 : 현재 URL을 읽을 수 있게 하고 새로운 URL로 변경할 수 있게 해줌

Object와 Map의 차이

• Object의 키는 문자열 또는 심볼이여야 하지만 Map은 모든 값을 가질 수 있음

• Object의 크기는 수동으로 추적 (Object.keys(obj).length) 해야 하지만, Map은 크기를 쉽게 얻을 수 있음

• Map은 삽입 순서를 보장 즉, Map을 Iterate할 경우 삽입된 순서대로 나오지만 Object는 정렬되긴 하지만 보장되지 않음

• Map은 이터러블이기 때문에 for...of문, 전개 연산자의 사용이 가능하지만 Object는 불가