[TIL] JavaScript 배열

오늘의 공부

오늘은 배열을 조작하는 것에 대해 배웠다. 배열은 기본적으로 index를 포함한 객체이므로 각종 메소드를 통해 조작할 때 인덱스를 사용한다. 배열 속에는 다양한 종류의 elements, 요소를 포함할 수 있다. 배열의 요소에는 배열이 들어갈 수 있다. 이를 2차원 배열 또는 이중 배열로 표현한다.

배열과 객체

배열에 typeOf()를 사용한다면 'Array'가 아닌 'Obeject'가 반환된다.

let arr = [];
let obj = {};
console.log(typeof(arr));
console.log(typeof(obj)); // 둘 다 Object이다.

때문에, Array.isArray를 통해 확인해야 한다.

console.log(Array.isArray(arr)); // true
console.log(Array.isArray(obj)); // false

Mutable과 Immutable

각종 메소드를 통해 배열을 다룰 때, 이 메소드가 Mutable(가변)한지 혹은 Immutable(불가변)한지 이해할 필요가 있었다.

Mutable

Mutable한 메소드로 함수를 호출해 배열을 조작하면 원본 배열이 변한다. 원본이 변하므로 주의하거나 원본을 따로 다른 변수에 담아두도록 한다.

• push()는 배열의 마지막 요소를 추가하고, pop()은 배열의 마지막 요소를 삭제한다.

let arr = [1, 2, 3];
arr.push(5);
console.log(arr); // [1, 2, 3, 5] 원본 배열이 변경되었다.

arr.pop();
console.log(arr); // [1, 2, 3] 원본 배열이 변경되었다.

• shift()은 배열의 첫 번째 요소를 삭제하고, unshift()는 배열의 첫 번째 요소를 추가한다.

let arr = [1, 2, 3];
arr.shift();
console.log(arr); // [2, 3] 원본 배열이 변경되었다.

arr.unshift(1);
console.log(arr); // [1, 2, 3] 원본 배열이 변경되었다.

• sort()는 배열을 문자열 유니코드 코드 포인트에 따라 정렬한다.
• 오름차 또는 내림차로 정렬하기 위해선 별도의 compareFunction이 필요하다.

let arr = [1, 3, 65, 1000, 13, 32, 6]

// compareFunction 없이 사용한 상태의 출력
console.log(arr.sort()); // [1, 1000, 13, 3, 32, 6, 65]
// compareFunction 오름차순
console.log(arr.sort(function(a, b) {
    	return a - b;
	})
); // [1, 3, 6, 13, 32, 65, 1000]

Immutable

Immutable한 메소드로 함수를 호출해 배열을 조작하면 원본 배열이 변하지 않는다.

• join()은 배열의 요소를 하나의 문자열로 반환한다.

let arr = ['c', 'o', 'd', 'e', 's', 't', 'a', 't', 'e', 's'];
console.log(arr.join()); // c,o,d,e,s,t,a,t,e,s
console.log(arr.join('')); // codestates

• slice(begin, end)는 배열을 복사하여 반환한다.

// begin은 출발점을 지정, end는 끝나는 지점을 지정한다. 끝나는 지점 직전까지 반환한다.
// 음수부터도 가능하다. end 지점이 begin 지점보다 작아야 한다.
let arr = ['c', 'o', 'd', 'e', 's', 't', 'a', 't', 'e', 's'];
console.log(arr.slice(0, 4)); // ['c', 'o', 'd', 'e']
console.log(arr.slice(-6)); // ['s', 't', 'a', 't', 'e', 's']
console.log(arr.slice(-6, -4)); // ['s', 't']

// slice()를 사용해 배열을 새로운 변수에 할당하여 복사할 수 있다.
// 배열을 단순 새로운 변수에 재할당하여 수정하면 원본이 같이 수정된다. #얕은 복사
let arr2 = arr.slice(); 
console.log(arr2); // ['c', 'o', 'd', 'e', 's', 't', 'a', 't', 'e', 's']

• includes()은 배열이 특정 요소를 갖고 있는지 탐색한다. 지난 문자열 시간에 미리 학습한 메소드

let arr3 = ['Codestates', 'JS', 'String']
arr3.includes('String') // true

for...of

기존에 사용하던 for 반복문은 for (초기화, 조건식, 증감문) {반복할 내용}으로 알고 있었지만, for..of는 다른 방식으로 반복 가능한 객체에서 반복하고 각 개별 속성값에 대해 실행되는 문을 반복한다.

let arr = [1, 0, 0];

for (let value of arr) {
  console.log(value);
}
// 1
// 0
// 0

마무리

오늘은 다양한 메소드를 통해서 배열을 조작해봤다. Immutable, Mutable의 특성을 잘 파악해서 사용해야 할 것 같다. 개념을 공부하면서 추가적으로 얕은 복사와 깊은 복사를 학습했다. 원시값은 복사하면 그 값을 다른 메모리에 할당한다. 그러나 참조값을 가지는 object와 symbol은 값이 있는 주소를 참조하기 때문에 Immutable, Mutable 특성이 나타나는 것으로 이해했다. Immutable 메소드들은 복사 후 반환의 과정을 거친다고 이해했는데 더 공부 해야겠다.


오늘 문자열들이 들어있는 배열의 요소들 중 가장 긴 요소를 반환하려고 했다. 나는 sort를 사용해서 compareFunction을 통해 가장 긴 요소를 찾아냈다. 하지만 조건 중에 문자열의 길이가 같다면 먼저 반환된 문자열을 출력하도록 했다. 때문에, 가장 긴 문자열과 length가 같다면 새로운 배열에 담기도록 반복문을 또 썼다. 그리고 그 배열의 첫 요소를 반환했다. 이미 메소드를 사용했고, 그 안에서 compareFunction을 돌게 했다. 그리고 또 반복문을 돌렸다.


페어분은 Math.max(), for...of를 두 개다 사용하셔서 나보다 코드의 길이가 훨씬 짧고 과정도 간단해보였다. 내 코드를 조금 더 효율적으로 구상하기 위해 의사코드(수도코드)를 더 연습해야겠다. 그리고나서 레퍼런스 코드를 봤는데, 변수로 가장 긴 문자열 인덱스를 0으로 할당하고 for...of으로 단 한 번의 반복문을 통해 반환했다.

레퍼런스에 담긴 코드들을 보면 많은 생각이 든다. 왜 반복적인 요소, 중복되는 요소에서 변수를 쓸 생각을 안했을까 싶다. 코드의 진행의 순서, 변수의 알맞은 선언, 효율적 사용이 실력향상에 가장 필요한 부분일 것 같다. 남은 과정동안 노력 해야겠다.