1-3 [메소드]_배열 다루기 (2)

[복습]

1. 배열(array vs object)

• 배열 : [ ]
• 객체 : { }

 

 

---

 

 

※ 주의 할 점

1. typeof(Arrray) = 'object' // typeof(object) = 'object'

let arr = [1, 2, 3, 4];

let obj = {name : 'Seoul', time : '2hour'};


console.log(typeof(arr)) //--> 'object'

console.log(typeof(obj)) //--> 'object'

//즉, typeof로는 array와 object가 구별 되지 않음


console.log(Array.isArray(arr)) //--> true

console.log(Array.isArray(obj)) //--> false

//array 판별은 Array.isArray 매소드를 통해 구분

 

Java Script에서는 특이하게도 객체도, 배열도 typeof를 사용했을 때 '객체(Object)'로 나온다.

무언가 엇비슷한 이 두 타입에 대해 페어분들과 논의를 해보았는데 찾아보니 typeof가 만들어졌을 때 각각의 타입에 대해 어떻게 반환할 지 정해진 테이블도 발견할 수 있었다.(아래 링크 참고) 요약하면 typeof에서 array도 object도 object로 리턴하게 지정되어 있기에 object가 나오는 것.

 

홍시를 넣었기에 홍시맛이 나는 것처럼 이는 그냥 받아들여야 하나보다.

이로 인해 정확히 배열인지 확인하기 위해서는 Array.isArray를 사용해야 한다.  

 

 

array vs object에 대한 논의는 다음 링크 (참고용)

출처 : 페어분 notion

=> https://www.notion.so/shbae/Javascript-Array-vs-Object-e7ff7dfd11934b4299f0cecb14327446

 

 

 

---

 

 

2. [] ===[] 혹은 {}==={}에 대한 논의

 

undefined나 NaN의 개념처럼 Java Script에는 특이한 개념들이 많이 있다. 

오늘 알게된 개념 중 하나가 [](빈 배열)이나 {}(빈 객체) 각각은 모양은 같아보이더라도 완전히 같은 데이터로 인식되지 않는다는 것이다. 그 이유는 []와 {}이 내부적으로 지정하는 주소값이 다르기 때문이다. 

 

때문에 조건문 등에서 빈 배열, 혹은 빈 객체인지를 확인하기 위해서는 length 매소드를 활용해야만 한다.

 

[] === []

//console.log([] === []) --> false


{} === {}

//console.log({} === {}) --> false

//Why? 각각의 배열 혹은 객체가 바라보는, 지정하는 주소값이 다르기 때문

 

※※ 빈 배열인지 확인할 때는 .length 활용하기

//예시) 
//조건1 숫자로만 이루어진 배열에서 100 이하인 요소만을 추출하여 배열로 반환하는 함수 만들기
//조건2 단, 빈 배열일 경우 빈배열로 반환
//조건3 배열이 아니면 빈배열로 반환

function sLessThan100(arr, key) {

  if(!Array.isArray(arr) || arr.length === 0){ 
  
  // arr === []로 입력할 경우 error
  
    return [];
    
  }
  
  return obj[key].filter(n => n <100)

 

 

 

 

 

 

---

 

 

 

 

2. 배열, 객체에 사용하는 매소드 활용 후 리뷰

• for : 배열에 사용/명확한 활용 방법, 개념 정리 필요
• for in : 객체에 사용
• for of : 반복가능한 객체(Array, String, Object 등등)에 대해서 사용이 가능. 
  
  • internet explorer에는 사용 불가
• arr.concat은 꾸준히 연습할 필요가 있음.
• arr.slice : start 인덱스와 end 인덱스를 기준으로 그 안의 배열을 새로운 배열에 복사하는 역할
  • arr.silce()는 array의 복사본 생성.

 

 

 

 

 

---

 

[매소드 복습]_함수형 매소드

1. array.filter

참고 :  https://www.youtube.com/watch?v=qmnH5MT_luk

 

1) 정의 : 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환

2) parameter :

• callback : 각 요소를 시험할 함수. true를 반환하면 요소를 유지하고, false를 반환하면 버립니다.
• element : 처리할 현재 요소. (콜백의 임의변수?)
• index (Optional) : 처리할 현재 요소의 인덱스.
• array (Optional) : filter를 호출한 배열.
• thisArg (Optional) : callback을 실행할 때 this로 사용하는 값.

3) return value : 새로운 배열 (immutable)

 

 

예시1)

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

 

 

예시2)

//array가 주어졌을 때, array의 요소중 discarder와 다른 요소만 반환하는 함수 생성


function removeElement(array, discarder) {

  return array.filter(function(el) {

    if (el !== discarder) { 

      return true

    }

    return false

  })
  
  console.log(removeElement(['1','3','5','3','2'],'3')
  //['1', '5', '2']

 

 

※ 점검이 필요한 개념

- callback이 무엇인가?

-  '=>' 는 무슨의미? 

 

 

 

---

 

2. array.reduce

- reducer는 뭐지?

- 정확히 무엇을 하는 매소드인지?

- accumulator(acc/누산기), currentValue(val,crr/현재값)

☆ 복습이 필요함.

 

//숫자로 이루어진 Array에서 가장 작은 숫자를 반환하는 함수 만들기
//단 빈 배열일 경우 0을 반환 

function findSmallestElement(arr) {

 if(arr.length === 0){ 
  //여기서 arr ===[]을 입력해서는 안됨. 
  //1번 참고 or reduce는 빈배열에서는 작동하지 않으므로 오류가 남.
    
   return 0
  }

  return arr.reduce(function(acc,crr){

      if(acc < crr){

      return acc;

      } return crr;

   })

}