[TIL 1/24]

i do as i say·2020년 1월 24일
0

Array (2)

  • 메소드에서의 IMMUTABLE/MUTABLE이란?
    메소드를 실행했을 때, 원본이 변할 수 있고 변하지 않을 수 있다. 원본이 변하는 것을 MUTABLE, 변하지 않는 것을 IMMUTABLE이라고 하고, string 메소드는 전부 IMMUTABLE이기 때문에 원본이 변형되지 않지만 array 메소드는 IMMUTABLE과 MUTABLE이 같이 있으므로 잘 확인하는 게 좋다. ~조금 더 깊은 것은 나중에~

배열 메소드는 사용할 수 있는 것이 많아서 한 번씩 다 보아야 되지만 일단은 지금까지 주요하게 썼던 것 순으로.

Array.length (property)

Stirng property에서도 length가 있는 것처럼, Array에서도 length가 있다. Array의 length는 arr.length으로 사용하며, 배열의 길이를 나타내 준다. 요소 길이의 전체 합이 아닌 배열 인덱스의 전체 합이다.

Array.isArray()

typeof 연산자를 활용하면 피연산자의 타입을 알 수 있다. 그러나 객체와 배열은 둘 다 object로 나온다. 그렇기에 객체인지, 배열인지 확인하기 어려운데, 그럴 때 쓸 수 있는 게 바로 이 메소드이다.

이 메소드는 괄호 안에 배열을 넣게 된다면 true를 반환한다.

  • Array.isArray(확인하고 싶은 값)
    ! 배열을 제외한 나머지 타입은 전부 false로 나온다.
    ! 배열이 비어 있든지, 채워져 있든지 상관없다. 배열이라면 무조건 true로 반환.

Array.of()

이 메서드는 인자의 수나 유형에 관계 없이 가변 인자를 갖는 새 배열을 만든다.

❓ Array 생산자와 뭐가 다른가요?
❕ 정수형 인자의 처리 방법이 다릅니다. Array(2)는 length 속성이 2인 empty 배열을 생성하지만 Array.of(2)는 하나으 요소 2를 가진 배열을 생성합니다.

Array.of(2); // [2]
Array.of(1,2,3) // [1,2,3]
Array(2); // [ , ]
Array(1,2,3) // [1,2,3]

Array.concat() - IMMUTABLE

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

  • (배열 명).concat([배열이나],요소)

    • 기존 배열을 변경하지 않습니다.
    • 추가된 새로운 배열을 반환합니다.
    • 배열 안의 배열이 아닌 요소 뒤에 배열의 구성요소가 계속 붙는 식.
let a = [1, 2, 3, 4];
b = a.concat([5, 6], 7, '가');
b; // [1, 2, 3, 4, 5, 6, 7, '가']

let num1 = [1, 2];
let num2 = [3];
let num = ['가', '나'];
num.concat(num1, num2); // ['가', '나', 1, 2, 3]
num1; // [1, 2]

Array.indexOf()

이 메서드는 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고, 존재하지 않으면 -1을 반환한다.

  • (변수 명).indexOf(찾고 싶은 요소, 검색을 시작할 부분)

    • 검색을 실행할 부분이 없을 땐, 배열 전체를 검색한다.
    • 시작할 색인이 배열의 길이와 같거나 크면 -1을 반환한다.
    • 값이 음수라면 뒤에서부터 배열 끝에서부터 오프셋값으로 실행된다. 하지만 검색은 앞에서부터 합니다.
    • 기본 값은 0이다.
    • 대소문자 구분을 꼭 해야 한다.
    • lastIndexOf는 뒤에서부터 검색한다.
let a = [1, 2, 3];
a.indexOf(1) //0
a.indexOf(2, 0) //1
a.lndexOf(2, -1) //-1
a.lndexOf(2, -3) // 1
a.indexOf(2, 9) // -1
a.indexOf(121221) // -1

let b = ['가나다라', '마바사아'];
b.indexOf('가나라다') // 0
b.indexOf('가') // -1
b[0].indexOf('가') // 0

비교연산자와 혼합 사용이 가능하다.

b.indexOf('가나다라') !== -1 //true
검사 결과가 -1이 아니라면 true를 반환하기 때문에 값은 true, -1이라면 false

매번 하기 지겹다면 함수로도 사용이 가능하다.

function hasElement(arr, element) {
  let isPresent = arr.indexOf(element) !== 1;
  return isPresent;

Array.includes()

이 메서드는 주어진 배열에서 특정한 값이 있는지, 없는지를 판단하여 true나 false로 반환합니다.

  • (배열 명).includes('찾고 싶은 단어',검색을 시작할 인덱스)

    • 대소문자를 구분합니다.
    • 검색을 시작할 인덱스가 같거나 크면 false를 반환합니다.
    • 검색을 시작할 인덱스가 음수라면 array.length + formIndex를 asc로 검색합니다. (쉽게 말해서 -1이면 인덱스 0까지만 가능하고, -5면 인덱스 0부터 4까지만 검색함)
    • 인터넷 익스플로러에서 호환이 되지 않아, 호환성 측면에서 indexOf가 낫다.
let words = ['내가', '언제', '그랬어'];
words.includes('내가'); // true
words.includes('내가', 0); // true
words.includes('내가', -1); // true
words.includes('그랬어', -2); // false
words.includes('그랬어' -7); // true
words.includes('내가', 100); //false

Array.join() - IMMUTABLE

이 메서드는 배열의 모든 요소들을 연결해 하나의 문자열로 만든다.

  • arr.join([separator])
    • 배열의 각 요소를 구분할 문자열을 지정한다.
    • 이 구분자는 필요할 경우, 문자열로 변환된다.
    • 생략한다면 배열의 요소들이 쉼표로 구분된다.
    • 빈 문자열이면 아무런 공백도 없이 전부 붙어서 나온다.
    • 만약 arr.length가 0이라면 빈 문자열을 반환한다.
let a = ['나는', '공부를', '좋아하지', '않습니다'];
a.join(); //'나는, 공부를, 좋아하지, 않습니다'
a.join(''); // '나는공부를좋아하지않습니다'
a.join('-'); // '나는-공부를-좋아하지-않습니다'
a.join(' '); // '나는 공부를 좋아하지 않습니다'
let b = [];
b.join(); // ''

Array.pop() - MUTABLE

이 메서드는 뒤에 있는 요소를 제거하고, 그 값을 반환함.

  • arr.pop()
    • 빈 배열일 경우 undefined를 반환함.
      arr = ['star' , 'heart' , 'rude' , 'carrot'];
word = arr.pop();
word; //carrot
arr; // ['star' , 'heart' , 'rude']

### Array.push() - MUTABLE
이 메서드는 하나 이상의 요소를 추가하고, 추가한 배열의 길이를 반환함.

* arr.push(element1[,element2[,..]])
  * 배열 안의 배열 추가가 가능하다.
  
```js
arr = [a, b];
total = arr.push(c, d)
arr; // [a, b, c, d]
total; //4

두 개의 배열을 합칠 땐 apply를 사용하라고 하는데...... concat이 더 좋지 않을까요.

Array.shift() - MUTABLE

pop이 뒤부터 삭제하는 메서드라면, 쉬프트는 앞에서부터 삭제한다. 이 메서드는 배열의 길이를 변화시킴. 인덱스가 하나씩 당겨진다. 제거된 값의 요소를 반환한다.

  • arr.shift()

    • 빈 배열일 경우 undefined를 반환함.

      arr = ['star' , 'heart' , 'rude' , 'carrot'];
word = arr.shift();
word; //star
arr; // ['heart' , 'rude', 'carrot'] (heart가 인덱스 0이 됨)

### Array.unshift - MUTABLE
push가 뒤에서 추가하는 메서드라면, 언쉬프트는 앞에서 추가한다. 이 메서드는 길이를 변화시킨다. 인덱스가 하나씩 밀린다. 추가된 배열의 길이를 반환한다.

* arr.unshift([...elementN])
  * 배열 안의 배열 추가가 가능하다.
  
```js
arr = ['강아지' , '고양이' , '사자'];
arr.unshift('곰','토끼'); // length 5
//arr = ['강아지' , '고양이', '사자', '곰', '토끼']
arr.unshift([개]); // length 6
//arr = ['강아지' , '고양이', '사자', '곰', '토끼', [개]]

Array.splice() - MUTABLE

이 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경함.

  • array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

    • start: 배열의 변경을 시작할 인덱스.
      배열의 길이보다 큰 값이면 배열의 길이로 설정된다. (0부터 끝까지)
      음수일 경우, 끝에서부터 요소를 세어나간다.
    • deleteCount: 배열에서 제거할 요소의 수.
      생략하거나 값이 array.length - start보다 크면 start부터 모든 요소를 제거한다.
      0이라면 어떤 요소도 제거하지 않는다.
    • item1, item2, ...
      배열에 추가할 요소. 아무 요소도 지정하지 않으면 splice()는 요소를 제거하기만 함.

    제거한 요소를 담은 배열을 반환한다. 하나의 요소만 제거한 경우 길이가 1인 배열을 반환하고, 아무 값도 없으면 빈 배열을 반환한다.

deleteCount를 사용할 시엔, start 인덱스부터 삭제가 된다. 그리고 그 자리에 채워진다.

삭제를 하지 않고 추가할 경우엔, start 인덱스와 이전 인덱스 사이에 추가된다.

let a = [1,2,3,4];
// 1. 제거 없이 추가
a.splice(3,0,5) //1,2,3,4,5

// 2. 제거
a.splice(4,1) // 1,2,3,4

// 3. 제거 후 추가
a.splice(0,2,'가','나'); // 3, 4, '가', '나'

// 4. 시작부터 끝까지 삭제
a.splice(1) // 3

a.splice(1,0,4,5,6,7) //3,4,5,6,7
//5. 시작 값이 음수일 때
a.splice(-3, 0, '나') // 3, 4, '나', 5, 6, 7
  • 모듈?
    순수한 자바스크립트에서는 모듈의 개념이 정확하게 있지는 않다. 코드의 재사용성과 유지 보수를 높이기 위해 모듈화라는 것을 하는데, 자주 쓰는 코드를 연관성이 있는 것들로 묶어서 파일로 만들고, 그 코드를 원하는 곳에 연결해서 사용할 수 있게 함.
profile
i do as i say
커신이 고칼로리
이전 포스트

[TWIL Jan/3week]

다음 포스트

[TIL 1/24]

0개의 댓글

관련 채용 정보