JS 자세히 알아보기 (데이터)

 

문자 데이터

 

const str1 = '0123'

// 문자 데이터의 길이를 출력
// 출력 결과: 4
console.log(str1.length)

const str2 = 'Hello world!'

// 문자 데이터에서 주어진 단어를 찾으면 일치하는 첫번째 인덱스를 반환
// 출력 결과: 6
console.log(str2.indexOf('world'))

// 문자열의 시작 지점과 마지막 지점 직전까지 새로운 문자열을 반환
// 출력 결과: Hel
console.log(str2.slice(0, 3))

// 문자열을 교체해준다
// 출력 결과: Hello IT Blue
console.log(str2.replace('world', 'IT Blue'))

const str3 = '  Hello world '

// 모든 공백 문자를 제거해준다
// 출력 결과: Hello World
console.log(str3.trim())

 

숫자 데이터

 

const pi = 3.14159265358979
console.log(pi)

// toFixed(매개변수), 매개 변수 뒤에 소수점을 버리고 결과를 데이터 타입으로 반환
const str = pi.toFixed(2)
// 출력 결과: 3.14
console.log(str)
// 출력 결과: string 
console.log(typeof str)

// parseInt, parseFloat 전역(Global) 함수
// int (정수)형으로 반환
const integer = parseInt(str)
// float 형으로로 반환
const float = parseFloat(str)

// 출력 결과: 3
console.log(integer)
// 출력 결과: 3.14
console.log(float)
// 출력 결과: number number
console.log(typeof integer, typeof float)

 

수학 

 

// 절대값을 반환
// 출력 결과: abs: 12
console.log('abs: ', Math.abs(-12))

// 인수 중에 가장 작은 값을 반환
// 출력 결과: min: 2
console.log('min: ', Math.min(2, 8))

// 인수 중에 가장 큰 값을 반환
// 출력 결과: max: 8
console.log('max: ', Math.max(2, 8))

// 올림 처리
// 출력 결과: ceil: 4
console.log('ceil: ', Math.ceil(3.14))

// 내림 처리
// 출력 결과: floor: 3
console.log('floor: ', Math.floor(3.14))

// 반올림 처리
// 출력 결과: round: 3
console.log('round: ', Math.round(3.14))

// 랜덤 숫자 반환
console.log('random: ', Math.random())

 

배열 데이터

 

// .length
// 배열 데이터의 아이템의 갯수를 반환해준다

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

// 출력 결과: 4
console.log(numbers.length)
// 출력 결과: 3
console.log(fruits.length)
// 출력 결과: 2
console.log([1,2].length)

// 공백 배열
// 출력 결과: 0
console.log([].length)

 

// .concat
// 두 개의 배열 데이터를 병합

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

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

 

// .forEach()
// 배열 데이터의 아이템 갯수만큼 인수로 사용된 콜백 함수가 반복적으로 실행

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

// Apple 0 
// Banana 1 
// Cherry 2 
fruits.forEach(function (element, index) {
  console.log(element, index)
})

 

// .map()
// 배열 데이터의 아이템 갯수만큼 인수로 사용된 콜백 함수가 반복적으로 실행
// 이후 결과를 새로운 배열로 반환

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

const b = fruits.map(function (fruit, index) {
  return `${fruit}-${index}`
})

// ["Apple-0", "Banana-1", "Cherry-2"]
console.log(b)

 

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

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

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

const b = numbers.filter(number => {
  return number < 3
})
// [1, 2]
console.log(b)

 

// .find() - 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환
// .findIndex() - 주어진 판별 함수를 만족하는 첫 번째 인덱스 번호를 반환


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

const a = fruits.find(fruit => {
  // /^B/ (정규표현식), 대문자 B로 시작되는 문자데이터
  // test(), 아이템(fruit)이 정규 표현식 조건에 맞으면 true 반환
  return /^B/.test(fruit)
})

// Banana
console.log(a)

const b = fruits.findIndex(fruit => {
  return /^B/.test(fruit)
})

// 1
console.log(b)

 

// .includes()
// 배열이 특정 요소를 포함하고 있는지 판별

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

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

 

// .push() - 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환
// .unshift() - 새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환
// 원본 배열이 수정됨

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

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

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

 

// .reverse() - 배열의 순서를 반전
// 원본 배열이 수정됨

const numbers = [1, 2, 3, 4]
numbers.reverse()

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

 

// .splice()
// 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경
// 원본 배열이 수정됨

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

// splice(배열의 변경을 시작할 인덱스, 배열에서 제거할 요소의 수)
numbers.splice(2, 1)

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

 

---

참조

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String

String - JavaScript | MDN

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math

Math - JavaScript | MDN

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

Array - JavaScript | MDN