유원의 일기

자료형

자료형과 원시 자료형

자료형이란 값의 성질에 따라 분류한 것이다.

자바스크립트는 자료형을 크게 원시 또는 객체 자료형으로 나누고, 작게는 8개의 세부 자료형으로 나눈다.

원시 자료형의 종류
원시 자료형을 원시 타입 또는 기본 타입이라고 한다. 원시 자료형은 한 번에 단 하나의 값만 가질 수 있는 타입이다.

1. 숫자형
   • 숫자형은 수의 종류를 구분하지 않는다.
   • 소수, 음수, 실수와 같은 수를 모두 포함하는 자료형이다.
   • 숫자형에는 정수, 실수 말고도 일반적이지 않은 값들이 있다.
     • Infinity, -Infinity : 최솟값이나 최댓값을 구할 때 주로 사용한다. Infinity는 0으로 어떤 수를 나눈 결과이기도 하다.
     • NaN : Not a Number이라는 뜻으로 불가능한 숫자형의 결과를 표현할 때 사용하는 값이다. 숫자와 문자열을 곱하면 정상적인 연산의 결과물이 나올 수 없으므로 NaN이라는 값을 얻는다.
     • let inf = Infinity;
     • let minf = -Infinity;
     • let nan = NaN;

/* 사칙 연산 */
console.log(1 + 2); // 3
console.log(1 * 2); // 2
console.log(1 - 2); // -1
console.log(1 / 2); // 0.5

/* 모듈러 연산 */
console.log(1 % 2); // 1
console.log(1 / 0); // Infinity

2. 문자형
   • 문자열을 포함하는 자료형이다.
   • 어떤 값이 문자형이라는 것을 알리기 위해 큰따옴표("") 또는 작은따옴표('')로 감싸야한다.
   • 백틱(``)을 이용해도 문자형을 만들 수 있다.

let name = '이정환';
let location = "역곡";
let introduce = `${name}은 ${location}에 살고 있습니다`;

console.log(introduce); // 이정환은 역곡에 살고 있습니다

3. 불리언, null, undefined
   • 불리언 형은 작업을 성공적으로 종료했는지, 어떤 값이 있는지 등을 확인할 때 유용하게 사용한다.
   • null은 "아무것도 없다"라는 뜻으로 변수에 아무 값도 할당할 필요가 없을 때 사용한다. 대다수 프로그래밍 언어에서 null은 하나의 값으로 단순하게 취급하지만, 자바스크립트에서는 독립적인 자료형으로 분류한다.
   • undefined는 '미정의 값'이라는 뜻이다. C나 자바 언어에서는 변수를 생성하고 아무런 값도 할당하지 않으면 null을 갖지만, 자바스크립트에서는 null 대신 undefined를 가지게 된다.

et emptyVar = null;

console.log(emptyVar); // null

let realEmptyVar;

console.log(realEmptyVar); // undefined

형 변환

어떤 값의 자료형을 다른 자료형으로 변환하는 것을 '형 변환'이라고 한다.

다른 자료형끼리 서로 연산한다는 가정해 보자. 숫자와 문자를 서로 더하는 연산이라면, 프로그래밍에서는 먼저 숫자를 문자로 변환하고 나서 문자와 문자를 이어 붙이는 연산을 수행한다. 숫자를 문자로 변환하는 것처럼 서로 같은 자료형으로 만드는 작업이 선행되어야 연산이 정상적으로 이루어지기 때문이다.

1. 묵시적 형 변환
   자바스크립트 엔진이 스스로 알아서 변환하는 작업이다. 2번째 예시에서 숫자와 문자의 덧셈에서 자바스크립트가 암묵적으로 숫자를 문자로 형 변환해 계산했기 때문에 문자형 간의 덧셈 연산은 두 문자를 이어 붙인 결과가 되었다.

let number = 10;
let string = 20;
const result = number + string;

console.log(result); // 30

let number = 10;
let string = "20";
const result = number + string;

console.log(result); // 1020

2. 명시적 형 변환
   묵시적 형 변환과 반대로 내장 함수 등을 이용해 프로그래머가 의도적으로 어떤 자료형을 다른 자료형으로 변경하는 작업이다.

• 숫자형으로 변환

let strA = "10";
let strB = "10개";

let numA = Number(strA);
let numB = Number(strB);

console.log(numA); // 10
console.log(numB); // NaN

함수 Number는 자바스크립트가 기본적으로 제공하는 내장 함수로, 제공된 문자열을 숫자로 변환해 반환한다. 변수 strB처럼 숫자가 아닌 문자를 포함한 문자열은 정상적으로 변환되지 않기 때문에 NaN을 반환한다.

숫자뿐만 아니라 문자도 함께 포함된 문자열을 숫자로 변환하고 싶다면, 함수 parseInt를 사용한다.

* radix parameter specifies the number system to use: 2 = binary, 8 = octal, 10 = decimal, 16 = hexadecimal

let strA = "10";
let strB = "10개";

let numA = parseInt(strA, 10);
let numB = parseInt(strB, 10);

console.log(numA); // 10
console.log(numB); // 10

함수 parseInt는 Number처럼 괄호 안에 있는 문자열을 숫자로 변환하는 자바스크립트의 내장 함수이다. Number와 달리 괄호 안에 두 개의 값을 콤마로 구분해 전달하는데, 첫 번째 값은 변환하려는 문자열이고, 두 번째 값은 진수이다.

Caution 함수 parseInt가 동작할 때는 문자열의 첫 문자부터 숫자로 변환하므로, 문자열이 숫자가 아닌 문자로 시작한다면 NaN을 반환한다.

let str = "파이팅 2023";
let num = parseInt(str, 10);

console.log(num); // NaN

• 문자열로 변환

let num = 2022;
let str = String(num);

console.log(str); // 2022

변수 num에 저장된 숫자 2022를 함수 String을 이용해 문자열로 변환한다. String 역시 자바스크립트 내장 함수로 인수로 제공된 값을 문자열로 변환해 반환한다.

let varA;
let varB = null;
let varC = true;

let strA = String(varA);
let strB = String(varB);
let strC = String(varC);

console.log(strA); // undefined
console.log(strB); // null
console.log(strC); // true

undefined 값은 문자열 undefined, null 값은 문자열 null, true 값은 문자열 true로 변환된다.

• 불리언으로 변환

let varA = "하이";
let varB = 0;
let varC = ""; // ""는 값이 없기 때문에 Falsy 값으로 간주되어 false를 반환

let boolA = Boolean(varA);
let boolB = Boolean(varB);
let boolC = Boolean(varC);

console.log(boolA); // true
console.log(boolB); // false
console.log(boolC); //

console.log("boolC:", boolC); // boolC: false

console.log(boolC);를 실행하니 콘솔에 아무것도 없는 것처럼 느껴져서 console.log("boolC:", boolC);를 한 줄 추가해서 다시 결과를 확인하니 false로 나오는 것을 확인했다.

📌 기억할 것

`a++`처럼 증감 연산자를 변수 `a` 뒤에 두면, 증감 연산의 결과는 연산자가 있는 다음 행부터 반영된다. 
피연산자인 변수 뒤에 증감 연산자를 두는 것을 '후위 연산'이라고 하며, 이 연산의 결과는 다음 행부터 적용된다는 특징이 있다.
만일 증감 연산을 작성한 행에서 반영하고 싶다면 증감 연산자를 변수 앞에 두면 된다.

웹 에디터로 자바스크립트 편집하기

자바스크립트는 어떻게 실행될까?

자바스크립트는 '자바스크립트 엔진'이라는 프로그램이 해석해 실행한다. 자바스크립트 엔진 기본적으로 웹 브라우저에 탑재되어 있다. Node.js와 같은 별도의 실행 환경을 설치하지 않는 한, 자바스크립트를 실행하려면 반드시 웹 브라우저가 있어야 한다.

크롬처럼 자바스크립트 엔진을 사용하면서도 여러 줄에 걸쳐 코드를 입력하고 편집할 수 있는 웹 에디터인 '코드샌드박스'를 활용하여 실습을 진행해 보자.

코드샌드박스 사용 방법

크롬처럼 자바스크립트 엔진을 사용하면서도 여러 줄에 걸쳐 코드를 입력하고 편집할 수 있는 웹 에디터이다. 코드샌드박스는 샌드박스 단위로 웹 언어를 입력하고 편집할 수 있는 웹 에디터이다.

크롬 브라우저에서 다음 주소를 입력한다.
https://codesandbox.io

사이트에 접속하면 Try for free 혹은 Start for free 버튼을 클릭한다.

자바스크립트를 선택한다.

Open template를 클릭한다.

자바스크립트를 실습할 수 있는 샌드박스 페이지이다.
샌드박스 페이지는 크게 3개의 창으로 구성되어 있다. 가장 왼쪽에는 파일 탐색, 검색 등 제어기능을 모아 놓은 공간이다. 가운데 창은 코드를 작성하는 에디터 공간이다. 오른쪽 창은 결과물을 브라우저나 콘솔에서 확인하는 공간이다.

실습 환경이 갖춰졌으니 변수와 상수에 대해 알아보자.

변수와 상수

변수

변수란 프로그램을 실행하는 과정에서 변경될 수 있는 값을 저장하는 저장소이다. 어떤 값을 이름으로 가리킬 때 사용하는 기능이기도 하다.

키워드 let : let age = 25;
코드를 입력하면 25라는 값은 이제부터 age라는 이름으로 부를 수 있다. 키워드 let을 붙여 없던 변수를 만들면 "변수를 선언한다"라고 하며, age = 25처럼 값을 변수에 지정하면 '할당한다'라고 표현한다.
변수를 선언함과 동시에 값을 할당할 수도 있는데, 이것은 "변수를 초기화한다"라고 한다. 자바스크립트에서 변수의 초기화는 선택 사항이다.

키워드 var : var age = 25;
var를 이용한 변수 선언은 let과 달리 이름을 중복해 선언해도 실행할 수 있다. 가급적 변수 선언 키워드로는 let을 사용한다.

상수

상수 역시 변수처럼 이름을 가진 공간이다. 그러나 변수와 달리 프로그램 실행 과정에서 값을 변경할 수 없다.

키워드 const : const age = 25;
선언과 동시에 할당하는 초기화 과정이 필요치 않은 변수와 달리, 상수는 선언과 동시에 값을 할당하는 과정이 꼭 필요하다.

명명 규칙

1. 기호 사용 규칙
   • 변수의 이름에는 한글을 포함하여 문자, 숫자 그리고 특수 기호의 일부(_, $)를 사용할 수 있다.
   • 특수 기호 _: 두 단어 이상으로 이루어진 합성어일 때 가독성을 높이기 위해 사용.
   • 특수 기호 $: jQuery를 사용할 때처럼 이 변수가 별도의 라이브러리 객체라는 것을 가리킬 때 사용.
2. 숫자 사용 규칙
   • 변수 이름으로 숫자를 사용할 수 있지만, 숫자로 시작해서는 안 된다.
   • let 2022year = "good"; (X)
   • let _2022year = "good"; (O)
3. 예약어 규칙
   • let, const 키워드처럼 예약어란 자바스크립트에서 이미 사용하기로 약속한 단어이다. 따라서 예약어는 변수명으로 사용할 수 없다.
   • https://www.w3schools.com/js/js_reserved.asp
4. 대•소문자 구별
   • 위 3가지 규칙과 달리 대•소문자를 구별하는 명명 규칙은 직접적인 오류가 발생하지는 않는다.
   • 하지만 이 규칙을 인지하지 못한 상황에서 아래와 같이 변수의 이름을 짓게 되면, 의도치 않은 오류가 발생할 수 있다.

let code = 1;
let Code = 2;

console.log(code); // 1
console.log(Code); // 2