자주 사용되는 자바스크립트 메서드

split()

하나의 문자열을 받은 인자 기준으로 나누어 배열로 반환한다.
원본 문자열을 바꾸지 아니함.(비파괴적 메서드)

const str = "혹시 무한도전 아세요? 무야호!";

console.log(str.split());
// expected output: [ '혹시 무한도전 아세요? 무야호!' ]

console.log(str.split(''));
// expected output: [ '혹', '시', ' ', '무', '한', '도', '전', ' ', '아', '세', '요', '?', ' ', '무', '야', '호', '!' ]

console.log(str.split(' '));
// expected output: [ '혹시', '무한도전', '아세요?', '무야호!' ]

console.log(str.split(' ', 1));
// expected output: [ '혹시', '무한도전', '아세요?', '무야호!' ]
// 선택사항인 두 번째 인자로 limit을 받아 배열의 원소가 limit개가 되면 멈춘다.

join()

배열의 모든 요소를 연결해 하나의 문자열로 만들어 반환한다.
원본 배열을 바꾸지 아니함.(비파괴적 메서드)

const arr = ['무', '야', '호'];

console.log(arr.join());
// expected output: "무,야,호"
// 인자에 아무것도 입력하지 않으면 "," 가 기본값으로 들어간다.

console.log(arr.join(''));
// expected output: "무야호"

console.log(arr.join('-'));
// expected output: "무-야-호"

forEach()

주어진 함수(콜백 함수)를 배열 요소 각각에 대해 실행한다.

const array1 = ['무', '야', '호'];

array1.forEach(element => console.log(element));

// expected output: "무"
// expected output: "야"
// expected output: "호"

map()

배열 내의 모든 요소 각각에 대하여 주어진 함수(콜백 함수)를 호출한 결과를 모아 새로운 배열을 반환한다.

구문

arr.map(callback(currentValue[, index[, array]])[, thisArg])

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

find() 와 findIndex()

find()메서드는 주어진 판별 함수(콜백 함수)를 만족하는 첫 번째 요소의 값을 반환한다. 그런 요소가 없다면 undefined를 반환한다.
findIndex()는 find()와 비슷하지만 만족하는 값의 인덱스를 반환하고 만족하는 요소가 없다면 -1을 반환한다.

const array1 = [5, 12, 8, 130, 44];

const found1 = array1.find(element => element > 10);
const found2 = array1.find(element => element < 1);

console.log(found1); // expected output: 12
console.log(found2); // expected output: undefined

const foundIndex1 = array1.findIndex(element => element === 8);
const foundIndex2 = array1.findIndex(element => element === 1);

console.log(foundIndex1) // expected output: 2
console.log(foundIndex2) // expected output: -1

filter()

주어진 함수(콜백 함수)의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.

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"]

reverse()

배열의 순서를 반전시킨다. 첫 번째 요소는 마지막 요소가 되며 마지막 요소는 첫 번째 요소가 된다.
원본 배열을 바꾸는 파괴적 메서드이다.

const array1 = ['무', '야', '호'];
console.log('array1:', array1);
// expected output: 'array1:' [ '무', '야', '호' ]

const reversed = array1.reverse();
console.log('reversed:', reversed);
// expected output: 'reversed:' [ '호', '야', '무' ]

// Careful: reverse is destructive -- it changes the original array.
console.log('array1:', array1);
// expected output: 'array1:' [ '호', '야', '무' ]

splice()

배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다.
원본 배열이 바뀌는 파괴적 메서드이다.

const array = ['무', '야', '호'];
array.splice(1, 0, '한'); // 인덱스 1에 0개의 요소를 지우고 '한' 요소를 넣는다.
console.log(array); // [ '무', '한', '야', '호' ]

array.splice(2, 2, '도전') // 인덱스 2에 2개의 요소를 지우고 '도전' 요소를 넣는다.
console.log(array); // [ '무', '한', '도전' ]

slice()

어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환한다.
원본 배열은 바뀌지 않는 비파괴적 메서드이다.

const array = ['무', '야', '호'];

console.log(array.slice(1)) // [ '야', '호' ]

console.log(array.slice(1, 2)) // [ '야' ]

console.log(array.slice(0, 2)) // [ '무', '야' ]

console.log(array.slice(-2)) // [ '야', '호' ]

console.log(array.slice(-2, 2)) // [ '야' ]

sort()

배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다. 정렬은 stable sort가 아닐 수 있다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따른다.
원본 배열이 바뀌는 파괴적 메서드이다.

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// expected output: Array [1, 100000, 21, 30, 4]

array1.sort((a, b) => a - b);
// expected output: Array [ 1, 4, 21, 30, 100000 ]

concat()

인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환한다.
원본 배열을 바꾸지 않는 비파괴적 메서드이다.

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]

const array4 = ['g', 'h', 'i'];

// 동시에 3개 붙이기
array1.concat(array2, array4)
// exppected output: Array [ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i' ]

push()

배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환한다.
원본 배열을 바꾸므로 파괴적 메서드이다.

const animals = ['pigs', 'goats', 'sheep'];

const count = animals.push('cows');
console.log(count);
// expected output: 4
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows"]

animals.push('chickens', 'cats', 'dogs');
// expected output: 7
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]

pop()

배열에서 마지막 요소를 제거하고 그 요소를 반환합니다.
원본 배열을 바꾸므로 파괴적 메서드이다.

const array = ['무', '야', '호', '우'];

console.log(array.pop());
// expected output: "우"

console.log(array);
// expected output: Array [ '무', '야', '호' ]

array.pop();
// expected output: "호"

console.log(array);
// expected output: Array [ '무', '야' ]

shift()

배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다. 이 메서드는 배열의 길이를 변하게 한다.
원본 배열을 바꾸므로 파괴적 메서드이다.

const array = ['무', '야', '호', '우'];

console.log(array.shift());
// expected output: '무'

console.log(array);
// expected output: Array [ '야', '호', '우' ]

unshift()

새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환한다.
원본 배열을 바꾸므로 파괴적 메서드이다.

const array = ['무', '야', '호', '우'];

array.unshift();
// expected output: 4

array.unshift('무한도전');
// expected output: 5

console.log(array);
// expected output: Array [ '무한도전', '무', '야', '호', '우' ]

참조

https://developer.mozilla.org/ko/

#TIL30, Javascript 자주 사용하는 배열 method

HTML data attribute(데이터 속성)

• 의미론적 HTML 요소에 추가 정보를 저장할 수 있게 해준다.
• data-로 시작하여 무엇이든 사용할 수 있다.
• 자바스크립트와 css로 특정 요소에 접근할 수 있다.
  - 자바스크립트에서 dataset으로 접근할 수 있다.
  - css에서 아래와 같이 접근할 수 있다.
  

<h1 data-hi="hello">안녕하세요</h1>

const h1 = document.querySelector("h1");
console.log(h1.dataset.hi); // hello

h1.dataset.hello = "hi";
console.log(h1); // <h1> data-hi="hello" data-hello="hi">안녕하세요</h1>

h1[data-hi="hello"] {
  background-color: blue;
}

마무리

오늘의 뽀모도로
20뽀모도로 : 8.3h