1. 배열
객체로 키와 밸류값을 지정해 자료구조를 저장한다
하지만 객체는 순서를 고려하지 않은 요소이기 때문에 순서가 필요한 경우 배열을 통해 자료구조를 저장하는 것이 편리하다
(요소들 사이에 끼워넣는 등 객체로는 할 수 없는 일이 있다)
let arr = new Array();
let arr = []; //보통 이 방법으로 많이 사용한다
각 배열 요소는 0부터 시작하는 인덱스가 매겨져 있고 특정 순서의 요소를 얻기 위해서는 대괄호 안에 숫자를 넣어주면 된다
같은 방법으로 배열을 수정할 수 있다
fruit[2] = '배' ;
또한 새로운 요소를 추가할 수도 있다
length 함수를 통해 요소의 수가 몇개인지 알 수 있고
alert ( arr.length ) ; // 3
alert ( arr ) ; // 하나, 둘, 셋 -> 요소 전부다
@queue , stack
배열을 통해 만들 수 있는 대표적인 자료구조이다
%queue에서 사용하는 주요 연산
push - 맨 끝에 요소를 추가한다
shift - 제일 앞에 요소를 제거한 후 남은 요소를 앞으로 밀어낸다.
queue 는 먼저 집어놓은 요소가 가장 먼저 나온다
(first in first out, FIFO 라고 한다)
%stack에서 사용하는 주요 연산
push- 요소를 스택 끝에 집어넣는다
pop - 스택 끝에 요소를 추출한다
~stack 은 한쪽 끝에 요소를 더하거나 뺄 수 있는 자료구조이다~
stack 은 가장 나중에 집어넣은 요소가 먼저 나온다
(last in first out, LIFO 라고 한다)
JS에서 두 자료구조를 다 구연할 수 있고 배열의 처음이나 끝에 요소를 더하거나 빼는데 사용된다
이랄 데큐(deque) 라고 한다
1.~pop~ -> 배열 끝의 요소를 제거하고 그 요소를 반환한다.
2.~push~-> 배열 끝에 요소를 추가합니다
3.~shift~-> 배열 앞의 요소를 제거하고 제거한 요소를 반환한다
4.unshift -> 배열 앞에 요소를 추가한다
2.push와 4.unshift 는 여러 요소를 한 번에 더할 수 있다
@배열 동작 원리
배열은 특별한 종류의 객체이다. key가 숫자라는 점이 다르다
숫자라는 점을 통해 순서가 있는 컬렉션을 제어하는 메서드를 사용할 수 있지만 본질은 ~객체~라는 것이다
하지만 일반 객체처배열을 다루면 동작하지 않는다.
- 숫자가 아닌 값을 key 로 사용하는 경우
- arr[0] 과 arr[10000] 만 존재하고 그 사이에 아무 요소도 없는 경우
- arr[1000] , arr[999]와 같이 역순으로 채워지는 경우
이러한 경우 내장 메서드를 사용할 수 없어 배열의 이점이 사라지게 된다
%배열 앞에 무언가를 해주는 메서드는 배열 끝에 무언가를 해주는 메서드보다 느리다.
-> index 가 0 인 요소를 제거한 후 요소를 한칸씩 앞으로 이동시키는 과정과 length 프로퍼티 값을 줄이는 과정을 거쳐야 하기 때문
배열 끝의 경우 왼쪽으로 한칸씩 이동시키는 과정이 없어 더 빠르다
@length 프로퍼티
배열 내 요소의 개수가 아니라 ~가장 큰 index 값에 +1 한 값~
이러한 결과가 나올 수 있어 올바르게 사용해야 한다
length 값을 증가시키는 것은 아무것도 일어나지 않는다
하지만 값을 줄이면 그 만큼 배열이 짧아져 잘리게 되고
잘린 값은 다시 늘려도 돌아오지 않는다
@new Array()
[] 를 사용해 배열을 선언할 수 있어 자주 사용하지 않지만
new Array 함수에는 다른 특징이 있다
숫자형 인수를 넣어 new Array(a) 배열을 선언하면 길이는 a 이지만 인수는 없는 배열이 만들어진다
배열의 요소는 모두 undefined 가 된다
@다차원 배열
배열을 배열의 요소로 다차원 행렬을 저장할 수 있다
행 렬 의 값도 0부터 시작한다는 점을 주의해야 한다
@toString 메서드
이 메서드를 사용해 요소를 쉼표로 구분한 문자열로 반환할 수 있다
String 에서 s를 꼭 대문자로 써야한다
2. 반복문
@while 반복문
while(condition) {
}
(반복문의 본문 코드는 body 라고 한다)
condition 이 truthy 이면 반복문 본문의 코드가 실행됩니다
falsy가 될 때 까지 이터레이션(반복) 한다
@do...while
do{
//본문
} while ( condition) ;
while 반복문과 다르게 condition을 마지막으로 옮겨
실행된 이후 조건을 확인해 truthy 인 동안 본문이 계속 실행됩니다
@for 반복문
for (begin ; condition ; step) {
//본문
}
begin - 반복문에 진입할 때 한 번 실행됩니다
condition - 조건이 false 이면 반복문을 멈춥니다
body - condition 이 truthy 일 동안 계속 실행됩니다
step - body 가 실행된 이후에 실행됩니다
구성요소 생략하기
- 반복문이 시작될 때 아무것도 할 필요가 없으면 begin 생략
- step 또한 생략 가능
- for ( ; ; ) 와 같이 모든 요소를 생략할 수 있지만 무한 반복문이 만들어진다( 꼭 ; 를 통해 구분해야 한다)
%break
조건이 falsy 가 되기 전에 반복문을 빠져나오기 위한 지시자
breack 즉시 반복문이 종료되고 반복문 아래 첫 번째 줄로 이동합니다
반복문의 시작 지점이나 끝 지점에서 조건을 확인하는 것이 아니라 본문 가운데 혹은 여러 곳에서 조건을 확인해야 한다면
'무한 반복문 + break' 를 사용하면 좋다
%continue
break 처럼 전체 반복문을 멈추지 않고 실행중인 이터레이션을 멈추고 다음 이터레이션으로 강제로 실행한다.( 조건을 통과할 때)
3. 배열 메서드
@splice
delete obj.key 메서드는 키에 상응하는 값을 지우지만 요소만 지울 뿐 lehgth 는 그대로 유지된다
arr.splice (1,1) 은 index 1 부터 1개의 요소를 제거하고 왼쪽으로 당기게 된다
arr.splice (1,1, a,b) 는 index 1 부터 1개의 요소를 제거하고 그 자리에 다른 요소 두 개를 추가한다
splice (1, ~0~, a, b) 와 같이 0을 사용하면 요소를 제거하지 않고 추가할 수 있다
음수 인덱스도 사용할 수 있어 배열 끝에서부터 센 요소의 위치를 나태낸다
두 번째로 위치한 delete 숫자는 음수가 될 수 없고 뒤로 작용하지 않고 앞으로 작용한
또한 splice 는 삭제한 요소로 구성된 배열을 반환한다
@slice
arr.slice ([start], [end])
이 메서드는 start 인덱스부터 end를 제외한 end 앞의 인덱스 까지 요소를 복사해 새로운 배열을 반환한다
앞에 숫자 이상, 뒤에 숫자 미만으로 지정한다
@concat
arr.concat(arg1, arg2...)
기존 배열의 요소를 사용해 새로운 배열을 만들거나 기존 배열에 요소를 추가할 때 사용한다
arr에 속한 모든 요소와 arg1, arg2 등에 속한 모든 요소를 한데 모은 새로운 배열이 반환된다.
argN 이 배열일 경우 배열 전체가 복사된다
@forEach
arr.forEach 는 배열 요소 각각에대해 실행할 수 있게 해줍니다
배열 탐색
arr.indexOf (item, from) 은 인덱스 from 에서 시작해 item 을 찾습니다
요소를 ~발견하면 해당 요소의 인덱스를 반환하고 못했으면 -1을 반환합니다~
arr.lastIndexOf(item, from)은 검색을 끝에서 부터 시작해 동일한 기능을합니다
arr.includes(item,from)은 from 에서 시작해 item 을 검색하는데 발견하면 true 를 반환합니다
~위의 메서드 들은 완전 항등 연산자 === 를 사용해 검색해 자료형을 맞춰야 합니다~
@find, findIndex
객체로 이루어진 배열에서 특정 조건을 만족하는 객체를 찾는 함수는
arr.find(fn) 이다
arr.find( function(item, index, array)
true 가 반환되면 반복을 멈추고 해당 요소를 반환한다
없을 경우 undefined 를 반환한다
item - 함수를 호출할 요소
index - 요소의 인덱스
array - 배열 자기 자신
find 함수 안에 하나의 인자만 있는 경우를 가장 많이 활용한다
arr.findIndex 는 find 와 동일하나 해당 요소의 index 를 반환하고 맞는 요소가 없을 경우 -1을 반환한다
@filter
find 는 true인 요소 단 하나를 찾는다
조건을 충족하는 요소가 여러개라면 filter 를 사용하면 된다
find 와 문법이 유사하지만 조건에 맞는 요소 전체를 담은 배열을 반환한다
배열을 변형하는 메서드
@map
배열 요소 전체를 대상으로 함수를 호출하고, 호출 결과를 배열로 반환해준다
@sort(fn)
배열의 요소를 정렬한다, 배열 자체를 변경하게 된다]
모든 요소는 문자형으로 변환되어 재졍렬되고 사전편집 순으로 큰작은 수 부터 정렬된다(사전편집상 15 < 2)
새로운 정렬 기준을 만들기 위해 ()에 새로운 함수를 넣어준다
~결국 새로운 함수 대로 배열을 재정렬 해주는 것이다~
@reverse
arr.reverse 는 요소를 역순으로 정렬해준다
@split, join
arr.split(delim) 은 delim 을 기준으로 문자열을 쪼개준다
구분자( delimiter)
arr.split(delim, index) 를 하면 배열의길이를 제한해 index 만큼의 요소만 받고 나머지는 무시할 수 있다
(delim)에 빈 문자열로 지정하면 글자 단위로 분리할 수 있다
arr.join(glue) 는 반대로 접착제처럼 사용해 배열 요소를 합쳐 하나의 문자열을 만들어준다
Array.isArray(value)
는 typeof 를 통해 객체와 배열을 구분할 수 없기 때문에 사용하고
value 가 배열이면 true를, 아니라면 false를 반환한다
