자바스크립트 메서드 간단 정리

My_Code·2024년 4월 30일
JavaScript
0
post-thumbnail

자바스크립트를 시작하고 유용해 보이거나 자주 까먹는 메서드를 정리하자.

💻 자바스크립트 메서드 간단 정리

📌 Array.prototype.map( )

✏️ 설명

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

  • map( )에서 콜백함수를 사용할 때 { } 사용의 유무에 따라 return을 사용할 수 있음

  • return 은 { }와 같이 함수 내부에서 사용이 가능함


✏️ 예제

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

let squaredNumbers1 = numbers.map(function(number) {
	return number * number;
});

let squaredNumbers2 = numbers.map((number) => {
	return number * number;
});

// 이때는 return 사용X
let squaredNumbers3 = numbers.map((number) => number * number);

console.log(squaredNumbers); // [1, 4, 9, 16, 25]

📌 Number.prototype.toString( )

✏️ 설명

  • 특정한 Number 객체를 나타내는 문자열을 반환

  • 즉, 숫자를 문자열로 변환

  • 숫자.toString(진수);


✏️ 예제

let count = 10;

console.log(count.toString()); // displays '10'
console.log((17).toString()); // displays '17'
console.log((17.2).toString()); // displays '17.2'

let x = 6;

console.log(x.toString(2)); // displays '110'
console.log((254).toString(16)); // displays 'fe'

console.log((-10).toString(2)); // displays '-1010'
console.log((-0xff).toString(2)); // displays '-11111111'

📌 String.prototype.split( )

✏️ 설명

  • String 객체를 지정한 구분자를 이용하여 여러 개의 문자열로 나눔

  • 문자열을 나누고 배열을 반환


✏️ 예제

let str = "sparta";
console.log(str.split(""));  // [ 's', 'p', 'a', 'r', 't', 'a' ]
  • 문자열 뒤집기
let str = "asdfghjkl";
let strReverse = str.split("").reverse().join("");
// 'lkjhgfdsa'

// split()에서 반환한 배열에는 reverse()와 join()을 사용할 수 있다
// 문자열에 grapheme clusters가 있을 경우, 
// 유니코드 플래그를 설정해도 오류를 일으킵니다
// https://github.com/mathiasbynens/esrever
// 등의 라이브러리를 대신 사용하세요.

📌 Array.prototype.reverse( )

✏️ 설명

  • 배열의 순서를 반전

  • 첫 번째 요소는 마지막 요소가 되며 마지막 요소는 첫 번째 요소가 됨

  • 호출한 배열을 반전하고 원본 배열을 변형하며 그 참조를 반환


✏️ 예제

const a = [1, 2, 3];
console.log(a); // [1, 2, 3]

a.reverse();
console.log(a); // [3, 2, 1]

📌 Math.pow( )

✏️ 설명

  • base^exponent처럼 base 에 exponent를 제곱한 값을 반환

✏️ 예제

// 간단한 예
Math.pow(7, 2); // 49
Math.pow(7, 3); // 343
Math.pow(2, 10); // 1024

// 분수 지수
Math.pow(4, 0.5); // 2 (4의 제곱근)
Math.pow(8, 1 / 3); // 2 (8의 세제곱근)
Math.pow(2, 0.5); // 1.4142135623730951 (2의 제곱근)
Math.pow(2, 1 / 3); // 1.2599210498948732 (2의 세제곱근)

// 양의 지수
Math.pow(7, -2); // 0.02040816326530612 (1/49)
Math.pow(8, -1 / 3); // 0.5

// 양의 밑
Math.pow(-7, 2); // 49 (제곱의 결과값은 양수입니다.)
Math.pow(-7, 3); // -343 (세제곱은 음수가 될 수 있습니다.)
Math.pow(-7, 0.5); // NaN (음수는 실제 제곱근을 가지지 않습니다.)

// "짝수"와 "홀수" 근이 서로 가깝게 놓여 있고
// 부동소수점 정밀도의 한계로 인해,
// 밑이 음수이며 지수가 분수라면 언제나 NaN을 반환합니다.
Math.pow(-7, 1 / 3); // NaN

📌 Math.floor( )

✏️ 설명

  • 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환

  • 즉, 숫자에 대한 내림처리


✏️ 예제

Math.floor(45.95); //  45
Math.floor(45.05); //  45
Math.floor(4); //   4
Math.floor(-45.05); // -46
Math.floor(-45.95); // -46

📌 Math.round( )

✏️ 설명

  • 입력값을 반올림한 수와 가장 가까운 정수 값을 반환

  • 입력값을 반올림한 값과 가장 가까운 정수를 의미


✏️ 예제

Math.round(20.49); //  20
Math.round(20.5); //  21
Math.round(42); //  42
Math.round(-20.5); // -20
Math.round(-20.51); // -21

📌 Math.ceil( )

✏️ 설명

  • 주어진 숫자보다 크거나 같은 숫자 중 가장 작은 숫자를 integer 로 반환

  • 즉, 숫자에 대한 올림처리


✏️ 예제

Math.ceil(0.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

📌 Number.prototype.toFixed( )

✏️ 설명

  • 숫자를 고정 소수점 표기법(fixed-point notation)으로 표시

  • 숫자를 소수점 이하 digits 자릿수까지 반올림하여 문자열로 반환


✏️ 예제

const num = 3.14159; 

console.log(num.toFixed(2)); // 출력 결과: "3.14" 
console.log(num.toFixed(4)); // 출력 결과: "3.1416" 
console.log(num.toFixed(0)); // 출력 결과: "3"

📌 Number.isInteger( )

✏️ 설명

  • 주어진 값이 정수인지 판별

✏️ 예제

Number.isInteger(0); // true
Number.isInteger(1); // true
Number.isInteger(-100000); // true
Number.isInteger(99999999999999999999999); // true

Number.isInteger(0.1); // false
Number.isInteger(Math.PI); // false

Number.isInteger(NaN); // false
Number.isInteger(Infinity); // false
Number.isInteger(-Infinity); // false
Number.isInteger("10"); // false
Number.isInteger(true); // false
Number.isInteger(false); // false
Number.isInteger([1]); // false

📌 Array.prototype.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]

// 내림차순
let items = ["réservé", "Premier", "Cliché", "communiqué", "café", "Adieu"];
items.sort((a, b) => b.localeCompare(a));
// [ 'réservé', 'Premier', 'communiqué', 'Cliché', 'café', 'Adieu' ]


// 문자열 리스트를 정렬할 때 기준을 정하는 방법
function solution(strings, n) {
    strings.sort((a, b) => a[n] === b[n] ? (a < b ? -1 : 1) : a[n] < b[n] ? -1 : 1);
    return strings;
}

// 리스트에서 a, b 두 개의 값을 가져와서 비교함

// 숫자 배열 정렬
let numbers = [4, 2, 5, 1, 3];

// 방법 1
numbers.sort(function (a, b) {
  return a - b;
});

// 방법 2
numbers.sort((a, b) => a - b);

// 방법 3
numbers.sort((a, b) => { return a - b });

console.log(numbers);  // [1, 2, 3, 4, 5]


// 내림차순
// 방법 1
numbers.sort(function (a, b) {
	return b - a;
});

// 방법 2
numbers.sort((a, b) => b - a);

// 방법 3
numbers.sort((a, b) => { return b - a });

📌 String.prototype.localeCompare( )

✏️ 설명

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

  • referenceStr.localeCompare(compareString);

  • referenceStr가 compareString 전 혹은 뒤에 오는지 또는 동등한지를 나타내는 정수를 반환

  • compareString 전에 referenceStr이 오면 음수 (뭐가 나로지 모름)

  • compareString 뒤에 referenceStr이 오면 양수 (뭐가 나로지 모름)

  • 동등한 경우 0 을 반환


✏️ 예제

// "a"는 "c" 전에 위치하므로 음수 값을 반환
"a".localeCompare("c"); // -2 혹은 -1 (또는 다른 음수 값)

// 알파벳 순으로 단어 "check"는 "against"보다 뒤에 위치하므로 양수 값을 반환
"check".localeCompare("against"); // 2 혹은 1 (또는 다른 양수 값)

// "a"와 "a"는 서로 동등하므로 중립 값 0을 반환
"a".localeCompare("a"); // 0

📌 Array.prototype.reduce()

✏️ 설명

  • 배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행

  • 하나의 결과값을 반환

arr.reduce(callback[, initialValue])

  • 빈 요소를 제외하고 배열 내에 존재하는 각 요소에 대해 callback 함수를 한 번씩 실행하는데, 콜백 함수는 다음의 다섯 인수를 받음

    • accumulator : 콜백의 반환값을 누적, initialValue를 제공한 경우에는 initialValue의 값

    • currentValue : 처리할 현재 요소

    • currentIndex (optional) : 처리할 현재 요소의 인덱스, initialValue를 제공한 경우 0, 아니면 1부터 시작

    • array(optional) : reduce()를 호출한 배열

    • initialValue (optional) : 최초 호출에서 첫 번째 인수에 제공하는 값

[0, 1, 2, 3, 4].reduce(function (
  accumulator,
  currentValue,
  currentIndex,
  array,
) {
  return accumulator + currentValue;
}, 10);

✏️ 예제

let sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
	return accumulator + currentValue;
}, 0);
// sum is 6


// 화살표 함수 표현식
let total = [0, 1, 2, 3].reduce(
	(accumulator, currentValue) => accumulator + currentValue,
	0,
);
// let sum = temp.reduce((a, b) => a + b, 0);

✏️ Map 객체를 이용한 배열 중복값 개수 구하기

const arr = ['a', 'b', 'a', 'b', 'c'];

const result = arr.reduce((accu,curr)=> {
	accu.set(curr, (accu.get(curr)||0) + 1) ;
    return accu;
}, new Map());

📌 String.prototype.repeat( )

✏️ 설명

  • 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열을 반환

✏️ 예제

"abc".repeat(-1);  // RangeError
"abc".repeat(0);  // ''
"abc".repeat(1);  // 'abc'
"abc".repeat(2);  // 'abcabc'
"abc".repeat(3.5);  // 'abcabcabc' (count will be converted to integer)
"abc".repeat(1 / 0);  // RangeError

📌 Array.prototype.slice( )

✏️ 설명

  • 어떤 배열의 begin 부터 end 까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환

  • 본 배열과 새 배열은 모두 동일한 객체를 참조

  • 참조 된 객체가 변경되면 변경 내용은 새 배열과 원래 배열 모두에서 볼 수 있음


✏️ 예제

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// Expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// Expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// Expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// Expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// Expected output: Array ["camel", "duck"]

console.log(animals.slice());
// Expected output: Array ["ant", "bison", "camel", "duck", "elephant"]

📌 Array.prototype.splice( )

✏️ 설명

  • 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경

  • 만약 제거할 요소의 수와 추가할 요소의 수가 다른 경우 배열의 길이는 달라짐

  • array.splice(start[, deleteCount[, item1[, item2[, ...]]]])


✏️ 예제

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

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

📌 String.prototype.charCodeAt()

✏️ 설명

  • 특정 문자를 아스키 코드로 변환하는 메서드

  • 문자.charCodeAt();


✏️ 예제

"h".charCodeAt();  // 104
"H".charCodeAt();  // 72
"1".charCodeAt();  // 49
" ".charCodeAt();  // 32

// 문자열을 넣으면 다음과 같음
"hello".charCodeAt();  // 104
"bye".charCodeAt();  // 98
"World".charCodeAt();  // 87

// 제일 앞 문자의 아스키 코드를 반환함

// charCodeAt(정수) 처럼 인자를 넣어서 사용 가능
// 즉, 문자열의 인덱스를 넣으면 그 문자의 아스키 코드를 반환함
"hello".charCodeAt(0);  // 104
"hello".charCodeAt(1);  // 101
"hello".charCodeAt(4);  // 111
"hello".charCodeAt(5);  // NaN
"hello".charCodeAt(-1);  // NaN

📌 String.fromCharCode()

✏️ 설명

  • 인자로 받은 정수(아스키코드)를 해당하는 문자로 반환

  • 인자를 여러개 사용하면 문자열로 반환

  • String.fromCharCode(num1[, ...[, numN]])


✏️ 예제

String.fromCharCode(104); // "h"
String.fromCharCode(72); // "H"
String.fromCharCode(49); // "1"
String.fromCharCode(32); // " "
String.fromCharCode(0x68); // "h"
String.fromCharCode(0x48); // "H"
String.fromCharCode(0x31); // "1"
String.fromCharCode(0x20); // " "

String.fromCharCode(65, 66, 67); // "ABC"
String.fromCharCode(0x68, 0x48, 0x31, 0x20); // "hH1 "

📌 Array.prototype.fill()

✏️ 설명

  • 배열을 같은 값으로 채우는 메서드

  • 배열의 start index부터 end index 전까지(end index는 미포함) value값으로 채워주는 메서드


✏️ 예제

// 기본 구문
fill(value)
fill(value, start)
fill(value, start, end)


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

// Fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4));
// Expected output: Array [1, 2, 0, 0]

// Fill with 5 from position 1
console.log(array1.fill(5, 1));
// Expected output: Array [1, 5, 5, 5]

console.log(array1.fill(6));
// Expected output: Array [6, 6, 6, 6]


// fill()을 사용해서 빈배열 채우기 (new 생략 가능)
const tempGirls = new Array(5).fill("girl", 0);
console.log(tempGirls);
// ['girl', 'girl', 'girl', 'girl', 'girl']

📌 Math.ceil( )

✏️ 설명


✏️ 예제


📌 Math.ceil( )

✏️ 설명


✏️ 예제


📌 Math.ceil( )

✏️ 설명


✏️ 예제


profile
My_Code
조금씩 정리하자!!!
이전 포스트

[2024.04.29 TIL] 내일배움캠프 11일차 (알고리즘 특강, 자료구조, 정렬, 개인 과제, 피드백)

다음 포스트

[2024.04.30 TIL] 내일배움캠프 12일차 (JS 메서드, SQL 강의)

0개의 댓글