[바닐라 자바스크립트] 4장 - 자바스크립트 내장 객체

4.1 Object 객체

  - 모든 JS 객체의 루트 객체

4.2 String 객체

  - JS에서 문자열을 다루기 위한 객체로 문자열을 다룰 때 유용한 프로퍼티와 함수 제공

  - length

    - 문자열의 길이 반환

    - 실무 1) 사용자가 비밀번호 입력 시 몇 자리로 입력되었는지 알 수 있음

    - 실무 2) 주민번호 앞 6자리인 생년월일이 6자리로 입력되었는지 알 수 있음

  - indexOf()

    - 문자열 안에 특정 문자열이 존재하는지 찾음

    - 실무) 입력된 전화번호 데이터에 하이픈이 있는지 확인 가능

  - lastIndexOf()

    - 찾고자 하는 문자열이 둘 이상 발견되면 제일 마지막에 발견된 문자열의 index 반환

  - slice()

    - 파라미터로 시작 위치와 종료 위치를 주면, 문자열에서 해당 부분 잘라내서 반환

    - 실무 1) 주민등록번호에서 남녀 성별 구분할 수 있는 숫자 얻을 수 있음 ex. slice(6,7)

    - 실무 2) 제품 코드에서 제품의 모델이 무엇인지 등을 알아내기 위해 제품 코드의 특정 위치 잘라내서 사용

  - substring()

    - slice() 함수와 동일한 기능, 파라미터로 음수 허용 X

  - substr()

    - 두 번째 파라미터는 시작 위치 (첫 번째 파라미터)에서 잘라낼 문자의 길이

  - replace()

    - 문자열 내의 특정 문자열을 지정한 문자열로 바꾸는 함수

    - 대소문자 구분 없이 사용하기 위해 정규식 사용

    - 실무 1) 뉴스레터 발송 시 뉴스레터를 받는 사람의 이름으로 {userName} 형식으로 사용해서 작성

    - 실무 2) 날짜 데이터 포맷 형식 변환

  - toUpperCase(), toLowerCase()

    - toUpperCase(): 문자열 모두 대문자로 변환

    - toLowerCase(): 문자열 모두 소문자로 변환

    - 실무 1) 여권, 항공권, 신용카드 등의 영문 이름은 모두 대문자로 관리

    - 실무 2) DB에 저장된 제품들을 대소문자 구문 없이 검색될 수 있도록 처리 가능

  - concat()

    - 2개 이상 문자열을 하나의 문자열로 합치는 함수

    - 실무) 서로 다른 변수에 저장된 이름을 하나로 합쳐서 보여주기

  - trim()

    - 문자열의 앞, 뒤 공백 제거

    - 실무 1) 사용자로부터 입력 받는 모든 필드에 입력된 데이터는 DB에 저장 전에 앞뒤 공백 제거 필요

    - 실무 2) 검색 키워드의 앞뒤 공백 제거 후 서버에 요청

  - padStart(), padEnd()

    - padStart(): 문자열 앞에 지정된 문자를 지정된 길이만큼 추가

    - padEnd(): 문자열 뒤에 지정된 문자를 지정된 길이만큼 추가

    - 실무 1) 학번 같은 순번의 체계가 필요한 경우 자동으로 0 채우기

    - 실무 2) 날짜 포맷에서 월과 일을 2자리로 표현해야 함

  - charAt()

    - 문자열에서 특정 인덱스에 해당하는 문자 하나 반환

    - 실무 1) 시스템을 사용하는 사용자의 역할을 의미하는 문자를 이용해서 사용자 아이디 생성하는 경우 있음

    - 실무 2) 제품명의 제일 첫 번째 문자를 제품의 모델을 의미하는 알파벳 문자 사용 가능

  - charCodeAt()

    - 문자열에서 특정 인덱스에 해당하는 문자 하나의 유니코드 값 반환

  - split()

    - 문자열 내에 특정 구분자를 기준으로 문자열 분리해서 배열로 반환

    - 실무 1) 날짜 데이터 포맷에서 년도, 월, 일 분리

    - 실무 2) 태그 목록 분리

  - startsWith(), endsWith()

    - startsWith(): 문자열의 시작이 파라미터로 전달된 문자열로 시작되는지 확인

    - endsWith(0: 문자열의 끝이 파라미터로 전달된 문자열로 종료되는지 확인

    - 실무 1) 사용자가 입력한 웹사이트 주소가 http로 시작하는지 확인 (올바른 URL 형식인지 확인)

    - 실무 2) 사용자가 업로드한 파일의 확장자 확인

4.3 Number 객체

  - toString()

    - 숫자형 데이터를 문자형 데이터로 반환

    - String 객체가 가지고 있는 내장 함수 사용 위해 String 객체로 변환하는 일 자주 발생

    - 실무) 날짜 데이터 포맷에서 padStart() 사용 위해 String 객체로 변환할 때 사용

  - toExponential()

    - 숫자를 지수형으로 반환

  - toFixed()

    - 소수점 몇 번째 자리까지 보여줄지 결정

    - 실무) 달러나 유로 같은 경우 금액 표기 시 소수점 이하 필요

  - toPrecision()

    - 정수와 소수 포함해서 몇 번째 자리까지 보여줄지 결정

  - parseInt()

    - 전역 함수로서 정수로 반환

    - 실무) input type="text"를 통해서 데이터 입력 받은 값은 문자열 타입이므로 정수로 변환하기 위해 사용

  - parseFloat()

    - 전역 함수로서 부동소수점으로 반환

    - 실무) input type="text"를 통해서 데이터 입력 받은 값은 문자형이므로 숫자형으로 변환하기 위해 사용

  - Number 객체의 프로퍼티

    - Number.MAX_VALUE: JS에서 다룰 수 있는 최대 수

    - Number.MIN_VALUE: JS에서 다룰 수 있는 가장 작은 수

    - Number.POSITIVE_INFINITY: Infinity

    - Number.NEGATIVE_INFINITY: -Infinity

    - Number.NaN: Not-a-Number

4.4 Array 객체

  - toString()

    - 배열 안의 모든 문자를 쉼표를 이용해 모두 결합해서 하나의 문자열로 반환

  - join()

    - 배열 안의 모든 문자를 파라미터로 지정한 문자를 이용해서 모두 결합해서 하나의 문자열로 반환

    - 실무) 문자열 합칠 경우 문자열 많으면 배열의 push() 함수 이용해서 나중에 join() 활용

  - pop()

    - 배열에서 마지막 데이터를 제거하고, 마지막 데이터 반환

    - 실무) 스택 LIFO 구조

  - push()

    - 배열에 새로운 요소(데이터, 객체 등)를 추가

    - 실무) 쇼핑몰에서 장바구니에 제품 추가

  - shift()

    - 배열에서 첫 번째 요소 제거, 첫 번째 요소 반환

    - 실무) 큐 FIFO 구조

  - unshift()

    - 배열의 맨 앞에 요소 추가, 배열의 길이 반환

    - 실무) select 태그에서 '선택하세요' 같은 정보성 옵션 구성할 때 활용

  - 배열 요소 변경

    - 배열 인덱스로 접근해서 새로운 요소 할당

  - splice()

    - 새로운 요소를 특정 위치에 추가 (기존 요소 삭제 가능)

    - 실무) 테이블에서 특정 행 선택해서 행 추가할 때 활용 가능

  - concat()

    - 2개 이상 배열 하나의 배열로 결합

  - slice()

    - 시작 인덱스, 종료 인덱스

  - sort()

    - 배열에 문자형 데이터 있는 경우 오름차순으로 정렬

    - 실무에서 Object의 특정 키를 기준으로 정렬하는 경우 많음

  - filter()

    - 배열에서 특정 조건 만족하는 배열의 요소만을 찾아서 새로운 배열로 반환

    - 특정 조건 만족하는 데이터만 추출할 때 많이 활용

  - map()

    - 배열의 데이터가 Object형일 때, 배열에 담긴 Object를 새로운 형태의 Object로 변환해서 배열로 반환

      - 새로운 키를 배열의 각 오브젝트 요소에 추가하여 필요한 곳에서 바로 사용 가능하도록 함

      - 클라이언트에서 사용할 데이터만 새로 정의하면 네트워크 트래픽 줄일 수 있음

  - reduce()

    - 배열에 담긴 데이터를 하나씩 순회하며 callback 함수의 실행 값을 누적하여 결과값 반환

    - 데이터의 합계 구할 때 많이 사용

4.5 Date 객체

  - Date 생성자

  - Get 함수

    - getFullYear(): 4자리 년도 정보

    - getMonth(): 0~11 월 정보 (1월은 0, 12월은 11)

    - getDate(): 1~31 일 정보

    - getHours(): 0~23 시간 정보

    - getMinutes(): 0~59 분 정보

    - getSeconds(): 0~59 초 정보

    - getMilliseconds(): 0~999 밀리초 정보

    - getTime(): 1970년 1월 1일 이후에 해당하는 밀리초 정보

    - getDay(): 0~6 요일 정보 (일요일은 0, 토요일은 6)

  - Set 함수

    - setFullYear()

    - setMonth()

    - setDate()

    - setHours()

    - setMinutes()

    - setSeconds()

    - setMilliseconds()

    - setTime()

  - 실습

    - 파라미터로 날짜 간격을 입력받고, 현재 날짜 기준으로 며칠 전 또는 며칠 후의 날짜 계산

4.6 Set 객체

  - Set 생성자

    - new Set() 생성자 사용해서 생성

  - add()

    - 데이터 추가

    - Set에 저장되어 있는 데이터 수는 size 속성을 통해 확인

  - has()

    - Set에 특정 데이터가 저장되어 있는지 확인

  - delete()

    - 저장되어 있는 특정 데이터 삭제

  - clear()

    - 저장되어 있는 모든 데이터 한 번에 삭제

  - forEach()

    - Set에 저장되는 모든 데이터 읽을 때 사용

4.7 Map 객체

  - Map 생성자

    - new Map() 생성자 사용

  - set()

    - Map 객체에 데이터 저장할 때 파라미터로 키와 값 이용

    - size 속성을 통해 크기 쉽게 알 수 있음

    - 데이터 저장한 순서 보장

  - get()

    - Map 객체에 저장된 데이터 읽을 때 파라미터로 얻고자 하는 값의 키 전달

  - has()

    - Map에 특정 키의 값이 저장되어 있는지 확인

  - delete()

    - 저장되어 있는 특정 데이터 삭제

  - clear()

    - 저장되어 있는 모든 데이터를 한 번에 삭제

  - forEach()

    - Map에 저장되는 모든 데이터 읽을 때 사용

4.8 Math 객체

  - Math.round()

    - 숫자에 대한 반올림 처리

  - Math.ceil()

    - 숫자에 대한 무조건 올림 처리

    - 실무) 게시판 페이징 처리

  - Math.floor()

    - 숫자에 대한 무조건 내림 처리

  - Math.trunc()

    - 소수 부분은 무조건 버리고 정수 부분만 반환

  - Math.sign()

    - 숫자가 양수인지 음수인지 확인하는 용도로 사용

  - Math.pow()

    - 거듭제곱 값 반환

  - Math.sqrt()

    - 루트 값 반환

  - Math.abs()

    - 무조건 양수로 반환

  - Math.min(), Math.max()

    - Math.min(): 가장 작은 값 반환

    - Math.max(): 가장 큰 값 반환

  - Math.random()

    - 0이상 1보다 작은 숫자형 값 반환

    - 실무에서 특정 범위의 랜덤 정수 값 생성하는 경우 많음

    - 생성하고자 하는 랜덤 정수 값에 대한 최솟값과 최댓값을 파라미터로 전달하면,

      최솟값과 최댓값 사이의 정수 반환하는 함수 많이 활용

  - 실습

    - 가위 바위 보 게임

4.9 JSON 객체

  - JSON: 데이터 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환

    - 키는 반드시 쌍따옴표 이용해서 표기

  - JSON.parse(): 문자열 형태의 JSON을 JS Object 객체로 변환해서 사용 가능 (서버로부터 응답받을 때)

  - JSON.stringify(): 객체를 문자열로 변환 (데이터를 서버로 전송할 때 사용)

4.10 Window 객체

  - alert()

    - 윈도우 화면에 경고 메시지 출력

  - confirm()

    - 진행할지, 종료할지에 대한 진행 여부 확인

  - prompt()

    - 문자열 입력받을 수 있는 함수

  - window.open()

    - 윈도우 새 창/ 새 탭으로 지정한 url을 오픈하는 함수

  - setTimeout(), clearTimeout()

    - setTimeout(): 두 번째 파라미터로 지정한 시간 간격 이후에 첫 번째 파라미터에 정의한 함수 실행

    - clearTimeout(): setTimeout() 함수에서 정의한 함수 실행되지 않았을 때 함수 실행되는 것 중지

  - setInterval(), clearInterval()

    - setInterval(): 두 번째 파라미터로 지정한 시간 간격마다 첫 번째 파라미터에 정의한 함수 반복적 실행

    - clearInterval(): 반복적 실행 중단

4.11 Symbol

  - JS에서 절대 충돌이 일어나지 않는 유일한 key 값을 만들어 줌

  - 유일한 key를 생성할 수 있을 뿐만 아니라, Symbol로 추가한 key를 노출시키지 않고 감출 수 있음

  - JS 개발자들이 안심하고 필요한 key를 추가해서 사용 가능