[포스코x코딩온] 웹 풀스택 과정 2주차 회고 | Method

문자열 관련 메소드

1. 문자열 길이 확인

• .length : 문자열의 길이를 반환

let str = "Happy day~";
console.log(str.length); //10

2. 모두 대문자/소문자로 바꾸기

• .toUpperCase() : 문자열 전체를 대문자로 변환
• .toLowerCase() : 문자열 전체를 소문자로 변환

let str = "Happy day~";
console.log(str.toUpperCase()); // HAPPY DAY~
console.log(str.toLowerCase()); // happy day~

3. 특정 문자의 index 가져오기 (문자열을 매개변수로 받음)

• .indexOf("") : 몇번째 인덱스인지 숫자를 반환
• .lastIndexOf("") : 찾은 문자 중 가장 끝에 있는 문자가 몇번째 인덱스인지 숫자를 반환

let str = "Happy day~";
console.log(str.indexOf("a")); // 1
console.log(str.lastIndexOf("a")); // 7

4. 문자열 자르기

• .slice(startidx[,endidx]) : start부터 end-1까지 슬라이싱하여 빼옴. ([]는 생략 가능)

let str = "Happy day~";
console.log(str.slice(6)); // day~
console.log(str.slice(6, 9)); // day

5. 문자열 바꾸기

• .replace(문자열1, 문자열2) : 문자열1을 문자열2로 변경 (가장 앞의 문자열1만 바꿈)
• .replaceAll(문자열1, 문자열2) : 문자열1을 모두 찾아서 문자열2로 변경

let str = "Happy day~";
console.log(str.replace("a", "b")); // Hbppy day~
console.log(str.replaceAll("a", "b")); // Hbppy dby~

6. 문자열 반복

• .repeat(n) : 문자열을 n번 반복

let str = "Happy day~";
console.log(str.repeat(3)); // Happy day~Happy day~Happy day~

7. 문자열의 양끝 공백 제거

• .trim() : 문자열의 양끝 공백을 제거 (로그인 창의 아이디/비번 입력창에 주로 사용)

let str = " Happy day~";
console.log(str.trim()); // Happy day~

8. 문자열 쪼개기 (배열 생성)

• .split() : 매개변수로 들어온 문자열을 기준으로 쪼개어 배열로 저장 (기준이 된 문자열은 삭제됨)

let str = "Happy day~";
console.log(str.split("")); // ["H","a","p","p","y"," ","d","a","y","~"]
console.log(str.split(" ")); // ["Happy","day~"]
console.log(str.split("a")); // ["H","ppy d","y~"]

배열 관련 메소드

1. 배열의 길이 확인

• .length : 배열의 길이를 반환

let arr = ["O", "T", "T", "F", "F", "S", "S"];
console.log(arr.length);

2. 배열 끝에 추가/삭제

• .push() : 배열의 끝에 원하는 만큼 요소를 추가 -> 추가된 이후의 배열의 길이를 반환한다!
• .pop() : 배열의 가장 끝에 위치한 요소를 삭제 -> 삭제된 해당 요소를 반환한다!

let arr = ["O", "T", "T", "F", "F", "S", "S"];
    
let pushResult = arr.push("E", "N");
console.log(arr); // ["O", "T", "T", "F", "F", "S", "S", "E", "N"]
console.log(pushResult); // 9

let popResult = arr.pop();
console.log(arr); // ["O", "T", "T", "F", "F", "S", "S", "E"]
console.log(popResult); // N

3. 배열 앞에 추가/삭제

• .unshift() : 배열의 맨 앞에 원하는 만큼 요소를 추가 -> 추가된 이후의 배열의 길이를 반환한다!
• .shift() : 배열의 맨 앞에 위치한 요소를 삭제 -> 삭제된 해당 요소를 반환한다!

let arr = ["O", "T", "T", "F", "F", "S", "S"];
    
let unshiftResult = arr.unshift("Z");
console.log(arr); // ["Z", "O", "T", "T", "F", "F", "S", "S"]
console.log(unshiftResult); // 8

let shiftResult = arr.shift();
console.log(arr); // ["O", "T", "T", "F", "F", "S", "S"]
console.log(shiftResult); // Z

4. 특정 요소의 인덱스 가져오기

• .indexOf(찾을 요소, [검색을 시작할 인덱스]) : 검색을 시작할 인덱스는 생략가능 (처음부터 검사 시작함)
• .lastIndexOf()

let arr = ["O", "T", "T", "F", "F", "S", "S"];
console.log(arr.indexOf("T")); // 1
console.log(arr.indexOf("T", 2)); // 2
console.log(arr.lastIndexOf("F")); // 4

5. 특정 요소 포함여부 확인

• .includes(찾을 요소, [검색을 시작할 인덱스]) : 요소가 있는지 여부를 boolean 타입으로 반환

let arr = ["O", "T", "T", "F", "F", "S", "S"];
console.log(arr.includes("F")); // true
console.log(arr.includes("T", 3)); // false

6. 배열 내 순서 반전

• .reverse()

let arr = ["O", "T", "T", "F", "F", "S", "S"];
console.log(arr.reverse()); // ["S", "S", "F", "F", "T", "T", "O"]

7. 배열을 문자열로 연결

• .join() : 배열을 연결하여 문자열로 반환 (매개변수를 연결기호로)

let arr = ["O", "T", "T", "F", "F", "S", "S"];
console.log(arr.join()); // O,T,T,F,F,S,S
console.log(arr.join("")); // OTTFFSS
console.log(arr.join("&")); // O&T&T&F&F&S&S

 

메소드 체이닝

 

여러 개의 메소드를 연결하여 사용하는 개념으로, 메소드에 return값이 있을 때만 사용 가능하다!
예를 들어, 문자열을 배열로 split 하고 순서를 뒤집어 다시 문자열로 변환할 때 아래와 같이 한줄로 작성할 수 있다.

let str = "가나다라마바사";
console.log(str.split("").reverse().join("")); // 사바마라다나가

 

배열에서의 조건문

 

아래와 같이 3가지 형태로 배열에 대한 조건문을 작성할 수 있다.

let fruits = ["apple", "banana", "melon", "cherry", "grape"];

• for문
  기존에 배운 for문과 동일하다.

for (i = 0; i < fruits.length; i++) {
	console.log(fruits[i]);
}

• for of
  for ( 변수 of 배열 ) { 명령 코드 } 배열에 있는 요소를 처음부터 하나씩 변수로 가져와 명령을 실행한다. -> 별도의 새로운 변수(i)를 만들지 않아도 됨

 for (f of fruits) {
 	console.log(f);
}

• [].forEach
  [].forEach(function) 배열에 대해 콜백함수를 실행하도록 한다.
  함수는 변수, 인덱스, 배열로 3개의 parameter를 가질 수 있다.

fruits.forEach(function (f, index, fruits) {
	console.log(f);
});

화살표 함수로도 나타낼 수 있다.

fruits.forEach((f, index, fruits) => {
	console.log(f);
});

 

이 부분을 좀더 자세히 설명하자면,
변수(value)는 반복을 돌 때 그 요소의 값을 뜻하고,
인덱스(index)는 배열에서 value의 인덱스를 뜻하고,
배열(array)는 현재 반복을 돌고 있는 그 배열의 원본을 뜻한다.

 

함수의 명령 코드로 console.log(f, index, fruits);를 추가하면, fruits 배열을 다 돌 때까지 각 value, index, array가 콘솔에 출력된다.

 

fruits.forEach(function (f, index, fruits) {
	console.log(f, index, fruits);
});
	
>> 출력
apple 0 ["apple", "banana", "melon", "cherry", "grape"]
banana 1 ["apple", "banana", "melon", "cherry", "grape"]
melon 2 ["apple", "banana", "melon", "cherry", "grape"]
cherry 3 ["apple", "banana", "melon", "cherry", "grape"]
grape 4 ["apple", "banana", "melon", "cherry", "grape"]

 

※배열 - filter

[].filter(function) function에서 나타내는 조건에 부합하는 배열 요소만을 반환한다.

 let filtered = fruits.filter(function (f) {
	return f.length > 5;
 });

console.log(filtered); // ["banana", "cherry"]

let filtered = fruits.filter((f) => f.length > 5);
console.log(filtered); // ["banana", "cherry"]

 

전개연산자는 언제 사용할까?

 

shallow copy, deep copy 개념에 대해서 더 자세히 공부해야 정확히 알 수 있겠지만, 일단 이번 수업을 통해 알게된 부분은 전개연산자(...)는 주소가 아니라 실제 값을 저장할 때 사용한다.
특정 배열을 새로운 변수에 저장할 때, 값이 아니라 값이 들어있는 주소가 저장된다.
배열 A를 변수 B에 저장했을 때, A.push(3);를 실행하면 A의 주소에 대해 함수가 작용하기 때문에 A와 B모두 push 함수가 적용된다. 하지만 변수 B에 배열 A를 저장할 때 전개연산자를 사용하면, 주소가 아닌 실제 값을 저장하기 때문에 완전히 별개의 배열로 저장할 수 있다.

let arr1 = ["1", "2", "3"];
let arr2 = arr1;
let arr3 = [...arr1];
arr1.push("4");

console.log(arr1); // ["1", "2", "3", "4"]
console.log(arr2); // ["1", "2", "3", "4"]
console.log(arr3); // ["1", "2", "3"]