자바스크립트3 - 내장 함수(문자열, 배열 관련)

 

이번 포스팅에서는 자바스크립트의 내장 함수들에 대해 다루어 보도록 하겠다.

 

 

 

문자열 관련

- 아래의 메소드들을 사용해도 원래 문자열 자체에 변경을 주는 것이 아니니, 함수 사용 후 변수에 담아 사용할 것!

• length: 문자열의 길이 반환(공백 포함)
• toUpperCase(): 문자열 전체를 대문자로 변경
• toLowerCase(): 문자열 전체를 소문자로 변경
• indexOf(): 매개변수로 문자(열)을 받아서 해당 매개변수가 등장하는 첫 번째 인덱스 숫자를 반환
• slice(startIdx[,endIdx]): start 인덱스부터 end-1까지 슬라이싱(-1은 맨 끝을 의미함)
• replace(문자(열)1, 문자(열)2): 대상 문자열에서 첫 문자(열)1을 문자(열)2로 변경
• replaceAll(문자(열)1, 문자(열)2): 대상 문자열에 등장하는 모든  문자(열)1을 문자(열)2로 변경
• repeat(n): 문자(열) n번 반복
• trim(): 문자열의 양끝 공백 제거
• split(): 대상 문자열을 매개변수로 들어온 문자열을 기준으로 쪼개서 배열로 반환

let str1 = "Strawbery Moon";
let str2 = "    Strawbery Moon  ";

// 문자열 인덱싱
console.log(str1[5]);
console.log(str1[5]+str1[0]+str1[8]);

console.log('str1의 문자열 길이', str1.length);
console.log('str2의 문자열 길이', str2.length);

let msg = "Happy Birthday~";
let userId = "    user123   ";

console.log(msg.toLowerCase());
console.log(msg.toUpperCase());

//trim(): 양끝 공백 없애기
console.log(userId.trim());
console.log(userId.trim().length); // 여러 개의 메소드나 속성을 연달아 사용 가능(체이닝)

// indexOf('찾고자하는 문자') -> 찾고자하는 문자가 나오는 첫 인덱스를 반환
// 문자열에 포함되지 않은 문자열이 매개변수로 들어가면 -1 반환
let mango = 'applemango';
console.log(mango.indexOf('apple')); // 'apple'의 시작 첫 인덱스
console.log(mango.indexOf('m'));
console.log(mango.indexOf('djkflsjdkjfsl')); // -1

//slice
console.log(mango.slice(5)); // 인덱스 5번부터 끝까지 추출
console.log(mango.slice(3,6)); // 인덱스 3~5번까지 추출
console.log(mango.slice(-1)); // -는 뒤에서부터~ / 맨 끝까지
console.log(mango.slice(-4));

let msg2 = 'Wow~ It is so amazing!!!';
console.log(msg2.replace("Wow", "Hey"));
console.log(msg2.replaceAll("o", "O"));

let date = '2014.1.10';
//2014-1-10
date =date.replaceAll('.','-');

// repeat()
console.log('abc'.repeat(10))

// split()
// 문자열 -> 배열
console.log(date.split('')); // 문자열 전체를 쪼개어 배열에 넣기
console.log(date.split('-')) //'-' 기준으로 쪼개어 배열에 넣기

 

 

 

 

배열 관련

• push(): 배열의 끝에 매개변수 추가
• pop(): 배열의 끝 요소를 제거
• shift(): 배열의 맨 앞에 매개변수 추가
• unshift(): 배열의 맨 앞 요소를 제거
• includes(): 해당 배열에 매개변수 요소가 있는지 확인하여 true/false 값 반환
• length: 배열의 길이 반환
• indexOf(): 매개변수에 해당하는 원소가 처음 등장하는 첫 번째 인덱스 값을 반환
• reverse(): 배열 순서를 뒤집어서 반환 → 실제 배열이 변경됨
• join(): 배열 원소를 매개변수를 끼워넣어 문자열로 반환
• 매개변수에 함수-
  • map(): 배열 내의 모든 요소에 대해 함수 호출한 결과를 모아서 '배열'로 반환
  • find(): 배열에서 특정 조건을 만족하는 첫 번째 '요소'를 반환
  • filter(): 조건을 만족하는 요소들을 모아서 '배열'로 반환

 

let arr2 = ['quakka', 'puppy','rabbit','hamster'];
arr2.unshift('cat'); // 맨 앞에 요소 추가
console.log(arr2);
arr2.shift(); // 맨 앞에 요소 제거
console.log(arr2);

console.log(arr2.includes('cat')); //false
console.log(arr2.includes('quakka')); //true

console.log(arr2.indexOf('quakka'));

arr2.reverse(); // 실제의 배열이 변경됨

str1 =str1.join(''); // 배열의 요소 사이에 매개변수가 들어가면서 문자열로 결합됨
console.log(str1);

// filter()
// return 이후 조건을 만족하는 요소들을 모아서 "배열"로 반환

// 1. 함수 표현식
let six1 = arr2.filter(function(word){
    return word.length===6;
})

// 2. 화살표 함수 & return 있는 ver
let six2 = arr2.filter((word)=>{
    return word.length===6;
})

// 3. 화살표 함수 & return 없는 ver (중괄호 없어야 성립)
let six3 = arr2.filter((word)=> word.length===6) // {}없으면 return 없어도 ㅇㅋ


// map()
// 배열 내의 모든 요소에 대해 함수 호출한 결과를 모아서 새로운 "배열"로 반환
let arr4 = [1,2,3,4,5]
let multiArr = arr4.map(function(element){
    return element*3;
});
console.log(multiArr);


// find()
// 배열에서 특정 조건을 만족하는 첫번째 "요소" 반환
let findResult = multiArr.find(function(element){
    return element>10;
})
console.log(findResult);

 

 

 

 

메소드 체이닝

• 각각의 메소드를 연결해서 사용할 수 있다
• 단, 사용한 메소드가 반환 값을 가지고 있는 경우에만 사용 가능

// 메소드를 연결해서 사용 가능
console.log(hello.split("").reverse().join(""));