2020.06.18 [TIL] 배열 다루기 - 불변성 유지하기

Lesson - 배열 판별하기 ( Array.isArray)

 

Let words = [‘피’, ‘땀’, ‘눈물’].  Array? - 

 

Typeof ? - 

 

Typeof ‘ 문자열’ //  “string”

 

이게 array인지 object인지 몰라서 다른방법을 써야한다.

Array.isArray(words) // true -  배열이기때문에 참값이된다. method이기때문에 괄호를 넣어준다.

마찬가지로 ([1,2,3,]) 라고 적어도 직접배열을 넣어도 참값이된다. 

배열이들어가면 다 참값이 된다 인풋은 어떠한 오브젝트라도 상관없다. 

검사하고싶은 객체를 참값인지 거짓인지 아는거니까 상관없다.

 

Element 의 존재 여부 확인하기

indexOf, includes

예시를 보면

let words = ['Radagase', 'the', ' Brown']

이단어라는것이 워즈안에 들ㅇ잇는 지 궁금한것이다.

word.indexOf('the');

1 이 나오는데 이게 뭘까 ? 배열에 들어있는 index 값이다 .

확인하려면

word.indexOf('Brown')

2 이라고 나온다.

그렇다면 없는 엘리먼트를 넣는다면 어떻게 될까?

word.indexOf('없는단어')

-1 나온다 -1 은 없는단어!!!  없으면은 -1이나온다는것을 알수있다.

 

이 어레이에 배열이 있는지 없는지 알려면 어떻게 알아야될까요?

 

word.indexOf('Brown') !== -1 // ture

 

word.indexOf('없는단어') !== -1 // false

 

words. indexOf('brown') // -1  소문자로된 brown 은 없다라는것을 알게된다.

항상 대소문자를 잘구분해서 검사를 해줘야한다,

 

배열에서 특정한값을 찾고자할때 indexOf라는 것을 이용하여 사용한다.

존재여부 확인을 위한 -1이 나오는지 확인하는 것이다. -1 로 보는것이 싫다라고하면

유틸리티를 만든다.

-1 없는것에 대한 결과이기 떄문이다.

항상 -1로 낫이콜로 비교하기가 싫으면 유틸리티 함수를 만들 수 있다.

 

배수의 엘리먼트 

 

이친구는 특정한 배열에 어떠한 찾고자 하는 엘리먼트가 있는지 없는지를 트루나 펄스로 반환해주는녀석이다.

 

function hasElement(배열, 찾으려는 엘리먼트) // true or false

function isPresent = hasElement(arr, element) {

arr.indexOf(element) ! == -1 ;

return isPresent;

}

undefined

hasElement (words, 'Brown') // true

hasElement (words, '없는것') // false

사실 우리가 hasElement라는 유틸리티 함수를 만들었지만 기본적으로내장된 메소드가있다.

 

words.includes('Brown') // true 

words.includes('없는것') // false 

찾지않고 includes으로도 가능하다.

 

꼭 하나만 알아야한다면 indexof를 아는게 좋다.

그 이유는 인덱스 정보까지 알수있기때문에 더 유용하고 범용성이 높다

includes는 치명적 결함이있는데 브라우저 호환성에서 인터넷 익스플로어에서는 지원을 해주지않기떄문에 결함이있다.

 

배열에 엘리먼트 넣고 빼기 (push, pop, shift, unshift) 

 

let arr = ['code', 'states']

undefined

 

console.log 가 아닌 console.table(arr) 로 치면

인덱스와 벨류가 다 보인다  - 이걸로 소개해본다.

 

arr.push('pre')

3

console.table(arr) - 추가되어있는것이 보여진다.

 

arr.pop()

"pre"

console.table(Arr)하고

console.table(arr)  -추가 되었던것이 삭제된 모습이 보일것이다.

앞에다가 추가하고 삭제하는것이 있겠죠 ? 

인덱스 0번 삭제한다고했을때

 

arr.shift()

"code"

console.table 입력하면 앞에있는 것이 삭제되었죠 ? 

 

앞쪽앞에 추가하는것은

arr.unshift(creative')

2라는 결과 - length 2개로 나오는것

그후 

console.table(arr) 하고나면

0번쨰에 추가되는것이 보일것이다.

 

정리하자면

// 1. 뒤에 element 추가 : push

// 2. 뒤에 element 삭제 : pop

// 3. 앞의 element 추가 : unshift

//4. 앞의 element 삭제 : shift

 

// addToFront

// addToBack

// removeFromFront

// removeFromBack 을 풀수있겠다.