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

먼저 자료형에 대하여 알아보자

• Boolean (불리언)
  • 원시 자료형 중 하나이다.
  • true(참) 혹은 false(거짓) 값으로만 표현할 수 있다.
• String (문자열)
  • 원시 자료형 중 하나
  • '값' 또는 "값" 와 같이 따옴표 혹은 쌍따옴표나 외따옴표를 쌍으로 값을 묶어 표현한다.
• Number (숫자)
  • 원시 자료형 중 하나
  • 10 처럼 어떠한 따옴표나 콤마 등을 넣지 않고 숫자 값으로 표현한다.
  • 10  그리고  '10'  두 값은 다른 자료형을 가지고 있기 때문에 같다고 볼 수 없다.
• undefined
  • 원시 자료형 중 하나
  • 값이 할당되지 않은 변수는 기본적으로 undefined 값을 가진다.
• null
  
  • 원시 자료형 중 하나
  • 어떤 값이 비어있음을 의도적으로 표현할 때 사용된다.

 

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

• JavaScript의 변수는 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당 및 재할당이 가능하다.
  
  • 예시)
  • let apple = '맛있다' //문자열
  • apple = 4 //apple이 숫자가 됨
  • apple = true //apple이 불리언이됨

 

2. Javascript 형변환

• 함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환된다. 이런 과정을 형 변환 이라고 한다.
• 또한 전달받은 값을 의도를 가지고 원하는 타입으로 변환(명시적변환)해주는 경우도 형 변환 이라고 한다.
• 문자형으로 변환
  • 문자형으로의 형 변환은 문자형의 값이 필요할 때 일어난다.
  • alert메서드는 매개변수로 문자형을 받기 때문에 alert(value)에서 value는 문자형이어야한다. 만약 다른 형의 값을 전달 받으면 문자형으로 자동변환 된다.
  • String(value) 함수를 호출해 전달받은 값을 문자열로 변환 할 수도 있다.
    1. let value = true; //boolean
    2. value = String(value); //변수 value에 문자열 "true"가 저장됨
  • 위처럼 문자열로의 변환은 대부분 예측 가능한 방식으로 일어난다.
• 숫자형으로 변환
  • 숫자형으로의 변환은 수학과 관련된 함수와 표현식에서 자동으로 일어난다.
  • 예를들어 숫자형이 아닌 값에 나누기 / 를 적용한 경우
    1. alert("6" / "2");  // 3, 문자열이 숫자형으로 자동 변환된 후 연산이 수행됨
  • Number(value) 함수를 사용하면 주어진 값(value)을 숫자형으로 명시해서 변환할 수 있다.
    1. let str = "123";  //string
    2. let num = Number(str);  //문자열 "123"이 숫자 123으로 변환됨.
  • 숫자형 값을 사용해 무언가를 하려고 하는데 그 값을 문자기반 폼(form)을 통해 입력 받는 경우 명시적 형 변환이 필수이다.
  • 숫자 이외의 글자가 들어있는 문자열을 숫자형으로 변환하려고 하면 결과가 NaN (Not a Number)이 된다.
    1. let age = Number("임의의 문자열 123");
    2. alert(age);  //NaN, 형 변환이 실패되어 나온다.
  • 아래 표는 숫자형으로 변환 시 적용되는 규칙이다.

전달 받은 값	형 변환 후
undefined	NaN
null	0
true and false	1 과 0
string	문자열의 처음과 끝 공백이 제거됩니다. 공백 제거 후 남아있는 문자열이 없다면 0, 그렇지 않다면 문자열에서 숫자를 읽습니다. 변환에 실패하면 NaN이 됩니다.

• 불린형으로 변환
  • 이 변환은 논리 연산을 수행할 때 발생한다. 
  • Boolean(value) 를 호출하여 명시적으로 변환할 수 있다.
  • 기본규칙
    • 숫자 0, 빈 문자열, null, undefined, NaN과같이 직관적으로 비어있는 느낌의 값은 false가 된다.
    • 그 외의 값은 true이다.
• 헷갈리기 쉬운 경우
  • 숫자형 변환시 undefined는 0이 아니라 NaN이 된다.
  • 불린형 변환시 문자열 "0"과  "     "과 같은 공백은 불린형으로 true가 된다.

3.== 과 ===

• ==는 변수의 값을 기반으로 유형을 수정하여 비교한다.
• === 는 변수 유형을 고려하게 된다.
  • 예시
    • 0 == false   // true, 0값은 false와 동일하므로 true
    • 0 === false   //false, 두 피연산자의 유형(number와 boolean)이 다르기 때문에 false
    • 2 == "2"   //true, 자동형변환으로 인해 true
    • 2 === "2"   //false, 유형(number와 string)이 다르기 때문에 false
  • 헷갈리기 쉬운 경우
    • null == undifined   // true
    • null === undifined   //false, 유형(object와 undefined)이 다르기 때문에 false
    • 2 != "2"   //false, 값이 다르지 않기 때문에 false
    • 2 !== "2"   //true,  유형(number와 string)이 다르기때문에 true
• ****  NaN 은 어떤 것과도 같지 않다!!
• 따라서 변수를 비교하거나 어떤 비교를 위해 항상 === 연산자를 사용하는 습관을 기르자

4. 느슨한 타입(loosely typed)의 동적(dynamic) 언어의 문제점은 무엇이고 보완할 수 있는 방법은 무엇인가

 

• 장점 : 느슨한 타입의 동적언어 특징은 변수 생성시에 원시변수의 타입을 미리 선언해도 되지 않는 장점이 있다.
• 단점 : 기능명세서와 API가 오고가는 대형프로젝트를 진행하면 타입이 올바른지 체크하는것이 까다롭기 때문에 배포시 예상치 못한 문제와 직면할 수있다.
  • 예를들어 백엔드 개발자가 api명세서에 가격은 string으로 기입한다고 하고 프론트에서 가격에 1000등 숫자형을 기입하면 에러가 발생하는 것이다. ( "1000" 을 입력하여 문자형 숫자를 입력해야 한다.)
• 보완방법 : 타입스크립트 등을 사용하여 개발자간의 커뮤니케이션에서 발생하는 오차를 줄이도록 한다. 하지만 그렇지 않다면 API명세서를 꼼꼼히 살펴보도록 한다.

5. undefined와 null의 미세한 차이를 비교해보자

• undefined : 원시타입으로, 선언한 후에 값을 할당하지 않은 변수나 값이 주어지지 않은 인수등에 자동으로 할당된다.
  • undefined가 반환되는 경우
  • 값을 할당하지 않은 변수
  • 메서드와 선언에서 변수가 할당받지 않은 경우
  • 함수가 값을 return하지 않았을 때
• null : 원시타입으로, 어떤 값이 의도적으로 비어있음을 표현한다. 
• 둘의 미묘한 차이
  • undefined는 값이 지정되지 않은 경우를 의미하지만, null의 경우에는 해당 변수가 어떤 객체도 가리키지 않다는 것을 의미한다.
  • typeof를 출력하면 undefined는 undefined 이고,  null은 object이다.
  • *** undefined==null은 true가 반환된다.