TIL 08 | JavaScript 데이터 메소드

1. string

1) .indexOf()

indexOf() 메서드는 호출한 String 객체에서 주어진 값과 일치하는 첫번째 인덱스를 반환합니다. 일치하는 값이 없으면 -1을 반환합니다.

const result = 'Hello world!'.indexOf('Heropy') // -1
const result1 = 'Hello world!'.indexOf('He') // 0

const str1 =  'Hello world'
console.log(str1.indexOf('world')) // 6
console.log(str1.indexOf('Heropy')!== -1 ) // false 문자열 안에 'Heropy'가 있는지 없는지 불린데이터로 판별

2) .length

.length는 문자열의 길이를 반환한다.

const str = '0123'
console.log(str.length) // 4 
console.log('01 23'.length) // 5 공백도 length에 포함

3) .slice(beginIndex[, endIndex])

slice() 메소드는 문자열의 일부를 추출하면서 새로운 문자열을 반환한다.

const str1 =  'Hello world'
console.log(str1.slice(0,3)) // slice(x,y) x에서 시작해서 y직전까지만 잘라내어 보여준다.
console.log(str1.slice(6,11)); // world

4) .replace()

replace() 메서드는 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환한다.

const str1 =  'Hello world'
console.log(str1.replace('world', 'Heropy')) // world빠지고 Heropy로 교체
console.log(str1.replace(' world', '')) // world 날려버리기

5) .match()

match() 메서드는 문자열이 정규식과 매치되는 부분을 검색한다. 정규 표현식에 대한 이해가 필요하다.

const email = 'pca0046@gmail.com'
console.log(email.match(/.+(?=@)/)) //["pca0046", index: 0, input: "pca0046@gmail.com", groups: undefined]
console.log(email.match(/.+(?=@)/)[0]) // pca0046

6) .trim()

trim() 메서드는 앞뒤 모든 공백 문자를 제거한다.

const str2 = '     Hello world  '
console.log(str2.trim()) // Hello world    

2. Number and Math

1) .toFixed()

괄호안의 숫자만큼 소수점 자릿수까지만 반환한다. 문자데이터로 반환된다는 점 주의

const pi = 3.141599265358979
console.log(pi)

const str3 = pi.toFixed(2)
console.log(str3) // 3.14
console.log(typeof str3) // string

2) parseInt() 와 parseFloat()

parseInt() 함수는 문자열 인자를 구문 분석하여 정수만 숫자로 반환한다.
parseFloat() 함수는 문자열을 분석해 부동소수점 실수로 반환한다.

const str3 = 3.14
const integer = parseInt(str3) // 인수로 숫자가 들어있는 문자데이터를 넣게 되면 숫자만 추출하여 정수로 반환됨
const float = parseFloat(str3) // 소수점 자리를 유지하면서 문자데이터를 숫자데이터로 변환
console.log(integer) // 3
console.log(float) // 3.14
console.log(typeof integer, typeof float) // number number

3) Math 메소드

console.log(Math.abs(-12)) //12, Math.abs() 주어진 숫자의 절대값을 반환합니다.
console.log(Math.min(2,8)) // 2 ,주어진 범위 안 최솟값
console.log(Math.max(2,8)) // 8, 주어진 범위 안 최댓값
console.log(Math.ceil(3.14)) // 4, 정수 단위 올림
console.log(Math.floor(3.14)) // 3, 정수 단위 내림
console.log(Math.round(3.14)) // 3, 반올림 반내림
console.log(Math.random()) // 0.060059749146228025 랜덤한 숫자 반환

3. Array

1) .length

const numbers = [1,2,3,4]
const fruits = ['Apple', 'Banana', 'Cherry']

console.log(numbers.length) // 4
console.log(fruits.length)// 3
console.log([1,2].length)// 2
console.log([].length) // 0 , 비어있는 배열

2) .concat()

두개의 배열을 병합하여 반환한다. 그러나 원본에 영향을 미치진 않는다.

console.log(numbers.concat(fruits)) // [1, 2, 3, 4, "Apple", "Banana", "Cherry"] 
console.log(numbers) // [1,2,3,4]
console.log(fruits) // ['Apple', 'Banana', 'Cherry'] *원본에 영향 없음

3) .foreach()와 .map()

.foreach()는 배열 데이터의 아이템 개수만큼 특정한 콜백함수를 반복적으로 실행하는 용도로 사용되는 메소드
.map()는 .forEach와 달리 메소드가 실행된 값을 새로운 배열로 반환한다.

//foreach()
const fruits = ['Apple', 'Banana', 'Cherry']

fruits.forEach(function (element, index, array){ // 배열 안 element 수 만큼 반복 실행
  console.log(element, index, array) // 주로 세번째 인자인 array는 데이터 불변성으로 사용을 안함 , function(element,index)
}) 
/*Apple 0 (3) ["Apple", "Banana", "Cherry"]
Banana 1 (3) ["Apple", "Banana", "Cherry"]
Cherry 2 (3) ["Apple", "Banana", "Cherry"]*/

const a = fruits.forEach(function(fruit, index){
  console.log(`${fruit}-${index}`)
})
//Apple-0
//Banana-1
//Cherry-2

console.log(a) // undefined .forEach의 경우 함수가 실행되고 반환되는 값이 없다.

//map()
const b = fruits.map(function(fruit, index){
  return `${fruit}-${index}` // .map()는 .forEach와 달리 메소드가 실행된 값을 새로운 배열로 반환한다. 
})
console.log(b) // ["Apple-0", "Banana-1", "Cherry-2"]

const c =  fruits.map(function(fruit, index){
  return {
    id: index,
    name: fruit
  } // 객체 데이터를 새로운 배열로 반환
})
console.log(c) // [{id: 0, name: "Apple"}, {id: 1, name: "Banana"}, {id: 2, name: "Cherry"}]

// Bonus. 화살표 함수로 변환
const a = fruits.forEach((fruit, index) => {
  console.log(`${fruit}-${index}`)
})

const c =  fruits.map((fruit, index) => ({
    id: index,
    name: fruit
})

4) .filter()

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

const numbers = [1,2,3,4]

const e = numbers.filter(number => {
  return number < 3 // true가 반환된 아이템들만 모아서 새로운 변수에 배열로 할당된다. 
})
console.log(e) //[1,2]

//.map()과 비교
const d = numbers.map(number => {
  return number < 3
})
console.log(d) // [true, true, false, false] 

// ** map과 filter 모두 원본에 영항 없이 새로운 배열을 반환한다.

5) .find()와 .findIndex()

find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환한다. 그런 요소가 없다면 undefined를 반환합니다.
findIndex() 메서드는 함수식 조건에 맞는 데이터 인덱스 번호를 반환한다.

const array1 = [5, 12, 8, 130, 44];
const fruits = ['Apple', 'Banana', 'Cherry']

const found = array1.find(element => element > 10);
console.log(found); // expected output: 12

const f = fruits.find(fruit => {
  return /^B/.test(fruit) // /^B/ > 대문자 B로 시작하는 문자 데이터
}) 
console.log(f) // Banana

const g = fruits.findIndex(fruit => { // 함수식 조건에 맞는 데이터 인덱스 번호 반환
  return /^B/.test(fruit) // /^B/ > 대문자 B로 시작하는 문자 데이터
}) 
console.log(g) // 1

6) .includes()

인수가 배열에 포함되어있는지 아닌지 여부 확인한다.

const numbers = [1,2,3,4]

const h = numbers.includes(3)
console.log(h) // true

const i = fruits.includes('HEROPY')
console.log(i) // false

---

이 아래는 배열 원본이 수정되는 메소드

7) .push() 와 .unshift()

push()는 인수를 배열 뒤에 데이터로 추가한다.
unshift()는 인수를 배열 맨 앞에 데이터로 추가한다.

const numbers = [1,2,3,4]

numbers.push(5) // 배열 뒤에 인수를 데이터로 추가
console.log(numbers) // [1,2,3,4,5]

numbers.unshift(0) // 배열 맨 앞에 인수를 데이터로 추가
console.log(numbers) // [0,1,2,3,4,5] 

8) .reverse()

reverse() 메소드는 배열의 순서를 역순으로 반환한다.

numbers.reverse()
fruits.reverse()

console.log(numbers) // [4,3,2,1]
console.log(fruits) // ["Cherry", "Banana", "Apple"]

9) .splice()

.splice()은 배열에 아이템을 제거하는 용도로도 사용되지만 끼워넣는 용도로도 사용 가능

const numbers = [1,2,3,4]
const fruits = ['Apple', 'Banana', 'Cherry']

numbers.splice(2,1) // (시작지점의 인덱스, 삭제할 아이템 개수) 
console.log(numbers) // [1,2,4]

numbers.splice(2,0,999) // 해당 인덱스 위치에 999를 추가해라
console.log(numbers) // [1,2,999,3,4]

numbers.splice(2,1,999) // 해당 인덱스 데이터를 999로 교체해라
console.log(numbers) // [1,2,999,4]