---

📝 2022. 11. 03

JavaScript / 배열

---

📌 Today I Learned

• 배열 코플릿

💬 null

typeof 연산자는 피연산자의 데이터 타입을 연산자로 반환한다.
typeof 연산자는 7가지 문자열 string, number, boolean, undefined, symbol, object, function 중 하나를 반환한다.

console.log(typeof null)

위 코드를 실행시키면 null이 아니라 object가 출력된다.

이는 자바스크립트 에진의 버그다. 수정을 했어야 하지만 개발이 완료된 타 사이트나 코드들에 영향을 줄 수 있어 수정되지 않고 있다.

null을 확인할 때는 typeof가 아닌 일치 연산자(===)를 사용해야 한다.

let result = null;

console.log(typeof null === null); 
// false

console.log(result === null);
// true

💬 for...of

for...of 명령문은 반복가능한 객체(Array, Map (en-US), Set, String, TypedArray, arguments 객체 등을 포함)에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성합니다.

function getEvenNumbers(arr) {
  let result = [];
  for (i = 0; i < arr.length; i++) {
    if (arr[i] % 2 === 0) {
      result.push(arr[i])
    } 
  }
  return result;
}

------------------------------------
// 아래처럼 활용할 수 있다.

function getEvenNumbers(arr) {
  let result = [];
  for (let el of arr) {
    if (el % 2 === 0) {
      result.push(el);
    }
  }

  return result;
}

💬 배열 합치기(mergeArrays)

📂 concat()

concat() 함수는 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환한다.

• 기존 배열을 변경하지 않고 추가된 새로운 배열을 반환한다.

const arr1 = ['apple', 'banana', 'carrot'];
const arr2 = ['a', 'b', 'c'];
const arr3 = arr1.concat(arr2);

console.log(arr3);
// ['apple', 'banana', 'carrot', 'a', 'b', 'c']

여기서 arr3에 객체 값을 concat으로 합치려고 하면 어떻게 되는지 알아보자.

let user = {
	name: 'kim',
	age: 20,
};

const newarr = arr3.concat(user);

console.log(newarr);
// ['apple', 'banana', 'carrot', 'a', 'b', 'c', {...}]

< 오브젝트로 나오는 것을 확인할 수 있다. >

객체가 더해진 newarr에 배열을 가진 배열을 합치면 어떻게 될까?

const text = [['celan', 'soap'], ['cute', 'cat']];

const newarr2 = newarr.concat(text)

newarr.concat(text)
// ['apple', 'banana', 'carrot', 'a', 'b', 'c', {…}, Array(2), Array(2)]

📂 ...spread operator

ES6에서 제공하는 spread operator(...)를 사용하여 배열을 이어 붙일 수 있다.
전개 연산자라고도 하며 배열과 객체 등 여러 곳에서 사용할 수 있다.

배열에서 spread operator는 배열의 원소들을 분해해서 개별 요소로 만들어 준다.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];

const addArr = [...arr1, ...arr2, ...arr3];

console.log(addArr.length);
// 9
console.log(addArr);
// [1, 2, 3, 4, 5, 6, 7, 8, 9]

(spread operator)...은 arr1의 원소들을 쪼개어 개별요소인 1, 2, 3을 리턴.
...arr2는 개별요소인 4, 5, 6을 리턴.
...arr3은 개별요소인 7, 8, 9를 리턴.

addArr는 이렇게 쪼개진 개별 요소들을 인자로 가지는 새로운 배열이다.

배열을 가진 배열들을 합치면 아래처럼 나온다.

const a = [['red', 'blue'], ['pink', 'green']]
const b = [['A', 'B'], ['C', 'D']]

const c = [...a, ...b]

console.log(c.length);
// 4

console.log(c)
// [Array(2), Array(2), Array(2), Array(2)]

📂 Push & Spread Operator

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

arr1.push(arr2);

document.write(arr1.length + '<br>'); // 4
document.write(arr1[0] + '<br>'); // 1 
document.write(arr1[1] + '<br>'); // 2
document.write(arr1[2] + '<br>'); // 3
document.write(arr1[3] + '<br>'); // [4, 5, 6]

push() 함수를 사용하여 배열을 합치면 파라미터로 전달된 배열을 하나의 원소로 처리한다.
위 예제에서 파라미터로 전달된 배열은 arr1의 4번째 원소가 된다.
따라서, arr1의 길이는 6이 아니라 4가 된다.

push() 함수를 사용하여 여러 개의 배열을 합칠 때,
concat() 함수를 사용한 것과 같이 파라미터로 전달된 배열의 원소 각각을
새로운 배열에 넣어서 합치기 위해서는 spread operator(...)를 사용해야 한다.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

arr1.push(...arr2);

document.write(arr1.length + '<br>'); // 6
document.write(arr1[0] + '<br>'); // 1 
document.write(arr1[1] + '<br>'); // 2
document.write(arr1[2] + '<br>'); // 3
document.write(arr1[3] + '<br>'); // 4
document.write(arr1[4] + '<br>'); // 5
document.write(arr1[5] + '<br>'); // 6

arr1.push(...arr2)

spread operator(...)은 배열의 원소들을 쪼개어 각각의 개별요소를 반환한다.
파라미터로 전달되는 arr2에 spread operator를 사용하여 arr2의 원소들을 각각 쪼개었다.
spread operator를 사용함으로써, 이 표현식은 arr1.push(4, 5, 6)과 같은 효과를 가진다.

💬 slice

📂 Array.slice()

slice() 메소드는 어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다.

// 구문 작성법
arr.slice([begin[, end]])

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2)); // 2번째 다음부터 출력
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4)); // 2번째 다음부터 4번째까지 출력
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5)); // 1번째 다음부터 5번째까지 출력
// expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2)); // -2번째까지 출력
// expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1)); // 2번째 다음 출력, -1번째 다음 출력
// expected output: Array ["camel", "duck"]

console.log(animals.slice()); // 각각의 문자열로 출력
// expected output: Array ["ant", "bison", "camel", "duck", "elephant"]

📂 String.slice()

slice() 메소드는 문자열의 일부를 추출하면서 새로운 문자열을 반환합니다.

// 구문 작성법
str.slice(beginIndex[, endIndex])

const str = 'The quick brown fox jumps over the lazy dog.';

console.log(str.slice(31)); // 31번 다음부터 출력
// expected output: "the lazy dog."

console.log(str.slice(4, 19)); // 4번 다음부터 19번까지
// expected output: "quick brown fox"

console.log(str.slice(-4)); // -4번까지 출력
// expected output: "dog."

console.log(str.slice(-9, -5)); -9번 다음부터 5번 다음까지 
// expected output: "lazy"