Array essential with ES6 -1-

소스코드 중간중간에 ES6 문법이 적용되어 있습니다.

예제코드를 실행한 브라우져 환경은 크롬 카나리 입니다..

ES6문법에 대한 설명이 생략된것은 포스팅에 포커스가 스터디에 맞춰져 있기때문입니다.

배열의 생성자

---

var arr1 = []; 
var arr2 = new Array(); // []
var arr3 = Array(); //new 연산자 생략가능
var arr4 = new Array(10); //[undefined,undefined,...] 길이가 10인배열
var arr5 = [1,2,3]; //[1,2,3]
var arr6 = new Array(2,3); // [2,3]

/*생성자 예외*/
var arr1 = [1,2,] // IE8 : [1,2,undefined]  other : [1,2]
var arr2 = [,,,,,,] // IE8 : length=6  other = length=5  권장하지않는 생성방법 초기 익스8에서 잘못구현됨

배열의 프로퍼티

---

length : length 프로퍼티는 배열의 길이를 나타내는데 읽기전용이 아니라는점이 흥미롭다. 제거하거나 , 빈슬롯을 추가할수있는 유연한 특징이 있다.

var arr = [1,2,3];
arr.length = 2;
console.log(arr[2]) //인덱스2가 제거되어 undefined가 뜬다.

자바스크립트의 배열은 동적으로 제어되기때문에 빈슬롯에 대한 명시가 필요 없다고 생각한다. 그래서 다른브라우저들은 length 를 3으로 조절해서 출력해도 값이 들어가있지않으면 빈슬롯을 출력하지않는다.
빈슬롯 추가를 확인해보고자 한다면, Chakra engine을 사용하는 익스11 개발자 도구 콘솔에서 확인해 볼수있다.

var arr =[1,2];
arr.length = 3;
console.log(arr); // IE : [1,2,undefined]  other : [1,2] 

참고로 배열은 최대 4,294,967,295개의 데이터를 담을수 있다고 한다.

배열의 감지

---

자바스크립트에서 배열은 특화된 “객체”이다.
그렇기때문에 초창기 자바스크립트에서 객체와 배열을 구분하기 쉽지않았다.

var arr = [];
console.log(arr instanceof Array); //true
console.log(arr instanceof Object); //true

instanceOf 로 배열을 감지할경우 다른 프레임에서 생성된 배열이라면 false 를반환하기떄문에 ECMA5 에서 나온 함수를 사용해 우회한다.

var arr = [];
Array.isArray(arr) //true;

typeof 와 instanceOf 모두 전역 스코프가 여러개가 있을때 신뢰할수 없는 문제가 발생되기떄문에 다음과 같이 함수를 만들어서 사용할수있다.

function isArray(val){
    return Object.prototype.toString.call(val) == "[object Array]"; //[object Function] , [object RegExp] 
}

이를 응용해서 함수인지 정규식인지도 구분이 가능하다

배열 다뤄보기

---

-배열요소 접근하고 값 고치기

//ES5
var nums= [];
for( var i=0; i<100; ++i ){
    nums[i] = i+1;
};
//[ 1,2,3,4,5....100]
var numbers = [1,2,3,4,5];
var sum = numbers[0] + numbers[1] + numbers[2] + numbers[3] +numbers[4];
//출력값:15

//ES6
var nums = Array.from(new Array(100), (x,i) =>i+1);
var numbers= [1,2,3,4,5];
var sum = numbers.reduce( (i,v) => i+v );

–문자열로 배열만들기

var strr = "H E L L O";
var arr = strr.split(" ");
//["H","E","L","L","O"]

–배열복사

//얕은복사 
var arr = [1,2,3,4,5];
var arr2 = arr;

깊은복사 
//ES5
function copy(arr1,arr2){
    for(var i =0; i < arr1.length; ++i ){
    arr2[i] = arr1[i];
    }
}
var arr = [1,2,3,4,5];
var anotherArr = [];

copy(arr,anotherArr);
anotherArr.pop();

console.log(arr) //[1,2,3,4,5]
console.log(angotherArr) //[1,2,3,4]

//ES6
var arr= [1,2,3,4,5];
var arr2 = [];

arr2 = [...arr]; 

arr.pop();

console.log(arr); //[1,2,3,4];
console.log(arr2); //[1,2,3,4,5];

배열의 함수

---

1.접근자 함수

indexOf : 찾는 대상의 인덱스의 위치를 반환 한다 없을 경우 -1 반환

//ES5
var arr = ["hello","world","myName","hwang"];
arr.indexOf("hello"); //0
var arr = ["hello","world","myName","hwang"];
arr.indexOf("hello3"); //1

//ES6
var arr = ["hello","world","myName","hwang"];
arr.includes("hello"); //true
var arr = ["hello","world","myName","hwang"];
arr.includes("false"); //false

lastIndexOf : 찾는 대상의 결과가 복수라면 마지막 결과값에 인덱스 위치를 반환.

var arr = ["H","H","H"];
arr.lastIndexOf("H"); //2

join : 배열을 문자열로 반환할때 구분자를 지정.

var arr = [1,2,3,4,5];
arr.join(); //1,2,3,4,5
arr.join("+"); //1+2+3+4+5

toString : 배열의 각 슬롯값을 쉼표로 구분한 문자열을 반환.

var arr = [1,2,3,4];
arr.toString() // 1,2,3,4

concat :기존 배열을 기반으로 합치고 새로운 배열을 만듦.

var arr = [1,2,3].concat(4,5); //[1,2,3,4,5];

splice: 기존 배열이 가진 데이터의 특정 범위를 가져와서 새로운 배열을 만든다.
매개 변수를 음수로 넘길경우 배열길이에 더한값을 호출한다
예를들어 길이가 10인 배열에 slice(-5,-5) 를 할경우 (5,5)와 같은 동작을한다.

var arr = [1,2,5];
var removed = arr.splice(2,1,3,4,5); 
console.log(arr); //[1,2,3,4,5]
console.log(removed); //[]

2.변형자 함수

스택(last-in-first-out)

push : 마지막에 요소 추가

pop : 마지막 요소 제거

var arr= [];
arr = Array.from(new Array(5), (x,i) => i+1);
arr.push("hello");
console.log(arr); //[1,2,3,4,5,"hello"]
arr.pop();
console.log(arr); //[1,2,3,4,5]

큐(first-in-first-out)

unshift :첫번째에 요소 추가

shift : 첫번째에 있는 요소 제거

var arr= [];
arr = Array.from(new Array(5), (x,i) => i+1);
arr.unshift("hello");
console.log(arr); //["hello",1,2,3,4,5]
arr.shift();
console.log(arr); //[1,2,3,4,5]

reverse : 배열에 저장된 데이터 순서를 뒤집는다

var arr = [1,2,3,4,5];
arr.reverse(); //[5,4,3,2,1]

sort : 배열을 문자열로 오름 차순 정렬한다.

var arr = ["C","B","A","D"];
arr.sort(); // ["A","B","C","D"]

//숫자 정렬방식
var numArr = [10,5,4,32,21,29];
numArr.sort(); //[10, 21, 29, 32, 4, 5];
numArr.sort((x,i)=>x-i); //[4, 5, 10, 21, 29, 32]

3.반복자 함수

3-1.기존배열순회

forEach : 배열의 모든 데이터에서 콜백함수를 호출하고 반환값이 없다.

var arr = [1,2,3,4];
arr.forEach( x => console.log(x*x) ); //1,4,9,16

every : 배열의 모든 콜백 함수를 호출하고 반환값이 모두 true 일경우 true 반환

var arr = [1,2,3,4];
arr.every( x => x%1==0 );//true
var arr = [1,2,3,4];
arr.every( x => x%2==0 );//false

some :배열의 모든 콜백 함수를 호출하고 반환값에 일부라도 true 일경우 true 반환

var arr = [1,2,3,4];
arr.some( x => x%1==0 );//true
var arr = [1,2,3,4];
arr.some( x => x%2==0 );//true

reduce : 왼쪽부터 오른쪽으로 값을 누적한다.

var arr =[1,2,3,4];
arr.reduce( (x,i) => x+i ); //10

var arr = ["A","B","C"];
arr.reduce( (x,i) => x+i ); //ABC

reduceRight : 오른쪽에서 왼쪽으로 값을 누적한다.

var arr =[1,2,3,4];
arr.reduceRight( (x,i) => x+i ); //10

var arr = ["A","B","C"];
arr.reduceRight( (x,i) => x+i ); //CBA

3-2.새로운배열 반환

map : 원래 배열에서 해당위치에 있던 데이터를 콜백 함수에 넘긴 결과.

var member = [ {name :"kim" ,age: 20} , {name: "nam" , age:22}, {name:"sang" ,age:32 }];

var memberValues =member.map( obj => { 
var memberVal = {};
memberVal[obj.name] = obj.age;
return memberVal;
});

console.log(memberValues); //[ {kim : 20} , {nam : 22} , {sang : 32} ]
console.log(member); //[ {name :"kim" ,age: 20} , {name: "nam" , age:22}, {name:"sang" ,age:32 } ]

filter : 콜백 함수 결과에따라 해당 데이터를 반환 배열에 포함할지를 결정함

var arr = [1,2,3,4,5];
arr.filter( x => x%2 ==0 ); //[2,4]

배열에 대해서 기본적인 내용을 알아봤습니다.

다음 포스팅에서 다차원 배열, 클래스 를 통한 함수 구현등으로 배열을 마무리하겠습니다.