JS 데이터 (1)

1. 문자

전역 객체란 자바스크립트의 global scope에서 항상 존재하는 객체이다.
global scope에 항상 존재하므로 언제든 불러와서 쓸 수 있다.

그리고 String 역시 전역 객체인데 문자열(문자의 나열)의 생성자이다.

생성자라는 것은 new String("")을 통해서 새로운 문자열 객체를 만들 수 있다는 의미이다.

(생성자는 함수이고 자바스크립트에서 함수는 function 객체이므로 String 역시 생성자 즉, 객체이다. 즉, global scope 어디서든 호출할 수 있으므로 전역 객체이다.)

지금까지 우리는 문자열을 리터럴 방식으로만 만들어왔다.

(리터럴 방식이란? 쉽게 말하면 "", '' 등의 기호로 객체를 만드는 것이라고 할 수 있다.
리터럴이란 정확히는 소스 코드의 고정된 값을 대표하는 용어이다.
즉, "", '' 등의 기호는 의미하는 바가 고정되어 있으므로 리터럴이고 이런 리터럴로 객체를 만드는 방식이 리터럴 방식이다.
object 객체는 리터럴 방식으로 {} 를 통해, 배열 객체는 []를 통해 만들 수 있다.)

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

이렇게 mozilla에서 document를 통해 해당 언어에 대한 여러가지 정보를 찾을 수 있는데

여기서 휴지통 표시는 더 이상 지원하지 않거나 사용을 권장하지 않는 메소드들이니 참고하자.

이제 정의되어 있는 메소드들 중 자주 쓰는 메소드들을 알아보자.

(1) indexOf()

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

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

ex.

const x = 'Hello'
console.log(x.indexOf('e'))

숫자 1 이 콘솔에 출력되는 것을 볼 수 있다.

ex.

const x = 'Hello'
console.log(x.indexOf('lo'))

이 경우 숫자 3이 콘솔에 출력된다.

(2) length

자바스크립트는 length가 필드변수로 저장되어 length를 참조하는 시간복잡도가 O(1)이다.

(3) slice()

ex.

str = "Hello JavaScript"
console.log(str.slice(1,4))

이는 1번째 index부터 4번째 index '전'까지 문자열을 잘라내서 리턴하는 메소드이다.

(4) replace()

str.replace(src, dest) 메소드는 str에서 src문자열을 dest문자열로 바꾼 문자열을 리턴한다.

(5) trim()

str.trim()을 사용하면 str의 앞뒤의 공백문자를 모두 제거하여 리턴한다.

2. 숫자와 수학

(1)

const pi = 3.14159265358979
console.log(pi)

const str = pi.toFixed(2)
console.log(str)
console.log(typeof str)  // 문자열

const integer = parseInt(str)  // 3
const float = parseFloat(str)  // 3.14
// parse : 문법적으로 분석한다는 뜻

console.log(integer)
console.log(float)
console.log(typeof integer, typeof float)  // 둘다 number

toFixed(n) : Number 객체를 주어진 n만큼의 소수점 이하 자릿수를 정확하게 갖는 문자열 객체로 리턴하는 '메소드'

parseInt() 와 parseFloat() 전역에서 사용할수 있는 전역함수이다.

(2) Math 객체

Math는 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체이다.
함수 객체가 아니다.

Math.abs()는 절댓값을 리턴한다.

console.log(Math.min(1,2,3))  // 매개변수로 주어진 수들중 가장 작은 값 리턴
console.log(Math.max(1,2,3))  // 가장 큰 값 리턴

console.log(Math.ceil(3.14))  // 올림
console.log(Math.floor(3.14))  // 내림
console.log(Math.round(3.14))  // 반올림

console.log(Math.random())  // 0이상 1미만의ㅡ 실수 랜덤으로 리턴

3. 배열

(1) find 메소드

주어진 판별 함수를 만족하는 첫번째 요소의 값을 반환한다.
그런 요소가 없다면 undefined를 반환한다.
(참고: undefined는 false로 취급된다.)

판별함수라는 것에 주의해야 한다.
즉, 함수 객체를 매개변수로 주어야 한다!

ex.

const arr = [1,2,3,4,5]
console.log(arr.find(x => x > 3))

콘솔에 4가 출력되는 것을 볼 수 있다.

즉, find()는 매개변수로 준 함수가 true를 리턴하는 첫번째 요소의 값을 리턴하는 함수이다.

(2) length
필드변수로 참조하는 것은 O(1)이면 된다.
arr.length가 0이면 배열이 비어있다는 것을 알 수 있다.

(3) concat()

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

console.log(numbers.concat(fruits))
console.log(numbers)
console.log(fruits)

두 배열을 합치는 메소드로 두 배열을 합친 배열을 리턴하지만 원본의 배열 데이터를 직접 바꾸진 않으므로 이 후에도 사용하려면 변수로 합쳐진 배열의 레퍼런스를 저장해주어야 한다.

(4) forEach

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

fruits.forEach(function (element, index, array) {
  console.log(element,index, array)
})

1. 매개변수의 이름은 설정하는 개발자 나름
2. array부분은 잘 사용하지 않는다. 배열 객체를 직접 쓰면 되기 때문이다.

정리하면 forEach는 콜백함수를 사용할 수 있는데 콜백함수의 첫번째 매개변수로는 배열의 각 성분들이 두번째 매개변수로는 인덱스가 세변째 매개변수로는 현재 forEach를 호출하고 있는 배열의 레퍼헌스가 들어가게 된다.

(5) map

배열.map(함수) : 배열의 모든 항목에 대하여 해당 함수를 실행하고 그 결괏값들을 담은 새로운 배열을 리턴한다.

ex.

const fruits = ['Apple', 'Banana', 'Cherry']
const b = fruits.map(function (fruit, index) {
  return {
    id : index,
    name : fruit
  }
})

b에는 id속성과 name속성을 가진 객체 3개를 담은 배열이 들어간다.

즉, 모든 성분에 대해서 어떤 함수를 수행하고 싶다면 ForEach문을
모든 성분에 대하여 어떤 처리를 한 배열을 얻고 싶다면 map 메서드를 사용하면 된다.

위의 코드는 다음과 같이 바꿀 수 있다.

const fruits = ['Apple', 'Banana', 'Cherry']
const b = fruits.map((fruit, index) => ({
  id: index,
  name: fruit}))

(6) filter()

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

const b = numbers.filter(number => number < 3)

콜백함수가 True를 반환하는 값만으로 배열을 만들어 리턴하는 메서드이다.

map, filter 메소드 모두 원본 배열의 내용은 바꾸지 않는다.

(7) find(), findIndex()

find 메서드는 함수가 True를 반환하는 성분을 리턴한다.
여러개가 있을 경우 맨처음 True를 반환하는 성분만 리턴한다.

ex.

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

const b = numbers.find(x => x >= 3)

console.log(b)

3이 콘솔에 출력되는 것을 볼 수 있다.

findIndex()는 같은 로직이나 항목이 아닌 인덱스를 리턴한다.

(8) includes

arr.includes(data)는 arr이 data를 포함하고 있으면 true 아니면 false를 리턴한다.

(9) push(), unshift()

원본이 수정됨에 주의!!

push는 배열의 맨끝에 데이터를 하나 더 더한다.
(파이썬의 append()와 같다)

unshift는 배열의 맨처음에 데이터를 하나 더 더한다.
(배열의 맨처음에 데이터를 더하는 것은 O(n)이므로 권장하지 않는다.)

(10) reverse()

원본이 수정됨에 주의!!

배열 데이터를 거꾸로 뒤집는 메소드이다. O(n)

(11) splice()

원본이 수정됨에 주의!!

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

numbers.splice(2, 1)

이는 인덱스 2번부터 데이터를 1개 지운다는 의미로
numbers 배열은 [1,2,4] 가 된다.

그리고 splice 메소드는 세번째 인수로 그자리에 추가할 데이터를 넣을 수 있다.

ex.

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

numbers.splice(2, 2, 5)

console.log(numbers)

numbers 배열이 [1,2,5]가 되는 것을 확인할 수 있다.