📗숫자 자료형

자바스크립트에서 가장 흔하게 다루는 종류의 값은 바로 숫자입니다. 프로그래밍 언어에서의 숫자는 우리가 일반적으로 알고 있는 숫자와 그 성격이 사실상 동일합니다. 우리는 숫자를 이용하여 덧셈 / 뺄셈 / 곱셈 / 나눗셈의 사칙연산을 할 수 있습니다.

1. 사칙연산

숫자는 숫자이기 때문에 당연히 사칙연산이 가능합니다.

더하기를 해볼까요?

console.log(30 + 10);

빼기(-), 곱하기(*), 나누기(/)도 한번 해보세요. 아마 여러분이 예상한 결과가 나올것입니다.

조금 다른 코드를 한번 볼까요?

const a = 30;
const b = 10;

console.log(a + b);

어떤 결과가 출력될까요?

a 라는 단어(변수)가 가리키는 값은 30이고, b 라는 단어(변수)가 가리키는 값은 10이네요. 🤓

아래 코드는 어떤 결과가 출력될까요?

const a = 10;
const b = 10;

console.log(a + 5 * b); // ?

코드를 실행해보기 전에 코드의 실행 결과에 대해 논리적으로 곰곰히 생각해보고 어떤 결과가 예상되는지 생각해보세요. 시간을 충분히 들이고 생각이 마무리 된 후에 코드를 실행해보세요. 생각하는 시간을 귀찮아 하고, 성급하게 코드를 실행해서 확인하고 넘어가는 습관이 들면 호환, 마마와 같은 매우 심각한 결과가 초래될 수 있습니다. 늘 말씀드리지만, 개발자는 타이핑을 빠르게 하는 사람이 아니라, 논리적인 문제해결에 특화된 사람입니다.

그렇다면 아래 코드는 어떨까요?

const a = 10;
const b = a;

console.log(a + 5 * b); // ?

a 는 10을 가리키고, b 는 a 를 가리킵니다.

음, 코드의 순서를 조금 변경해보겠습니다. 아래와 같이 실행해볼까요?

const b = a;
const a = 10;

console.log(a + 5 * b); // ?

컴퓨터가 우리에게 이런 답변을 해주었네요. 🧐

ReferenceError: Cannot access 'a' before initialization

초기화 하기 전에 a 에게 접근할 수 없다.

라는 의미겠죠?

a 를 초기화 한다는건 무슨 뜻일까요? 바로 a 라는 변수를 만드는 코드를 의미합니다.

지금 컴퓨터의 답변은 "a 변수를 만들기 전에는 쓸 수 없어"라고 우리에게 말해주는 것이죠.

첫 번째 줄의 코드에서 a 라는 코드를 사용하는데, 문제는 a 라는 변수가 두 번째 줄에서 만들어지고 있으니까요.

이런 상황이 발생하는 이유는, 자바스크립트의 특징 때문인데요.

자바스크립트 코드는 기본적으로 위에서 아래로 실행되는 흐름을 갖습니다. 그렇기에 아랫줄에서 만들어지는 a 라는 변수에 대해 첫 번째 줄에서는 인식할 수가 없는 것이죠. 🙅🏻‍♂️

이 코드는 결론적으로 순서를 바꿔서는 안되었던 것입니다. 🤯

2. 값의 변경 Part 1

조금 또 다른 코드를 한번 실험해볼까요? 다양한 실험을 많이 해보는 것이 중요합니다.

const age = 40;
age = 41;

console.log(age);

아래와 같은 컴퓨터의 답변을 받으셨나요?

TypeError: Assignment to constant variable.

무슨 뜻일까요? 한번 검색을 해보죠.

구글에서, Assignment to constant variable site:stackoverflow.com 이라고 검색하고 첫 번째 글을 한번 읽어볼까요?

우리가 이전에 작성한 코드를 보면,

const age = 40;
age = 41;

console.log(age);

두번째 줄에서 age = 41; 이라는 구문이 있습니다.

이 구문에서는 변수를 만들어주는 const 가 사용되지 않았으므로 age 라는 변수가 우리 프로그램에 이미 존재한다는 전제하에 실행됩니다.

만약 age 가 존재하지 않는다면 컴퓨터가 이해할 수 없는 구문이 되겠죠. 왜냐하면 age 가 무슨 뜻인지 모르니까요.

다행히 첫번째 줄에서 우리는 age 라는 변수를 만들어 놓았네요. 😎 그렇기에 두번째 줄에서 사용되는 age 는 첫번째 줄에서 만들어진 age 를 가리킵니다.

그렇다면, 두번째 줄은 정확히 어떤 일을 하고 있는 코드일까요?

= 기호의 의미는 잘 기억하시죠? 우측의 값을 좌측의 변수에 할당/대입하는 연산자입니다.

그래서 두번째 줄의 코드는 기존에 만들어진 age 라는 단어의 의미를 41로 할당하는 코드입니다. age 라는 변수는 이미 값이 할당된 적이 있기 때문에, 이런 경우 우리는 값을 재할당 한다고 표현합니다.

정리하자면, 두번째 줄은 age 라는 변수의 값을 41로 재할당 하고 있습니다.

하지만 문제가 있습니다. 위에서 검색한 Stackoverflow에서 읽어보셨겠지만, const 를 이용해 만든 변수는 제약사항이 있습니다. 바로 "재할당이 불가능하다"는 점입니다. 그래서 컴퓨터는 우리에게 const 로 선언한 변수에게 다시 할당 할 수 없다고 이야기하고 있었던 것입니다.

이 문제는 아래와 같이 수정하면 간단히 해결됩니다. 🤓

let age = 40;
age = 41;

console.log(age);

변수를 만드는 명령어는 const 외에 let 이라는 명령어가 있습니다.

const 는 재할당이 불가능하고, let 은 재할당이 가능합니다. 위에서 우리는 age 라는 변수에 재할당해야 했기 때문에, let 으로 변경하여 문제를 해결할 수 있습니다.

const 와 let 의 차이는 단지 "재할당" 가능여부 뿐입니다. const와 let의 사용 💁🏻‍♂️

기본적으로 const 를 사용하여 변수를 만들고, 재할당이 필요한 경우가 발생하면 let 으로 변경하는 습관을 들이세요.

3. 값의 변경 Part 2

이번에는 조금 다른 방식으로 값을 변경해볼까요? 아래와 같이 코드를 한번 작성하여 실행해보세요.

let age = 40;
age = age + 1;

console.log(age);

앞서 살펴봤던 코드와 두번째 줄이 또 달라졌네요. 위의 코드는 어떤 의미일까요?

할당 연산자는 할당 연산자를 기준으로 우측에 있는 구문을 먼저 연산하고, 그 결과를 좌측에 있는 변수에 할당합니다.

그러므로, 위 구문은 age + 1 을 먼저 연산하고 그 결과를 age 라는 변수에 할당하는 구문이죠. 🥸

age 변수의 값은 첫번째 줄에서 40이었으므로 age + 1 의 결과는 40 + 1, 즉 41입니다.

그러므로 아래와 같은 결과를 확인할 수 있죠. 💁🏻‍♂️

방금 우리가 작성한 구문은 몇 가지 다양한 방법으로 축약해서 작성할 수 있습니다.

let age = 40;

// 방법 1 (더하기 할당)
age += 1;
console.log(age);

// 방법 2 (증가 연산자)
age++;
console.log(age);

// 방법 3 (증가 연산자)
++age;
console.log(age);

다음 내용들을 조사해보세요. 1. 증가 연산자의 위치가 앞에 오는 것과 뒤에 오는 것은 어떤 차이점이 있을까요? 2. 빼기, 곱하기, 나누기도 위의 방법 1, 2, 3과 같은 연산이 모두 가능할까요?

4. 나머지 구하기

조금 낯설어 보일 수 있지만 재미있는 연산자를 한번 살펴보겠습니다.

const a = 10 % 2;
console.log(a);

% 연산자(나머지 연산자)는 연산자 위치를 기준으로 좌측에 있는 숫자를 우측에 있는 숫자로 나누고 남는 나머지 값을 구할때 사용합니다.

위와 같은 상황에서는 10을 2으로 나누고 남는 나머지 값을 구하는 것이죠. 즉, a 는 0이 되는 것입니다.

2로 나누었을때 0이 남는 숫자들을 무엇이라고 하나요? 짝수라고 하죠. 나머지 연산자는 짝수와 홀수를 판별할때 가장 대표적으로 많이 사용되곤 합니다.

5. 숫자가 아닌 숫자

숫자가 아닌 숫자라니.. 말이 이상하죠? 하지만 진짜입니다.

우리가 코드 작업을 하다보면, 우리가 만든 변수에 의도치 않은 값이 담길 때가 있습니다. 프로그램의 버그일 수도 있고, 사용자의 입력 실수일 수도 있습니다.

어찌됐든, 우리는 어떤 변수가 숫자라고 가정하고 우리의 코드를 작성했는데 숫자가 담기지 않은 경우에 문제가 생길 수 있습니다. "숫자가 아닌 숫자"는 그런 경우에 나타나곤 합니다. 코드를 한번 볼까요?

const wrongInput = undefined; // 사용자의 잘못된 입력값이라고 가정
const result = wrongInput + 10;

console.log(result);

아래와 같이 조금 색다른 값이 표기되었나요?

NaN이라는 값이 바로 "숫자가 아닌 숫자"입니다. Not A Number의 약자이죠.

NaN의 의미는 숫자가 아니라는 뜻이지만, 분명 숫자 자료형에 속하는 숫자 값입니다. 숫자 연산에 예상치 못한 오류가 발생했을때 주로 나타나게 되며, 우리가 의도적으로 일부러 사용하는 경우는 거의 없습니다.