[JS]Array관련 문법

타입 확인

const object = { name: 'Steve' }
typeof object //object

const array = [100, 200, 300]
typeof array //object

Array.isArray(object) //false
Array.isArray(array) //true

typeof로 확인한 배열의 타입은 'object'이다. 'Array.isArray()' 를 통해 배열을 구분할 수 있다.

 

길이 확인

function getLastElement(arr) {
  if (arr === []){return undefined}
  else {
    return arr[arr.length -1]
  }
}

let output = getLastElement([1, 2, 3, 4])
console.log(output) // 4

배열에서 마지막 인덱스의 요소(element)를 리턴하는 함수이다. 이 때 'arr.length' 를 통해 배열의 요소의 개수를 알 수 있다. string과 비슷하다.

 

str.split()

function getAllWords(str) {
  if (str === ''){return []}
  else{
    return str.split(' ')
  }
}

let output = getAllWords('Radagast the Brown');
console.log(output); //['Radagast', 'the', 'Brown']

문자열을 공백을 기준으로 문자로 나누어 배열로 만들어 리턴하는 함수이다. 'str.split()'은 특정 기준으로 문자를 나누어 배열로 만드는 함수임을 알 수 있다.

 

Array.slice(), string.slice(begin, end)

어떤 배열의 begin부터 end까지에 대한 얕은 복사본을 새로운 배열 객체로 반환한다. 원본 배열은 바뀌지 않는다.

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

console.log(str.slice(31));
// expected output: "the lazy dog."

console.log(str.slice(4, 19));
// expected output: "quick brown fox"

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

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

slice 함수도 유용하다. 원하는 문자열 또는 배열의 요소를 뽑아서 쓸 수 있다.

 

Array.unshift()

새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환한다.

const array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));
// expected output: 5

console.log(array1);
// expected output: Array [4, 5, 1, 2, 3]

 

Array.concat()

인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환한다.

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

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]

 

Array.push()

배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환한다. 새로운 길이를 반환하니, 헷갈리지 말도록!

const animals = ['pigs', 'goats', 'sheep'];

const count = animals.push('cows');
console.log(count);
// expected output: 4
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows"]

 

Array.join()

배열의 모든 요소를 연결해 하나의 문자열로 만듭니다. ()에는 separator가 들어간다.

//배열로 입력받은 번호를 문자열 전화번호 양식으로 바꾸는 코드
function createPhoneNumber(arr) {
  let result = ''
  if (arr.length === 11){
    let firstNumberArray = arr.slice(0,3)
    let firstNumber = firstNumberArray.join('')

    let secondNumberArray = arr.slice(3, 7)
    let secondNumber = secondNumberArray.join('')

    let thirdNumberArray = arr.slice(7, 11)
    let thirdNumber = thirdNumberArray.join('')

    result = result + '(' + firstNumber + ')' + secondNumber + '-' + thirdNumber
  }
  else if (arr.length === 8){
    let secondNumberArray = arr.slice(0, 4)
    let secondNumber = secondNumberArray.join('')

    let thirdNumberArray = arr.slice(4, 8)
    let thirdNumber = thirdNumberArray.join('')

    result = result + '(010)' + secondNumber + '-' + thirdNumber
  }

  return result
}

 

for 반복문: For...Of

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

• 주구장창 for(let i = 0; i < num; i++) 이것만 안써도 된다.

const array1 = ['a', 'b', 'c'];

for (const element of array1) {
  console.log(element);
}

// expected output: "a"
// expected output: "b"
// expected output: "c"

 

Imutability in JS

언어에서 불변성이라는 개념이 있다. 이것들을 지키며 코드를 작성하는 것이 바람직하다. 무엇인지 알아보자

https://sustainable-dev.tistory.com/156

자바스크립트에서 불변성(Immutability)이란