Javascript - 자료형 - 기본형

Hyun·2021년 11월 30일
0

자료형의 종류
자료형 설명
기본형 number(숫자) 따옴표 없이 표기한 숫자를 나타낸다.
string(문자열) 작은따옴표(')나 큰따옴표(")로 묶어 나타낸다.
boolean(논리형) 참(true)과 거짓(false)이란 두 가지 값만 가지고 있는 유형이다.
undefined 자료형을 지정하지 않았을 때의 유형이다.
(변수를 선언만 하고 값을 정의하지 않을때 발생)
null 값이 유효하지 않을 때의 유형이다.
복잡형 array(배열) 하나의 변수에 여러 값을 저장하는 유형이다.
object(객체) 함수와 속성이 함께 포함된 유형이다.

자료형을 확인 하는 방법

자바스크립트는 변수에 저장하는 값에 따라 자료형이 결정된다. 이때 저장된 값이 어떠한 자료형인지 알고싶을때는 typeof 연산자를 사용하면 알 수 있다.

typeof 1990;
"number"

typeof "hello";
"string"

숫자형
자바스크립트에서는 숫자를 정수와 실수로 나누어구분한다.

정수
정수는 소수점 없는 숫자를 가리킨다. 정수는 표현 방법에 따라 10진수, 8진수, 16진수의 3가지 유형으로 나누기도한다.

var biryYear = 2000;
undefined
typeof birthYear;
"number"

8진수와 16진수

더보기
실수
실수는 소수점이 있는 숫자를 가리킨다. typeof 연산자로 확인시 정수와 마찬가지로 "number"가 출력된다.

즉 자바스크립트는 정수와 실수 모두 number로 취급한다.

var average = 17.5
undefined
typeof average;
"number"

주의할 점
자바스크립트에서 실수를 계산할때 주의해야하는 점이 있다.

예를 들어 0.1 + 0.2 수식의 결괏값은 0.3이 아니라 0.30.30000000000000004이다.

자바스크립트에서는 0.1이나 0.2를 2진수로 변환해서 계산하는데 이 때 자릿수가 많은 소수로 변환되고 그 상태에서 0.1과 0.2를 더하기 때문에 이러한 결과가 생긴다.

해결방법으로는 toFixed(n) 매서드를 사용해 어림수를 만드는 것이다.

let sum = 0.1 + 0.2;
alert( sum.toFixed(2) ); // 0.30

이 때 toFixed는 항상 문자열로 반환된다는점을 유의해야한다. 따라서 문자형으로 바뀐 숫자를 다시 숫자형으로 변환하려면 단향 덧셈 연산자를 사용해야한다.

let sum = 0.1 + 0.2;
alert( +sum.toFixed(2) ); // 0.3

문자형

문자형(string)은 작은따옴표(')나 큰따옴표(")로 묶은 자료를 의미한다.

이 때 따옴표로 묶인 숫자도 문자형으로 인식된다. 또한 작은따옴표로 시작한 문자형 자료는 반드시 작은따옴표로 큰따옴표로 시작된 문자형 자료는 큰따옴표로 맺음을 해야한다.

var message = 'study';
undefined
typeof message;
"string"

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

const name ='Hyun';
alert(name.length); //4

특정 글자 접근하기

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

const name = 'TaeHyun';

// 첫 번째 글자
alert( name[0] ); // T
alert( name.charAt(0) ); // T

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

두 접근 방식의 차이는 반환할 글자가 없을 때 알 수 있다. 반환할 글자가 없을때 [ ] 는 undefined를, charAt은 빈 문자열을 반환한다.

const name = 'Hyun';

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

대·소문자 변경하기

매서드 toLowerCase()와 toUpperCase()로 대문자를 소문자로, 소문자를 대문자로 변환시켜준다.

alert( 'javascript'.toUpperCase() ); // JAVASCRIPT
alert( 'JAVASCRIPT'.toLowerCase() ); // javascript

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

alert('javascript'[1].toUpperCase()); // A

부분 문자열 찾기

문자열에서 부분 문자열을 찾는 방법으로 str.indexOf 매서드를 이용하는 것이다.

indexOf는 문자열에서 원하는 문자열을 검색하여 찾거나 배열에서 원하는 특정 배열값의 존재여부 등을 확인할 수 있다.

string.indexOf(searchvalue, position)

indexOf는 문자열(string)에서 특정 문자열(searchvalue)을 찾고, 검색된 문자열이 '첫번째'로 나타나는 위치 index를 리턴한다.
searchvalue는 필수 입력값, 찾을 문자열이다
position의 기본 옵션값은 0, string에서 searchvalue를 찾기 시작할 위치이다.
찾는 문자열이 없으면 -1을 리턴한다.
문자열을 찾을때 대소문자를 구분한다.

let string = 'Wideget with id';

console.log( string.indexOf('Wideget') ); // 0
// string은 'Wideget'으로 시작하기에 0

console.log( string.indexOf('wideget') ); // -1
// indexOf는 대·소문자를 구분하기에 원하는 문자열이 없어 -1을 리턴함

console.log( string.indexOf('id') ); // 1
// 'id'는 첫번째 위치에서 발견됨 (Wideget에서 id)

부분 문자열 "id" 는 위치 1에서 처음 등장하는데, 두 번째 인수에 2를 넘겨 "id"가 두번째로 등장하는 위치가 어디인지 찾아보자.

let string = "Wideget with id";

console.log( string.indexOf('id', 2) ) // 12

부분 문자열 추출하기

string.slice( start [, end] )

string = 'stringify';

console.log( string.slice(0, 5) ); // 'strin' 
//0번째부터 5번째 위치(5번째 위치의 글자는 포함하지 않는다.)

console.log( string.slice(0, 1) ); // 's'
0번째부터 1번째 위치까지(1번째 위치의 글자는 포함하지 않는다.)

두번째 인수가 생략된 경우에는 명시한 위치부터 문자열 끝까지 반환한다.

let string = 'stringify';

console.log( string.slice(2) ); // ringify
// 2번째부터 끝까지

start 와 end 는 음수가 될 수 도있으며, 이 경우 문자열 끝에서부터 시작한다.

let string = 'stringify';

console.log( string.slice(-4, -1) ); // gif
// 끝에서 4번째부터 시작해서 끝에서 1번째 위치까지

논리형
논리형(Boolean)은 참(True)과 거짓(False)이라는 값을 표현하는 자료형이다.

주로 조건을 확인할 때 많이 사용한다.

typeof true;
"boolean"

typeof false;
"boolean"

let age = 21;
undefined

age > 20
true

age < 20
false

0개의 댓글

관련 채용 정보