[javascript] 자주쓰는 javascript 함수 10가지

자주 사용하는 javascript 함수 10가지를 소개합니다.

 

 

1. split()

split() 메서드는 String 객체를 지정한 구분자를 이용하여 여러 개의 문자열로 나눕니다.

var text = "Hello! world Javascript!";
var splits = text.split(" ");

console.log(splits);

// ["Hello!", "world", "Javascript!"]

 

 

 

2. indexOf()

indexOf() 메서드는 호출한 String 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환합니다. 

일치하는 값이 없으면 -1을 반환합니다.

'Blue Cloud'.indexOf('Blue');     // returns  0
'Blue Cloud'.indexOf('Blute');    // returns -1
'Blue Cloud'.indexOf('Cloud', 0); // returns  5
'Blue Cloud'.indexOf('Cloud', 5); // returns  5
'Blue Cloud'.indexOf('Cloud', 7); // returns -1
'Blue Cloud'.indexOf('');         // returns  0
'Blue Cloud'.indexOf('', 9);      // returns  9
'Blue Cloud'.indexOf('', 10);     // returns 10
'Blue Cloud'.indexOf('', 11);     // returns 10

 

 

 

3. find()

find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다.

그런 요소가 없다면 undefined를 반환합니다.

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

const found = array1.find(element => element > 10);

console.log(found);
// expected output: 12

 

 

 

4. filter()

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

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

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

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

 

 

 

5. map()

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

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

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

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

 

 

 

6. reduce()

reduce() 메서드는 배열의 각 요소에 대해 주어진 reducer 함수를 실행하고, 하나의 결과값을 반환합니다.

const array1 = [1, 2, 3, 4];

const initialValue = 0;
const sumWithInitial = array1.reduce(
  // 0 + 1 + 2 + 3 + 4
  (previousValue, currentValue) => previousValue + currentValue,
  initialValue
);

console.log(sumWithInitial);
// 10

 

 

 

7. join()

join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// "Fire,Air,Water"

console.log(elements.join(''));
// "FireAirWater"

console.log(elements.join('-'));
// "Fire-Air-Water"

 

 

 

8. splice()

splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb'); // inserts at index 1
console.log(months);
// Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May'); // replaces 1 element at index 4
console.log(months);
// Array ["Jan", "Feb", "March", "April", "May"]

 

 

 

9. sort()

sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다. 

정렬은 stable sort가 아닐 수 있습니다. 

기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다.

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

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

 

 

 

10. reverse()

reverse() 메서드는 배열의 순서를 반전합니다. 

첫 번째 요소는 마지막 요소가 되며 마지막 요소는 첫 번째 요소가 됩니다.

const array1 = ['one', 'two', 'three'];
console.log('array1:', array1);
// "array1:" Array ["one", "two", "three"]

const reversed = array1.reverse();
console.log('reversed:', reversed);
// "reversed:" Array ["three", "two", "one"]

 

 

 

 

 

끝.

 

 

#자바스크립트 #javascript #split #indexOf #find #filter #reduce #join #splice #sort #reverse #map #함수 #function