자바스크립트 중급 (3) - 문자열 Method, 배열 Method

이번 포스트도 역시나 코딩앙마님의 강의를 보고 작성했습니다.

https://www.youtube.com/watch?v=4_WLS9Lj6n4&t=5204s

---

1. 문자열 Method

✔️ html 코드를 감쌀 때는 작은 따옴표로 감싸고 안에 class나 id 같은 속성값은 큰 따옴표로 감싸는게 낫다.

✔️영어 문장은 큰 따옴표로 감싸는게 낫다.

✔️백틱을 사용하면 여러 줄의 문장 표현이 가능하다.

 

str.length

문자열의 길이를 보여준다.

 

str[n]

문자열의 n번째 위치를 보여준다. 배열이나 객체와는 달리 글자를 바꿀 수는 없다.

 

toUpperCase() / toLowerCase

영문자를 모두 대문자화 / 소문자화

 

str.indexOf(text)

해당 text가 문자열 중 몇 번째에 위치하는지를 파악한다.

문장부호 및 띄어쓰기도 위치에 포함된다.

찾는 문자가 해당 string에 없으면 -1을 반환한다.

 

str.slice(n,m)

n의 위치에서 m이 없으면 문자열 끝까지, m이 양수면 그 숫자까지(포함하지 않음), m이 음수면 끝에서부터 센다.

let desc = "abcdefg";
let a = desc.slice(2); // "cdefg"
let b = desc.slice(0,5); // "abcde"
let c = desc.slice(2,-2); // "cde"

 

str.substring(n,m)

n과 m 사이 문자열을 반환한다. (m은 포함하지 않음)

n과 m을 바꿔도 동일하게 동작한다.

음수는 0으로 인식한다.

let desc = "abcdefg";
let d = desc.substring(2,5); // "cde"

 

str.substr(n,m)

n부터 시작해서 m개를 가져온다.

let desc = "abcdefg";
let e = desc.substr(5,1); // "f"

 

str.trim()

문자열의 앞 뒤 공백을 제거한다.

let desc = "  coding     ";
let a = desc.trim(); // "coding"

 

str.repeat(n)

문자열을 n번 반복한다.

✔️ 문자열도 크기를 비교할 수 있다.

• a < z
• 대문자 < 소문자
• str.codePointAt(0)으로 십진법 값을 가져올 수 있다.
• String.fromCodePoint(n)으로 십진법 값을 문자화 할 수도 있다.
• [ASCII 코드, 16진법, 10진법 변환](https://www.ibm.com/docs/ko/aix/7.1?topic=adapters-ascii-decimal-hexadecimal-octal-binary-conversion-table)

---

2. 배열 메소드

arr.splice(n,m)

배열의 특정 요소를 지운다. n번째부터 m개를 지운다.

 

arr.splice(n, m, x)

배열의 n번째 요소부터 m개를 지운 뒤 n번째 자리에 x를 추가한다. (여러 개 가능)

arr.splice(n,m)을 통해 삭제된 요소를 반환할 수 있다.

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


let arr1 = ["나는", "철수"];
arr1.splice(1,0,"우리나라","사람"); //["나는","우리나라","사람","철수"]

let arr2 = [1,2,3,4,5];
let result = arr2.splice(2,2); // [3,4]

 

arr.slice(n,m)

n부터 m까지의 값 반환(m 포함하지 않음)

n과 m이 없으면 전체를 복사한다.

 

arr1.concat(arr2,arr3)

arr1에 arr2와 arr3 배열의 값을 추가하여 새로운 배열을 반환한다.

 

arr.forEach(fn)

배열의 값 처음부터 끝까지 해당 함수를 반복한다.

let users = ['Mike', 'Tom', 'Jane'];
users.forEach((item)=>console.log(item)); // 'Mike' // 'Tom' // 'Jane'

 

arr.indexOf / arr.lastIndexOf

해당 값의 index 값을 구한다. 해당 index에 값이 없으면 -1을 반환한다.

lastIndexOf는 끝에서부터 탐색한다.

arr.indexOf(n,m)은 n 위치에서부터 m을 탐색하여 m의 index를 반환한다.

let arr = [1,2,3,4,5,1,2,3];
arr.indexOf(3,3) // 배열의 index가 3인 4부터 탐색해서 index 7인 3을 찾는다.
// 7

 

arr.includes()

해당 값이 배열 안에 포함되는지를 확인하며 boolean 값을 반환한다.

 

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

배열의 첫번째부터 마지막 값까지 함수를 실행하며, 첫 번째 true 값만 반환하고 끝난다. 만약 없으면 undefined를 반환하고, findIndex는 -1을 반환한다.

 

arr.filter(fn)

값이 true인 모든 값들을 배열로 보여준다.

 

arr.reverse()

배열을 역순으로 재정렬한다.

 

arr.map(fn)

배열의 모든 값에 함수를 받아 특정 기능을 실행하고 새로운 배열을 반환한다.

let userList = [
    {name : "Mike", age:30},
    {name : "Jane", age:18}
];


let newUserList = userList.map((user,index)=>{
    return Object.assign({},user,{
        id : index + 1,
        isAdult : user.age > 19,
    });
});

console.log(newUserList);
// [{name:"Mike",age:30,id:1,isAdult:true}, {name:"Jane", age:18, id:2, isAdult:false}]

 

arr.join()

배열의 값을 합쳐서 문자열을 반환한다.

인수가 없으면 값 사이를 쉼표로 연결한다.

let arr = ["안","녕","하","세","요"];
arr.join(); // "안,녕,하,세,요"

 

str.split()

문자열을 인수를 기준으로 나눠서 배열화한다.

split의 인수에 ""를 넣으면 한 글자씩, 띄어쓰기까지 모두 반환한다.

"Mike,John,Sella".split(","); // ["Mike","John","Sella"]
"Hello J".split(""); //["H","e","l","l","o"," ","J"]

 

Array.isArray()

배열인지를 판별해서 boolean 값을 반환한다.

✔️typeof를 사용하면 배열로 Object로 반환하기 때문에 isArray를 사용!

 

arr.sort()

배열을 재정렬한다. 배열 자체가 변경되므로 주의해야한다.

sort는 정렬할 때 요소를 문자 취급해서 맨 앞의 숫자만 보고 판단한다.(arr2 참조)

=> 값을 비교해 줄 수 있는 함수를 인수로 전달해주면 된다.

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

let arr2 = [27,8,5,13];
arr2.sort();
console.log(arr2); // [13,27,5,8]

function fn(a,b)=>{
    return a-b;
};

arr2.sort(fn);
console.log(arr2);// [5,8,13,27]

✔️ Lodash 라이브러리를 사용하면 함수를 입력하지 않고도 바로 정렬이 가능하다.

[참고](https://lodash.com)

let arr = [13,2,5,11];
_.sortBy(arr);
console.log(arr); // [2,5,11,13]

 

arr.reduce(fn, 초기값)

배열을 돌면서 원하는 작업을 하고 최종값을 반환한다.

• reduce에 들어가는 함수 : (누적 계산값, 현재값) => {return 계산값}

let arr = [1,2,3,4,5];
let result = 0;
arr.forEach((num)=>{result += num});
console.log(result); // 15


const result1 = arr.reduce((prev,cur) => {return prev + cur;}, 0);
console.log(result1); // 15

 

예제) 객체로 이뤄진 배열에서 age가 19이상인 객체만 뽑아서 새로운 배열을 만들기

let userList = [
    {name : "Mike", age:30},
    {name : "Jane", age:12},
    {name : "John", age:19},
    {name : "Sella", age:21}
];

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

console.log(result); // ["Mike","John","Sella"]