[자바스크립트 코딩 - 정보] 자료형(객체)에 대해서 상세하게 알아보자

자바스크립트 : 자료형에 대해서 알아보자

자바스크립트에도 다른 언어들과 마찬가지로 수 많은 자료형들이 있습니다.

Date객체처럼 자바스크립트의 내장 객체 중 다양한 연산들을 유용하게 사용하기 위해 Math라는 객체가 있습니다.

이번 노트에서는 Math객체의 다양한 메소드에 대해 살펴봅시다.

그리고 문자열과 배열의 차이와 변수에 대해서도 알아봅시다.

 

Math 객체

절댓값(AbsoluteNumber)

학창 시절 수학 시간에서 배운 '절댓값(absolute value)' 기억하시나요?

간단하게 설명하자면, 어떤 값의 '양수(positive number)' 버전이라고 할 수 있습니다.

음수 -5의 절댓값은 양수 5고, 그냥 양수 5의 절댓값은 그대로 양수 5인 거죠.

Math.abs(x)를 하면 x의 절댓값이 리턴됩니다.

console.log(Math.abs(-10));
console.log(Math.abs(10));

10
10

최댓값(Maximum)

Math.max 함수에 파라미터로 여러 수를 넘겨주면, 그중 가장 큰 값이 리턴됩니다.

console.log(Math.max(2, -1, 4, 5, 0));

5

최솟값(Minimum)

Math.min 함수에 파라미터로 여러 수를 넘겨주면, 그중 가장 작은 값이 리턴됩니다.

console.log(Math.min(2, -1, 4, 5, 0));

-1

거듭제곱(Exponentiation)

'제곱'은 뭔지 기억하시나요? '2의 3승'(혹은 '2의 세제곱')을 하면, 2를 세 번 곱한다는 뜻입니다.

'2 곱하기 2 곱하기 2'를 하면 8이죠? 마찬가지로 '5의 2승'을 하면, '5 곱하기 5'를 해서 25입니다.

 

자바스크립트에서 Math.pow(x, y)를 하면 x의 y승의 결괏값이 리턴됩니다.

console.log(Math.pow(2, 3));
console.log(Math.pow(5, 2));

8
25

제곱근(Square Root)

'제곱근(square root)'은 '제곱'의 반대라고 생각할 수 있습니다.

5의 제곱이 25이기 때문에, 25의 제곱근은 5입니다. 7의 제곱이 49이기 때문에, 49의 제곱근은 7입니다.

 

Math.sqrt(x)를 하면 x의 제곱근이 리턴됩니다.

console.log(Math.sqrt(25));
console.log(Math.sqrt(49));

57

반올림(Round)

Math.round(x)를 하면 x의 반올림된 값이 리턴됩니다.

소수점 부분이 0.5 이상이면 가장 가까운 정숫값으로 올라가고, 소수점 부분이 0.5 미만이면 가장 가까운 정숫값으로 내려갑니다.

console.log(Math.round(2.3));
console.log(Math.round(2.4));
console.log(Math.round(2.49));
console.log(Math.round(2.5));
console.log(Math.round(2.6));

2
2
2
3
3

버림과 올림(Floor and Ceil)

Math.floor(x)을 하면 x의 버림 값이, Math.ceil(x)을 하면 x의 올림 값이 리턴됩니다. 이 경우, 소수 부분이 얼마 인지와는 상관이 없습니다.

console.log(Math.floor(2.4));
console.log(Math.floor(2.49));
console.log(Math.floor(2.8));
console.log('-');
console.log(Math.ceil(2.4));
console.log(Math.ceil(2.49));
console.log(Math.ceil(2.8));

2
2
2
-
3
3
3

난수 (Random)

Math.random을 하면 0 이상 1 미만의 값이 랜덤으로 리턴됩니다.

console.log(Math.random());
console.log(Math.random());
console.log(Math.random());
console.log(Math.random());

0.21458369059793236
0.6622040803059857
0.785172717569619
0.9056556038884926

그리고...

이뿐만 아니라 '삼각 함수 계산'이나 '로그'같은 더 깊은 수학 계산도 가능합니다. 더 깊게 알아보고 싶다면 아래 링크를 참고해보세요!

Math

 

문자열과 배열 사이

문자열도 생각해보면 '문자' + '열'이기 때문에 배열과 비슷한 부분들이 많습니다.

비슷한 점

실제로 지난 시간에 배열과 문자열 모두 length프로퍼티를 가지고 있고, 대괄호 표기법으로 각 요소에 접근할 수 있다거나, 꽤 많은 메소드들이 배열과 문자열 모두 동일하게 사용되는 것도 확인할 수 있었는데요.

 

심지어 지난 시간에 다루진 못했지만 배열을 다룰 때 유용한 for..of문을 문자열에 활용할 수도 있습니다.

let myString = 'Best';

for (let str of myString) {
    console.log(str);
}

C
o
d
e
i
t

다른 점

하지만 비슷하다고 해서 완전히 같다고는 할 수 없습니다.

let myString = 'Best';
let myArray = ['B', 'e', 's', 't'];

console.log(typeof myString);
console.log(typeof myArray);

일단 typeof 연산자를 사용해서 두 값의 자료형을 비교해보면,

string
object

string과 object, 확실히 서로 다른 자료형인 걸 확인할 수 있고,

let myString = 'Best';
let myArray = ['B', 'e', 's', 't'];

console.log(myString === myArray);
console.log(myString == myArray);

두 값을 서로 비교해 보아도

false
false

일치 비교뿐만 아니라, 느슨하게 비교하는 동등비교에서도 false가 출력되는걸 확인할 수 있습니다.

mutable vs.immutable

가장 중요한 차이는 배열은 'mutable(바뀔 수 있는)' 자료형인 반면 문자열은 'immutable(바뀔 수 없는)' 자료형이라는 것입니다.

 

배열은 요소에 접근해서 할당연산자를 통해 요소를 수정할 수 있었죠?

 

문자열은 한 번 할당된 값을 수정할 수 없습니다.

다르게 표현해서, 변수에 할당된 문자열을 바꾸고 싶다면, 일부를 바꾸는 게 아니라 새로운 문자열을 지정해주어야 한다는 것이죠.

// 배열은 mutable
let myArray = ['C', 'o', 'd', 'e', 'i', 't'];
myArray[0] = 'B';
console.log(myArray);

// 문자열은 immutable
let myString = 'Best';
myString[0] = 'B';
console.log(myString);

(6) ["B", "o", "d", "e", "i", "t"]
Best

다시 한번 되돌아보면, 문자열이 가진 메소드들은 모두 retrun 값들을 활용하고, 본래의 문자열 값을 수정하지 않습니다.

같은 의미에서 문자열에 splice 같은 메소드들은 사용할 수 없겠죠?

문자열과 배열은 서로 비슷하지만 엄연히 다른 차이가 있다는 점 꼭 기억해 주세요!

 

 

Related References

코딩이 처음이라면, 코드잇

JAVA 프로그래밍

요약 : sparta coding club, 스파르타 코딩, 코드잇, 노마드 코더, 프로그래밍, 직장인 코딩, 내일 배움 카드 코딩, 밀크티 코딩, 초등 코딩, 아이스크림 코딩, 코딩 소프트웨어, 자바 스크립트 국비 지원, 자바 스크립트 교육