자바스크립트를 다루게 되면, 수많은 종류의 데이터들을 마주치게 됩니다. 오늘 강의에서는 자바스크립트의 여러 가지 데이터 타입에 대해 학습하고, 관련된 자바스크립트 메커니즘에 대해 정리했습니다.
데이터 타입(Data Type)은 프로그래밍 언어에서 사용할 수 있는 데이터(숫자, 문자열, 불리언 등)의 종류를 말합니다.
데이터 타입은 한정된 메모리 공간을 효율적으로 사용하기 위해서, 그리고 2진수 데이터로 메모리에 저장된 데이터를 다양한 형태로 사용하기 위해 존재한다고 볼 수 있습니다.
간략한 데이터 타입에 대해서는 지난 정리글을 통해 다루어보았고, 오늘은 자바스크립트에서 특히 더 중요한 데이터 타입들을 모아 심도 있게 요약해 보았습니다.
문자(String)
문자 타입 개요
문자열(String) 타입은 텍스트 데이터를 나타내는데 사용합니다.
문자열은 0개 이상의 16bit 유니코드 문자(UTF-16) 들의 집합으로 거의 대부분의 문자를 표현할 수 있습니다.
문자열은 작은 따옴표(‘’) 또는 큰 따옴표(“”) 안에 텍스트를 넣어 작성하여야 합니다.
따옴표로 감싸지 않을 경우, 자바스크립트의 엔진이 문자열 데이터를 키워드, 식별자, 토큰 등과 구분할 수 없기 때문입니다.
indexof() 메서드
indexOf() 메서드는 호출한 String 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환합니다.
만약 일치하는 값이 없으면 -1을 반환합니다. 아래와 같은 방식으로 작성합니다.
문자열.indexof(<찾으려는 문자열>, [ <검색을 시작할 위치>])찾으려는 문자열은 당연하게도 필수 인자입니다. 즉, indexof 메서드의 첫 번째 인자가 우리가 찾고자 하는 문자/문자열이 됩니다.
두 번째 인자로 넣을 수 있는데 검색을 시작할 위치는 선택 항목입니다. 인덱스 값을 넣으면 검색을 시작할 위치를 지정합니다.
만약 검색 조건에 부합하는 문자열을 찾더라도 내가 지정한 위치보다 앞이라면 결과에 반영되지 않습니다.
const index = 'Hello, world!'.indexof('world');
console.log(index) // 7length 속성
모든 문자열 데이터들은 length 속성으로 접근할 수 있습니다. length는 해당 문자열의 길이를 나타내줍니다.
문자 하나 당 하나의 길이를 차지하며, 공백도 길이를 차지하는 것으로 간주합니다.
const str1 = 'abc'
console.log(str1.length) // 3
const str2 = 'ab c'
console.log(str2.length) // 4slice() 메서드
slice() 메소드는 문자열의 일부를 추출하면서 새로운 문자열을 반환합니다. 아래와 같은 문법으로 사용합니다.
str.slice(beginIndex[, endIndex])beginIndex는 추출 시작점인 0부터 시작하는 인덱스입니다. 만약 음수라면, beginIndex는 strLength(문자열 길이) + beginIndex로 취급됩니다.
만약 beginIndex가 strLength 보다 크거나 같은 경우, slice()는 빈 문자열을 반환합니다.
endIndex는 선택 사항으로, 0부터 시작하는 추출 종료점 인덱스로 그 직전까지 추출됩니다. 인덱스 위치의 문자는 추출에 포함되지 않습니다.
만약 endIndex가 생략된다면, silce()는 문자열 마지막까지 추출합니다. 만약 음수라면, endIndex는 strLength(문자열 길이) + endIndex 로 취급됩니다.
const str1 = 'abcdefg'
console.log(str1.slice(0,3)) // 'abc'replace() 메서드
replace() 메서드는 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환합니다.
그 패턴은 문자열이나 정규식(RegExp)이 될 수 있으며, 교체 문자열은 문자열이나 모든 매치에 대해서 호출된 함수일 수 있습니다.
str.replace(substr, newSubstr)substr은 교체될 문자열이며, newSubstr은 substr을 대신하여 삽입될 문자열입니다.
const str1 = 'abcdefg'
console.log(str1.replace('defg','')) // 'abc'숫자와 수학
C나 Java의 경우, 정수와 실수를 구분하여 int, long, float, double 등과 같은 다양한 숫자 타입이 존재합니다. 하지만 자바스크립트는 독특하게 하나의 숫자 타입만 존재하죠.
ECMAScript 표준에 따르면, 숫자 타입의 값은 배정밀도 64비트 부동소수점 형(double-precision 64-bit floating-point format : -(253 -1) 와 253 -1 사이의 숫자값)을 따릅니다.
즉, 모든 수를 실수를 처리하며 정수만을 표현하기 위한 특별한 데이터 타입(integer type)은 없습니다.
자바스크립트의 숫자 타입은 정수만을 위한 타입이 없고 모든 수를 실수를 처리하므로, 정수로 표시된다 해도 사실은 실수입니다.
따라서 정수로 표시되는 수 끼리 나누더라도 실수가 나올 수 있습니다.
parseInt() 메서드
parseInt() 함수는 문자열 인자를 파싱하여 특정 진수(수의 진법 체계에서 기준이 되는 값)의 정수를 반환합니다.
parseInt(string, [radix])다음과 같이 두 가지 인자를 활용해 메서드를 사용합니다.
string은 숫자로 반환할 문자열이며, radix는 반환 결과를 몇 진수로 할 것인가를 결정합니다.
radix는 생략가능하며, 2~36 사이의 정수를 범위로 갖습니다.
Math
Math는 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체입니다.
Math는 Number 자료형만 지원하며 BigInt와는 사용할 수 없습니다.
다른 전역 객체와 달리 Math는 생성자가 아닙니다. Math의 모든 속성과 메서드는 정적입니다.
Math.random()
Math.random() 함수는 0 이상 1 미만의 구간에서 근사적으로 균일한 무작위 실수를 반환하며, 이 값은 사용자가 원하는 범위로 변형할 수 있습니다.
난수 생성 알고리즘에 사용되는 초기값은 구현체가 선택하며, 사용자가 선택하거나 초기화할 수 없습니다.
Math.ceil()
Math.ceil() 함수는 주어진 숫자보다 크거나 같은 숫자 중 가장 작은 숫자를 정수 형태로 반환합니다. 즉, 올림입니다.
Math.floor()
Math.floor() 함수는 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환합니다. 즉, 내림입니다.
Math.round()
Math.round() 함수는 입력값을 반올림한 수와 가장 가까운 정수 값을 반환합니다.
Number 메서드
자주 사용되는 숫자형 관련 메서드들은 다음과 같습니다.
배열
배열 데이터 타입 역시 자바스크립트 내에 프로토타입이 마련되어 있습니다. 따라서 다양한 유형의 메서드 활용이 가능합니다.
원본 배열을 변경하는 메소드
원본 배열을 참조만 하는 메소드
원본 배열을 반복적으로 참조하는 메소드
객체
모든 자바스크립트 객체는 Object 객체와 Object.prototype 객체의 모든 프로퍼티를 상속받습니다.
prototype 프로퍼티를 이용하면 현재 존재하는 프로토타입에 새로운 프로퍼티나 메소드를 손쉽게 추가할 수 있습니다.
뿐만 아니라, 모든 자바스크립트 객체는 Object 객체와 Object.prototype 객체의 모든 메소드를 상속받습니다.
상속
상속(inheritance)이란 새로운 클래스에서 기존 클래스의 모든 프로퍼티와 메소드를 사용할 수 있는 것을 의미합니다.
상속을 통해 새로운 프로그램의 요구에 맞게 기존 클래스를 수정하여 재사용할 수 있습니다.
또한, 클래스 간의 종속 관계를 형성함으로써 객체의 관계를 조직화할 수 있는 장점이 있습니다.
따라서 이러한 상속은 추상화, 캡슐화와 더불어 객체 지향 프로그래밍을 구성하는 중요한 특징 중 하나가 됩니다.
하지만 C#이나 C++과 같은 클래스 기반(class-based)의 객체 지향 언어와는 달리 자바스크립트는 프로토타입 기반(prototype-based)의 객체 지향 언어입니다.
프로토타입 기반이기 때문에 상속의 개념이 클래스 기반의 객체 지향 언어와는 약간 다릅니다.
자바스크립트에서는 현재 존재하고 있는 객체를 프로토타입으로 사용하여, 해당 객체를 복제하여 재사용하는 것을 상속이라고 합니다.
프로토타입(prototype)
자바스크립트의 모든 객체는 프로토타입(prototype)이라는 객체를 가지고 있습니다.
모든 객체는 그들의 프로토타입으로부터 프로퍼티와 메소드를 상속받습니다.
이처럼 자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며, 이때 상속되는 정보를 제공하는 객체를 프로토타입(prototype)이라고 합니다.
구조 분해 할당
구조 분해 할당은 구조화된 배열과 같은 이터러블 또는 객체를 비구조화해서 하나 이상의 변수에 개별적으로 할당하는 것을 말합니다. 디스트럭쳐링 할당이라고도 표현합니다.
const object = { a: 1, b: 2 };
const { a, b } = object;
console.log(a); // 1
console.log(b); // 2주어지지 않은 값에 대해 구조 분해 할당을 하면 undefined를 반환합니다.
이를 방지하고 싶다면, 구조 분해 할당을 하는 과정에서 기본값을 입력할 수 있습니다.
배열에서 다음과 같이 구조 분해 할당을 할 수 있습니다.
const array = [1];
const [one, two = 2] = array;
console.log(one); // 1
console.log(two); // 2구조 분해 할당을 활용하면, 복잡한 구조의 객체 데이터 안에서 특정 데이터에 접근하는 것이 좀 더 수월해질 수 있습니다.
const deepObject = {
state: {
information: {
name: 'john',
languages: ['korean', 'english', 'chinese']
}
},
value: 5
};
const {
state: {
information: { name, languages }
},
value
} = deepObject;
const extracted = {
name,
languages,
value
};
console.log(extracted); // {name: 'john', languages: Array(3), value: 5}전개 연산자
전개 연산자는 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만드는 것입니다.
새로운 값을 만드는게 아니기 때문에 변수에 할당할 수 없습니다. 또한 이터러블 형태의 데이터에만 한정해서 사용할 수 있습니다.
const guy = {
name: 'john'
};
const happyGuy = {
...guy,
attribute: 'happy'
};
console.log(Guy);
console.log(happyGuy);위 코드 블럭에서 happyGuy 객체는 name('john')과 attribute('happy')를 모두 가지게 될 것입니다.
이러한 원리를 응용해 Rest 문법도 사용할 수 있습니다.
Rest 문법은 전개 연산자와는 다르게, 해당되는 값을 제외한 나머지를 반환합니다.
Rest는 객체, 배열, 그리고 함수의 인자로 사용이 가능합니다.
// 배열
const numbers = [0, 1, 2, 3, 4, 5, 6];
const [one, ...rest] = numbers;
console.log(one); // 0
console.log(rest); // [1,2,3,4,5,6]
// 객체
const purpleHappyDog = {
name: 'dog',
attribute: 'happy',
color: 'purple'
};
const { color, ...happyDog } = purpleHappyDog;
console.log(color); // 'purple'
console.log(happyDog); // {name: 'dog', attribute: 'happy'}
const { attribute, ...dog } = happyDog;
console.log(attribute); // 'happy'
console.log(dog); // {name: 'dog'}
// 함수 parameter
function sum(...rest) {
return rest;
}
const result = sum(1, 2, 3, 4, 5, 6);
console.log(result); // [1,2,3,4,5,6]