[1주차] 자바스크립트 배열 문법 정리

1. 배열의 요소 개수 구하기

const everything = ['사과', 1 , undefined, true, '배열', null];
everything.length; // 6

빈 값도 유효한 값이므로 요소 개수를 셀 때 포함된다.

 

const arr = ['a', 'b', 'c', 'd', 'e'];
arr[arr.length -1]; // 'e'

 

const arr = ['a', 'b', 'c', 'd', 'e'];
arr.at(4); // 'e'
arr.at(-1); // 'e'

at의 소괄호 안에 넣은 숫자가 0 또는 양의 정수이면 배열의 앞에서부터 해당 인덱스 요소를 찾고, 숫자가 음의 정수면 배열의 마지막에서부터 요소를 찾는다.

 

2. 배열에 요소 추가하기

const target = ['a', 'b', 'c', 'd', 'e'];
target[5] = 'f';
target; // (6) ['a', 'b', 'c', 'd', 'e', 'f'];

 

맨 앞 요소를 추가하는 방법

const target = ['나', '다', '라', '마', '바'];
target[0] = '가';
target; // (5) ['가', '다', '라', '마', '바'];

맨 앞에 새로운 요소가 추가되지 않고 첫 번째 요소가 변경돼 버렸음.

배열의 맨 앞에 새로운 요소를 추가하려면 unshift()라는 기능을 사용해야 됨

const target = ['나', '다', '라', '마', '바'];
target.unshift('가');
target; // (6) ['가', '나', '다', '라', '마', '바'];

 

맨 뒤 요소를 추가하는 방법

const target = ['가', '나', '다', '라', '마'];
target.push('바');
target; // (6) ['가', '나', '다', '라', '마', '바'];

 

const target = ['가', '나', '다', '라', '마'];
target[target.length] = '바';
target; // (6) ['가', '나', '다', '라', '마', '바'];

 

3. 배열의 요소 수정하기

const target = ['가', '나', '다', '라', '마'];
target[3] = '카';
target; // (5) ['가', '나', '다', '카', '마'];

 

4. 배열에서 요소 삭제하기

맨 마지막 배열의 요소 삭제하기

const target = ['가', '나', '다', '라', '마'];
target.pop();
target; // (4) ['가', '나', '다', '라'];

 

맨 앞 배열의 요소 삭제하기

const target = ['가', '나', '다', '라', '마'];
target.shift();
target; // (4) ['나', '다', '라', '마' ];

 

맨 뒤 요소

push - 추가 / pop - 삭제

맨 앞 요소

unshift - 추가 / shift - 삭제

 

중간 요소 삭제하기

const target = ['가', '나', '다', '라', '마'];
target.splice(1, 1);
target; // (4) ['가', '다', '라', '마'];

첫 번째는 시작 인덱스, 두 번째는 삭제할 요소의 개수

 

const target = ['가', '나', '다', '라', '마'];
target.splice(1);
target; // (1) ['가'];

 

const target = ['가', '나', '다', '라', '마'];
target.splice(1, 3, '타', '파');
target; // (4) ['가', '타', '파', '마'];

splice(1, 3, '타', '파');는 인덱스 1부터 3개 요소('나', '다', '라')를 먼저 삭제하고, 요소를 삭제한 자리에 '타'와 '파'를 채워 넣으라는 뜻

 

5. 배열에서 요소 찾기

const target = ['가', '나', '다', '라', '마'];
const result = target.includes('다');
result; // true
const result2 = target.includes('카');
result; // false

includes()에 주어진 값이 배열에 존재하면 true, 존재하지 않으면 false

 

검색하려는 값이 어느 인덱스에 위치하는지 알 수 있는 방법

const target = [ '라' , '나', '다', '라', '다'];
const result = target.indexOf('다');
result; // 2
const result2 = target.lastIndexOf('라');
result2; // 3
const result3 = target.indexOf('가');
result3; // -1

indexOf()는 주어진 값이 있는지 앞에서부터 찾고, lastIndexOf()는 뒤에서부터 찾음

배열 안에 존재하지 않는 값을 찾을 경우 결과는 -1이 출력.

 

6. 배열 자르고 합치기

배열.slice(<시작 인덱스>, <종료 인덱스>)

시작 인덱스부터 종료 인덱스까지 배열을 잘라 새 배열을 만듦. 이때 시작 인덱스는 새 배열에 포함되나 종료 인덱스는 포함되지 않음. 인덱스가 음수이면 at()과 마찬가지로 뒤에서부터 센다.

['2', '3', '4', '5'].slice(1); // (3) ['3', '4', '5']
['2', '3', '4', '5'].slice(1, 3); // (2) ['3', '4']
['2', '3', '4', '5'].slice(2, 3); // (1) ['4']
['2', '3', '4', '5'].slice(1, -1); // (2) ['3', '4']
['2', '3', '4', '5'].slice(); // (4) ['2', '3', '4', '5']

 

두 배열을 합쳐 하나의 새로운 배열로 만들 수 있다.

배열.concat(값1, 값2, ...)

합칠 값이 꼭 배열일 필요는 없다. 다른 값을 넣어도 합칠 수 있다. 또한 여러 값을 넣으면 모두  하나로 합쳐진다. 아무 값도 넣지 않으면 기존 배열과 같은 모양의 새로운 배열이 나온다.

[1, 2].concat([3, 4]); // (4) [1, 2, 3, 4]
[1, 2].concat(3, 4); // (4) [1, 2, 3, 4]
[1, 2].concat([3, 4], [5, 6]); // (6) [1, 2, 3, 4, 5, 6]
[1, 2].concat([3, 4], 5, 6); // (6) [1, 2, 3, 4, 5, 6]
[1, 2].concat(); // (2) [1, 2]

 

7. 배열과 비슷한 문자열의 특징

배열을 문자열로 만들 때는 join()을 사용함

['1', '2', '3'].join(); // '1, 2, 3'
['1', '2', '3'].join('x'); // '1x2x3'
['1', '2', '3'].join(''); // '123'

 

문자열을 배열로 만들 때는 split()을 사용함

'2345'.split(); // ['2345']
'2345'.split('x'); // ['2345']
'2345'.split(''); // (4) ['2', '3', '4', '5']
'2, 3, 4, 5'.split(''); // (7) ['2', ',', '3', ',', '4', ',', '5']
'2, 3, 4, 5'.split(','); // (4) ['2', '3', '4', '5']

 

8. 배열 반복하기

const target = ['가', '나', '다', '라', '마'];
let i = 0;
while (i < target.length) {
	console.log([i]);
    i++;
}

가
나
다
라
마
< 4

const target = ['가', '나', '다', '라', '마'];
for (let i = 0; i < target.length; i++) {
	console.log([i]);
}

 

- indexOf()와 splice()를 사용해 다음 배열에서 '라'를 삭제해 보세요.

const target = ['가', '라', '다', '라', '마', '라'];
// target.indexOf('라'); > 1
// target.splice(1, 1)

// target.indexOf('라'); > 2
// target.splice(2, 1);

// target.indexOf('라'); > 3
// target.splice(3, 1);
// target; > (3) ['가', '다', '마']
// target.indexOf('라'); > -1

while(target.indexOf('라') > -1) {
	target.splice(target.indexOf('라'), 1);
}

const target = ['가', '라', '다', '라', '마', '라'];

let index = target.indexOf('라');
while(index > -1) {
	target.splice(index, 1);
    index = arr.indexOf('라');
}

 

9. 이차원 배열

배열의 요소로 배열이 들어 있으면 이를 이차원 배열이라고 한다.

const towDimension = [[1], [2], [3]];

3행 1쳘의 표를 나타낸다. 행은 가로 줄 수를 의미하고, 열은 세로 줄 수를 의미한다.

보다 보기 좋게 하려면

const towDimension = [
	[1], 
    [2], 
    [3]
];

 

- 'a', null, 1, undefined, NaN, true, '', 0을 4행 2열의 이차원 배열로 구성해 보세요.

const arr = [
	['a', null],
    [1, undefined],
    [NaN, true],
    ['', 0],
];

 

- for문으로 5(행) x 4(열) 이차원 배열을 만들어 보세요. 배열의 요소는 모두 1로 넣습니다.

const array = [];
for(let i = 0; i < 5; i++) {
	const innerArray = [];
    for (let j = 0; j < 4; j++) {
    	innerArray.push(1);
    }
    array.push(innerArray);
}
console.log(array);

 

10. flat()과 fill()

flat()은 배열의 차원을 한 단계 낮추는 기능을 함. 즉 n차원 배열을 n-1차원 배열로 낮춤. 이때 일차원 배열은 flat()을 적용해도 그대로 일차원 배열로 남아 있음.

const array = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
array.flat(); // (9) [1, 2, 3, 4, 5, 6, 7, 8, 9]
const array2 = [1, 2, 3, [[4, 5, 6], [7, 8, 9]]];
array2.flat(); (5) [1, 2, 3, (3) [4, 5, 6], (3) [7, 8, 9]]

배열은 배열 리터럴인 대괄호([]) 말고도 Array(길이)로도 생성할 수 있다.

다음 코드에서 Array(5)는 길이가 5인 배열을 만든다.

const empty = Array(5);
empty; // (5) [비어 있음 x 5]

하지만 Array()로 배열을 생성하면 값이 전부 비어 있다고 나오는데 이때 fill()을 사용하면 빈 배열의 값을 채울 수 있다. fill()은 빈 배열의 요소를 미리 특정 값으로 채워 넣는 기능을 한다.

empty.fill(); // (5) [undefined, undefined, undefined, undefined, undefined]

fill()의 소괄호 안에 특정 값을 넣지 않으면 모두 undefined로 채워 진다. fill()안에 특정 값을 넣으면 배열은 모두 해당 값으로 채워 진다.

empty.fill(1); // (5) [1, 1, 1, 1, 1]

fill()을 나중에 배우는 map()과 조합하면 [1, 2, 3, 4, 5]와 같이 요소가 순서대로 나열된 배열을 쉽게 만들 수 있다.

empty.fill().map((v, i) => i + 1); // (5) [1, 2, 3, 4, 5]

 

11. Set으로 중복 요소 제거하기

배열의 요소는 다음과 같이 중복될 수 있다. 중복 요소는 반복문으로 제거할 수 있지만, 자바스크립트에서 배열과 비슷한 Set이라는 객체를 제공한다. Set은 배열과 달리 중복을 허용하지 않는다.

[1, 2, 1, 3, 3, 5]

Set 뒤의 소괄호 안에 배열을 넣는다. 그리고 앞에 new가 나온다.(형태만 알아두기 미리 배우는 것) 실행하면 중복 요소가 사라지고 1, 2, 3, 5만 남아 손쉽게 중복을 제거할 수 있다.

new Set([1, 2, 1, 3, 3, 5]); // Set(4) {1, 2, 3, 5}

Set은 문자열 중복도 제거한다.

new Set('가가나나다다'); // Set(3) {'가', '나', '다'}

Set이 배열과 비슷해 보이지만, 사용 방법이 다르다. 예를 들어, Set의 요소 개수를 구할 때는 length 대신 size를 사용한다.

const a = new Set([1, 2, 1, 3, 3, 5]);
a.size; // 4

따라서 중복을 제거할 때만 Set을 사용하고, Set을 다시 배열로 바꿔 사용한다. Set을 배열로 바꿀 때는 Array.from()을 사용한다.

Array.from(new Set([1, 2, 1, 3, 3, 5])) // (4) [1, 2, 3, 5]

참고로 Array,from()을 사용해 문자열도 배열로 바꿀 수 있다.

Array.from('123'); // (3) ['1', '2', '3']