javascript 5 - 코어 라이브러리

자바스크립트 코어 라이브러리

코어 라이브러리란?

• 자바스크립트에서 기본적으로 제공해 주는 기능이다.

타이머 함수

• 일정 시간마다 특정 구문을 실행할 때 사용함.
• 주로 슬라이드, 배너 변경, 일정 시간마다 자동으로 변경되는 실시간 검색어 등에 사용된다.
• 종류
  • setInterval(func, duration) : 일정 시간마다 주기적으로 특정 구문을 실행
  • setTimeout(func, duration) : 일정 시간이 지난 후 특정 구문을 한 번 실행함
  • clearInterval(timerId) : 실행중인 타이머 함수를 멈춤
• 타이머 함수는 모두 전역 객체인 window에 포함되어 있다.
• 리턴값은 생성된 타이머 id이다. 이 id는 실행한 타이머 함수를 멈출 때도 사용한다.

Math 클래스

• Math 클래스에는 숫자를 랜덤하게 생성하는 기능부터, sin, cos와 같은 수학 관련 기능들이 있다.
• Math 클래스는 다른 코어 클래스와는 달리 대부분의 기능이 클래스 메서드로 구현되어 있어서 인스턴스 생성 없이 바로 사용할 수 있다.
• 종류
  • abs() : 절대값을 반환
  • ceil(), floor() : 올림/내림 값을 반환
  • max(), min() : 두 수 중 큰/작은 수를 반환
  • random() : 0과 1 사이의 난수값을 반환
  • round() : 가장 가까운 정수값을 반환

String 클래스

• 문자열 생성 기능을 시작으로 문자열과 관련된 기능들이 있다.
• 프로퍼티
  • .length : 문자열 개수
• 함수
  • indexOf() : 특정 문자나 문자열이 처음으로 등장하는 위치의 인덱스를 반환함.
  • slice() : start 부터 end 까지의 문자열을 복사하여 반환
  • substring() : start 부터 end 까지의 문자열을 잘라내어 반환
    • slice(), substring()의 차이
      1. start > end 일 경우
         • slice : ""(공백)을 리턴
         • substring : start 값과 end 값을 바꾸어서 처리
      2. start 또는 end 값이 음수인 경우
         • slice : 문자열 뒤에서부터 내려온 값으로 취급
         • substring : 음수값을 0으로 취급
  • split() : 구분자(separator)를 기준으로 나눈 후, 나뉜 문자열을 하나의 배열로 반환함
  • concat() : 전달받은 문자열을 결합한 새로운 문자열을 반환함
  • toUpperCase() / toLowerCase() : 모든 문자를 대문자/소문자로 변환함
  • replace() : 인수로 전달받은 문자열을 대체 문자열로 변환한 문자열을 반환함
  • toString() : string 인스턴스의 값을 문자열로 반환함
• 핵심 내용
  1. 문자열 만들기
     • 문자열을 만드는 방식은 2가지가 있다.
       1. 리터럴 방식 : let str = "hello";
       2. string 클래스 객체를 생성 : let str = new String("hello");
     • 단, 리터럴 방식은 자바스크립트에서 해석될 때 string 클래스 객체를 생성해서 이용하는 방식으로 변환되어 실행된다.
       ex) let str = "hello"; => let str = new String("hello");
  2. 문자열 길이 구하기
     • .length 프로퍼티를 사용한다.
  3. 특정 위치의 문자 구하기
     • .charAt(num)을 사용한다.
  4. 문자(열) 위치 찾기
     • .indexOf(search, start) : start 위치에서부터 search 문자의 위치를 반환한다. 찾지 못하면 -1을 리턴한다.
  5. 특정 위치에 문자 추가
     • 여러 메서드를 혼합하여 만들어야 함.
  6. 특정 위치의 문자를 다른 문자로 변경하기
     • replace(search, new) : search를 일괄적으로 new로 변환하여 반환한다.
  7. 특정 위치의 문자 제거
     • 여러 메서드를 혼합하여 만들어야 함.

정규표현식

• 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어.
• 종류
  • ^ : 입력의 시작을 찾는다
  • $ : 입력의 끝을 찾는다
  • * : 앞에 오는 문자를 0번 이상 찾는다
  • + : 앞에 오는 문자를 1번 이상 찾는다
  • ? : 앞에 오는 문자를 0번 이상 찾는다
  • \s : 공백문자를 찾는다
  • \S : 공백문자가 아는 것을 찾는다
  • g : 문자열 전체에서 찾는다
  • ex 숫자 정규식) : ^[0-9]*$
  • ex 영문자) : ^[a-zA-Z]*$
  • ex 한글) : ^[가-힣]*$
  • ex 영문/숫자) : ^[a-zA-Z0-9]*$

Date 클래스

• 날짜 및 시간과 관련된 기능들이 있다.
• 함수
  • getFullYear() : 로컬 시간을 사용하여 연도를 반환
  • getMonth() : 로컬 시간을 사용하여 월을 반환
  • getDate() : 로컬 시간을 사용하여 일을 반환
  • getDay() : 로컬 시간을 사용하여 요일을 반환
  • getHours() : 로컬 시간을 사용하여 시간을 반환
  • getMinutes() : 로컬 시간을 사용하여 분을 반환
  • getSeconds() : 로컬 시간을 사용하여 초을 반환
  • setFullYear() : 로컬 시간을 사용하여 연도를 설정
  • setMonth() : 로컬 시간을 사용하여 월을 설정
  • setDate() : 로컬 시간을 사용하여 일을 설정
  • setDay() : 로컬 시간을 사용하여 요일을 설정
  • setHours() : 로컬 시간을 사용하여 시간을 설정
  • setMinutes() : 로컬 시간을 사용하여 분을 설정
  • setSeconds() : 로컬 시간을 사용하여 초를 설정

Array 클래스

• 배열의 생성, 추가, 삭제, 찾기 등의 기능들이 있다.
• 종류
  • concat(array) : 두 개의 배열을 하나의 배열로 합침
  • push(data) : 배열의 끝에 데이터를 추가 후 배열의 길이를 리턴
  • pop() : 배열의 마지막 항목을 제거하고 제거된 데이터 반환
  • shift() : 배열의 첫 번째 데이터 제거 후 해당 값을 리턴
  • unshift() : 배열의 맨 앞에 데이터를 추가 후 배열의 길이 반환
  • join(구분자) : 지정한 구분자로 배열을 분자열로 변환 후 반환
  • reverse() : 배열의 데이터 순서를 거꾸로 변경
  • sort() : 배열의 데이터를 문자열로 변환 후 사전식으로 정렬
• 배열 생성 방법
  1. 배열 리터럴 방식
     • let arr = ['num1', 'num2', 'num3', ...];
  2. 배열 클래스 방식
     • let arr = new Array('num1', 'num2', 'num3', ...);
  • 단, 자바스크립트 내부적으로 배열 리터럴 방식은 배열 클래스 방식으로 변환되어 실행된다.
• 특정 위치의 배열 요소 접근하기
  • 배열의 n번째 요소에 접근하려면 [] 안에 인덱스 값을 넣는다.
• 배열을 문자열로 변환
  • let arr = array.join([separator]);
  • .join()으로 배열 요소들을 지정된 구분자로 이어 붙인 문자열이 반환된다.
  • separator는 선택사항이며, 생략시 쉼표가 구분자로 사용된다.
• 문자열을 배열로 변환
  • let arr = string.split(separator);
  • .split()으로 구분자로 나눠 만들어진 배열이 반환된다.
  • separator는 구분자로 사용 할 문자열이다.
• 특정 위치에 배열 요소 추가
  1. 배열 마지막에 요소 추가 : .push(element[, element])
  2. 배열 첫 번째에 요소 추가 : .unShift(element[, element])
  3. 배열 n 번째에 요소 추가 : .splice(start, deleteCount[, element])
     • start : 추가 또는 삭제할 배열 요소의 시작 위치
     • deleteCount : start부터 시작하여 삭제할 배열 요소의 개수. 삭제시에는 0을 적용.
     • element : 요소 추가
     • 삭제시 요소를 삭제한 배열을 리턴함. 단, 요소 추가의 경우 리턴값이 없음.
• 특정 위치에 배열 요소 삭제
  1. 배열 마지막 요소 삭제 : .pop()
  2. 배열 첫 번째 요소 삭제 : .shift()
  3. 배열 n 번째에 요소 삭제 : .splice()
• 배열 정렬하기
  • .sort([compareFunction])
    • compareFunction은 정렬 순서를 정의하는 함수이다. 생략시 오름차순으로 정렬한다.
      • 문자 오름차순 정렬
        : default
      • 문자 내림차순 정렬
        : compareFunction = function(a, b) { return a < b; }
      • 숫자 정렬
        : .sort()는 문자열 정렬 기능이므로, 숫자도 문자열로 처리된다.
        : compareFunction = function(a, b) { return a - b; }
    • 정렬이 완료된 결과값을 리턴한다. 단, 정렬에 사용된 원본도 변경된다.