자바스크립트 기초 ep.1 - 원시 자료형

자바스크립트는 동적언어로 변수를 정의할 때 자료형을 정의할 필요가 없습니다. 총 7개의 자료형이 존재하며 원시 자료형 6개, 객체로 이루어져 있습니다. 이 중 원시 지료형을 살펴보겠습니다.

 

 

자바스크립트 원시 자료형

원시자료형(primitive)은 객체가 아닌 자료형(데이터 타입)으로, 별도의 메서드를 가지지 않습니다. 이러한 데이터 타입은 사람이 이해하기 쉽게 값을 표현할 수 있도록 제공하는 개념입니다.

 

• number, 숫자
• string, 문자열
• boolean, 논리값
• null, 널
• undefined, 정의되지 않은 값
• symbol, 심벌

 

 

number, 숫자

number는 숫자를 표현하기 위해 사용하는 타입입니다. 자바스크립트는 정수와 실수를 구분하지 않고 number 로 표현됩니다.

 

// 숫자는 모두 number 데이터 타입
console.log(1);
console.log(0.1);
console.log(-0.1);

 

* console.log(값) - 콘솔에 괄호 안의 내용을 프린트 하는 함수

 

결과

 

number 타입은 산술 연산을 제공합니다.

 

// 산술 연산을 제공
console.log(5 + 3);		// 덧셈
console.log(5 - 3);		// 뺄셈
console.log(5 * 3);		// 곱셈
console.log(5 / 3);		// 나눗셈
console.log(5 % 3);		// 나머지
console.log(5 ** 3);		// n 제곱

 

산술 연산 결과는 아래와 같습니다.

 

결과

 

 

string, 문자열

string 은 텍스트 데이터를 나타내는 문자열 타입입니다. 문자열은 문자들이 연속되어 있는 것으로, 자바스크립트에서는 문자와 문자열을 구분하지 않고 모두 string 으로 표현하며 쌍따옴표 또는 따옴표로 감싸져 있습니다. 

// 쌍따옴표, 따옴표 모두 같은 결과
console.log("hello, world");
console.log('hello, world');

 

쌍따옴표, 따옴표는 문자와 문자열을 구분하지 않기 때문에 같은 결과를 가집니다.

 

결과

 

이러한 쌍따옴표, 따옴표를 인용부호라고 하는데, 문자열에서 서로 다른 인용 부호를 제공할 경우 문자열 안에 인용부호를 포함시킬 수 있습니다.

 

// 큰 따옴표를 포함하고 싶은 경우, 작은 따옴표를 사용하면 됨
console.log('hello, "world"');

// 작은 따옴표를 포함하고 싶은 경우, 큰 따옴표를 사용하면 됨
console.log("hello, 'world'");

 

결과는 아래와 같습니다.

 

인용부호 결과

 

서로다른 인용부호를 섞어쓰면 문자열을 구성할 때 헷갈릴 경우가 생깁니다. 이 때 \ (역슬레시) 를 쌍따옴표나 따옴표 앞에 붙여주면 인용부호를 그대로 표현할 수 있습니다.

 

// 추가. 백슬래시(\)를 사용하여 인용 부호를 포함시킬 수 있음
console.log("hello, \"world\"");

 

 

boolean, 논리 값

참과 거짓을 나타내는 타입으로 true, false 로 표현됩니다. 거짓은 0, 참은 0이 아닌 모든 수를 나타냅니다. 

 

// 자바스크립트에서는 참과 거짓을 표현하기 위해 단어를 사용
console.log(true);
console.log(false);​

 

결과는 아래와 같습니다.

 

결과

 

내부적으로 true는 1, false 는 0 값을 가지기 때문에 산술 연산이 가능합니다.

 

// 논리 값은 내부적으로는 여전히 1과 0으로 처리 되기 때문에 산술연산이 가능
console.log(true + true);
console.log(true * false);

 

결과는 아래와 같습니다.

 

산술 연산 결과

 

비교 연산의 결과로 논리 값을 리턴해 줍니다.

 

// 논리 값의 사용 1. 비교 연산의 결과로 사용됨
console.log(10 > 3);    // 초과
console.log(10 < 3);    // 미만
console.log(10 >= 3);    // 이상
console.log(10 <= 3);    // 이하
console.log(10 === 3);    // 같음
console.log(10 !== 3);    // 같지 않음

 

결과는 아래와 같습니다.

 

비교 연산 결과

 

 

null, 널

null 은 값이 없음을 나타냅니다. 변수를 선언하고 빈 값을 할당한 상태를 나타낼 때 사용합니다.

 

// 변수에 빈 값을 할당
var name = null;
console.log(nmae);

 

변수는 값을 담기 위한 공간인데 다음 포스팅에서 상세히 설명하도록 하겠습니다. 결과는 아래와 같습니다.

 

널 값

 

 

undefined, 정의되지 않은 값

undefined 는 변수를 선언하고 값을 할당하지 않은 상태를 나타냅니다. null 은 빈 값을 할당한 것이고, undefined 는 아무것도 할당 하지 않은 상태를 나타냅니다.

 

// 변수를 선언했으나 값이 할당되지 않음
var name;
console.log(name);

 

jsbin 에서는 undefined 를 "JS Bin Output " 으로 표기되네요.

 

undefined 결과 값

 

 

symbol, 심벌

심벌은 고유하고 변경할 수 없는 값을 나타내며 ES6에서 추가된 자료형입니다. 심벌은 별도의 포스팅으로 분류하여 다루도록 하겠습니다.

 

 

마무리

자바스크립트 원시자료형은 다른 언어에 비해 비교적 간단합니다. 비록 간단하지만 데이터 타입을 직관적으로 찾아보기 힘든 단점도 있지만 적응하면 아주 편한 자료형 형태입니다. 자바스크립트를 공부하는데 도움이 되셨으면 좋겠네요.

 

오늘도 행복한 코딩생활 되시기 바라겠습니다. 감사합니다.