Array

자바스크립트는 객체(object) 기반의 프로그래밍 언어로, 원시타입 값을 제외한 함수, 배열 등 모두 객체이다. 원시 타입의 값은 변경이 불가능한 값이고, 객체 타입의 값은 변경이 가능하다.

Array

const / let 배열명 = [배열 내용];

array(배열)는 많은 데이터의 수를 하나의 변수로 관리할 때 필요한 자료 구조이다.
위의 형태로 선언하는데 배열의 내용이 비어있어도 배열이 된다.
배열은 index의 개념을 갖는다. 배열의 요소가 가지고 있는 순서로 0부터 시작한다.
즉, 배열은 순서를 가지는 데이터 모음이다.
순서와 index, length 속성을 갖고 있어, 반복문을 함께 활용하기에 적합하다.
또한 각각의 요소가 특정 번호(index) 를 가지고 있기 때문에 순차적으로, 역순으로 혹은 특정 위치로 접근하는 것도 가능하다.

✅ .isArray 메서드

배열은 객체 중 하나의 형태이기 때문에 typeof 로 확인해보면 array가 아닌 object를 반환한다. 해당 객체를 배열인지 객체인지 구분하고 싶을 때에는 배열명.isArray 메서드를 사용하면 배열일 경우 true, 배열이 아닐 경우 false를 반환한다.

01 index

배열의 각 데이터에는 배열이름[인덱스번호]의 방법으로 접근할 수 있다.

const myArr = [ cat, dog, rabbit, bird ];

위의 배열에서 myArr[0]은 cat이고, myArr[2]는 rabbit이다.

02 .length

배열은 요소의 개수, 즉 배열의 길이 값인 .length 프로퍼티를 갖는다. 이 때, length는 항상 배열의 마지막 index보다 +1한 값인데, 이는 배열의 index가 0부터 시작하기 때문이다.

03 .indexOf()

indexOf는 배열에 특정 요소가 있는지 확인할 때 유용하다.

const myArr = ['banana', 'strawberry', 'orange'];
myArr.indexOf('strawberry');	 //1
myArr.indexOf('kiwi'); 		    //-1

특정 요소를 전달하면 배열에서 특정 요소가 있는지 확인 후 index를 반환한다. 만약 전달한 요소가 배열 안에 존재하지 않을 경우 -1을 반환한다.

04 .push()

push는 배열의 가장 마지막 부분에 요소를 추가하는 메서드 이다.

const myArr = ['banana', 'strawberry', 'orange'];
myArr.push('kiwi');
console.log(myArr);	//['banana', 'strawberry', 'orange', 'kiwi']

✅배열은 객체이기 때문에 const로 선언하였더라도 해당 배열의 내부 요소(참조 자료)를 수정하는 것은 가능하다.

05 .unshift()

unshift 메서드는 배열의 가장 앞 부분에 요소를 추가하는 메서드 이다.

const myArr = ['banana', 'strawberry', 'orange'];
myArr.unshift('kiwi');
console.log(myArr);	//['kiwi', 'banana', 'strawberry', 'orange']

06 .shift()

shift 메서드는 배열에서 첫 번째 요소를 제거하는 메서드 이다.

const myArr = ['banana', 'strawberry', 'orange'];
myArr.shift();
console.log(myArr);	// 	['strawberry', 'orange']

07 .concat()

concat 메서드는 인수로 받은 값을 기존 배열의 마지막에 추가한 새로운 배열을 반환한다. 인수로 받은 값이 배열일 경우, 배열 해체 후 추가한다.

const myArr1 = [1,2,3];
const myArr2 = [4,5,6];
myArr1.concat(myArr2);  // [1,2,3,4,5,6];

✅push, pop, unshift, shift는 기존의 배열을 직접 수정하므로 기존 배열이 이후 사용된다면 반드시 따로 변수를 선언하여 저장해두어야 한다.

✅ concat은 새로운 배열을 반환하고 기존 배열을 그대로 유지하기 때문에 concat으로 반환 받은 값을 따로 변수를 선언하여 할당받아야 한다.

08 .splice()

splice 메서드는 배열의 특정 index에 직접 접근하여 값을 추가, 또는 삭제할 수 있다. splice는 세개의 인수를 받는데 start, deleteCount, items이다.

• start : splice로 접근하고자 하는 index. start만 지정할 경우 이후 값을 모두 삭제하며 start가 음수 일 경우 뒤에서 접근한다. 예를 들어 -1일 경우 가장 마지막 index에 접근하고 -n 일 경우 마지막에서 n번째 요소에 접근한다.
• deleteCount : start로 부터 삭제할 요소의 개수이다. deleteCount를 0으로 지정할 경우 아무 요소도 삭제하지 않는다.
• items : 삭제한 요소의 위치에 추가할 요소들의 목록이다. 생략할 경우 삭제만 이루어진다.

const myArr = ['banana', 'strawberry', 'orange'];
myArr.splice(1,2); //   ['banana']
myArr.splice(1,0,'kiwi'); 
				   //['banana', 'kiwi', 'strawberry', 'orange']
myArr.splice(1,1, 1,2,3);
					//['banana', 1, 2, 3, 'orange']

배열에서 특정 요소를 삭제하고자 할 때 indexOf와 함께 사용할 수 있다.

09 .join()

join 메서드는 기존 배열의 모든 요소를 string으로 변환한 후 인수로 전달받은 string으로 연결하여 반환한다. 이 때 인수의 길이는 상관이 없으며 반환되는 값은 하나의 string으로 반환된다. 인수를 생략할 경우 ,로 구분되어 반환된다.

const myArr = [0,1,2,3,4,5];
myArr.join(' ');  	// '0 1 2 3 4 5'

✅ cf. Array.from()

Array.from('Hello'); //		['H', 'e', 'l', 'l', 'o']

10 .reserve()

reserve 메서드는 배열 전체요소의 순서를 반대로 다시 정렬한다. 기존 배열 자체를 변경한다.

const myArr = [1,2,3,4,5];
myArr.reverse();	
console.log(myArr);		// [5,4,3,2,1]

11 .fill()

fill 메서드는 인수로 받은 값으로 배열의 모든 요소를 치환한다. 기존 배열 자체를 변경한다.

const myArr = ['hi','hi','hi'];
1. myArr.fill('hello') 		//['hello', 'hello', 'hello']
2. myArr.fill('hello', 1)	//['hi', 'hello', 'hello']
3. myArr.fill('hello', 1, 2)

fill메서드 또한 세개의 인수를 갖는다.

• value : 기존 배열의 값을 치환할 값
• start : 치환을 시작할 index
• end : 치환을 종료할 index (end에 기입 index는 미포함)

12 .includes()

includes 메서드는 인수로 받은 값이 배열에 존재하는지 확인하여 true나 false를 반환한다.

const myArr = [0,1,2,3,4,5,6,7,8,9];
myArr.includes(5) 		//true
myArr.includes(100)		//false
myArr.includes(5, 8) 	//false

13 .flat()

flat 메서드는 인수로 전달받은 깊이 만큼 배열을 평탄화한다.

const myArr = [1,2,[3,[4],5],6,7]
myArr.flat(1);	 //[1,2,3,[4],5,6,7,]
myArr.flat(2); 	 //[1,2,3,4,5,6,7]

✅인수를 Infinity로 전달하면 중첩 배열을 모두 평탄화한다.

14 .forEach()

forEach 메서드는 배열의 모든 요소를 순회하면서 계속해서 callback을 호출한다. forEach는 특별한 경우가 아닐 때 계속해서 반복하므로 주의해야 한다. 인자로는 value, index, array 세가지를 받을 수 있다. forEach는 원본 배열을 수정하지 않지만 callback 함수를 이용하여 변경은 가능하다. 또한 반환값은 언제나 undefined이다.

const arrForEach = arr.forEach (변환 전 변수 => 변환 후 리턴할 값)

return 값을 따로 부여해야 값을 반환하므로 if 문과 함께 사용하여 특정한 결과만을 반환하도록 사용할 수 있다.

15 .map()

map 메서드는 배열의 모든 요소를 순회하면서 전달받은 callback 함수를 호출하고, 그 반환값으로 새로운 배열을 반환한다. 이때 원본 배열은 변경되지 않는다. map 메서드로 생성한 배열은 반드시 원본 배열과 length 프로퍼티 값이 동일하다. 즉 1:1 매핑한다.

const arrMap = arr.map(변환 전 변수 => 변환 후 리턴할 값)

✅ forEach, map 같은 고차 함수에 대해서는 아직 좀 어렵다! 다시 체크할 것!!