코딩앙마 자바스크립트 중급 강좌 스터디 요약 (2)

 

코딩앙마 자바스크립트 중급 강좌 스터디 요약 (1) 에 이어지는 내용입니다.

아래 유튜브를 시청하고 중요한 내용을 요약해보겠습니다.

 

 

 

 

Number

toString()

숫자를 다른 진법으로 변환하는 메서드이다. 기본적으로 10진법의 숫자를 다른 진법으로 변환할 때 사용된다.

const num = 255;
console.log(num.toString(16)); // "ff"
console.log(num.toString(2));  // "11111111"

//실행 결과는 각각 16진수로 'ff', 2진수로 '11111111'

 

 

toFixed()

숫자를 소수점 아래 몇 번째 자리까지 표현할지를 지정하는 메서드이다.

const num = 3.14159;
console.log(num.toFixed(2));  // "3.14"
console.log(num.toFixed(4));  // "3.1416"

// 실행 결과는 소수점 둘째 자리에서 반올림된 '3.14'와 넷째 자리에서 반올림된 '3.1416'

 

 

 

parseInt()

문자열을 정수로 변환하는 함수이다. 두 번째 인자로 진법을 지정할 수 있다.

console.log(parseInt("100", 10));  // 100
console.log(parseInt("100", 2));   // 4

//'100'은 10진수에서는 100으로, 2진수에서는 4로 변환

 

 

isNaN()

주어진 값이 NaN(Not-a-Number)인지 확인하는 함수이다.

console.log(isNaN("hello")); // true
console.log(isNaN(123));     // false

// 실행 결과는 문자열 'hello'는 숫자가 아니므로 true, 123은 숫자이므로 false

 

 

 

parseInt()와 isNaN()의 차이

parseInt는 숫자를 만나면 반환하지만 isNaN은 false가 된다.

let margin = '10px'
parseInt(margin) // 10
Number(margin) // NaN

let redColor = 'f3'
parseInt(redColor) // NaN
parseInt(redColor, 16) // 243
// parseInt의 두번째 인수를 사용하여 진수를 변경 가능

 

 

 

 

 

 

 

Math

Math.abs()

절대값을 반환하는 메서드이다.

console.log(Math.abs(-5));   // 5
console.log(Math.abs(3));    // 3

 

 

Math.pow()

제곱을 계산하는 메서드이다. 첫 번째 인자는 밑, 두 번째 인자는 지수다.

console.log(Math.pow(2, 3)); // 8
console.log(Math.pow(4, 0.5)); // 2

 

 

 

Math.sqrt()

제곱근을 반환하는 메서드이다.

console.log(Math.sqrt(9));   // 3
console.log(Math.sqrt(2));   // 1.4142135623730951

 

 

toFixed()

toFixed는 소수점 아래 자리수를 지정하여 그에 맞게 반올림한 결과를 문자열로 반환한다.

const pi = 3.141592653589793;

// 소수점 둘째 자리까지 표시
console.log(pi.toFixed(2)); // '3.14'

// 소수점 셋째 자리까지 표시
console.log(pi.toFixed(3)); // '3.142'

 

 

 

 

 

 

 

문자열 메서드

toUpperCase()

문자열을 모두 대문자로 변환하는 메서드이다.

const str = "hello";
console.log(str.toUpperCase());  // "HELLO"

 

 

 

 

toLowerCase()

문자열을 모두 소문자로 변환하는 메서드이다.

const str = "HELLO";
console.log(str.toLowerCase());  // "hello"

 

 

 

indexOf()

문자열에서 특정 문자의 첫 번째 인덱스를 반환하는 메서드이다. 해당 문자가 없으면 -1을 반환한다.

const str = "hello world";
console.log(str.indexOf("world")); // 6
console.log(str.indexOf("world", 7)); // -1

 

 

slice()

문자열의 일부를 잘라서 반환하는 메서드이다. 첫 번째 인자는 시작 인덱스, 두 번째 인자는 끝 인덱스이다(끝 인덱스는 포함되지 않는다).

const str = "hello world";
console.log(str.slice(0, 5));  // "hello"
console.log(str.slice(-5));    // "world"

 

 

 

substring()

문자열의 일부를 반환하는 메서드로, 시작 인덱스와 길이를 인자로 받는다. 시작점과 끝점을 바꿔도 동일하며, 음수는 허용하지 않는다.

const str = "hello world";
console.log(str.substr(0, 5));  // "hello"
console.log(str.substr(5, 0));  // "hello"
console.log(str.substr(6, 5));  // "world"

 

 

 

substr()

문자열의 일부를 반환하는 메서드로, 시작 인덱스와 길이를 인자로 받는다.

const str = "hello world";
console.log(str.substr(0, 5));  // "hello"
console.log(str.substr(6, 5));  // "world"

 

 

 

trim()

문자열 양 끝의 공백을 제거하는 메서드이다.

문자열 양 끝의 공백을 제거하는 메서드이다.

 

 

repeat()

문자열을 지정한 횟수만큼 반복하는 메서드이다.

const str = "hello";
console.log(str.repeat(3));  // "hellohellohello"

 

 

 

codePointAt()

문자열에서 지정된 위치의 코드 포인트를 반환하는 메서드이다.

const str = "A";
console.log(str.codePointAt(0));  // 65

 

 

fromCodePoint()

지정된 코드 포인트에 해당하는 문자를 반환하는 메서드이다.

console.log(String.fromCodePoint(65));  // "A"

 

 

includes()

const str = "hello world";
console.log(str.includes("world"));  // true
console.log(str.includes("hi"));     // false

 

 

 

배열 메서드

arr.splice(n, m) / arr.splice(n, m, x)

splice()는 배열의 특정 위치에서 요소를 추가하거나 제거하는 메서드이다.

• arr.splice(n, m): n번째 인덱스부터 m개의 요소를 제거한다.
• arr.splice(n, m, x): n번째 인덱스부터 m개의 요소를 제거하고, x 요소를 추가한다.

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

arr.splice(1, 1, 9);
console.log(arr);  // [1, 9, 5]

 

첫 번째 splice(1, 2)는 인덱스 1부터 두 개의 요소를 제거한다. 두 번째 splice(1, 1, 9)는 인덱스 1에서 한 개의 요소를 제거하고, 9를 추가한다.

 

 

arr.slice(n, m)

slice()는 배열의 일부분을 잘라서 새 배열을 반환한다. 인덱스 n부터 m까지(단, m은 제외) 요소를 반환한다.

let arr = [1, 2, 3, 4, 5];
let sliced = arr.slice(1, 3);
console.log(sliced);  // [2, 3]

slice(1, 3)은 인덱스 1에서 3 직전까지의 요소를 잘라낸다. 원본 배열은 변하지 않는다.

 

 

arr.concat(arr2, arr3, ...)

concat()는 배열을 합치는 메서드로, 여러 배열을 하나로 합쳐서 새 배열을 반환한다.

let arr1 = [1, 2];
let arr2 = [3, 4];
let result = arr1.concat(arr2, [5, 6]);
console.log(result);  // [1, 2, 3, 4, 5, 6]

 

arr1.concat(arr2, [5, 6])는 arr1과 arr2, 그리고 [5, 6] 배열을 하나로 합친다.

 

 

arr.forEach(fn)

forEach()는 배열의 각 요소에 대해 주어진 함수 fn을 실행하는 메서드이다. 리턴값은 없다.

 

let arr = [1, 2, 3];
arr.forEach((item, index) => {
  console.log(`${index}: ${item}`);
});

// 결과
// 0: 1
// 1: 2
// 2: 3

 

 

 

arr.indexOf / arr.lastIndexOf

indexOf()는 배열에서 특정 요소의 첫 번째 인덱스를 반환하며, 없으면 -1을 반환한다.
lastIndexOf()는 배열에서 특정 요소의 마지막 인덱스를 반환한다.

let arr = [1, 2, 3, 1, 2, 3];
console.log(arr.indexOf(2));        // 1
console.log(arr.lastIndexOf(2));    // 4

 

 

 

 

arr.includes()

includes()는 배열에 특정 요소가 포함되어 있는지 확인하여 true 또는 false를 반환한다.

let arr = [1, 2, 3];
console.log(arr.includes(2));  // true
console.log(arr.includes(4));  // false

 

 

 

arr.find(fn) / arr.findIndex(fn)

find()는 배열에서 조건에 맞는 첫 번째 요소를 반환하고, findIndex()는 해당 요소의 인덱스를 반환한다. 조건을 만족하는 요소가 없으면 find()는 undefined를, findIndex()는 -1을 반환한다.

 

let users = [{name: 'Tom', age: 30}, {name: 'Mike', age: 20}, {name: 'Jane', age: 25}];
let user = users.find(user => user.age === 20);
console.log(user);  // {name: 'Mike', age: 20}

let index = users.findIndex(user => user.age === 25);
console.log(index);  // 2

 

 

 

arr.filter(fn)

filter()는 조건을 만족하는 모든 요소를 배열로 반환한다.

let users = [{name: 'Tom', age: 30}, {name: 'Mike', age: 20}, {name: 'Jane', age: 25}];
let result = users.filter(user => user.age > 20);
console.log(result);  // [{name: 'Tom', age: 30}, {name: 'Jane', age: 25}]

 

 

 

arr.sort()

sort()는 배열의 요소를 정렬하는 메서드이다. 기본적으로는 문자열로 비교하여 정렬하므로, 숫자를 정렬할 때는 비교 함수를 사용해야 한다.

let arr = [3, 1, 4, 2];
arr.sort();  // 기본적으로는 문자열로 정렬
console.log(arr);  // [1, 2, 3, 4]

// 숫자 정렬
arr.sort((a, b) => a - b);
console.log(arr);  // [1, 2, 3, 4]

 

 

 

arr.reduce()

reduce()는 배열의 각 요소에 대해 누적된 값을 계산하는 메서드이다. 콜백 함수는 이전 값과 현재 값을 인자로 받으며, 최종 결과를 반환한다.

let userList = [
  { name: 'Tom', age: 30 },
  { name: 'Jane', age: 20 },
  { name: 'Mike', age: 25 },
];

let result = userList.reduce((prev, cur) => {
  if (cur.age > 19) {
    prev.push(cur.age);
  }
  return prev;
}, []);

console.log(result);  // [30, 20, 25]

 

reduce() 메서드에서 누적한다는 의미는 단순히 숫자나 값을 더하는 것이 아니라, 배열을 순회하면서 이전 값(누적된 값)에 새로운 값을 추가하거나, 어떤 방식으로든 누적된 결과를 업데이트해 나가는 과정이라는 것을 뜻한다. 위의 예시처럼 배열을 순회하며 특정 조건에 맞는 값을 배열에 push()하는 방식으로도 reduce()를 사용할 수 있다. 즉, 누적된 결과가 숫자가 아닌 배열이 될 수도 있으며, 배열에 새로운 값을 쌓아 나가는 방식으로도 동작한다는 점을 이해하는 것이 중요하다.