[K.O Javascript] 자료구조와 자료형 - 숫자/문자열

원시값의 메서드

원시값

• 원시형 값이다.
• 7가지의 형으로 나뉜다.
  • 문자(string)
    - 숫자(number)
    - bigint
  • 불린(boolean)
    - 심볼(symbol)
    - null
    - undefined

객체

• 프로퍼티에 다양한 종류의 값을 저장할 수 있다.
• {name : “wook”, age : 24}와 같이 대괄호를 사용해 만들 수 있다.

숫자형

숫자를 입력하는 다양한 방법

e

대개 10억(billion)을 나타낼 땐 ‘1bn’, 73억을 나타낼 땐 ‘7.3bn’을 사용한다.
자바스크립트에서는 숫자 옆에 e를 붙이고 0의 개수를 그 옆에 붙여주면 숫자를 줄일 수 있다.

let billion = 1e9;  // 10억, 1과 9개의 0

alert( 7.3e9 );  // 73억 (7,300,000,000)

즉 e는 e 왼쪽의 수에 e 오른쪽에 있는 수만큼 10의 거듭제곱을 곱하는 효과가 있다.

1e3 = 1 * 1000
1.23e6 = 1.23 * 1000000

작은 숫자를 표현할 때도 가능하다.

// 10을 세 번 거듭제곱한 수로 나눔
1e-3 = 1 / 1000 (=0.001)

// 10을 여섯 번 거듭제곱한 수로 나눔
1.23e-6 = 1.23 / 1000000 (=0.00000123)

16진수, 2진수, 8진수

• 16진수는 색을 나타내거나 문자를 인코딩할 때 다양한 곳에서 두루 쓰인다.
• 2진수와 8진수는 아주 드물게 쓰인다.

toString(base)

• num.toString(base)메서드는 base진법으로 num을 표현한 후, 이를 문자형으로 반환해 변환한다.

let num = 255;

alert( num.toString(16) );  // ff
alert( num.toString(2) );   // 11111111

• base는 2에서 36까지 쓸 수 있는데, 기본값은 10이다.

  • base=16 : 16진수 색, 문자, 인코딩 등 표현시 사용

  • base=2 : 비트 연산 디버깅에 주로 쓰인다.

  • base=36 : 사용할 수 있는 base중 최댓값

어림수 구하기(소수를 처리하는데 쓰이는 메서드)

(숫자를 다룰 때 가장 많이 사용되는 연산자 중 하나)

• Math.floor
  • 소수점 첫째 자리에서 내림 3.1은 3, -1.1은 -2가 된다.
• Math.ceil
  • 소수점 첫째 자리에서 올림 3.1은 4, -1.1은 1이 된다.
• Mate.round
  • 소수점 첫째 자리에서 반올림. 3.1은 3, 3.6은 4, -1.1은 -1이 된다.
• Math.trunc
  • 소수부를 무시한다. 3.1은 3, -1.1은 -1이 된다.
• toFixed(n)

  • let num = 12.34;
    alert( num.toFixed(1) ); // "12.3"  

소수점 n번째 수까지 어림수를 구한 후 이를 문자형으로 반환해주는 메서드인 toFixed(n)를 사용한다. toFixed는 Math.round와 유사하게 가장 가까운 값으로 올림 혹은 버림해준다.
toFixed를 사용할 때 주의할점은 반환값이 문자열이라 소수부의 길이가 인수보다 작으면 끝에 0이 추가된다.

예시

let num = 12.34;
alert( num.toFixed(5) ); // "12.34000", 소수부의 길이를 5로 만들기 위해 0이 추가되었습니다.

parseInt와 parseFloat

두 함수는 불가능할 때까지 문자열에서 숫자를 읽는다. 숫자를 읽는 도중 오류가 발생하면 이미 수집된 숫자를 반환한다. parseInt는 정수, parseFloat는 부동 소수점을 반환한다.

alert( parseInt('100px') ); // 100
alert( parseFloat('12.5em') ); // 12.5

alert( parseInt('12.3') ); // 12, 정수 부분만 반환됩니다.
alert( parseFloat('12.3.4') ); // 12.3, 두 번째 점에서 숫자 읽기를 멈춥니다.

parseInt와 parseFloat가 NaN(Not a Number)을 반환할 때도 있다. (읽을 수 있는 숫자가 없을 때)

alert( parseInt('a123') ); // NaN, a는 숫자가 아니므로 숫자를 읽는 게 중지됩니다.

기타 수학 함수

• Math.random()

  • 0과 1 사이의 난수 (무작위 수) 를 반환한다. (1은 제외)

• Math.max(a,b,c ...) / Math.min(a,b,c ...)

  • 인수 중 최대/최솟값을 반환한다.

alert( Math.max(3, 5, -10, 0, 1) ); // 5
alert( Math.min(1, 2) ); // 1

• Math.pow(n, power)
  • n을 power번 거듭제곱한 값을 반환한다.

alert( Math.pow(2, 10) ); // 2의 10제곱 = 1024

문자열

따옴표

작은따옴표와 큰따옴표는 기능상 차이가 없다. 하지만 백틱에는 특별한 기능이 있다.

표현식을 ${...}으로 감싸고 문자열 중간에 넣어주면 해당 표현식을 문자열 중간에 쉽게 삽입할 수 있다. 이런 방식을 템플릿 리터럴이라고 부른다.

예시

function sum(a, b) {
  return a + b;
}

alert(`1 + 2 = ${sum(1, 2)}.`); // 1 + 2 = 3.

• 백틱은 '템플릿 함수'에서도 사용된다.

  • func'string와 같이 첫번째 백틱 바로 앞에 함수 이름(func)을 써주면, 이 함수는 결과를 인수로 받아 자동으로 호출되는데 이 기능을 '태그드 템플릿' 이라 부른다.

    • 태그드 템플릿을 사용하면 사용자 지정 템플릿에 맞는 문자열을 쉽게 만든다.(자주 사용되진 않는다.)

특수기호

'줄 바꿈 문자' 특수기호 /n을 사용해 작은따옴표나 큰따옴표로 여러 줄 문자열을 만들 수 있다.

예시

let guestList = "손님:\n * John\n * Pete\n * Mary";

• 이외 다양한 '특수'문자들이 있다.
  • 모든 특수 문자는 '이스케이프 문자'라고 불리는 '역슬래시' \로 시작한다.

문자열의 길이

length프로퍼티에는 문자열의 길이가 저장된다.

alert( `My\n`.length ); // 3

• \n은 '특수 문자' 하나로 취급되기 때문에 My\n의 길이는 3이다.

length는 프로퍼티이므로 뒤에 괄호를 붙일 필요가 없다.
str.length => (O) / str.length() => (X)

특정 글자에 접근하기 [pos]

문자열 내 특정 위치인 pos에 있는 글자에 접근하려면 [pos] 같이 대괄호를 이용하거나
str.charAt(pos)라는 메서드를 호출한다.

예시

let str = `Hello`;

// 첫 번째 글자
alert( str[0] ); // H
alert( str.charAt(0) ); // H

// 마지막 글자
alert( str[str.length - 1] ); // o

• 근래에는 대괄호를 이용하는 방식을 선호한다.
• 위치에 글자가 없는경우 []는 undefined를, charAt는 빈 문자열을 반환한다.

예시

let str = `Hello`;

alert( str[1000] ); // undefined
alert( str.charAt(1000) ); // '' (빈 문자열)

문자열의 불변성

문자열은 수정할 수 없다. 문자열의 중간 글자 하나를 바꾸려고 하면 에러가 발생한다.

let str = 'Hi';

str[0] = 'h'; // Error: Cannot assign to read only property '0' of string 'Hi'
alert( str[0] ); // 동작하지 않습니다.

대/소문자 변경하기

• toUpperCase() : 소문자를 대문자로

• toLowerCase() : 대문자를 소문자로

  • 글자 하나의 케이스만 변경도 가능하다.

    • alert( 'Interface'[0].toLowerCase() ); // 'i'```

includes, startsWith, endsWith

비교적 근래에 나온 메서드 str.includes(substr,pos)는
str에 부분 문자열 substr이 있는지 따라 true나 false를 반환한다.

문자열의 위치 정보는 필요하지 않고 포함 여부만 알고 싶을 때 적합한 메서드.

• indexOf를 사용하면 부분 문자열의 위치를 얻을 수 있다.

• 부분 문자열의 여부만 알고 싶다면 includes/startsWith/endsWith를 사용.