[JS] 중급문법3 (+ String, Array 에서의 다양한 메소드들)

String

html 문장은 내부에서 " "를 사용하는 게 많기 때문에, ' '로 감싸주는 게 좋다

영어로 된 문장은 내부에서 ' '를 사용하는 게 많기 떄문에, " "로 감싸주는 게 좋다.

 

백틱(` `)으로 감싼 문장은 ${ }를 이용해 변수나 표현식을 써서 출력할 수 있다.

` 은 여러 줄로 이루어진 문장을 \n 없이 쓸 수 있다.

 

length를 이용해 문자열의 길이를 알아낼 수 있다.

[인덱스 번호] 를 이용해서 특정 문자의 위치를 접근할 수 있다. 인덱스 번호는 당연히 0부터 시작하며, 다만 한글자씩 변경시킬 수 없다.

 

toUpperCase() 는 모든 문자를 대문자로 바꿔준다.

toLowerCase() 는 모든 문자를 소문자로 바꿔준다.

 

str.indexOf('hi') 를 쓰면, 해당 문자열에서 주어진 문자열이 처음 등장하는 위치를 인덱스 번호로 리턴해준다. 주어진 문자열이 존재하지 않으면 -1 를 리턴해준다. 따라서 특정 문장이 포함되어 있는지 판단하려면, 조건을 str.indexOf('hi') > -1 이렇게 줘야 잘 동작한다.

 

str.includes() 는 특정 문자가 있으면 true, 없으면 false를 반환한다. 인덱스를 신경 쓸 필요가 없을 때 유용하다.

 

str.slice(n,m) 는 n 이상 m 미만의 인덱스에 존재하는 문자열만 뽑아준다. m은 존재하지 않으면 문자열 끝까지이고, 만약 매개변수가 음수로 전달되면 뒤에서 센다. (-1, -2, ...), 단 출력하는 문자는 앞에서 뒤로 뽑아서 출력시킨다.

 

str.substring(n,m) 은 slice 와 비슷하지만, n과 m을 바꿔도 동작한다. 즉, n과 m 사이의 문자열을 반환해준다. 자동으로 작은 수 이상 큰 수 미만의 인덱스에 존재하는 문자열을 출력해준다. 음수를 주면 0으로 인식한다.

 

str.substr(n,m) 은 인덱스 n 부터 시작해서 m 개의 문자열을 출력해준다. 

 

str.trim() 은 문자열의 앞 뒤 공백을 제거해준다.

 

str.repeat(n) 은 주어진 문자열을 n번 반복해서 출력한다.

 

"a" < "c" 처럼 아스키 코드에 따라서 문자열도 크기 비교가 가능하다.

"a".codePointAt(0) 은 문자를 아스키 코드에 따른 숫자로 변환해준다.

String.fromCodePoint(97) 은 숫자를 아스키 코드에 따른 문자로 변환해준다.

 

 

Array

arr.splice(n,m) 은 n번째 인덱스부터 시작해서 m개의 요소를 삭제한다는 의미이다.

arr.splice(n,m,x) 처럼 쓰면, n번째 인덱스부터 m개의 요소를 삭제한 뒤, x 요소를 해당 위치에 추가해준다. 

만약 m에 0을 넣으면 아무 것도 삭제하지 않고, x 요소를 n 번째 인덱스에 추가만 할 수도 있다. 이 경우, 새로 추가하는 요소가 해당 인덱스에 위치하여 앞으로 오고 기존 요소는 뒤로 밀려나서 추가된다.

arr.splice(n,m)를 하면 기존 배열은 수정되어 남아 있고, splice()는 자신이 삭제시킨 요소들을 배열로 리턴해준다.

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

 

 arr.slice(n,m) 는 n 이상 m 미만의 인덱스에 존재하는 요소들을 반환해준다. 

 

arr.concat(arr2, arr3, ...) 는 기존 배열에 특정 배열들을 합쳐서 새로운 배열을 반환해준다.

 

arr.forEach(fn) 은 함수를 인수로 받아서 배열의 반복을 실행하는 기능이다. 이 함수에는 3개의 매개변수를 받는다. 

a.forEach((item, index, arr) => {

    ...

})

item은 해당 요소, index는 해당 요소의 인덱스, arr 해당 배열 자체를 의미한다. 보통 item과 index를 주로 사용한다. 이 인수들을 이용해서 배열을 순회하며 특정 동작을 하도록 만들 수 있다.

 

arr.indexOf(3) 는 주어진 요소가 처음 존재하는 인덱스 위치를 반환한다.

arr.indexOf(3,3) 처럼 매개변수 2개를 전달하면. 두 번째 인자는 탐색하기 시작하는 위치를 의미한다.

 

arr.lastIndexOf(3) 은 주어진 요소를 끝에서부터 탐색해서 처음 존재하는 인덱스 값을 반환한다.

 

arr.includes() 는 true, false 로 존재여부를 알려주고, 인덱스가 필요없을 때 사용한다.

 

arr.find(fn) 는 함수를 전달해서 보다 복잡한 연산을 가지고 찾을 때 사용한다. 마찬가지로 첫번째로 존재하는 요소만 찾아서 true값만 반환하고 끝난다. 만약 찾는 요소가 없으면 undefined를 반환한다.

let arr=[1,2,3,4,5];
const result=arr.find((item)=>{
    return item%2===0; // 조건을 충족하는 첫번째 item을 반환
});
console.log(result); // 2

arr.findIndex(fn) 는 arr.find(fn)와 동일하며, true 대신 index 값을 반환한다. 따라서 존재하지 않으면 -1 을 반환한다.

함수 안에서 주어진 조건에 true를 반환하는(조건에 만족하는) 첫번째 요소를 반환시킨다.

let userList=[
    {name:"Mike", age:30},
    {name:"Tom", age:23},
    {name:"Micheal", age:36},
]
const result2=userList.find((user)=>{
    if(user.age>30){
        return true;
    }
    return false;
});
console.log(result2); // { name: 'Micheal', age: 36 }

 

arr.filter(fn) 는 조건을 만족하는 '모든 요소'를 배열로 반환해준다. 사용법은 arr.find(fn)와 동일하다.

let arr=[1,2,3,4,5,6];
const result=arr.filter((item)=>{
    return item%2===0;
});
console.log(result); // [ 2, 4, 6 ]

 

arr.reverse() 는 배열을 역순으로 재정렬 시켜준다.

 

arr.map(fn) 는 함수를 받아 배열을 순환하며 특정 기능을 시행하고 그 결과를 새로운 배열로 반환해준다. 기존의 배열은 건드리지 않고 새로운 배열을 만드는 것이기 때문에, 그대로 존재하고 있다. 맵은 실무에서 굉장히 많이 사용되므로 잘 익혀두어야 한다. 

let newUserList=userList.map((user, index)=>{
    return Object.assign({}, user, {
        isAdult: user.age>19,
    });
});
console.log(newUserList);
/**
[
  { name: 'Mike', age: 30, isAdult: true },
  { name: 'Tom', age: 27, isAdult: true },
  { name: 'Micheal', age: 10, isAdult: false }
]
 */

 

arr.join('') 로 배열을 문자열로 합쳐서 표현할 수 있다. 주어지는 문자열을 구분자로 사용한다.

 

arr.split('') 은 반대로 문자열을 나눠서 배열로 표현해준다.

 

Array.isArray(arr)를 이용해서 특정 객체가 배열인지 아닌지를 true, false로 구분할 수 있다.

 

 

arr.sort() 는 배열을 재정렬시켜주는 기능이다. 즉, 기존 배열이 변경된다. 인수를 전달하지 않으면 기본적으로 문자열 기준으로 순서대로 정렬해준다.

arr.sort(fn) 처럼 함수를 전달해서, 정렬 로직을 함수 안에 담는다. 

let arr2=[27,8,5,13];
arr2.sort((a,b)=>{
    return a-b; 
    // 두 값의 차가 양수인지 음수인지 판단하여
    // 양수=true or 음수=false로 리턴하는 것이다.
    // 그리고 작은 수를 앞으로, 큰 수를 뒤로 배치한다.
});
console.log(arr2); // [ 5, 8, 13, 27 ]

arr2.sort((a,b)=>{
    return b-a; 
    // 위 조건과 반대로 실행한다.
});
console.log(arr2); // [ 27, 13, 8, 5 ]

로직이 복잡하기 때문에, Lodash 같은 라이브러리에서 이미 만들어진 _.sortBy(arr) 같은 메소드를 유용하게 사용할 수 있다.

https://lodash.com/

Lodash

 

arr.reduce(fn) 는 인수로 함수를 받으며, 함수는 (누적 계산값(이전값), 현재값) => {return 계산값} 의 형태를 가지고 있다.

즉, 기본적으로 초기값을 가지고 배열을 돌면서 동작한 뒤 결과값을 리턴해주는 기능이다. 

초기값은 옵션이기 때문에, 적지 않으면 배열의 첫번째값이 초기값이 된다.

arr.reduceRight(fn) 는 리듀스와 동일하며, 배열의 오른쪽부터 실행된다는 차이가 있다.

let userList2=[
    {name:"Mike", age:30},
    {name:"Tom", age:27},
    {name:"Micheal", age:10},
    {name:"Sue", age:26},
    {name:"Harry", age:42},
    {name:"Steve", age:60},
]

let result3=userList2.reduce((prev, cur)=>{
    if(cur.age>30){
        prev.push(cur.name); 
        // 빈 배열에 조건을 만족하는 값을 추가
    }
    return prev; 
    //조건을 만족하지 않으면 동작없이 통과해서 이전값 리턴
},[]) // 초기값은 빈 배열

console.log(result3); // [ 'Harry', 'Steve' ]

 

 

 

외부 참고 자료

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