[Javascript] Array 객체

리터럴 객체로 배열을 만드는 법 

var numbers =  ["one", "two", "three", "four"]

 

 

Array 객체로 배열 만들기

var myArray = new Array(); // Array 객체의 인스턴스를 만듭니다.
var numbers = new Array("one","two","three","four")

 

.length 속성은 Array 객체의 속성!

 

concat() 함수

기존의 배열에 또 다른 배열이나 값을 합쳐서 새로운 배열을 만드는 함수. 예를 들어 다음과 같은 nums 배열과 chars 배열이 있을 때 다음과 같이 concat() 함수를 사용해 두 개의 배열을 연결해서 새로운 배열을 만들 수 있다.

 

 

concat() 함수를 사용할 때 nums 배열과 chars 배열 순서를 바꾸면 연결 순서가 달라집니다.

 

> chars.concat(nums)
< (7) ["a","b","c","d","1","2","3"]

 

concat() 함수는 새로운 배열을 만들기 때문에 기존의 nums나 chars 배열에는 영향을 주지 않는다.

> var nums = ["1","2","3"];
> var chars = ["a","b","c","d"];
> nums.concat(chars)
< ["1","2","3","a","b","c","d"]

 

 

join() 함수

join() 함수는 배열 요소를 연결하는 함수입니다. 배열 요소를 연결해서 나열할 때 각 요소 사이에 넣을 구분 기호가 필요한데, join() 함수는 이 기호를 직접 지정할 수 있습니다. 만약 함수에서 구분 기호를 지정하지 않으면 쉼표(,) 로 요소를 구분합니다.

> nums.join()
< "1,2,3"
> nums.join("-") // 구분 기호("-")를 사용해 연결
< "1-2-3"

 

 

push() 함수와 unshift() 함수

함수를 사용하면 기존 배열에 새로운 요소를 추가할수도 있습니다. 이때 배열의 맨 끝에 요소를 추가하려면 push() 함수를 사용하고, 배열의 맨 앞에 추가하려면 unshift() 함수를 사용합니다. 추가하는 요소는 하나일 수도 있고 두 개 이상일 수도 있습니다.

> var nums = ["1","2","3"]
> nums.push("4","5")
< 5 // 새 요소가 추가된 후의 배열 요소의 개수가 반환됨.

앞에서 다룬 함수와 달리 push() 함수는 이렇게 기존의 배열에 변화를 줌.

 

pop() 함수와 shift() 함수

Array 객체에서 맨 뒤에 있는 요소를 추출할 때는 pop() 함수를, 맨 앞에 있는 요소를 추출할 때는 shift() 함수를 사용. 배열에서 요소를 추출하면 해당 요소가 배열에서 빠지면서 배열이 수정되기 때문에 배열에서 요소를 삭제할 때는 추출 함수를 사용합니다.

 

> var study = ["html","css","javascript"]
< study.pop()
>"javascript"
< study
> (2) ["html","css"]

 

 

splice() 함수

배열의 중간 부분에 요소를 추가하거나 삭제하고 싶을 때,  한꺼번에 2개 이상의 요소를 추가하거나 삭제하고 싶을 때 사용하는 함수. splice() 함수는 괄호 안에 들어 있는 인수에 따라 일정 구간의 요소를 삭제하고 새로운 요소를 추가하는 함수입니다. splice() 함수를 실행하면 삭제한 구간의 요소들로 이루어진 새로운 배열이 결괏값으로 표시됩니다.

 

 

인수가 1개일 경우

 

괄호 안의 인수는 그 배열의 인덱스 값을 가리킵니다. 이 경우 splice() 함수는 인수가 가리키는 인덱스의 요소부터 배열의 끝 요소까지 삭제합니다.

 

> var numbers = [0,1,2,3,4,5]
> numbers.splice(2) // 인덱스2(세 번쨰 요소) 이후 끝까지 삭제
(4) [2,3,4,5} //삭제된 요소로 이루어진 배열
> numbers
< (2) [0,1] // 수정된 원래 배열

 

 

인수가 두개일 경우

splice() 함수에 인수가 2개일 경우 첫 번째 인수는 인덱스 값이고 두 번째 인수는 삭제할 개수입니다. 

 

> var study - ["html","css","web","jquery"]
> study.splice(2,1) //인덱스 2에서 한 개 삭제            
< ["web"] // 삭제된 요소로 이루어진 배열            
> study            
< (3) ["html", "css", "jquery"]

 

 

인수가 세 개 이상일 경우    

세번째 인수부터는 앞서 삭제한 위치에 새로 추가할 요소를 지정합니다.

 

> study.splice(2,1,"js")        
< ["jquery"] // 인덱스 2에서 1개 삭제        
> study        
< (3) ["html","css","js"] //삭제한 자리에 새로운 요소를 추가

 

기존 배열의 요소를 삭제하지 않고 새로운 요소를 추가하고 싶다면 삭제할 개수를 지정하는 두 번째 인수에 0을 넣으면 됩니다.

 

study 배열에 study.splice(2,0,"jquery") 를 입력하면 다른 요소를 삭제하지 않고 인덱스가 2인 위치, 즉 세 번째 위치에 "jquery" 를 추가합니다. 이렇게 하면 study 배열에는 네 개의 요소가 들어 있게 됩니다.

 

slice() 함수

배열에서 요소를 꺼낸다는 점에서 앞에 나온 pop() 함수나 shift() 함수와 같지만, 여러 개의 요소를 꺼낼 수 있다는 점이 다릅니다. 시작 인덱스와 끝 인덱스를 지정해 그 사이의 요소를 꺼냅니다. splice() 함수처럼 slice() 함수에서도 시작 인덱스만 지정할 경우 시작 인덱스에서 배열 끝까지 추출합니다.

 

> var colors = ["red","green","blue","white","black"]
> colors.slice(2)
< (3) ["blue","white","black"] // 인덱스 2부터 끝까지 추출
> colors
< (5) ["red","green","blue","white","black"] // 원래 배열은 변경되지 않음

 

 

slice() 함수에서 시작 인덱스와 끝 인덱스를 모두 지정하면 시작 인덱스부터 시작해서 끝 인덱스 직전까지 요소를 추출합니다. 끝 인덱스까지가 아니라 끝 인덱스 직전까지라는 점에 주의하세요.

 

> var colors2 = colors.sllice(1,4)
> colors2
< (3) ["green","blue","white"]
> colors
< (%) ["red","green","blue","white","black"]

 

slice() 함수를 사용해서 요소를 추출했을 때 원래 배열은 변경되지 않습니다. 따라서 배열에서 특정 요소를 삭제하는 용도로 사용할 수는 없습니다.

따라서 배열에서 추출한 요소를 가지고 새로운 배열을 만들어 사용하겠다면 slice() 함수가 적절하고, 배열에서 일부 요소를 삭제하겠다면 splice() 함수가 적당합니다.

 

 

 

함수	설명
concat	기존 배열에 새로운 배열을 추가해 새로운 배열을 만듭니다.
every	배열의 모든 요소가 주어진 함수에 대해 true라면 true를 반환하고 그렇지 않으면 false를 반환합니다.
filter	배열의 요소 중 주어진 필터링 함수에 대해 true인 요소만 골라 새로운 배열을 만듭니다.
forEach	배열의 모든 요소에 대해 주어진 함수를 실행합니다.
indexOf	주어진 값과 일치하는 값이 있는 배열 요소의 첫 인덱스를 찾습니다.
join	배열 요소를 문자열로 합칩니다. 이때 요소 사이를 구분할 구분자를 지정할 수 있습니다.
pop	배열의 마지막 요소를 꺼내 그 값을 반환합니다.
push	배열의 맨 끝에 새로운 요소를 추가한 후 새로운 length를 반환합니다.
reverse	배열의 배치 순서를 역순으로 바꿉니다.
shift	배열에서 첫 번째 요소를 꺼내 그 값을 반환합니다.
slice	배열에서 특정한 부분만 추출합니다. 기존 배열은 바뀌지 않습니다.
sort	배열 요소를 지정한 조건에 따라 정렬합니다.
splice	배열에 요소를 추가하거나 특정 부분을 추출합니다.
toString	배열에서 지정한 부분을 문자열로 반환합니다. 이때 각 요소는 쉼표로 구분합니다.
unshift	배열의 시작 부분에 새로운 요소를 추가합니다.