Data Type (Javascript )

데이터 종류

JavaScript 언어의 타입은 원시형과 참조형으로 나뉜다.

원시형

객체를 제외한 모든 타입은 불변 값(변경할 수 없는 값)을 정의한다. 예를 들어 (C 언어와는 달리) 문자열은 불변합니다. 이런 일련의 타입을 원시형이라고 한다.

1. 문자 (String)
2. 숫자 (Number)
3. 불린 (boolean
4. null
5. undefined
6. symbol
7. 큰 정수(bigint)

참조형

1. 배열 (Array)
2. 객체 (Objrct)
3. 함수 (Function)

---

문자 (String)

JavaScript의 String 타입은 텍스트 데이터를 나타낼 때 사용한다.

String은 16비트 부호 없는 정수 값 "요소"로 구성된 집합으로, 각각의 요소가 String의 한 자리를 차지한다. 첫 번째 요소는 인덱스 0에, 그 다음 요소는 인덱스 1, 그 다음은 2, ...이다. String의 길이는 그 안의 요소의 수와 같다.

문자 데이터는 항상 따움표로 묶여 있어야 한다!

세가지 방법이 있는데

• 작은 따움표 (추천)
• 큰 따움표
  • 둘 중 하나의 방식으로만 쓰면 된다.

• 백팁 기호는 보간을 할 때 쓰인다.(보간 처리를 할때는 ${}기호가 같이 쓰인다.

숫자 (Number)

Number 타입은 배정밀도 64비트 이진 형식 IEEE 754 값(-(2^53 − 1)부터 2^53 − 1까지의 수)이다.

Number 타입은 부동소수점 숫자 외에도 +Infinity, -Infinity, NaN("Not a Number") 세 개의 상징적인 값을 가진다.

부동소수점 오류는 컴퓨터가 숫자 10진법을 2진법으로 전환하는 과정에서 오류가 생기는 것이다. 오류에 대처하는 법은 소수점을 첫째 자리만 빼고는 걷어 내준다. 이 과정에서 숫자가 문자값으로 변환되는데 parseFloat(함수는 주어진 값을 필요한 경우 문자열로 변환한 후 부동소수점 실수로 파싱해 반환합니다.)를 써서 다시 숫자값으로 전환해 준다.

Number 타입의 값 중 두 가지 방식으로 표현할 수 있는 유일한 값으로 0이 있다. 0은 -0과 +0 둘 다로 표현할 수 있다. (0은 +0의 별칭입니다)

실제로는 이 사실이 영향을 주는 것은 거의 없다. 예컨대 +0 === -0은 참이다. 그러나 0으로 나눌 경우 둘의 차이를 볼 수 있을 것이다.

> 42 / +0
Infinity
> 42 / -0
-Infinity

불린 (Boolean)

불린(boolean)은 논리적인 데이터 유형이다.

불린은 참(true) 혹은 거짓(false) 값만을 가질 수 있다. 자바스크립트에서 불린 조건은 어떤 코드 부문이 실행되어야 할 지(예를 들어 if 절 안에서) 또는 어떤 코드 부문을 반복해야 할지(예를 들어 for 문 안에서) 결정하는 데 쓰인다.

null

컴퓨터 과학에서 null 값은 일반적으로 존재하지 않거나 유효하지 않은 object 또는 주소를 의도적으로 가리키는 참조를 나타낸다.

null은 '존재하지 않는' '비어있는' '알 수 없는' 값을 명시적으로 나타낸다

모든 객체는 null 값으로 부터 파생되며 따라서 typeof 연산자는 아래의 코드에서 object를 반환한다.

undefined

값을 할당하지 않은 변수는 undefined 값을 가진다.

브라우저에서 웹서버에 API(통신)를 요청(request)하고 서버는 응답을 하는데 개발을 하면서 undefined가 나오는 경우가 많다.

심볼

"심볼" 데이터 형식은 값으로 익명의 객체 속성(object property)을 만들 수 있는 특성을 가진 원시 데이터 형식(primitive data type)이다. 이 데이터 형식은 클래스나 객체 형식(object type)의 내부에서만 접근할 수 있도록 전용(private) 객체 속성의 키(key)로 사용된다.

예를 들어, 심볼 형식으로 된 키는 자바스크립트의 다양한 내장(built-in) 객체 안에 존재한다.

const s = Symbol('Hello world') // 설명
const user = {
  name: 'January',
  ? : 72
}
console.log(user.?)

const s = Symbol('Hello world') // 설명
const user = {
  name: 'January',
  [s] : 72
}
console.log(user.[s]) // 심볼에서 나온 그릇이 있어야한다. 심볼은 이런 개념으로 사용한다.

BigInt

BigInt 타입은 임의 정밀도로 정수를 나타낼 수 있는 JavaScript 숫자 원시 값이다.

BigInt를 Number의 안전 한계를 넘어서는 큰 정수도 안전하게 저장하고 연산할 수 있다.
Number의 안전 한계는 Number.MAX_SAFE_INTEGER로 알아볼 수 있다. BigInt의 도입 이후로는 이 한계를 넘는 숫자에 대해 계산이 가능하다.

> const x = 2n ** 53n;
9007199254740992n
> const y = x + 1n;
9007199254740993n

MAX_SAFE_INTEGER 상수는 9007199254740991(9,007,199,254,740,991 또는 약 9000조)의 값을 갖고 있다. 이 값의 이유는 JavaScript가 IEEE 754에 기술된 배정밀도 부동소숫점 형식 숫자체계를 사용하기 때문으로, 이로 인해 -(2^53 - 1)과 2^53 - 1 사이의 수만 안전하게 표현할 수 있다.

+, *, -, **, % 연산자를 Number에 사용하듯 BigInt에서도 사용할 수 있다. BigInt는 Number와 엄격하게 같지는 않지만 유사하다.

BigInt는 if, ||, &&, Boolean, !처럼 불리언 변환이 발생하는 곳에서는 Number처럼 동작한다.

배열

배열은 리스트와 비슷한 객체로서 순회와 변형 작업을 수행하는 메소드를 갖는다.

JavaScript 배열은 길이도, 각 요소의 자료형도 고정되어 있지 않다. 배열의 길이가 언제든지 늘어나거나 줄어들 수 있고 데이터를 연속적이지 않은 곳에 저장할 수 있으므로, JavaScript 배열은 밀집성을 보장하지 않는다.

데이터의 몇번째 요소를 선택하여 출력할 때는 인덱싱(indexing)한다라고 한다.

• 배열 만들기

let fruits = ['사과', '바나나']

console.log(fruits.length)
// 2

• 인덱스로 배열의 항목에 접근하기

let first = fruits[0]
// 사과

let last = fruits[fruits.length - 1]
// 바나나

• 배열의 항목들을 순환하며 처리하기

fruits.forEach(function (item, index, array) {
  console.log(item, index)
})
// 사과 0
// 바나나 1

• 배열 안 항목의 인덱스 찾기

fruits.push('망고')
// ["딸기", "바나나", "망고"]

let pos = fruits.indexOf("바나나")
// 1

JavaScript 배열의 인덱스는 0부터 시작한다. 즉, 배열 첫 번째 요소의 인덱스는 0이고, 마지막 요소의 인덱스는 배열의 length 속성에서 1을 뺀 것과 같다.

객체

객체는 관련된 데이터와 함수(일반적으로 여러 데이터와 함수로 이루어지는데, 객체 안에 있을 때는 보통 프로퍼티와 메소드라고 부릅니다)의 집합이다. 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입이다.

프로퍼티 (Property)
객체의 속성을 나타내는 접근 가능한 이름과 활용 가능한 값을 가지는 특별한 형태이다. 특정객체가 가지고 있는 정보를 품고 있어 그 객체가 가진 정보에 직접적으로 접근할 수 있게 해준다.

• key에는 빈 문자열을 포함한 모든 문자열 또는 symbol 값
• Key: Value를 저장 할 수 있고 Value에는 모든 데이터가 들어 갈 수 있다.
• 프로퍼티 Key가 중복되어 한개 이상 있을 때에는 가장 최근 Key를 출력해준다.
• Key는 기호(언더바 제외)가 들어가면 따옴표로 묶어주어야 한다.

메소드 (Method)
메소드는 객체가 가지고 있는 동작이고 객체 내의 함수를 메소드라 칭한다.

함수

함수는 작업을 수행하거나 값을 계산하는 문장 집합 같은 자바스크립트 절차이다.

함수 선언

• 함수의 이름
• 괄호 안에서 쉼표로 분리된 함수의 매개변수 목록
• 중괄호 { } 안에서 함수를 정의하는 자바스크립트 표현

abc = function square(number) {
  return number * number;
}

함수 표현식( function expression)에 의해서 함수가 만들어 질 수도 있다. 이 같은 함수를 익명이라고 한다. 이 말은 모든 함수가 이름을 가질 필요는 없다는 것을 뜻한다.

var square = function(number) { return number * number };
var x = square(4) // x 의 값은 16 입니다.

선언과 표현

//  함수 선언식 //
function abc () {

}

//  함수 표현 (함수에 이름이 없어서 익명함수라고 한다.) //
const abc = function () {

}

1. 선언: 호이스팅 O
2. 표현: 호이스팅 X 호이스팅이 나쁜건 아니다. 활용 가능하다.

JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다. 호이스팅을 설명할 땐 주로 "변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는" 것으로 말하곤 합니다.

함수 호출
함수를 정의하는 것은 함수를 실행하는 것이 아니다. 함수를 정의하는 것은 간단히 함수의 이름을 지어주고, 함수가 호출될 때 무엇을 할지 지정 해주는 것이다.

• 입력 = 매개변수들이 데이터(인수)를 받는다
• 출력 = 특정 데이터를 반환해서 값을 내보낸다.

함수는 호출될 때 범위 내에 있어야 한다. 함수의 범위는 함수가 선언된 곳이거나, 전체 프로그램 에서의 최상위 레벨(전역)에 선언된 곳이다.

형(Type)변환

동등 연산자(==)는 두 개의 피연산자가 동일한지 확인하며, Boolean값을 반환합니다. 일치 연산자(===)와는 다르게 다른 타입의 피연산자들끼리의 비교를 시도합니다.

• 두 피연산자가 모두 객체일때, 두 피연산자가 동일한 객체를 참조할때에만 true를 반환합니다.
• 하나의 피연산자가 null이고 다른 하나가 undefined일때, true를 반환합니다.
• 두 피연산자의 타입이 다를 경우, 비교하기 전에 동일한 타입으로 변환하도록 합니다:

1 == 1
1 == '1'
1 == true

이 세가지가 모두 참으로 나온다.

자동으로 형변환이 되서 정확히 비교된 값을 알기 힘들어진다. 그래서 동등 연산자 대신 일치 연산자(===)를 통해 비교해야한다.

일치 연산자는 항상 다른 유형의 피연산자를 서로 다른 것으로 간주한다.

Truthy & Falsy

Truthy(참 같은 값)인 값이란 불리언을 기대하는 문맥에서 true로 평가되는 값이다.

Truthy는 무한대에 가깝다. Falsy(거짓 같은 값)으로 정의된 값이 아니면 모두 참 같은 값으로 평가된다.

Falsy 리스트

- if (false)
- if (null)
- if (undefined)
- if (NaN)
- if (0)
- if (-0)
- if (0n)
- if ('')  // 띄어쓰기라는 공백문자가 있으면 truthy다. 완전히 비어있어야지 falsy이다.

자료형 확인하는 법

1. 'typeof 데이터'

   • null array는 typeof로 알아낼 수 없다.

2. 데이터.constructor

3. Object.prototype.toString.call(obj) === ‘[object type]’

변수 선언

최신 기술

1. const(상수)
   • 유효범위: 블록 레벨
   • 재할당: X
   • 중복 선언: X
   • 호이스팅(Hoisting): X
   • 전역 등록: X
2. let(변수)
   • 유효범위: 블록 레벨
   • 재할당: O
   • 중복 선언: X
   • 호이스팅(Hoisting): X
   • 전역 등록: X

구식 기술

1. var
   • 유효범위: 함수 레벨
   • 재할당: O
   • 중복 선언: O
   • 호이스팅(Hoisting): O
   • 전역 등록: O

• 유효범위(Scope)
  • 블록은 중괄호 안을 의미한다. 블록은 중괄호를 기준으로 둔다.

• 재할당
  • a=3 이라고 선언하고서 다시 a=6이라고 재할당을 한다.

• 중복 선언
  • 같은 이름에 종복적으로 선언 가능

• 호이스팅(Hoisting)
  • 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상

• 전역(Global) 선언시 전역 객체(window)의 속성으로 등록

무조건 const만 쓰고 재할당이 필요할때 let을 쓴다.