JS BASIC | 자료형 (string, number, boolean, null, undefined)

chaen·2023년 6월 28일

JS Grammar

목록 보기

2/28

❓ 자료형이란?

값(value): 프로그램이 조작할 수 있는 데이터
이러한 값의 여러 가지 종류를 자료형(data type)이라고 한다.

sort	type	details
원시 타입	string	문자열
(불변값)	number	정수, 실수의 숫자 타입
	boolean	논리적 참(true), 거짓(false)
	null	빈 값임을 의도적으로 명시할 때 사용하는 값
	undefined	값을 할당하지 않은 변수의 기본 값
	symbol	객체의 프로퍼티 키를 고유하게 설정함으로써 충돌을 방지하기 위해 사용
객체 타입		객체 함수, 배열 등

참고 Mozilla

1. 문자열 (string)

시작과 끝이 작은 따옴표('), 큰따폼표("), 백틱(`)으로 감싸진 값

1-1. 문자열 안의 따옴표

console.log('He said "I'm tall"'); 일 경우 "가 겹치면서 문장에서 오류가 난다.
이 경우 세가지 방법으로 해결할 수 있다.

따옴표와 쌍따옴표를 사용 console.log("I'm tall");

내부의 따옴표 앞에 백슬래시 console.log('He said\"I\'m tall\"');

백틱으로 문자열 표시 console.log (`He said "I'm tall"`);

1-2. 이스케이핑(escaping): `백슬래시(\)`

원래 따옴표는 문자열의 시작과 끝으로 인식되는 문자이지만, 바로 없에 역슬래시(\)가 있다면 글자 그대로의 따옴표로 인식되게 된다.

이렇게 문자가 다르게 해석되게 하는 행위를 이스케이핑(escaping)이라고 부르며, 백슬래시(\) (언어에 따라 원화(₩))를 이스케이프 문자라고 부른다.

문자열 내부에서 \를 사용하고 싶다면 \를 이스케이핑할 수도 있다.

1-3. 줄 바꿈

뒤에\n을 추가한다. 여러 줄의 줄바꿈이 필요할 때는 그만큼 \n 문자를 중간에 넣어 주면 된다.

console.log('여러 줄에 걸쳐\n표시됩니다.\n\n줄을 더 늘려볼까요.'); =
        
"여러 줄에 걸쳐
 표시됩니다.
        
 줄을 더 늘려볼까요."

1-4. 변환

toString()

다른 타입을 문자열로 변환할 때는 toString을 사용한다.
예를 들어, 2진수로 변환하고 싶을 때 toString(2)로 바꿀 수 있다.

replace, replaceAll

문자열 내부의 글자를 다른 글자로 바꾸어 줄 수 있다.

let text = "Hello World";
let rtn = text.replace("l", "L"); //HeLlo World;
let rtna = text.replaceAll("l", "L"); //HeLLo WorLd;

toLowerCase(), toUpperCase()

let text = "Hello World";
let rtn = toLowerCase(); //hello world;
let rtn = toUpperCase(); //HELLO WORLD;

1-5. 병합

더하기 연산자 (+)

string 은 연산자 + 를 사용해 양쪽의 문자열을 하나로 합칠 수 있다. 단, 문자열 사이의 띄어쓰기를 조심해야 한다.

‘사과와’ + ‘포도’ = “사과와포도” (x)
‘사과와 ’ + ‘포도’ = “사과와 포도” (o)

concat()

배열이나 값을 합쳐서 반환하는 함수

let text1 = "Hi";
let text2 = "Hello";
text1.concat(text2); //HiHello

join()

배열을 하나의 문자열로 합쳐서 반환하는 함수

let text = ["H","e","l","l","o"];
text.join(","); //H,e,l,l,o

1-6. 배열로 분리

split()

괄호 안의 글자로 문자열을 분리하여 배열로 반환

let text = "a_b_c";
text.split("_"); //["a","b","c"]

Array.from()

문자들을 분리하여 배열로 반환

let text = "abc";
Array.from(text); // ["a","b","c"]

Array.from()
Array.from(arrayLike, mapFunction);
✔ arrayLike → 유사 배열 또는 반복 가능한 객체 (length 속성을 가진 객체)
✔ mapFunction → 각 요소를 변환하는 함수 (선택 사항)

✔ 아래의 경우 특정 길이의 배열 생성하는데, 값이 undefined라서 이 상태로는 활용이 어려움.
Array.from({ length: 5 })
// [undefined, undefined, undefined, undefined, undefined]
✔ 따라서 아래와 같이 활용함
const arr = Array.from({ length: 5 }, (_, i) => i);
// [0, 1, 2, 3, 4]

스프레드 연산자

let text = "abc";
let rtn = [...text]; // ["a","b","c"]

2. 템플릿 리터럴(template literal)

백틱(`)으로 감싸진 문자열은 특별히 템플릿 리터럴(template literal) 이라고 한다.

2-1. 멀티라인 문자열 (multi-line string)**

코드를 한 줄에 모두 표현하기 힘들 경우 일반 문자열은 백슬래시를 사용한다. (그렇지 않을 경우 오류가 남)

var a = 'You can start here \
and continue here \
and then finish it up here.';

하지만, 템플릿 리터럴에서는 특별한 기호없이 줄바꿈이 가능하다.

var a = `You can start here
and continue here
and then finish it up here.`;

2-2. 표현식 삽입 (expression interpolation)**

string 은 문자열 연산자 + 를 사용해 문자열을 하나로 합칠 수 있다.

템플릿 리터럴의 경우 간단하게 ${ }으로 표현식을 감싸서 합칠 수 있다. 표현식의 자료형은 문자열이 아니더라도 상관 없다.

console.log(`1 + 2 = ${1 + 2}`); // "1 + 2 = 3"

3. 숫자

3-1. 지수표기법 (exponential notation)

아주 긴 숫자나 소수점 아래 자릿수가 많을 때 자바스크립트에서는 지수 표기법을 사용한다.

10진법
e 뒤에 나오는 숫자만큼 10의 거듭제곱을 적용

5e4;  // 5 * 10000 = 50000
5e+4; // 5 * 10000 = 50000
5e-3; // 5 * (1/1000) = 0.005

2, 8, 16진법
2진법: 0b(숫자 영, 소문자 b) + 숫자
8진법: 0o(숫자 영, 소문자 o) + 숫자 (o는 없어도 나오는 것 같음)
16진법: 0x(숫자 영, 소문자 x) + 숫자
단, 숫자는 0~9까지이므로 10~15는 각각 알파벳 a, b, c, d, e, f로 표현함
```
0b111; = 7; // 2²x1+2¹x1+1 = 7
0o15 = 13; // 8¹+5= 13
0x1a1 = 28; // 16²x1+16x10+1=417
```

3-2. parseInt. parseFloat (문자열을 숫자로 바꾸기)

parseInt('5'); = 5
typeof parseInt('5'); = "number"
        
//parseInt는 문자열을 정수로만 바꾼다.
parseInt('3.14'); = 3
        
//문자열을 실수로 바꾸고 싶으면 parseFloat을 사용한다.
parseFloat('3.14'); = 3.14
        
//Number와 parseInt의 차이점
parseInt('3월') = 3
Number('3월') = NaN

3-3. NaN

NaN은 Not a Number(숫자가 아님)의 약어이다. 하지만 이름과는 다르게 값이 숫자이다.

3*'3월'; = NaN
      
typeof NaN; = "number"

3-4. 무한(Infinity)

무한이라는 개념을 프로그래밍에서 사용할 때 유용하다.
사칙연산을 하더라도 결괏값이 Infinity로 나오지만,예외로 무한 값끼리 계산하거나 0을 0으로 나누면 다른 값이 나온다.

2 / 0; = Infinity
-2 / 0; = -Infinity
typeof Infinity; = "number"
Infinity - 100; = Infinity

Infinity - Infinity; = NaN
0 / 0; = NaN

3-5. BigInt

Number 최대 값(Number.MAX_SAFE_INTEGER)보다 큰 정수를 표현할 때 사용한다.
이는 오버플로우 없이 정수 연산을 올바르게 수행 가능하게 한다.

const bigInt = 364361041240540;
const bigInt = BigInt(28425423);
const bigInt = BigInt("524638468");
const bigInt = BigInt("0x1ffffffffff");

Math 객체의 메서드와 함께 사용이 불가능하며, Number 값과 연산이 불가능하다.
BigInt의 타입은 BigInt이며, Number와 절대적으로 같지 않다.

1234567890123456789 * 123; // 151851850485185200000 ❌
1234567890123456789n * 123n; // 151851850485185185047n ✅
3381344646868 ** 2n

typeof 123n; //'bigint'

42n === BigInt(42); // true

0n == 0; // true
0n === 0; // false

4. Boolean

true = 1과 false = 0을 나타내는 불 값
비교 연산자의 값으로 사용 가능하다. ex) 5 >= 5; = true

4-1. 특별한 값들의 비교 (숫자비교 제외)

true > false; = true // true -> 1, false -> 0
'b' > 'a'; = true // charCodeAt을 통해 문자번호순위 비교 가능
'3' < 5; = true // 자료형이 모두 숫자로 형 변환된 후 비교
'abc' < 5; = false // NaN = false = 0 < 5

4-2. NaN끼리 비교

NaN끼리 비교(==.<=,>= 등)하면 false 값을 가진다.
이는 숫자, 문자열, 불 값을 통틀어 false가 나오는 유일한 값이다.
NaN == NaN; = false
다만, != 연산에서는 true를 출력한다.

4-3. boolean의 형변환

boolean의 형변환을 할 경우 '', 0, -0, 0n, false, NaN, undefined, null를 제외하고 모두 true가 된다.

// !!은 불 값으로 형 변환을 간단하게 할 때 쓰일 수 있음
!!'a'; = true
!!''; = false
        
// string -> boolean
let x = ' ';
console.log(x); //' '
console.log(Boolean(x)); //false
console.log(typeof (x)); //string
console.log(typeof (Boolean(x))); //boolean
        
// number -> boolean
let y = NaN;
console.log(y); //NaN;
console.log(Boolean(y)); //false;
console.log(typeof (y)); //number;
console.log(typeof (Boolean(y))); //boolean

4-4. truthy & falsy 한 값

자바스크립트는 불리언 자료형의 참(true)이나 거짓(false)이 아닌 값도 상황에 따라 참, 거짓으로 평가하는 특징이 있다.
falsy 한 값으로는 위의 형변환에서 언급한 값 '', 0, -0, 0n, false, NaN, undefined, null 가 속하고, 나머지는 true가 된다.

truthy 또는 falsy한 값을 이용하면 조건식을 간결하게 만들 수 있다.

let varA;

if (varA) {
  console.log("값이 있음"); // 값이 있음을 출력
} else {
  console.log("값이 없음");
}

위처럼 변수만을 넣어 조건문을 만들거나, falsy 한 값을 넣어 else 문을 출력할 수 있다.

5. 빈 값 (undefined와 null)

5-1. undefined

보통 반환할 결괏값이 없을 때 나온다. 빈값의 역할과 기본값의 역할을 한다.

console.log 명령어는 콘솔에 무언가를 출력하지만, 그 자체로는 결괏값이 없기 때문에 undefined가 반환된다.
undefined는 불 값으로 형 변환하면 false의 값을 갖는다. 단, undefined와 false는 같지 않다.

typeof undefined; = "undefined"
!!undefined; = false
  
undefined == false; = false
undefined == 0; = false
undefined == ''; = false

5-2. null

동일하게 빈 값을 의미하지만 undefined와 같지는 않다.
개발자는 변수가 이전에 참조하던 값을 더 이상 참조하지 않겠다는 의미로 변수에 null을 할당한다.
null도 불 값으로 형 변환하면 false가 되며, 또한 false와는 다르다.

undefined == null; = true
undefined === null; = false
    
null == false; = false
null == 0; = false
null == ''; = false

5-3. 변수에 넣은 값을 비울 때

//1
change = undefined;
//2
change = null;

두 경우 모두 변수의 값을 빈 값으로 바꾼다는 점에서 동일하지만, 다른 의미를 부여할 수 있다.
undefined의 경우 기본값으로도 활용되기 때문에, 많은 개발자가 null을 대입해 값을 의도적으로 지웠다는 의미를 부여하고 이는 원활한 의사소통에 도움이 된다.

참고1 참고2

chaen

이전 포스트

JS BASIC | 오류 발생 원인, 인터프리터와 컴파일, 순서도, 코드 작성 규칙

다음 포스트

JS BASIC | 자료형 (string, number, boolean, null, undefined)

JS Grammar

❓ 자료형이란?

1. 문자열 (string)

1-1. 문자열 안의 따옴표

1-2. 이스케이핑(escaping): `백슬래시(\)`

1-3. 줄 바꿈

1-4. 변환

toString()

replace, replaceAll

toLowerCase(), toUpperCase()

1-5. 병합

더하기 연산자 (+)

concat()

join()

1-6. 배열로 분리

split()

Array.from()

스프레드 연산자

2. 템플릿 리터럴(template literal)

2-1. 멀티라인 문자열 (multi-line string)**

2-2. 표현식 삽입 (expression interpolation)**

3. 숫자

3-1. 지수표기법 (exponential notation)

3-2. parseInt. parseFloat (문자열을 숫자로 바꾸기)

3-3. NaN

3-4. 무한(Infinity)

3-5. BigInt

4. Boolean

4-1. 특별한 값들의 비교 (숫자비교 제외)

4-2. NaN끼리 비교

4-3. boolean의 형변환

4-4. truthy & falsy 한 값

5. 빈 값 (undefined와 null)

5-1. undefined

5-2. null

5-3. 변수에 넣은 값을 비울 때

JS BASIC | 오류 발생 원인, 인터프리터와 컴파일, 순서도, 코드 작성 규칙

JS BASIC | 연산자

0개의 댓글

JS BASIC | 자료형 (string, number, boolean, null, undefined)

JS Grammar

❓ 자료형이란?

1. 문자열 (string)

1-1. 문자열 안의 따옴표

1-2. 이스케이핑(escaping): 백슬래시(\)

1-3. 줄 바꿈

1-4. 변환

toString()

replace, replaceAll

toLowerCase(), toUpperCase()

1-5. 병합

더하기 연산자 (+)

concat()

join()

1-6. 배열로 분리

split()

Array.from()

스프레드 연산자

2. 템플릿 리터럴(template literal)

2-1. 멀티라인 문자열 (multi-line string)**

2-2. 표현식 삽입 (expression interpolation)**

3. 숫자

3-1. 지수표기법 (exponential notation)

3-2. parseInt. parseFloat (문자열을 숫자로 바꾸기)

3-3. NaN

3-4. 무한(Infinity)

3-5. BigInt

4. Boolean

4-1. 특별한 값들의 비교 (숫자비교 제외)

4-2. NaN끼리 비교

4-3. boolean의 형변환

4-4. truthy & falsy 한 값

5. 빈 값 (undefined와 null)

5-1. undefined

5-2. null

5-3. 변수에 넣은 값을 비울 때

JS BASIC | 오류 발생 원인, 인터프리터와 컴파일, 순서도, 코드 작성 규칙

JS BASIC | 연산자

0개의 댓글

1-2. 이스케이핑(escaping): `백슬래시(\)`