[JavaScript] 배열의 기본 메서드 1 - 특정 값 반환

Rachaen·2023년 3월 14일

1. (정적) isArray

  • 배열인지 여부를 반환
console.log(
  Array.isArray([1, 2, 3]),	
  Array.isArray('123'),
  Array.isArray('123'.split(''))
);	// true false true

instanceof Array와의 차이

const arrays = [
  [], [1, 2, 3], new Array(),
  // ⚠️ instanceof에서는 결과가 다름
  Array.prototype // 배열임 => 얘만 결과가 다름
];

const notArrays = [
  1, 'abc', true, null, {}
];

for (const item of arrays) {
  console.log(
    item,
    Array.isArray(item),
    item instanceof Array
  );
}
// [] true true
// [1, 2, 3] true true
// [] true true
// true false
for (const item of notArrays) {
  console.log(
    item,
    Array.isArray(item),
    item instanceof Array
  );
}
// 전부 false

MDM instanceof vs isArray

2. at

  • 주어진 인자를 인덱스로 값을 반환
  • 음수를 사용하여 뒤에서부터 접근 가능
const arr = [
  '한놈', '두시기', '석삼', '너구리', '오징어'
];

console.log(
  arr.at(1), arr.at(2)	
);	// 두시기 석삼
console.log(
  arr.at(-1), arr.at(-2)
);	// 오징어 너구리

3. includes

  • 인자로 주어진 요소 유무 확인
const arr = [1, 2, 3, 'abc', true];

console.log(
  arr.includes(2),
  arr.includes('abc'),
  arr.includes(true),
);	// true true true
console.log(
  arr.includes(4),
  arr.includes('가나다'),
  arr.includes(false)
);	// false false false
  • 참조형 데이터의 경우
const obj1 = { x: 1, y: 2 };
const obj2 = { x: 1, y: 2 };

const arr = [
  obj1,
  { x: 3, y: 4 }
];

console.log(
  arr.includes(obj1),
  arr.includes(obj2),	// 내용이 같긴 하지만 주소가 다름
  arr.includes({ x: 1, y: 2 }),	// 붕 떠있는 객체를 가리킴
  arr.includes({ x: 3, y: 4 })
);	// true false false false

4. indexOf, lastIndexOf

  • 앞/뒤에서 첫 번쨰 값의 인덱스 반환
  • 없을 시 -1 반환
const arr = [1, 2, 3, 2, 1];

console.log(
  arr.indexOf(2),
  arr.lastIndexOf(2),
  arr.indexOf(4)
);	// 1 3 -1

5. join

  • 인자로 주어진 값으로 구분하여 요소들을 문자열로 연결하여 반환
const arr1 = ['a', 'b', 'c', 'd', 'e'];
const arr2 = [
  1, true, null, undefined, '가나다', { x: 0 }, [1, 2, 3]
];
console.log(
  arr1.join() // 인자가 없다면 쉼표`,`로
);	// a,b,c,d,e
console.log(
  arr1.join('')
);	// abcde
console.log(
  arr1.join(' ')
);	// a b c d e
console.log(
  arr2.join(':')
);	// 1:true:::가나다:[object Object]:1,2,3
console.log(
  classIntro(3, '김민지', '영희', '철수', '보라')
); // 호이스팅

function classIntro (classNo, teacher, ...children) {
  return `${classNo}반의 선생님은 ${teacher}, `
    + `학생들은 ${children.join(', ')}입니다.`
}
profile
개발을 잘하자!

0개의 댓글