[javascript | JS] 자바스크립트의 자료형과 특성

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

• 자바스크립트의 변수는 자료형에 관계없이 모든 데이터일 수 있다.
• 따라서 변수는 어떤 순간에 문자열일 수 있고 다른 순간엔 숫자가 될 수도 있다.

→  JS는 자료의 타입은 있지만 변수에 저장되는 값의 타입은 언제든지 바꿀 수 있는 언어이다.

 

→ 문제점과 보완

• 1 == '1'이 True가 되는 마법..
• 문자열 "1e22"는 숫자 1의 22승이 되는 마법..
• 타입을 지정해주는 타입스크립트(typescript)를 사용하자...!

 

 

 

 

▼ Javascript의 형변환

• 함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환되며, 이런 과정을 "형 변환(type conversion)"이라고 한다.
• 암시적 변환
  • alert가 전달받은 값의 자료형과 관계없이 이를 문자열로 자동 변환하여 보여주는 것
  • 수학 관련 연산자가 전달받은 값을 숫자로 변환하는 경우
  • 산술 연산자 더하기(+)의 경우 숫자보다 문자열이 우선시 되므로, 숫자 + 문자 => 문자
  • 더하기 제외 다른 산술 연산자( -, *, /, %)는 숫자형이 우선시 되므로, 숫자 + 문자 => 숫자
• 명시적 변환
  • String(value) 함수를 호출해 전달받은 값을 문자열로 변환
  • Number(value) 함수를 사용하여 주어진 값(value)을 숫자형으로 변환
  • Object(), Number(), String(), Boolean() 등

 

 

 

▼ ==, ===

• == : Equal Operator로 값만 비교
  • 1 == '1' : true
  • null == undefined : true
  • true == 1 : true
  • 0 == "" : true
  • NaN == NaN : false
• === : Strict Equal Operator로 값과 값의 종류(Data type)를 비교
  
  • 1 === '1' : false
  • null === undefined : false
  • true === 1 : false
  • 0 === "" : false
  • NaN == NaN : false

※ 배열과 객체의 경우

var a = [1,2,3]; 
var b = [1,2,3]; 
console.log(a == b); // false 
console.log(a === b); // false

• 배열을 할당할때, 각 변수는 각 메모리의 주소를 참조한다. 
• 두 변수 a, b의 값과 데이터 타입이 같지만, 이와 상관없이 참조하는 메모리의 주소가 다르기 때문에 두 a, b는 같지 않다. 

var a = [1,2,3]; 
var b = [1,2,3]; 
var c = b; 
console.log(b === c); // true 
console.log(b == c); // ture

• 새로운 변수 c에 변수 b를 할당해주면, 변수 c도 b가 참조하는 같은 메모리의 주소를 참조하게 되어, 두 변수 c, b는 같다.
• 이때, c, b의 값과 데이터 타입이 같기 때문에, ==와 ===의 결과값이 동일하다. 
• 객체도 마찬가지.

 

 

 

▼ undefined와 null

1. null : '존재하지 않는(Nothing)', '비어 있는(empty)', '알 수 없는(unknown)'
   
   • null의 자료형은 null
2. undefined : 값이 할당되지 않은 상태
   • undefined의 자료형은 undefined
   • 변수는 선언했지만, 값을 할당하지 않았다면 undefined가 자동으로 할당됨.
   • 변수는 선언했지만, 실제 빈값이라 임의로 비어둘 경우 null을 할당해줘야 undefined와 헷갈리지 않음. 

let age = null;
let name;

console.log(age);	// null
console.log(name);	// undefined

 

 

 

 

 

[참고] https://ko.javascript.info/types

자료형

[참고] https://ko.javascript.info/type-conversions

형 변환

[참고] https://medium.com/gdana/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-%ED%98%95%EB%B3%80%ED%99%98%EC%9D%80-%EB%91%90%EA%B0%80%EC%A7%80%EB%8B%A4-b46875be4a88

자바스크립트의 형변환은 두가지다

[참고] https://steemit.com/kr-dev/@cheonmr/js-operator

[JS Operator] ==와 ===의 차이점 — Steemit