자바스크립트의 자료구조와 자료형1

자료형

1. 원시값의 메서드

자바스크립트는 원시값(문자열,숫자 등)을 마치 객체처럼 다룰 수 있게 해준다.

원시값에도 객체에서처럼 메서드를 호출할 수 있다.

원시값 !== 객채

 

원시값 

- 원시형 값이다

- 원시형의 종류는 string, number, bigint*, boolean, symbol*, null, undefined

* bright : Number 원시 값이 안정적으로 나타낼 수 있는 최대치인 2^53 - 1보다 큰 정수를 표현할 수 있는 내장 객체

*symbol : 심볼은 Symbol 함수를 호출함으로써 생성할 수 있다. 이때 생성되는 심볼은 변경이 불가능한 원시 값이다. Symbol 함수를 호출할 때 인자로 전달하는 문자열 값은 생성될 심볼에 대한 일종의 설명문

 

객체

- 프로퍼티에 다양한 종류의 값을 저장할 수 있다.

- 대괄호{} 를 사용해 만들 수 있음

 

2. 숫자형

자바스크립트는 숫자를 나타내는 두 가지 자료형을 지원함

 

1. 일반적인 숫자는 '배정밀도 부동소수점 숫자(double precision floating point number)'로 알려진 64비트 형식 IEEE-754에 저장됨

2. 임의의 길이를 가진 정수는 Bigint 숫자로 나타냄 일반적인 숫자는 253이상이거나 -253이하일 수 없다는 제약 때문에 BigInt라는 새로운 자료형이 만들어짐

 

- 0의 개수를 'e' 뒤에 추가함 123e6은 0이 6개인 숫자, 123000000을 나타냄

- 'e' 다음에 음수가 오면, 음수의 절댓값 만큼 10을 거듭제곱한 숫자로 주어진 숫자를 나눔 123e-6은 0.000123을 나타냄

- 자바스크립트는 특별한 변환 없이 16진수(0x), 8진수(0o), 2진수(0b)를 바로 사용할 수 있게 지원함

- Math.floor, Math.ceil, Math.trunc, Math.round, num.toFixed(precision)를 사용하면 어림수를 구할 수 있음

- 수학적인 연산이 필요하면 Math 객체를 보면됨

 

 

3. 문자열

텍스트 형식의 데이터는 길이에 상관없이 문자열 형태로 저장됨

자바스크립트에서 문자열은 페이지 인코딩 방식과 상관없이 항상 UTF-16형식을 따름

 

따옴표는 세가지 종류 ''(작은따옴표), ""(큰따옴표), ``(백틱)

 

특수 문자 목록 : 

\n	줄 바꿈
\r	캐리지 리턴(carriage return). Windows에선 캐리지 리턴과 줄 바꿈 특수 문자를 조합(\r\n)해 줄을 바꿉니다. 캐리지 리턴을 단독으론 사용하는 경우는 없습니다.
\', \"	따옴표
\\	역슬래시
\t	탭
\b, \f, \v	각각 백스페이스(Backspace), 폼 피드(Form Feed), 세로 탭(Vertical Tab)을 나타냅니다. 호환성 유지를 위해 남아있는 기호로 요즘엔 사용하지 않습니다.

 

 

4. 배열

키를 사용해 식별할 수 있는 값을 담은 컬렉션은 객체라는 자료구조를 이용해 저장함

순서가 있는 컬렉션을 저장할 때 배열을 사용함

 

1. 배열선언 

let arr = new Array();
let arr = [];
//두가지 방법으로 빈 배열을 만들 수 있음

배열 요소의 자료형엔 제약이 없음

let arr = [ '사과', { name: '감말랭이' }, true, function() { alert('안녕하세요.'); } ];

// 인덱스가 1인 요소(객체)의 name 프로퍼티를 출력
alert( arr[1].name ); // 감말랭이

// 인덱스가 3인 요소(함수)를 실행
arr[3](); // 안녕하세요.

 

2. pop, push, shift, unshift

- push : 맨 끝에 요소를 추가함

- shift : 제일 앞 요소를 꺼내 제거한 후 남아있는 요소들을 앞으로 밀어줌

- push : 요소를 스택 끝에 집어넣음

- pop : 스택 끝 요소를 추출

 

 

3. 배열의 내부 동작 원리

배열은 특별한 종류의 객체임 배열 요소를 대괄호를 사용해 접근하는 방식은 객체 문법에서 온거임

숫자형 키를 사용함으로써 배열은 객체 기본 기능 이외에도 순서가 있는 컬렉션을 제어하게 해주는 특별한 메서드를 제공함

그렇지만 본질은 객체

배열은 7가지 원시자료형에 해당하지 않고 객체형에 속함 그래서 객체처럼 동작함

 

배열은 참조를 통해 복사됨

let fruits = ["바나나"]

let arr = fruits; // 참조를 복사함(두 변수가 같은 객체를 참조)

alert( arr === fruits ); // true

arr.push("배"); // 참조를 이용해 배열을 수정

alert( fruits ); // 바나나,배 - 요소가 두 개가 됨

- 배열은 순서가 있는 자료를 저장하는 용도로 만들어짐

- 임의의 키를 사용해야 한다면 배열보단 객체가 적합할 수 도 있음

 

 

4. 성능

push와 pop은 빠르지만 shift와 unshift는 느림

 

shift 메서드를 호출한 것과 동일한 효과를 보려면 인덱스가 0인 요소를 제거하는 것만으론 충분하지 않음 제거 대상이 아닌 나머지 요소들의 인덱스를 수정해 줘야 함

shift 연산은 아래 3가지 동작을 모두 수행해야 이루어짐

 

1) 인덱스가 0인 요소를 제거

2) 모든 요소를 왼쪽으로 이동시킴 이때 인덱스 1은 0, 2는 1로 변함

3) length 프로퍼티 값을 갱신함

 

그런데 배열에 요소가 많으면 요소가 이동하는 데 걸리는 시간이 길고 메모리 관련 연산도 많아짐

 

push나 pop은 요소 이동을 수반하지않음

pop 메서드로 요소를 끝에서 제거하려면 마지막 요소를 제거하고 length 프로퍼티 값만 줄여주면 됨

pop은 요소를 옮기지 않음으로 각 요소는 인덱스를 그대로 유지함 배열끝에 더해주는 메서드도 마찬가지

 

 

4.1 반복문

for문은 배열을 순회할 때 쓰는 가장 오래된 방법 인덱스사용

for

let arr = ["사과", "오렌지", "배"];

for (let i = 0; i < arr.length; i++) {
  alert( arr[i] );
}

for..of

for..of를 사용하면 현재 요소의 인덱스는 얻을 수 없고 값만 얻을 수 있음

let fruits = ["사과", "오렌지", "자두"];

// 배열 요소를 대상으로 반복 작업을 수행함
for (let fruit of fruits) {
  alert( fruit );
}
//사과
//오렌지
//자두

for..in

let arr = ["사과", "오렌지", "배"];

for (let key in arr) {
  alert( arr[key] ); // 사과, 오렌지, 배
}

for..in은 배열에 사용하면 문제가 발생함

for..in 반복문은 모든 프로퍼티를 대상으로 순회함 키가 숫자가 아닌 프로퍼티도 순회 대상에 포함됨

브라우저나 기타 호스트 환경에서 쓰이는 객체 중, 배열과 유사한 형태를 보이는 ‘유사 배열(array-like)’ 객체가 있음

유사 배열 객체엔 배열처럼 length 프로퍼티도 있고 요소마다 인덱스도 붙어 있음

그런데 여기에 더하여 유사 배열 객체엔 배열과는 달리 키가 숫자형이 아닌 프로퍼티와 메서드가 있을 수 있음

유사 배열 객체와 for..in을 함께 사용하면 이 모든 것을 대상으로 순회가 이뤄집니다. 따라서 ‘필요 없는’ 프로퍼티들이 문제를 일으킬 가능성이 생김

for..in 반복문은 배열이 아니라 객체와 함께 사용할 때 최적화되어 있어서 배열에 사용하면 객체에 사용하는 것 대비 10~100배 정도 느림

 

 

5. 다차원 배열

배열안에 배열을 사용할 수 있음

이런 배열을 다차원 배열 이라고함

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

alert( matrix[1][1] ); // 5, 중심에 있는 요소

 

출처 : https://ko.javascript.info/data-types