본문 바로가기
Archive

자바스크립트 배열과 객체

by livemehere 2022. 8. 30.

자바스크립트에서 배열은 객체이다.

조금 튼별한 객체여서, 다양한 메서드를 제공하고, key가 숫자이고 연속된다는 점과, length 프로퍼티를 가진다는 점이 다르다.

그래서 객체에서 사용하는 모든 것들을 사용할 수가 있었다.

특히나 신기했던게 

let arr = ["I", "go", "home"];

delete arr[1]; // "go"를 삭제합니다.

console.log(arr); // ['I', empty, 'home']

이 delete 문법이 통한다는거였다.

그런데 정확히 삭제하는게 아니라, empty 로 바꿔버린다는점에서 사실 실용적이진 않다. length 도 그대로유지된다.

실용적이지 못한게아니라, 의도한 바가 아니라면 배열의 요소를 지우는데에 적합하지 않다.

 

sort()

배열에 관련된 메서드는 너무많고, 그만큼 사용빈도가 높아서 정리할게 그렇게 많짆않지만, sort는 짚고넘어가고싶었다.

아는듯 모르는듯 가끔 헤깔릴때가 있었다.

 

이제 흔히 sort()는 문자열을 기준으로 정렬한다는 점은 익히아는데, 내가 실수하는 부분이있다.

바로 문자열에 - 연산을 해버리는 경우다.

 

 

sort는 반환값이 0 , 음수 ,양수 에 따라서 정렬할 방식이 정해지는데, 습관적으로 리턴값을 a,b의 차로 내보내다보니 문자열을 빼고있는 내모습을 발견한다..

문자열은 비교하고 직접 리턴해줘야한다

function compare(a, b) {
  if (a > b) return 1; // 첫 번째 값이 두 번째 값보다 큰 경우
  if (a == b) return 0; // 두 값이 같은 경우
  if (a < b) return -1; //  첫 번째 값이 두 번째 값보다 작은 경우
}

 

짧게하면 이렇게

countries.sort( (a, b) => a > b ? 1 : -1)

Array.isArray

아래의 결관는 number 입니다.

console.log(typeof NaN);

사실 넘버는 맞는데, 상식적으로는 아니다 라고 생각합니다.

 

이처럼 자바스크립트에서는 number라는 자료형중에 NaN, Infinity 를 구별하기위한 메서드를 제공하듣

배열도 type은 객체이기 때문에, 별도로 식별할 방법이없다.

정확히 배열인지 알아내려면 Array.isArray()를 활용하면된다.

alert(Array.isArray({})); // false

alert(Array.isArray([])); // true

thisArg

find,filter,map 등의 대부분의 배열 메서드에서는 인자중 thisArg라는것을 받아서 컨텍스트 정보를 넘길 수 있다.

아래처럼 객체에서 this를 사용한다면 두번째인자로 this가 지정될 context를 넘겨준다.

let army = {
  minAge: 18,
  maxAge: 27,
  canJoin(user) {
    return user.age >= this.minAge && user.age < this.maxAge;
  }
};

let users = [
  {age: 16},
  {age: 20},
  {age: 23},
  {age: 30}
];

// army.canJoin 호출 시 참을 반환해주는 user를 찾음
let soldiers = users.filter(army.canJoin, army);

users.filter(user => army.canJoin(user))

아니면 마지막줄과 같은 방법을 사용할 수 도있다.

 

 

배열은 워낙 자주쓰다보니, 익숙한부분이 많았다.

그래도 thisArg는 처음알았는데, 이것도 거의 두번째방식을 사용하다보니 쓸일이 없을거같긴하다.

반응형

'Archive' 카테고리의 다른 글

{}의 원래목적 과 비구조분해 할당  (0) 2022.08.30
map과 객체  (0) 2022.08.30
자바스크립트 문자열  (0) 2022.08.29
자바스크립트에서 숫자  (0) 2022.08.29
원시값의 메서드  (0) 2022.08.29