JavaScript Level up - ch.5 JS 데이터 (1) ~ (4)

1. 문자

리터럴 방식이란?

기호(`` '' "" {} [])를 사용해서 데이터를 만드는 방식

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

const result = 'Hello world!'.indexOf('world')
const result2 = 'Hello world!'.indexOf('hi')
console.log(result) // 6 출력
console.log(result2) // -1 출력

• String.length()
  이 메소드는 주어진 문자, 숫자 등의 데이터의 개수를 파악해줌

const str = 'Hello world'
console.log(str.length) // 11 출력

• String.slice()
  이 메소드는 문자열의 일부를 추출하면서 문자열 반환

const str = 'Hello world'
console.log(str.slice(0, 3)) // Hel, 0번째 ~ 3번째 전까지

• String.replace()
  이 메소드는 지정한 문자를 원하는 문자로 대체할 수 있음
  공백을 사용해서 삭제도 가능

const str = 'Hello world'
console.log(str.replace('world', 'dongdu') // Hello dongdu 출력

• String.match()
  이 메소드는 문자 데이터에서 정규표현식을 통해 특정한 문자를 매치시킬 수 있으며 이를 배열 데이터로 받을 수 있음
  그 배열 데이터 내부에서 원하는 데이터를 추출할 수 있음

const str = '4012popo@naver.com'
console.log(str.match(/.+(?=@)/)[0]) // 정규표현식 사용

• String.trim()
  이 메소드는 앞뒤에 있는 공백 문자를 제거함

const str = '     Hello world   '
console.log(str.trim()) // Hello world 출력

2. 숫자와 수학

• Number.toFixed()
  이 메소드는 뒤에 있는 소수점 자리를 원하는만큼 내려줌

const pi = 3.141592
console.log(pi)

const str = pi.toFixed(2) // 소수점 2째자리까지만 보여줌
console.log(str)
console.log(typeof str) // string 출력

• parseInt(), parseFloat()
  parseInt()는 정수만 추출하면서 숫자 데이터로 반환
  parseFloat()는 숫자를 모두 유지하면서 숫자 데이터로 반환

const integer = parseInt(str)
const float = parseFloat(str)

console.log(integer) // 3 출력
console.log(float) // 3.14 출력

console.log(typeof integer, typeof float)

Math 사용

수학적인 상수와 함수를 위한 속성과 메소드를 가진 내장 객체

• Math.abs()
  절대값 반환

console.log(Math.abs(-12)) // 12 반환

• Math.min()
  인수로 들어온 값 중 가장 작은 값을 반환

console.log(Math.min(2, 8)) // 2 반환

• Math.max()
  인수로 들어온 값 중 가장 큰 값을 반환

console.log(Math.max(2, 8)) // 8 반환

• Math.ceil()
  소수를 정수단위로 올림 처리

console.log(Math.ceil(3.14)) // 4 반환

• Math.floor()
  소수를 정수단위로 내림 처리

console.log(Math.floor(3.14)) // 3 반환

• Math.round()
  소수를 정수단위로 반올림 처리

console.log(Math.round(3.14)) // 3 반환

• Math.random()
  랜덤(난수) 반환

console.log(Math.random()) // 랜덤한 숫자 반환

3. 배열(1)

Array API(1)

• .length()
  배열의 길이를 알려줌

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

console.log(number.length) // 4 반환

• .concat()
  두 개의 배열 데이터를 합쳐서 새로운 배열 데이터로 만듬

const numbers2 = [5, 6, 7]

console.log(numbers.concat(numbers2)) // 새로운 배열 반환 [1, 2, 3, 4, 5, 6, 7]
console.log(numbers) // 원본은 그대로임

• .find()
  이 메소드는 주어진 판별 함수를 만족하는 첫 번째 요소를 반환
  그런 요소가 없으면 undefined 반환

const array = [5, 12, 33, 4]

const found = array.find(element => element > 10)

console.log(found) // 12 출력

• .forEach()
  배열 데이터의 아이템 개수만큼 특정 콜백함수를 반복하는 용도

const fruits = ['apple', 'banana', 'manggo']

fruits.forEach(function (element, index, array) {
	console.log(element, index, array)
} // 하나씩 반복하면서 요소, 인덱스, 배열 전체를 반환, 세 번을 반복해서 출력

• .map()
  인수로 사용하는 콜백의 내부에서 반환하는 하나의 데이터를 가지고 새로운 배열을 만들어서 반환 -> 객체로 만들어서 사용을 많이 함

const a = fruits.forEach(function (fruits, index) {
	console.log(`${fruits}-${index}`)
}
console.log(a) // undefined 출력, 포이치는 반환 불가

const b = fruits.map(function (fruits, index) {
	console.log(`${fruits}-${index}`)
}
console.log(b) // 반환 가능, 새로운 배열 데이터 출력

4. 배열(2)

Array API(2)

• .filter()
  배열 데이터 안에 있는 아이템들을 지정한 기준대로필터링하여 새로운 배열 데이터를 반환

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

const a = numbers.map(numbers => numbers < 3)
console.log(a) // [true, true, false, false]

const b = numbers.fliter(numbers => numbers < 3)
console.log(b) // [1, 2]

• .findIndex()
  찾아진 아이템의 인덱스를 반환

const fruits = ['apple', 'banana', 'manggo']

const a = fruits.find(fruits => /^b/.test(fruits)) // b로 시작하는 아이템을 찾음
console.log(a) // banana 출력

const b = fruits.findIndex(fruits => /^b/.test(fruits)) // b로 시작하는 아이템의 인덱스를 찾음
console.log(b) // 1 출력

• .includes()
  배열 안에 아이템이 포함되어 있는지 확인해줌

const numbers = [1, 2, 3, 4]
const fruits = ['apple', 'banana', 'manggo']

const a = numbers.includes(3)
console.log(a) // true 반환

const b = numbers.includes('dongdu')
console.log(b) // false 반환

• .push()
  배열 맨 끝에 특정한 인수를 끼워넣음
  원본이 수정됨

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

numbers.push(5)
console.log(numbers) // [1, 2, 3, 4, 5] 출력

• .unshift()
  배열 맨 앞에 특정한 인수를 끼워 넣음
  원본이 수정됨

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

numbers.unshift(0)
console.log(numbers) // [0, 1, 2, 3, 4, 5]

• .reverse()
  배열을 뒤집어버림
  원본이 수정됨

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

numbers.reverse()

console.log(numbers) // [4, 3, 2, 1] 출력 

• .splice
  지정된 위치부터 원하는 만큼 삭제할 수 있음
  세번째 인수에 원하는 데이터를 추가 가능
  원본이 수정됨

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

numbers.splice(2, 1)
console.log(numbers) // [1, 2, 4] 출력

numbers.splice(1, 0, 999)
console.log(numbers) // [ 1, 2, 999, 4]