JS 함수 Refernce

SeungWoo Yoo ·2023년 2월 7일
Cheat Sheet알고리즘

Cheat-Sheet

목록 보기
2/3

1. Math

1.1 Math.floor(내림,바닥)

  • MDN Math.floor
  • 바닥, 내림 함수
  • 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환
console.log(Math.floor(5.95)); // 5
console.log(Math.floor(5.05)); // 5
console.log(Math.floor(5)); // 5
console.log(Math.floor(-5.05)); // -6

1.2 Math.ceil (올림, 천장)

  • MDN Math.ceil
  • 주어진 숫자보다 크거나 같은 숫자 중 가장 작은 숫자를 integer 로 반환
Math.ceil(.95);    // 1
Math.ceil(4);      // 4
Math.ceil(7.004);  // 8
Math.ceil(-0.95);  // -0
Math.ceil(-4);     // -4
Math.ceil(-7.004); // -7

2. Array.prototype

2.1 map (사상,대응)

  • MDN Array.prototype.map()
  • map(맵)의 사전적 의미
    • 지구 표면의 전부나 일부를 일정한 비율로 줄여 약속된 기호를 사용하여 평면에 그린 그림
    • 어떤 사실이나 주어진 자료 등을 분석하여 그 관계를 알기 쉽게 나타낸 표.
    • 『물리』 물체에서 나온 빛이 거울에 반사 또는 굴절된 다음에 모여서 생기는 상
    • 『수학』 어떤 집합의 임의의 원소가 다른 집합의 하나의 원소에 대응할 때, 그 두 집합 간의 대응 관계
  • mapping는 ’지도를 만든다‘는 뜻이지만, 메모리 맵(memory map)을 제작하는 것을 말함.
    • 컴퓨터를 사용해 지도 데이터를 작성하는 일을 말하거나
    • 롤플레잉 게임 등의 배경이 되는 미로나 지도를 플레이어가 작성하는 것도
    • 사상(mapping, 베낄 사, 모양 상)이라고 함
const array1 = [1, 4, 9, 16];
const map1 = array1.map((x) => x * 2);

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

2.2 sort (정렬)

  • MDN Array.prototype.sort()
  • 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다.
  • 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다.
  • 문자열 배열인 경우 알파벳순으로 정렬 (첫글자 기준, A~Z)
  • 숫자를 문자열로 정렬하면 "2"가 "1"보다 크므로 "25"가 "100"보다 큼
    • 때문에 숫자를 정렬할 때 잘못된 결과를 생성
    • 비교 기능을 제공하여 이 문제를 해결 가능

2.2.1 오른차순 정렬

array.sort(function(a, b){return a - b}); // 오름차순
array.sort((a, b) => a - b)
  • 함수는 두 값을 비교할 때 sort()값을 비교 함수로 보내고 반환된(음수, 0, 양수) 값에 따라 값을 정렬합니다.
    • 음수면, b 앞에 정렬된다.
    • 양수면, a 앞에 정렬된다.
    • 결과가 0이면 두 값의 정렬 순서가 변경되지 않습니다.

2.2.2 내림차순 정렬

  • 40과 100을 비교할 떄, (40, 100)
  • (a - b)일 떄 (40 - 100)을 계산하면 결과가 음수(-60)이므로
  • sort()는 40을 100보다 작은 값으로 정렬
array.sort((a, b) => b - a) // 내림차순

2.3 filter (거르다)

  • MDN filter
  • 주어진 배열을 순회하면서 콜백 함수의 반환값이 true에 해당하는 요소로만 구성된 새로운 배열을 생성하여 반환.
  • 한마디로 find()의 찾아서 값을 반환하는 기능과 map()의 배열 생성 기능의 융합 버젼.
const numberArr = [1, 2, 3, 4, 5];

const numberFilterArr = numberArr.filter((item) => {
  return item % 2 === 0; // 해당조건에 부합으면 item을 넣어 배열 반환
});

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

2.4 reduce (줄이다)

  • MDN reduce
  • 배열을 순회하면서, callback 함수를 실행하고, 하나의 리턴 값을 반환하는 함수
  • 누적 계산의 결과 값 반환
  • 누산기 (acc), 현재 값 (cur), 현재 인덱스 (idx), 원본 배열 (src) 4개의 매개변수를 가짐
  • 누산기(accumulator) = 계산 결과를 저장해놓는 곳 = 연산 장치에 일시적으로 저장하는 레지스터 = 묶을 누, 셈 산, 그릇 기
const arr = [1, 2, 3, 4, 5];
const result = arr.reduce((acc, cur) => {
  return (acc += cur);
}, 0);
console.log(result); // 15

const arr2 = [1, 2, 3, 4, 5];
const result2 = arr2.reduce((acc, cur) => {
  return (acc += cur);
}, 10);
console.log(result2); // 25

2.5 split (나눈다)

  • MDN String.prototype.split
  • e.g. 롤에서 ‘스플릿 푸쉬’(분열되서 나눠서 라인을 민다)
  • String 객체를 구분자를 이용하여 여러 개의 문자열로 나눔
const str = 'The quick brown fox jumps over the lazy dog.';

const words = str.split(' ');
console.log(words[3]); // "fox"

const chars = str.split('');
console.log(chars[8]); // "k"

const strCopy = str.split();
console.log(strCopy); // Array ["The quick brown fox jumps over the lazy dog."]

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

2.8 slice (잘라내기)

  • MDN Array.prototype.slice()
  • 어떤 배열의 begin 인덱스부터 end 인덱스까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다.
  • 원본 배열은 바뀌지 않습니다.
// slice(시작인덱스, end인덱스-미포함)
const fruits = ['🍎', '🍓', '🍌', '🍊', '🍇'];

// 2번 인덱스부터
console.log(fruits.slice(2)); // [ '🍌', '🍊', '🍇' ]

// 2번 인덱스부터 4번 인덱스 이전까지
console.log(fruits.slice(2, 4)); // [ '🍌', '🍊' ]

// 1번 인덱스부터 5번 인덱스 이전까지
console.log(fruits.slice(1, 5)); // [ '🍓', '🍌', '🍊', '🍇' ]

// 뒤에서 2 인덱스까지
console.log(fruits.slice(-2)); // [ '🍊', '🍇' ]

// 2번 인덱스부터 뒤에서 1 인덱스까지
console.log(fruits.slice(2, -1)); // [ '🍌', '🍊' ]

console.log(fruits.slice()); // [ '🍎', '🍓', '🍌', '🍊', '🍇' ]

2.9 splice (붙이다)

  • MDN Array.prototype.splice()
  • 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경
// array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
// 📌 splice(시작인덱스, 제거할 요소의 수, 배열에 추가할 요소)
// - deleteCount : 0 이하라면 어떤 요소도 제거X (optional)
// - item1, item2, ... : 배열에 추가할 요소를 생략하면 제거만 수행 (optional)
const months = ['Jan', 'March', 'April', 'June'];

months.splice(1, 0, 'Feb'); // 1번 인덱스에 삽입
console.log(months); // [ 'Jan', 'Feb', 'March', 'April', 'June' ]

months.splice(4, 1, 'May'); // 4번 인덱스에 1개 요소 대체
console.log(months); // [ 'Jan', 'Feb', 'March', 'April', 'May' ]

2.10 Array.from

  • MDN Array.from()
  • 문자열 등 유사 배열(Array-like) 객체나 이터러블한 객체를 배열로 만들어주는 메서드
  • 유사 배열 객체란, 키가 인덱스 값으로 되어있고 길이를 나타내는 length 속성을 갖는 객체를 의미
// 1. 문자열을 배열로 만드는 예시
console.log(Array.from("Hello"));
// [ 'H', 'e', 'l', 'l', 'o' ]

// 2. 유사 배열 객체를 배열로 만드는 예시
console.log(Array.from({ 0: "찬민", 1: "희진", 2: "태인", length: 3 }));
// [ '찬민', '희진', '태인' ]

// 3. 함수의 매개변수들을 순서대로 배열로 만드는 예시
const funcA = (...arguments) => {
    return Array.from(arguments)
}
console.log(funcA(1,2,3,4,5));
// [ 1, 2, 3, 4, 5 ]

Array.from() 의 첫 번째 인자는 배열로 만들 이터러블한 객체가 되며, 두 번째 인자는 생성한 배열의 모든 원소에 대해 수행할 맵핑 함수입니다. (Array.map() 이라고 생각하시면 됩니다.)

한번 Array.from()과 반복문을 활용해 1부터 31까지의 수를 원소로 갖는 배열을 생성해 보겠습니다.

// 맵핑 함수의 첫 번째 인자 언더스코어(_) 는 특별한 인자가 아니라,
// 불필요한 인자의 공간을 채우기 위한 용도입니다.
const arr = Array.from(Array(31), (_, index) => index + 1);

console.log(arr);

2.11 includes (포함되다)

  • MDN Array.prototype.includes()
  • 배열이 특정 요소를 포함하고 있는지 판별
  • 문자나 문자열을 비교할 때, 대소문자 구분함
const array1 = [1, 2, 3];
console.log(array1.includes(2)); // true

const pets = ['cat', 'dog', 'bat'];
console.log(pets.includes('cat')); // true
console.log(pets.includes('at')); // false

2.12 indexOf

  • MDN Array.prototype.indexOf()
  • 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환
// arr.indexOf(searchElement[, fromIndex])
// arr.indexOf(배열에서 찾을 요소, 검색을 시작할 색인-option)
const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison')); // 1
console.log(beasts.indexOf('bison', 2)); // 4
console.log(beasts.indexOf('giraffe')); // -1

2.13 fill()

3. String.prototype

3.1 replaceAll (대체하다)

  • MDN replaceAll
  • 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환
const p = 'lazy dog. If the dog reacted, was it really lazy?';

// 📝 1. replace() : 첫 번쨰 해당하는 문자열만 치환
console.log(p.replace('dog', 'monkey'));
// lazy monkey. If the dog reacted, was it really lazy?"

const regex = /Dog/i; // 정규표현식도 사용 가능
console.log(p.replace(regex, 'ferret'));
// lazy ferret. If the dog reacted, was it really lazy?"

// 📝 2. replaceAll() : 해당하는 모든 문자열 치환
console.log(p.replaceAll('dog', 'monkey')); 
// lazy monkey. If the monkey reacted, was it really lazy?"

const regex = /Dog/ig;
console.log(p.replaceAll(regex, 'ferret'));
// lazy ferret. If the ferret reacted, was it really lazy?"

3.2 substr() ☢️

  • MDN String.prototype.substr()
  • 문자열에서 특정 위치에서 시작하여 특정 문자 수 만큼의 문자들을 반환
  • 다만, String.prototype.substr()은 바람직한 특징때문에 사용처가 없으면 명세에서 제거될 수 있다고 합니다.

3.3 localeCompare()

  • MDN String.prototype.localeCompare()
  • 참조 문자열이 정렬 순으로 지정된 문자열 앞 혹은 뒤에 오는지 또는 동일한 문자열인지 나타내는 수치를 반환

3.4 repeat()

3.5 substring()

  • MDN String.prototype.substring()
  • string 객체의 시작 인덱스로 부터 종료 인덱스 전 까지 문자열의 부분 문자열을 반환
  • substring(시작 인덱스, 끝 인덱스-미포함)
const str = 'Mozilla';

console.log(str.substring(1, 3)); // "oz"
console.log(str.substring(2)); // "zilla"
profile
SeungWoo Yoo
Front-end 공부 중... 책 읽는 걸 좋아합니다.
이전 포스트

리눅스 터미널 명령어 정리(Linux Command Cheat Sheet)

다음 포스트

Git 명령어 정리(Git Cheat Sheet)

0개의 댓글