[포스코X코딩온] JS_03 메소드

문자열 관련 메소드

.length : 문자열 길이 반환(공백포함)
.toUpperCase()&toLowerCase() : 문자열 전체를 대문자&소문자로 변경
.indeexOf(' ') : 매개변수로 문자열을 받아서 몇 번째 인덱스인지 숫자 반환
.slice(starIdx, endIdx) : start부터 end-1까지 슬라이싱 반환, 음수값도 가능
.replace(문자열1, 문자열2) : 1을 2로 변경
.replaceAll(문자열1, 문자열2) : 문자열1을 모두 문자열2로 변경
.repeat(n) : 문자열 n번 반복
.trim() : 문자열의 양끝 공백 없애기
.split() : 매개변수로 들어온 문자열 기준으로 str 쪼개서 배열 저장
 

배열 관련 메소드 

.push() : 배열 끝에 추가
.pop() : 배열 끝 요소 제거
.shift() : 배열 앞에 제거
.unshift() : 배열 앞 추가
arr.length : 배열 길이 반환
arr.indexOf() : 매개변수에 해당하는 배열의 인덱스를 받아옴. 매개변수에는 문자열이 아니어도 됨.
arr.reverse() : 배열 순서 반대로 반환
arr.join() : join 안의 문자열 기준으로 문자열 병합
 

배열 함수 , [ ].include(요소);

배열에 지정한 요소가 있는지 확인
 

배열에서의 for

for문 / for of문

let arr = [1, 2, 3];

//for문
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

//for of문
for (let number of arr) {
  console.log(number);
}

 

 

[ ].forEach문

배열의 요소를 반복하는 array 객체에서만 사용하는 메소드이다. 

let fruits = ["딸기", "바나나", "수박 "];

fruits.forEach(function (fruit, i, arr) {
  console.log(fruit, i, arr);
});

fruits.forEach((fruit, i, arr) => {
  console.log(fruit, i, arr);
});

첫번째 인수는 배열의 item, 두번째 인수는 배열의 index, 세번째 인수는 배열 그 자체이다. 

배열의 item인 딸기가 먼저 나오고 두번째에는 딸기의 인덱스인 0 세번째는 fruits 배열이 출력된다.
 

배열의 합

let numbers = [1, 2, 3];
let sum1 = 0;
let sum2 = 0;
let sum3 = 0;

for (let i = 0; i < numbers.length; i++) {
  sum1 = sum1 + numbers[i];
}

for (let num of numbers) {
  sum2 = sum2 + num;
}

numbers.forEach((num) => {
  sum3 = sum3 + num;
});

 

배열함수, filter

- 조건에 부합하는 배열 요소만을 반환

let fruits = ["딸기", "바나나", "수박"];

let store =fruits.filter(function(select){
  return select.length >= 3;
})
console.log(store);

 

map : 배열의 모든 원소에 대해 연산한 값을 새로운 배열로 반환

let arr = [1, 2, 3].map(function (el) {
  return el * 3;
});

console.log(arr);

 

find : 조건을 만족하는 첫번째 값 반환

arr = [10, 20, 30, 40, 50];
let findResult = arr.find((num) => num >= 30);
console.log(findResult); //조건 만족하는 값 하나만 반환, 30

 

🙈 
조건문, 반복문, 메소드는 다른 언어에서 많이 사용해봐서 이번 수업시간은 많이 멍때리고 있었다.
이래서 언어하나 잘해두는 게 좋은 건가봅니다. 학교에서 배울 때 수업 좀 잘 들어놓을 걸.. 과거의 나 반성해;)

수업 들으면서 실습을 다양하게 많이 해볼 수 있었다.
실습문제를 풀어보고 강사님과 답을 맞추는 시간이면 괜히 떨린다. 코드에 정답이란 건 없는 걸 알지만, 강사님의 코드가 더 좋아 보이는 그런 느낌이다.
당연히 그러겠지만,,,
그렇다고 한가지 방법의 코드만 알려주시는 게 아니라 여러 방법으로 짤 수 있는 코드를 보여주신다.

그래도 콘솔창만 들여다보지 말고, 먼저 값 예상해보고 생각하는 시간 좀 가져야겠다.

bootstrap으로 구현하는 것도 알려주셨는데, 페이지 하나 만들면서 이 블로그의 검색기능을 사용했다.
그냥 적는 게 아니었고, 쓸모가 있었다니 다행인 것 같다. 
구글링하면 다른 사람이 쓴 글을 읽어봐야 하고, 강의 자료를 하나하나 ctrl+f  하기도 귀찮았었다. 
대충 내가 뭐라고 기억했고, 위아래 썼던 내용도 다시 찾아보게 되었다.