TIL_JavaScript 22년 11월 18일

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

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

• JavaScript의 변수는 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당 (및 재할당)이 가능하다

let foo = 45 // foo는 숫자
foo ='age' // 이제 foo 는 문자가 된다 
foo = true // boolean 이 된다, 출력하면 true 가 나온다 

• JavaScript 기본적인 자료형

숫자형 – 정수, 부동 소수점 숫자 등의 숫자를 나타낼 때 사용합니다. 정수의 한계는 ±253 입니다.
bigint – 길이 제약 없이 정수를 나타낼 수 있습니다.
문자형 – 빈 문자열이나 글자들로 이뤄진 문자열을 나타낼 때 사용합니다. 단일 문자를 나타내는 별도의 자료형은 없습니다.
불린형 – true, false를 나타낼 때 사용합니다.
null – null 값만을 위한 독립 자료형입니다. null은 알 수 없는 값을 나타냅니다.
undefined – undefined 값만을 위한 독립 자료형입니다. undefined는 할당되지 않은 값을 나타냅니다.
객체형 – 복잡한 데이터 구조를 표현할 때 사용합니다.
심볼형 – 객체의 고유 식별자를 만들 때 사용합니다.

JavaScript 형변환 (type conversion)

• 함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환되는 것을 형변환이라고 한다
• 전달받은 값을 의도를 갖고 원하는 타입으로 변환(명시적 변환)해 주는 경우도 형 변환이라고 할 수 있다

alert (100) // 100 은 문자로 변환된다 
alert (Number('100')) // 100은 숫자로 변환된다 
alert (boolean(100)) // true 가 출력 된다 

• 문자형 변환은 무엇을 출력할때 주로 일어남
• 숫자형으로 변환할 때 적용되는 규칙 , 연산시 주로 일어남

  전달 받은 값	형 변환 후
  undefined	NaN
  null	0
  true and false	1 and 0
  string	문자열 처음과 끝의 공백은 제거됨

  공백후 남아있는 문자열이 없다면 0
  그렇지 않다면 숫자를 읽고 변환
  변환에 실패하면 NaN |
• 불린형으로 변환할 때 적용되는 규칙

  전달 받은 값	형 변환 후
  0, undefiend, null, NaN, ““	false, ” "는 빈 문자열이기 때문에 false
  그 외의 값	true, ”0” 문자열 0은 값이 있기 때문에 true 공백이 있는 문자열도 비어있지 않기 때문에 true

• https://www.notion.so/subinbaek/11-18-47bc709864fb421db9bd0af6012dfc77#5c420ab048f5423e8ac19d859792400d

비교 연산자와 ==,===의 차이에 대해 알아보자

== (동등연산자)

• 비교하는 자료형의 값이 숫자가 아니면 자바스크립트는 숫자로 변환하여 비교한다
• 0 과 false 를 구분하지 못한다
• 느슨한 비교
• ==의 특성에 대해 추가로 알아보기:
  • == 은 undefined 나 null을 숫자로 변환하지 않는다

=== (일치연산자)

• 엄격한 동등연산자로 문자를 숫자로 변환하지 않는다 따라서 버그를 피하기 위해 일치 연산자를 사용해야 한다
• null === undefined를 비교시 두 값의 타입이 다르기 때문에 false 이다

alert(0 == false); // true를 출력한다 false 가 숫자 0으로 변환되기 때문
let a = '3'
let b= 3
alert(a === b) // false 
alert(a ==b) // true

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

• 느슨한 타입의 언어는 변수값을 변환시킬수 있고 런타임시 변수 타입이 결정되는 특성이 있다. 이러한 특성은 자바스크립트가 개발자를 편하게도 해주지만 오류 발생이 잦아 단점으로 꼽히기도 한다. 위에서 ==느슨한 비교시과 ===을 비교한것 처럼 이런 오류를 방지하기위해 use strict type 을 사용 하기도한다.
• 나아가 자바스크립트의 동적언어의 단점을 커버하기 위해 type script를 사용하기도 한다

undefined 와 null 의 미세한 차이 비교

• 자바스크립트에서 null 은 존재하지 않는값, 비어있음을 뜻한다
• undefined은 변수는 선언했지만 값이 설정되지 않은 상태를 나타낸다
• null 과 undefined를 숫자형으로 변환하면 null =0 , undefined = NaN 이 된다

💡 JavaScript 객체와 불변성이란 ?

객체란?

객체는 8개의 자료형 중에 하나이지만 문자와 숫자만 담을수 있는 원시형이 아니기 때문에 다양한 데이터를 담을 수 있다

코드

let user = {
name: 'dora',
age: 7,};

폴더 예시

폴더로 예시 설명

• 객체 = 폴더 = user

• property = 파일

• 객체 key = 파일명 = name, age

• 객체 value = 파일에 담긴 데이터 = dora , 7

데이터 타입의 종류: 기본형 데이터와 참조형 데이터

비교 값	기본형 타입(Primitive Type)	참조형 타입(Reference Type)
데이터 종류	숫자(Number), bigInt,문자열(String),불리언(Boolean), null, undefined, 심볼(Symbol)	객체(Object),배열(Array),함수(Function),날짜(Date),정규표현식(RegExp),Map,WeakMapSet,WeakSet

불변 객체를 만드는 방법

레퍼런스: https://spiderwebcoding.tistory.com/8

• const 로 객체를 만들면 객체는 변할수 없지만 안에 담겨진 프로퍼티는 바뀔 수 있다.
  • 상수로 선언된 user 라는 객체는 객체 이름을 바꿀수 없지만 안에 담긴 자료는 바뀔수 있다.
• object.freeze() 는 객체안에 새로운 속성을 넣지 못하게 하는 메서드
  • 다만 변수로 선언된 객체는 재할당이 가능하여 속성 값이 바뀔 수 있다
• const 의 재할당 불가 + object.freeze의 객체 속성 변경 불가를 합치면 불변 객체를 만들 수 있다

const test = {         //const 로 객체를 재할당하지 못하게 한다 
    'name' : 'jung'
};

Object.freeze(test);  // object freeze로 test 의 속성을 수정하지 못하게 한다 

• 얕은 복사와 깊은 복사

레퍼런스: https://velog.io/@th0566/Javascript-얕은-복사-깊은-복사

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

스코프

• 자바스크립트가 코드를 읽어오는 구역

  호이스팅

• 변수나 함수를 선언하면 코드가 실행되기 이전에, 스코프 상단 선언이 끌어 올려 지고 메모리에 선언이 저장되는 현상이다

TDZ

• 일시적인 사각지대라는 뜻으로 let 과 const 의 경우 변수가 선언됬을때 TDZ에 속하기 때문에 호이스팅이 되지 않는것 처럼 보이지만 실제로 호이스팅이 된다.

레퍼렌스: https://noogoonaa.tistory.com/78

💡 *나중에 조금더 알아보기*

• 얕은 복사와 깊은 복사 레퍼런스: https://velog.io/@th0566/Javascript-얕은-복사-깊은-복사
  
• 함수 선언문과 함수 표현식에서 호이스팅 방식의 차이
• 여러분이 많이 작성해온 let, const, var, function 이 어떤 원리로 실행되는지 알 수 있어요.
• 실행 컨텍스트와 콜 스택
• 스코프 체인, 변수 은닉화