[코딩온] 프론트엔드 입문 Day 25 (JS method)

오늘은 method에 대해서 배웠는데, 오늘 배운 것들은 JS에서 이미 만들어놓은 것들이라 이해하기 수월했다. 나중에 조금 더 어려운 개념의 method와 property에 대해서 배우게 되면, 다시 한번 더 개념 정리를 해야할 것 같다.🙂

---

Method

'메서드', 또는 '메소드'라고도 부른다. JS에서 만들어서 이미 정의되어있는 함수.

1. 문자열에서 사용 가능한 속성과 메소드 → 인자가 있는 것, 없는 것.
2. 배열에서 사용 가능한 속성과 메소드

이렇게 나누어 설명하려고 한다.

---

1. 문자열에서의 속성과 메소드

// length
let srt = ' Strawberry ';
console.log(str.length); // 공백을 포함하기 때문에 12 출력

// 인자가 없는 메소드: xx.method() 형태
// toUpperCase(), toLowerCase()
let msg = 'Happy Day~'
console.log(msg.toUpperCase()); // 'HAPPY DAY~' 출력
console.log(msg.toLowerCase()); // 'happy day~' 출력

// trim()
let msg = ' Happy Day~ '
console.log(msg.trim()); // 'Happy Day~' 출력 (양 끝 공백 삭제)

// method chaining
let msg = ' Happy Day~ '
console.log(msg.trim().toLowerCase()); // 'happy day~' 출력

• length - 공백을 포함한 문자열의 길이를 반환하는 '속성'
• toUpperCase(), toLowerCase() - 문자열을 모두 대문자나 소문자로 변환해준다.
• trim() - 문자열 양 끝의 공백을 제거한다.

---

// 인자가 있는 메소드: xx.method(arg) 형태
// indexOf(), charAt()
let animal = 'elephant';
console.log(animal.indexof(a)); // 5 출력 (zero-based numbering)
console.log(animal.charAt(5)); // a 출력

// slice(startIdx[,endIdx])
console.log(animal.slice(5)); // ant 출력 (5번째 글자부터)
console.log(animal.slice(-2)); // nt 출력 (맨 뒤 글자부터)
console.log(animal.slice(2, 5)); // epha 출력

// replace(), replaceAll()
let msg = 'Oh! Oh! Happy Day!'
console.log(msg.replace('Oh!', 'WOW!')) // 'WOW! Oh! Happy Day!'
console.log(msg.replaceAll('Oh!', 'WOW!')) // 'WOW! WOW! Happy Day!'

// repeat()
console.log('대한독립만세!'.repeat(3)); // 대한독립만세!대한독립만세!대한독립만세!

// split()
let date = '2024.02.28';
console.log(date.split('.')); // ['2024', '02', '28']
console.log(date.split('')); // 모든 글자를 하나씩 나누어 배열로 반환
let splitedDate = date.split('.'); // ['2024', '02', '28'] 형식으로 변수에 저장
console.log(typeof splitedDate); // object (넓은 의미)

• indexOf() - 문자열에서 인자로 받은 문자열의 인덱스 반환, 없으면 -1 반환.
• charAt(n) - 인자로 받은 숫자 n 인덱스 번호에 대한 문자열 하나 반환.
• slice(startIdx[,endIdx]) - startIdx부터 endInx-1까지 자른다. 음수 인덱스 가능. endIdx 생략 가능.
• replace(a,b) - a의 문자를 b로 변환. 제일 처음에 만난 문자만 변환.
• replaceAll() - 해당하는 모든 문자를 교체시킨다.
• repeat(n) - 문자열을 n번 반복한다.
• split() - 인자로 받은 문자열을 기준으로 해당 문자열을 나누고, 나눈 문자열을 배열로 만들어 반환.

---

2. 배열에서의 속성과 메소드

let animal = ['mouse', 'cow', 'dog', 'cat']

// push(), pop()
animal.push('rabbit'); // ['mouse', 'cow', 'dog', 'cat', 'rabbit']
animal.pop();

// unshift(), shift()
animal.unshift('horse'); // ['horse', 'mouse', 'cow', 'dog', 'cat']
animal.shift();

// includes()
console.log(animal.includes('cow')); // true

// indexOf()
console.log(animal.indexOf('dog')); // 2

// reverse()
animal.reverse(); // ['cat', 'dog', 'cow', 'mouse']

// join()
console.log(animal.join()); // mouse,cow,dog,cat
console.log(arr2.join('')); // 빈 문자열 작성하면 모든 요소 붙어서 문자열로 출력
console.log(arr2.join(' AND ')); // 단어 중간에 AND 삽입되어 출력

• push() - 괄호 안의 요소를 배열 맨 끝에 넣기
• pop() - 배열 맨 끝의 요소 1개 제거하기
• unshift() - 괄호 안의 요소를 배열 맨 앞에 넣기
• shift() - 배열 맨 앞의 요소 1개 제거하기
  → 이상 4개는 원래의 배열이 변경되는 메소드
• includes() - 해당 배열에 인자로 받은 값과 동일한 요소가 있는지 확인하여 true/false 반환
• indexOf() - 해당 요소의 인덱스(몇 번째 요소인지)를 반환
• reverse() - 배열의 순서를 뒤집어서 변경시키는 메소드
• join() - 배열을 인자의 문자열 기준으로 합쳐 문자열로 반환. 원래 배열에 변경 없음.

---

배열에서의 반복

// for문
let arr3 = [1, 2, 3, 4, 5]; 
for (let i = 0; i < arr3.length; i++) {
  console.log(arr3[i]);
}

// for of문
// 기본형태: for (let 요소이름 of 배열이름) {}
for (let number of arr3) {
  console.log(number);
}

// forEach()
// 기본형태: 배열이름.forEach(function(요소이름, 요소의index, 배열)){}
arr3.forEach(function (num, idx) {
  console.log(num);
  console.log('index:', idx);
});

• for of - 요소이름(변수명)은 무엇을 의미하는지 알기 쉽게 작성해야 한다. 평범한 반복문처럼 계산을 한다던가 그런게 아니라, 배열의 요소에 직접 접근해서 하나씩 꺼내오는 기능을 갖고 있다.
• forEach() - 매개변수 3개를 받는 메소드. 매개변수 이름은 어떻게 지어도 상관없지만, 순서에 따른 의미는 항상 동일하다.

---

배열에서의 기타 메소드

// filter()
let arr = ['apple', 'melon', 'banana', 'blueberry', 'pear']
let newArr = arr.filter(function (fruit){
  return fruit.length <= 5;
})
console.log(newArr); // ['apple', 'melon', 'pear']

// return이 하나 뿐이면 간결하게 작성 가능
let newArr2 = arr.filter((fruit) => fruit.length <= 5)

// find()
let result = arr.find(funtion (fruit) {
  return fruit.charAt(0) === 'a';
})
console.log(result); // ['apple', 'banana', 'pear']

// map()
let nums = [1, 2, 3, 4, 5];
let mapArr = nums.map(function (n) {
  return n * 10;
});
console.log(mapArr); // [10, 20, 30, 40, 50]

• filter() - 배열에서 조건에 맞는 요소들만 뽑아서 새로운 배열로 반환. 원래 배열에 영향을 주지 않음.
  예시로 위에 작성한 코드를 문장으로 풀어쓰자면,
  → 각 요소를 fruit이라고 부르는 newArr를 만들건데, 여기엔 (단어)길이가 5보다 작은 것들만 필터링해서 넣겠다.
• find() - 배열에서 조건을 만족하는 첫번째 요소만 찾아서 값으로 반환.
  예시로 위에 작성한 코드를 문장으로 풀어쓰자면,
  → 각 요소를 fruit라고 부르는 result라는 배열을 만들건데, 배열의 0번째 요소부터 'a'가 들어간 단어만 찾겠다.
• map() - 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백함수를 반복 호출하여, 콜백함수의 반환값들로 구성된 새로운 배열을 반환한다.
  → 각 요소를 n이라고 부르는 mapArr를 만들건데, 각 요소에 10을 곱한 값을 새로운 배열의 요소로 만들겠다.

---

여기까지가 오늘 배운 내용이었다. 하루하루 진도를 나갈 때마다 느끼는거지만, JS랑 친해지는게 정말 쉽지 않다. 예전에 내일배움카드로 공부할 때도 HTML와 CSS에 비해 어렵다고 느꼈었는데, 그 생각은 지금도 변함이 없다. 하지만 학창시절 외국어를 배울 때 그랬듯이, 계속 들여다보며 읽고 쓰다보면 언젠가는 이해도가 높아지는 날이 오겠지!

THINK POSITIVE!