JavaScript 13장 - 개념짚기 (7)

JavaScript

배열

splice(n,m)

• n부터 m개만큼 특정 요소를 지운다.
• 세 번째 인수는 옵션이지만 특정 요소를 추가할 때 사용할 수 있다.

let str = ["a", "b", "c", "d", "e", "f"];
str.splice(0, 1); // bcdef

let arr = [1, 2, 3, 4, 5];
arr.splice(1, 3, 100, 200); // [1, 100, 200, 5]

let add = [1, 2, 3, 4, 5];
add.splice(1, 0, 100, 200); // [1, 100, 200, 2, 3, 4, 5]

• 또한 삭제된 요소를 반환하는데 사용된다.

let str = [1, 2, 3, 4, 5];
let result = str.splice(1, 2); // [2,3]

slice(n,m)

• splice와 비슷하지만 n부터 m까지 반환한다.
• 아무런 숫자도 입력하지 않을 시, 배열 전체를 반환한다.

let str = [1, 2, 3, 4, 5];
str.slice(); // [1,2,3,4,5]
str.slice(0, 3); // [1,2,3,4]

concat(arr, arr1)

• 배열을 합쳐서 새로운 배열을 반환한다.

let str = [1, 2];
let str1 = [3, 4];
let str2 = [5, 6];

let result = str.concat(str1, str2); // [1,2,3,4,5,6]
str.concat([3, 4]); // [1,2,3,4]
str.concat(5, 6); // [1,2,3,4,5,6]

forEach(fn)

• 배열을 반복할 때 사용되며, 첫 번째 인수는 배열의 각 요소들, 두 번째 인수는 인덱스, 세 번째 인수는 배열 자체를 의미한다.
• 보통 2가지 인수만 사용한다.

let users = ["Mike", "John", "Tom"];

user.forEach((name, idx, arr) => {
  console.log(`${idx + 1}. ${name}`);
});
// 1. Mike
// 2. John
// 3. Tom

indexOf, lastIndexOf

• 문자열의 indexOf와 동일하게 사용된다.
• 배열 안의 찾고자 하는 요소를 찾아주며, 두 가지 인수가 올 때에는 두 번째 인수는 시작 위치를 나타낸다.

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

arr.indexOf(3); // 2
arr.indexOf(3, 3); // 7 인덱스 3부터 탐색

• 끝에서부터 탐색하고자 하면 lastIndexOf를 사용한다.

arr.lastIndexOf(3); // 7

includes()

• 배열 내에 포함하고 있는지에 대한 여부를 나타낸다.

let arr = [1, 2, 3];

arr.includes(3); // true
arr.includes(4); // false

find(fn) , findIndex(fn)

• indexOf처럼 찾는다는 의미는 동일하지만 보다 복잡한 연산이 가능하도록 함수를 전달할 수 있다.
• 첫 번째 true값만 찾고 종료되며, 없을 시 undefined를 반환한다.
• findIndex(fn)는 인덱스를 찾아낸다.

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

let result = arr.find((item) => {
  return item % 2 === 0;
});

console.log(result); // 2
// 첫 번째인 2만 반환하고 종료된다.

let users = [
  { name: "Mike", age: 20 },
  { name: "Jane", age: 10 },
  { name: "John", age: 30 },
];

let result = users.find((user) => {
  if (user.age < 19) return true;
  return false;
});

let idxResult = result.findIndex((user) => {
  if (user.age < 19) return true;
  return false;
});
console.log(result); // {name: "Jane", age: 10}
console.log(idxResult); // 2

filter(fn)

• find와 달리, 조건을 만족하는 모든 요소를 찾아낼 때 사용한다.
• 만족하는 요소들을 찾아서 새로운 배열로 만들어준다.

let arr = [1, 2, 3, 4, 5, 6, 7];

let result = arr.filter((num) => {
  return num % 2 === 0;
});

console.log(result); // [2,4,6]

reverse()

• 배열을 역순으로 재정렬한다.
• 최근 가입된 유저를 보여준다거나, 최근 작성된 글을 보여줄 때 주로 사용된다.

let arr = [1, 2, 3];

arr.reverse(); // [3,2,1]

map()

• 함수를 받아 특정 기능을 시행하고 새로운 배열을 반환한다.

let users = [
  { name: "Mike", age: 20 },
  { name: "John", age: 17 },
  { name: "Jane", age: 21 },
];

let result = users.map((user, idx) => {
  return Object.assign({}, user, {
    isAdult: user.age > 19,
  });
});

console.log(result); //[{name: "Mike", age: 20, isAdult: true},{name: "Jogn", age: 17, isAdult: false},{name: "Jane", age: 21, isAdult: true}]

join, split

• join은 배열을 합쳐서 문자열을 만들 때 사용하고, split은 문자열을 나눠 배열을 만들 때 사용한다.
• join과 split 모두 함수에 전달되는 인자를 기준으로 합지고 나눌 수 있다.

let str = ["나는", "코딩을", "한다."];

let result = str.join();
let result2 = str.join(" ");
console.log(result); // 나는코딩을한다.
console.log(result2); // 나는 코딩을 한다.

let words = "나는 코딩을 한다.";

let result3 = words.split("");
let result3 = words.split(" ");
console.log(result3); // ["나","는","코","딩","을","한","다","."]
console.log(result4); // ["나는","코딩을","한다."]

isArray

• 배열인지 아닌지 확인할 때 사용하며, 자바스크립트에서 배열은 객체이기 때문에 typeof를 사용 시 객체라고 알려준다.

let user = {};
let userList = [];

console.log(typeof user); // object
console.log(typeof userList); // object

console.log(Array.isArray(user)); // false
console.log(Array.isArray(userList)); // true