15. 메서드(method)

방은혜·2024년 12월 18일

자바스크립트

JavaScript

목록 보기

15/15

문자열 메서드

1. 문자열 속성

length

length 속성은 문자열의 길이를 나타낸다.

const str = 'engineer';
console.log(str.length);

// 결과
8

⚠️ 여기서 잠깐!

문자열은 불변(immutable)이기 때문에 length 속성을 수정할 수 없다.
length 속성에 새로운 값을 할당해도 length 속성은 변경되지 않는다.

2. 문자열 메서드

replace() : 기존의 문자열을 새 문자열로 변경
문자열이 없다면 단독으로 호출 불가.
항상 문자열을 점(.)으로 호출했다.-> 숫자형, 논리형에서는 실행이 안됨.

replace()와 replaceAll()

replace(a, b)는 문자열 내부의 첫 번째 a를 b로 교체한 결과를 반환한다.
replaceAll(a, b)는 문자열 내부의 모든 a를 b로 교체한 결과를 반환한다.
모든 문자열 메서드는 원본 문자열을 수정하지 않는다.

const str = 'engineer';

// 첫 번째 e만 a로 교체
console.log(str.replace('e', 'a'));

// 모든 n을 M으로 교체
console.log(str.replaceAll('n', 'M'));

// 결과
angineer
eMgiMeer

toUpperCase()와 toLowerCase()

toUpperCase()는 문자열 내부의 알파벳을 모두 대문자로 변환한 결과를 반환한다.
toLowerCase()는 문자열 내부의 알파벳을 모두 소문자로 변환한 결과를 반환한다.

const str = 'Engineer';

// 모든 알파벳 대문자로
console.log(str.toUpperCase());

// 모든 알파벳 소문자로
console.log(str.toLowerCase());

// 결과
ENGINEER
engineer

slice()

slice(indexStart, indexEnd)는 indexStart부터 indexEnd 전까지의 문자를 추출한다.
indexEnd를 생략하면 마지막 문자까지 추출된다.

const strNum = '0123456789';
const strNumSlice = strNum.slice(3, 6);
console.log(strNumSlice);

// 결과
345

split()

split()은 인수를 기준으로 문자열을 분할해서 배열로 반환한다.

const strWithComma = 'apple,banana,carrot';
console.log(strWithComma.split(','));

// 결과
[ 'apple', 'banana', 'carrot' ]

repeat()

repeat(count)는 문자열을 count번 반복해서 이어 붙인 결과를 반환한다.

const str = 'hello'.repeat(3);
console.log(str);

// 결과
hellohellohello

➕ 다양한 문자열 메서드

charAt()

charAt(index)는 index 번째 인덱스의 문자를 반환한다.

const str = 'Hello, World!';
const char = str.charAt(7);
console.log(char);

// 결과
W

indexOf()와 lastIndexOf()

indexOf()와 lastIndexOf()는 부분 문자열이 등장하는 시작 인덱스를 반환한다.
indexOf(searchString)은 searchString의 첫 등장 인덱스를 반환한다.
lastIndexOf(searchString)은 searchString의 마지막 등장 인덱스를 반환한다.
대소문자를 구분하며, searchString이 문자열에 없다면 -1을 반환한다.

const str = 'Hello, World! Welcome to the World.';
const searchStr = 'World';

console.log('첫 등장 인덱스:', str.indexOf(searchStr));
console.log('마지막 등장 인덱스:', str.lastIndexOf(searchStr));

// 결과
첫 등장 인덱스: 7
마지막 등장 인덱스: 29

startsWith()

문자열이 특정 문자열로 시작하는지 판단해 true 또는 false를 반환한다.

const str = 'Hello World';
console.log(str.startsWith('Hello'));

// 결과
true

endsWith()

문자열이 특정 문자열로 끝나는지 판단해 true 또는 false를 반환한다.

const str = 'Hello World';
console.log(str.endsWith('World'));

// 결과
true

includes()

문자열이 특정 부분 문자열을 포함하는지 판단해 true 또는 false를 반환한다.

const str = 'Hello World';
console.log(str.includes('lo W'));

// 결과
true

concat()

호출한 문자열 뒤에 인수로 받은 문자열을 모두 순서대로 연결해 반환한다.

const str1 = 'Hello';
const str2 = 'World';

console.log(str1.concat(' ', str2));
console.log(str2.concat(', ', str1));

// 결과
Hello World
World, Hello

trim()

문자열의 양쪽 끝에서 공백을 제거해 반환한다.
스페이스뿐만 아니라 Tab과 같은 공백 문자와 줄 바꿈 문자도 제거한다.

const greeting = '  Hello world!    ';
console.log(greeting.trim());

// 결과
Hello world!

index of : 배열에서 몇 번째 인덱스인지 알려준다.

메서드 종류가 다양함.
종류가 다양해서 필요할 때마다 찾아야 한다.

MDN : Mozilla Developer Network 에서 검색하기.
개발자들의 표준문서로 꾸준히 업데이트 되고 있음.

다양한 메서드는 표준자바객체 부분에서 확인이 가능함.

배열 메서드

toString()

toString()은 각 요소 사이에 콤마를 추가해 문자열로 반환한다.

const cars = ['BMW', 'Mercedes', 'Audi', 'Porsche'];

const carsToString = cars.toString();
console.log(carsToString);

// 결과
BMW,Mercedes,Audi,Porsche

요소가 문자열이 아닌 경우 자동으로 문자열로 변환된 후 연결된다.
null과 undefined는 빈 문자열로 변환된다.

const mixedArray = [1, null, true, undefined, 3.14];
console.log(mixedArray.toString());

// 결과
1,,true,,3.14

pop()

pop()은 배열의 마지막 요소를 삭제하고, 해당 요소를 반환한다.

const cars = ['BMW', 'Mercedes', 'Audi', 'Porsche'];

const removedCar = cars.pop();
console.log('삭제 후 배열:', cars);
console.log('삭제된 요소:', removedCar);

// 결과
삭제 후 배열: [ 'BMW', 'Mercedes', 'Audi' ]
삭제된 요소: Porsche

push()

push()는 배열의 마지막에 인수로 받은 요소를 추가하고, 배열의 길이를 반환한다.

const cars = ['BMW', 'Mercedes', 'Audi', 'Porsche'];

const lengthAfterPush = cars.push('Volkswagen');
console.log('요소 추가 후 배열:', cars);
console.log('요소 추가 후 길이:', lengthAfterPush);

// 결과
요소 추가 후 배열: [ 'BMW', 'Mercedes', 'Audi', 'Porsche', 'Volkswagen' ]
요소 추가 후 길이: 5

shift()

shift()는 배열의 첫 번째 요소를 삭제하고, 해당 요소를 반환한다.

const cars = ['BMW', 'Mercedes', 'Audi', 'Porsche'];

const removedCar = cars.shift();
console.log('삭제 후 배열:', cars);
console.log('삭제된 요소:', removedCar);

// 결과
삭제 후 배열: [ 'Mercedes', 'Audi', 'Porsche' ]
삭제된 요소: BMW

unshift()

unshift()는 배열의 맨 앞에 인수로 받은 요소를 추가하고, 배열의 길이를 반환한다.

const cars = ['BMW', 'Mercedes', 'Audi', 'Porsche'];

const lengthAfterUnshift = cars.unshift('Volkswagen');
console.log('요소 추가 후 배열:', cars);
console.log('요소 추가 후 길이:', lengthAfterUnshift);

// 결과
요소 추가 후 배열: [ 'Volkswagen', 'BMW', 'Mercedes', 'Audi', 'Porsche' ]
요소 추가 후 길이: 5

slice()

slice(start, end)는 start부터 end 번째 전까지의 요소를 추출해 새 배열로 반환한다.

const cars = ['BMW', 'Mercedes', 'Audi', 'Porsche'];

const slicedCars = cars.slice(1, 3);
console.log(slicedCars);

// 결과
[ 'Mercedes', 'Audi' ]

indexOf()

indexOf(searchElement)는 searchElement의 첫 등장 인덱스를 반환한다.
indexOf(searchElement, fromIndex)는 검색 범위를 fromIndex 이후로 한정한다.
searchElement와 일치하는 요소가 배열에 없다면 -1을 반환한다.

const arr = ['a', 'b', 1, 1203, 'a'];

console.log('a의 첫 등장 위치:', arr.indexOf('a'));
console.log('2번 인덱스 이후 첫 등장 위치:', arr.indexOf('a', 2));

// 결과
a의 첫 등장 위치: 0
2번 인덱스 이후 첫 등장 위치: 4

➕ 다양한 배열 메서드

lastIndexOf()

lastIndexOf()는 인수의 마지막 등장 인덱스를 반환한다.
인수와 일치하는 요소가 배열에 없다면 -1을 반환한다.

const arr = ['a', 'b', 1, 1203, 'a'];

console.log('a의 마지막 등장 위치:', 
arr.lastIndexOf('a'));

// 결과
a의 마지막 등장 위치: 4

join()

join()은 요소 사이에 인수로 받은 구분자를 넣어 연결한 문자열을 반환한다.
인수를 생략할 경우 기본값으로 콤마( , )를 구분자로 사용한다.
배열의 toString()은 내부적으로 join()을 호출해서 사용한다.

const arr = [1, 2, 3];

console.log(arr.join());
console.log(arr.join(' - '));
console.log(arr.join('  ~'));

// 결과
1,2,3
1 - 2 - 3
1  ~2  ~3

forEach()

forEach()는 배열의 각 요소에 대해 인수로 받은 함수를 실행한다.
함수의 인수로 전달하는 함수를 콜백 함수라고 부른다.

const arr = [1, 2, 3];

arr.forEach((num) => {
  num = num * num + num;
  console.log(num);
});

// 결과
2
6
12

map()

map()은 배열의 각 요소에 대해 콜백 함수를 실행한 결과를 새 배열로 반환한다.
forEach()와의 주된 차이점은 반환값의 유무이다.

const arr = [1, 2, 3];

const result = arr.map((num) => num * num + num);
console.log(result);

// 결과
[ 2, 6, 12 ]

날짜 메서드

1. Date객체

Date 객체는 다양한 날짜와 시간 관련 기능을 제공.
new Date()는 자바스크립트에서 날짜와 시간을 다루는 데 사용되는 Date 객체를 생성한다.
인수를 전달하지 않으면, 현재 날짜와 시간을 나타내는 Date 객체가 생성된다.
특정 날짜의 문자열 값을 인수로 전달하면, 해당 날짜를 나타내는 Date 객체가 생성된다.
Date 객체는 출력하는 환경에 따라 다른 형식으로 나올 수 있다.

const now = new Date();
console.log(now);

const past = new Date('2000-01-01');
console.log(past);

// 결과
2024-02-08T02:14:01.998Z
2000-01-01T00:00:00.000Z
T는 ‘Time’의 약자로, 날짜와 시간을 구분하는 문자입니다.
Z는 ‘Zulu’의 약자로, 협정 세계시(UTC)를 의미합니다.

2. Date 객체 메서드

Date 객체는 날짜와 시간의 특정 단위를 반환하는 다양한 메서드를 제공한다.

getMonth()가 반환하는 값은 0부터 시작하기 때문에 주의가 필요하다.

// 2024-02-08T02:12:49.000Z
const now = new Date();

console.log(now.getFullYear());
console.log(now.getMonth());
console.log(now.getDate());
console.log(now.getDay());
console.log(now.getHours());
console.log(now.getMinutes());
console.log(now.getSeconds());

// 결과
2024
1
8
4
2
12
49

수학 메서드

Math 객체의 메서드

Math.ceil()

Math.ceil(n)은 n보다 크거나 같은 수 중에서 가장 작은 정수를 반환한다.

console.log(Math.ceil(123.45));

// 결과
124

Math.floor()

Math.floor(n)은 n보다 작거나 같은 수 중에서 가장 큰 정수를 반환한다.

console.log(Math.floor(123.45));

// 결과
123

Math.round()

Math.round(n)은 n과 가장 가까운 정수를 반환한다.

console.log(Math.round(4.96));
console.log(Math.round(4.1));

// 결과
5
4

Math.max()와 Math.min()

Math.max()는 인수 중 가장 큰 값을 반환한다.
Math.min()은 인수 중 가장 작은 값을 반환한다.

console.log(Math.max(9, 1, -9));
console.log(Math.min(9, 1, -9));

// 결과
9
-9

Math.random()

Math.random()은 0 이상 1 미만의 무작위 실수를 반환한다.

console.log(Math.random());

// 결과
0.14680479561242477

Math.random()과 Math.floor()를 사용해 무작위의 정수를 생성할 수 있다.

// 1 이상 101 미만의 무작위의 실수 생성
let randomNum = Math.random() * 100 + 1;
console.log(randomNum);

// 정수로 내림해 1 이상 100 이하의 무작위의 정수 생성
randomNum = Math.floor(randomNum);
console.log(randomNum);

// 결과
71.46423588361814
71

➕ 다양한 수학 메서드

Math.abs()

Math.abs(x)는 x의 절댓값을 반환한다.

console.log(Math.abs(-7));

// 결과
7

Math.pow()

Math.pow(x, y)는 x의 y제곱을 반환한다.

console.log(Math.pow(2, 3)); // 2^3
console.log(Math.pow(2, -2)); // 2^(-2) = 1/4

// 결과
8
0.25

Math.sqrt()

Math.sqrt(x)는 x의 양의 제곱근을 반환한다.

console.log(Math.sqrt(16));

// 결과
4

Math.cbrt()

Math.cbrt(x)는 x의 세제곱근을 반환한다.

console.log(Math.cbrt(27));

// 결과
3

Math.sign()

Math.sign(x)는 x의 부호를 나타내는 숫자를 반환다.
x가 양수인 경우에는 1을 반환하고, 음수인 경우에는 -1을 반환한다.
x가 0 또는 -0인 경우에는 x를 그대로 반환한다.

console.log(Math.sign(-10));
console.log(Math.sign(0));
console.log(Math.sign(-0));
console.log(Math.sign(10));

// 결과
-1
0
-0
1

방은혜

이전 포스트

15. 메서드(method)

JavaScript

문자열 메서드

1. 문자열 속성

length

2. 문자열 메서드

replace()와 replaceAll()

toUpperCase()와 toLowerCase()

slice()

split()

repeat()

charAt()

indexOf()와 lastIndexOf()

startsWith()

endsWith()

includes()

concat()

trim()

배열 메서드

toString()

pop()

push()

shift()

unshift()

slice()

indexOf()

lastIndexOf()

join()

forEach()

map()

날짜 메서드

1. Date객체

2. Date 객체 메서드

수학 메서드

Math 객체의 메서드

Math.ceil()

Math.floor()

Math.round()

Math.max()와 Math.min()

Math.random()

Math.abs()

Math.pow()

Math.sqrt()

Math.cbrt()

Math.sign()

14. 함수

0개의 댓글