[BB-JS] 5. 참조타입

본 글은 자바스크립트 공부를 위해 프론트엔드 개발자를 위한 자바스크립트 프로그래밍를 정리한 글입니다.

들어가며

  • 참조 값(객체)이란 데이터와 기능을 그룹으로 묶는 참조 타입의 인스턴스
  • ECMAScript는 객체 지향 언어이긴 하지만 클래스나 인터페이스 같은 구조를 갖고 있지 않기 때문에 참조 타입을 클래스라고 부르는 것은 잘못된 표현
  • 참조 타입은 객체가 가져야 할 프로퍼티와 메서드를 정의한다는 점 때문에 객체 정의라 불리기도 함
  • 객체를 생성할 때는 new 연산자 뒤에 생성자를 씀

Object 타입

  • Object의 인스턴스에 많은 기능이 들어있지는 않지만 애플리케이션에 사용할 데이터를 저장하는 목적에는 안성맞춤
  • 인스턴스 생성 방법
    • new 연산자와 Object 생성자를 함께 쓰는 방법
    • 여러 가지 프로퍼티를 가진 객체를 쉽게 정의할 수 있도록 디자인된 객체 리터럴 표기법
      • 왼쪽 중괄호({) 기호가 객체 리터럴의 시작임을 알 수 있는 이유는 표현식 컨텍스트에 있기 때문
      • ECMAScript에서 표현식 컨텍스트란 값(표현식)이 예상되는 컨텍스트
      • 할당 연산자(=)는 다음에 값이 나올 것으로 예상하므로 왼쪽 중괄호({)를 표현식의 시작으로 간주
      • 만약 if 뒤에 쓰였다면 문장 컨텍스트에 있는 것이며 블록 문장이 시작됨을 나타냄
      • 마지막 프로퍼티 다음에 쉼표를 쓰면 IE7 이하 버전과 오페라에서 에러를 발생
      • 프로퍼티 이름에는 문자열이나 숫자를 쓸 수 있으며, 숫자형 프로퍼티 이름은 자동으로 문자열로 바뀜
      • 빈 리터럴은 생성자를 썼을 때와 동일({}new Object()와 동일)
      • 함수에 옵션 매개 변수를 여러 개 넘길 때 유용
      • 객체 프로퍼티는 점 표기법대관호 표기법을 통해 가능
      • 대괄호 표기법은 변수를 써서 프로퍼티에 접근할 수 있는 점이 장점이며, 문법 에러를 일으키는 문자들에 대해서도 접근이 가능
      • 일반적으로는 점 표기법이 좋으며, 대괄호 표기법은 프로퍼티 이름에 변수가 필요할 때 사용을 권장
      • 객체 리터럴 표기법을 사용해 객체를 생성할 때는 Object 생성자를 호출하지 않음

Array 타입

  • 데이터의 순서 있는 목록이라는 점은 다른 언어의 배열과 유사
  • 배열 슬롯에는 어떤 타입의 데이터라도 넣을 수 있는 부분이 차이점
  • ECMAScript 배열은 동적으로 크기를 조절하므로 데이터를 추가하면 자동으로 커짐
  • 배열 생성 방법
    • Array 생성자(new 연산자는 생략 가능)
      • 매개변수로 숫자를 하나만 넘기면 그 길이의 배열을 생성
      • 숫자가 아닌 매개변수나 하나 이상의 매개변수를 넘기면 해당 값을 가진 배열을 생성
      • 앞선 차이로 인해 혼돈 유발
    • 배열 리터럴 표기법
      • 대괄호([]) 안에 데이터를 쉼표로 구분해서 사용
      • [,,,]와 같이 사용할 때 마지막 쉼표에 대한 처리가 IE8 이전 버전에서 다르므로 주의가 필요
  • 식별자와 대괄호([])안에 0으로 시작하는 인덱스를 넣어 배열 값에 접근
  • 값을 지정할 때 배열의 크기보다 큰 인덱스를 지정하면 배열 길이가 자동으로 증가
  • length 프로퍼티는 읽기 전용이 아니므로 값을 바꾸면 배열 길이가 그에 맞게 바뀌면서 데이터를 제거하거나 빈 슬롯(undefined)을 추가함
  • length 프로퍼티는 배열 마지막에 데이터를 추가할 때 유용
  • 배열은 최대 4,294,967,295개의 데이터를 담을 수 있으며 그 이상의 데이터를 담으려 하면 예외가 발생
  • 배열 리터럴 표기법을 써서 배열을 생성할 떄는 Array 생성자를 호출하지 않음
  • 배열 감지
    • ECMAScript 3에서는 객체와 배열을 구분하기는 쉽지 않음
    • 전역 스코프가 하나뿐인 단순한 웹 페이지에서는 instanceof 연산자를 사용
    • ECMAScript 5에서는 Array.isArray() 메서드를 제공하여 주어진 값이 배열인지 아닌지를 생성된 실행 컨텍스트와 무관하게 확인
  • 변환 메서드
    • 배열에서 toString()valueOf() 메서드는 같은 값을 반환
    • 각 슬롯에서 toString() 메서드를 호출한 값을 쉼표로 분리한 문자열
    • toLocaleString()은 각 슬롯에서 toLocaleString()을 호출한 값을 쉼표로 분리한 문자열을 반환
    • join() 메서드를 통해 다른 구분자를 써서 배열을 문자열로 나타낼 수 있음
    • null이나 undefined인 데이터는 빈 문자열로 표시
  • 스택(LIFO) 메서드
    • 배열 객체는 데이터 삽입과 제거에 제한이 있는 데이터 구조인 스택처럼 동작할 수 있음
    • push()pop() 메서드가 존재하여 스택처럼 동작할 수 있음
    • push() 메서드의 매개변수 숫자에는 제한이 없으며 늘어난 배열 길이를 반환
    • pop() 메서드는 배열의 마지막 데이터를 제거하여 반환하고 배열의 길이를 줄임
  • 큐(FIFO) 메서드
    • push()shift() 메서드가 존재하여 큐처럼 동작할 수 있음
    • shift() 메서드는 배열의 첫 번째 데이터를 꺼내서 반환하며 배열 길이는 1만큼 줄어듬
  • 덱 메서드
    • push(), pop(), push(), pop()unshift() 메서드가 존재하여 덱처럼 동작할 수 있음
    • unshift() 메서드는 shift() 메서드와 반대로 매개변수로 넘겨받은 데이터를 배열의 처음에 추가하며 그에 맞게 변한 배열 길이를 반환
    • IE7 이하 버전에서는 unshift()를 호출했을 때 배열의 길이가 아닌 undefined를 반환
  • 정렬 메서드
    • reverse() 메서드
      • 단순히 배열에 저장된 데이터 순서를 뒤집음
      • 유연성이 없음
      • 자신을 호출한 배열에 대한 참조 반환
    • sort() 메서드
      • 데이터를 정순에 맞도록 정렬
      • 이면에서 String() 함수를 호출해 데이터를 문자열로 변환 후 이를 비교하여 순서를 판단
      • 숫자로만 이루어진 배열에서 동작해 예상하지 않은 결과를 냄
      • 비교 함수를 넘겨서 순서를 조절
      • 첫 번째 매개변수가 두 번째 매개변수보다 앞에 있어야 한다면 음수를, 순서가 같다면 0을, 첫 번째 매개변수가 두 번째 배개변수보다 뒤에 있어야 한다면 양수를 반환
      • 반환 값을 변경하면 역순으로 정렬할 수 있으나 단순히 정렬 순서를 뒤집기만 할 목적이라면 reverse() 메서드가 훨씬 더 빠름
      • 숫자 타입이나 Date 객체처럼 valueOf() 메서드를 호출하면 숫자형 값을 반환하는 객체에서는 비교 함수에서 두 매개변수를 빼는 방법으로 처리할 수 있음
      • 자신을 호출한 배열에 대한 참조 반환
  • 조작 메서드
    • concat() 메서드
      • 현재 배열을 복사한 다음 메서드의 매개변수를 새 배열 마지막에 추가해서 반환
      • 매개변수를 넘기지 않으면 단순히 현재 배열의 복사본을 반환
    • slice() 메서드
      • 배열에 포함된 데이터 일부를 가진 새 배열을 만듬
      • 두 개의 매개변수를 받으며 매개변수는 원래 배열에서 가져올 데이터 범위의 시작과 끝을 나타냄
      • 전달된 매개변수의 개수에 따라 반환 값이 다름
    • splice() 메서드
      • 배열 중간에 데이터를 삽입
      • 세 가지 사용 방법
        • 삭제 : 숫자 배열 데이터를 원하는 만큼 삭제
        • 삽입 : 원하는 데이터를 삽입
        • 대체 : 삽입과 삭제를 조합하여 원하는 데이터를 다른 데이터로 대체
      • 원래 배열에서 삭제한 데이터의 배열을 반환하며 삭제한 것이 없다면 빈 배열을 반환
  • 위치 메서드(ES5)
    • indexOf()
      • 배열의 처음(인덱스 0)에서 부터 시작하여 마지막까지 검색
    • lastIndexOf()
      • 배열의 마지막에서 검색을 시작하여 처음까지 검색
    • 찾아낸 데이터의 인덱스를 반환하며, 찾지 못한 경우 -1을 반환
    • 데이터의 타입이 일치하는지 검색(===)
  • 반복 메서드(ES5)
    • 매개변수
      • 배열의 각 데이터에서 실행할 함수
      • 함수를 실행할 스코프 객체(옵션)
    • 원본 배열을 변경하지 않음
    • 반환 값은 메서드에 따라 상이
    • 콜백 함수는 데이터, 데이터의 인덱스, 배열 자체의 세 가지 매개변수를 받음
    • every()
      • 배열의 모든 데이터에서 콜백 함수를 호출
      • 반환 값이 전부 true이면 true 반환
    • some()
      • 배열의 모든 데이터에서 콜백 함수를 호출
      • 반환 값 중 하나라도 true이면 true를 반환
    • forEach()
      • 배열의 모든 데이터에서 콜백 함수를 호출
      • 반환 값이 없음
    • filter()
      • 배열의 모든 데이터에서 콜백 함수를 호출
      • 반환 값이 true인 데이터를 새 배열에 저장
    • map()
      • 배열의 모든 데이터에서 콜백 함수를 호출
      • 반환 값을 새 배열에 저장하여 반환
  • 감소 메서드(ES5)
    • 배열을 순회하며 콜백 함수를 실행하고 값을 하나 만들어 반환
    • 매개변수
      • 각 데이터에서 실행할 콜백 함수
      • 감소 작업을 시작할 초기 값(옵션)
    • 반환 값은 실행한 값
    • 초기 값 설정 여부에 따라 순환 시작 값이 다름
    • 콜백 함수는 이전 값, 현재 값, 현재 값의 인덱스, 현재 배열의 네 가지 매개변수를 받음
    • 콜백 함수의 반환 값은 다음 데이터에서 실행하는 콜백 함수의 첫 번쨰 매개변수
    • reduce()
      • 배열의 첫 번째 데이터에서 시작하여 마지막까지 진행
    • reduceRight()
      • 배열의 마지막 데이터에서 시작하여 첫 번째까지 진행

Date 타입

  • ECMAScript의 Date 타입은 자바 초기 버전의 java.util.Date에 기반
  • Date 타입은 날짜와 시간을 저장할 때 1970년 1월 1일 자정부터 몇 밀리초가 지났는지를 나타내는 숫자를 사용
  • Date 생성자에 매개변수를 넘기지 않으면 생성된 객체에는 현재 날짜와 시간이 저장
  • 특정 날짜와 시간을 저장하려면 해당 시각의 밀리초 표현을 매개변수로 넘겨야함
  • 대체할 수 있는 방법으로는 Date.parse()Date.UTC()가 있음
  • Date.parse()
    • 매개변수로 날짜를 표현하는 문자열을 받고 해당 문자열을 날짜의 밀리초 표현으로 변환을 시도
    • 날짜 형식
      • 월/일/년 (6/13/2004)
      • 월이름, 일, 년 (January 12, 2004)
      • 요일 월이름 일 년 시:분:초 타임존 (Tue May 25 2004 00:00:00 GMT-0700)
      • ISO 8601 확장 형식 YYYY-MM-DDTHH:mm:ss.sssZ (2004-05-25-T00:00:00, ES5)
    • 문자열이 올바른 날짜 형식이 아닐 때는 NaN을 반환
    • Date 생성자는 문자열을 넘겨받으면 이면에서 Date.parse()를 호출
    • 올바른 범위를 벗어난 문자열을 파싱할 때 대다수의 브라우저는 밀리초 기준으로 판단하지만 일부 브라우저는 다를 수 있음
  • Date.UTC()
    • 매개변수로 해당 시각의 년, 월 인덱스(0~11), 일(1~31), 시(0~23), 분, 초, 밀리초를 받고 해당 매개변수를 날짜의 밀리초 표현으로 변환을 시도(년, 월은 필수)
    • Date 생성자에 Date.UTC() 형식의 매개변수를 넘기면 이면에서 Date.UTC()를 호출하지만 날짜와 시간을 GMT가 아니라 지역 시간을 사용하여 시스템 설정에 따른 지역 날짜를 사용
  • Date.now()(ES5)
    • 현재 시각을 밀리초 표현으로 반환
    • Date.now() 메서드를 지원하지 않는 브라우저에서는 + 연산자를 써서 Date 객체를 숫자로 변환하여 사용(+new Date())
  • 상속된 메서드
    • 다른 참조 타입과 마찬가지로 toLocaleString(), toString(), valueOf() 메서드를 오버라이드 함
    • toLocaleString()
      • 날짜와 시간 형식을 브라우저가 실행 중인 지역의 관습에 맞게 바꿔서 반환
    • toString()
      • 일반적으로 날짜와 시간에 타임존 정보를 포함하며 24시간 형식으로 표시
      • 브라우저마다 메서드가 반환하는 형식에 차이가 있음
      • 디버그 목적으로 사용을 권장하고 사용자에게 표시하는 것은 권장하지 않음
    • valueOf()
      • 비교 연산자가 정확히 작동하도록 밀리초 표현을 사용
  • 날짜 표시 메서드
    • toDateString(), toTimeString(), toLocaleDateString(), toLocaleTImeString()toUTCString()이 있으며 반환하는 문자열은 브라우저에 따라 다르므로 일관된 날짜 형식으로 쓰고 싶다면 그대로 사용할 수 없음

RegExp 타입

  • ECMAScript는 RegExp 타입을 통해 정규 표현식을 지원
  • var expression = /pattern/flags; 와 같이 리터럴로 생성
  • pattern 부분에 정규식을 나타내는 문재 클래스, 수량자, 그룹, 룩어헤드, 역참조 등의 식이 포함되며, flag 부분에 해당 정규식이 어떻게 동작할지 나타냄
  • g
    • 전역 모드
    • 문자열에서 패턴을 찾는 즉시 종료하지 않고 문자열 전체에서 동작
  • i
    • 대소문자 비구분 모드
    • 패턴을 찾을 때 대소문자를 구분하지 않음
  • m
    • 여러 줄 모드
    • 텍스트의 줄 끝에 도달해도 멈추지 않고 계속 패턴을 찾음
  • 메타 문자(([{\^$|)]}?*+.)를 패턴에 쓸 때는 반드시 이스케이프를 해야함
  • RegExp와 같이 생성자를 사용해서 생성
    • 매개변수
      • 패턴이 될 문자열
      • 플래그(옵션)
    • RegExp 생성자에 정규 표현식 리터럴을 넘기면 안됨
    • RegExp 생성자에 메타 문자를 쓸 때는 반드시 이중으로 이스케이프해야 함
  • ES3에서 리터럴로 생성한 정규 표현식은 항상 같은 RegExp 인스턴스를 공유하지만 RegExp 생성자는 호출할 때마다 새로운 인스턴스를 생성
  • 루프안에서 인스턴스 프로퍼티는 리셋되지 않으므로 루프안에서 정규식 메서드를 호출할 때는 패턴을 찾지 못함
  • ES5에서는 혼란스러운 점을 제거하기 위해 리터럴로 정규 표현식을 생성할 때도 RegExp 생성자를 호출
  • 정규 표현식 인스턴스 프로퍼티
    • 패턴에 대한 정보
    • global
      • g 플래그가 설정되었는지 나타내는 불리언 값
    • ignoreCase
      • i 플래그가 설정되었는지 나타내는 불리언 값
    • multiline
      • m 플래그가 설정되었느지 나타내는 불리언 값
    • lastIndex
      • 패턴 매칭을 어느 위치에서 시작할지 나타내는 정수 값(0에서 시작)
    • source
      • 정규 표현식을 생성한 문자열, 항상 리터럴 형식을 반환하되 정규 표현식을 열고 닫는 / 문자는 포함되지 않음
  • 정규 표현식 인스턴스 메서드
    • exec()
      • 그룹을 캡처할 의도로 만들어진 메서드이며 가장 많이 쓰임
      • 매개변수
        • 패턴을 테스트할 문자열
      • 반환 값
        • 패턴에 일치하는 문자열 배열을 반환하며 일치하는 부분을 찾을 수 없을 때는 null을 반환
        • 반환된 배열은 Array의 인스턴스인 동시에 프로퍼티 두 개를 추가
          • index : 패턴이 일치한 위치
          • input : exec() 메서드에 넘긴 문자열
          • 첫 번째 데이터 : 패턴에 일치하는 부분 전체
          • 다른 데이터 : 표현식에서 캡쳐한 부분
          • 캡쳐한 그룹이 없다면 배열에는 데이터가 하나만 존재
      • g 플래그가 설정되어 있더라도 한 번에 한 가지 매치에 관한 정보만 반환하며, 플래그가 설정되어 있지 않으면 exec()를 같은 문자열에 여러 번 호출하더라도 첫 번째 매치에 대한 정보만 만환
      • g 플래그가 설정되어 있으면 exec()를 호출할 때마다 lastIndex 프로퍼티가 바뀌며, 설저되어 있지 않다면 프로퍼티는 바뀌지 않음
      • IE에서는 정규 표현식을 잘못 구현해서 g 플래그가 설정되어 있지 않아도 lastIndex 프로퍼티가 바뀜
    • test()
      • 문자열이 패턴에 일치하는지 확인하면 되고 실제로 어떤 문자열이 일치하는지 알 필요가 없을 때 사용
      • 매개변수
        • 패턴을 테스트할 문자열
      • 반환 값
        • 문자열 패턴이 일치할 때는 true를 반환하고 그렇지 않을 때는 false를 반환
    • toLocaleString()toString()은 정규식 표현식을 어떻게 생성했는지에 관계 없이 리터럴 표현을 반환
    • valueOf()는 정규 표현식 자체를 반환
  • RegExp 생성자 프로퍼티
    • RegExp 생성자에는 정적 프로퍼티로 간주되는 몇 가지 프로퍼티가 존재
    • 이 프로퍼티들은 스코프에 포함된 정규 표현식 전체에 영향을 미치며 마지막으로 실행한 정규 표현식 조작에 따라 바뀜
    • 각 프로퍼티에는 정식 이름과 짧은 이름이 있음(오페라는 지원하지 않음)
    • 프로퍼티(일부 프로퍼티의 경우 특정 브라우저에서 지원하지 않음)
      • input, $_ : 마지막으로 테스트한 텍스트
      • lastMatch, $& : 마지막으로 일치한 문자열
      • lastparen, $+ : 마지막으로 일치한 캡처 그룹
      • leftContext, $' : input 텍스트에서 lastMatch 앞에 있는 문자열
      • rightContext, $' : input 텍스트에서 lastMatch 다음에 오는 문자열
      • multiline, $* : 모든 정규 표현식이 다중 행 모드를(m)을 사용하는지 표현하는 불리언 값
      • 짧은 이름에는 잘못된 식별자로 간주하는 문자열이 들어 있으므로 대괄호 표기법을 사용해야 함
    • exec()test()를 호출할 때 자동으로 저장되는 캡쳐 그룹을 아홉 개까지 저장할 수 있는 프로퍼티가 존재(RegExp.$1~RegExp.$2)
  • pattern의 한계
    • 고급 정규 표현식 기능에 미치지 못하는 부분이 존재
    • 텍스트의 처금과 마지막에 일치하는 \A\Z
    • 룩비하인드(룩어헤드의 반대 개념)
    • 병합 클래스
    • 최소 그룹
    • 유니코드 지원(한 번에 한 문자를 찾는 기능은 지원0
    • 이름 붙은 캡처 그룹
    • s(한 줄 모드), x(공백 무시 모드) 플래그
    • 조건문
    • 정규 표현식 주석

Funciton 타입

  • 함수는 객체
  • 모든 함수는 Function 타입의 인스턴스이며 다른 참조 타입과 마찬가지로 프로퍼티와 메서드가 있음
  • 함수 역시 객체이므로 함수 이름은 함수 객체를 가리키는 포인터일 뿐 함수와 결합되이쓴ㄴ 것은 아님
  • 함수 정의
    • 함수 선언
    • 변수를 정의하면서 함수로 초기화
    • Function 생성자를 이용하는 방법
      • ECMAScript 표현식으로서 평가하고 생성자에 전달할 문자열을 다시 평가해야하므로 성능에 영향이 있어 사용을 권장하지 않음
  • 함수 이름은 함수를 가리키는 포인터이기 때문에 함수 하나에 이름을 여러 개 붙일 수 있음
  • 오버로딩 없음
    • 함수 이름은 단순한 포인터이기 때문에 함수 오버로딩이 불가능 함
    • 함수 두 개에 같은 이름을 지정하면 마지막에 정의한 함수가 이전에 정의한 함수를 덮어쓰기 때문
  • 함수 선언 vs 함수 표현식
    • 함수 선언은 어떤 코드도 실행하기 전에 이미 모든 실행 컨텍스트에서 접근하고 실행할 수 있음(호이스팅)
    • 함수 표현식은 코드 실행이 해당 줄까지 진행하기 전에는 사용할 수 없음(예기치 못한 식별제 에러)
    • 함수 표현식을 쓰면서 함수 선언처럼 보이게 var sum = function sum() {} 처럼 사용할 수 있음
  • 값처럼 쓰는 함수(일급 객체)
    • 함수 이름은 변수이므로 함수도 다른 값이 올 수 있는 곳이라면 올 수 있음
    • 함수를 다른 함수에 매개변수로 넘기거나, 함수가 실행 결과로 다른 함수를 반환하는 일이 가능
  • 함수의 내부 구조
    • arguments 객체
      • 배열과 비슷한 객체이며 함수에 전달된 매개변수를 모두 포함
      • 함수 매개변수를 표현하는 것이 주요 목적
      • arguments 객체의 소유자인 함수를 가리키는 포인터인 callee라는 프로퍼티가 존재
        • arguments.callee를 사용해 재귀 함수가 함수 이름에 의존하는 약점을 극복할 수 있음
    • this
      • 함수가 실행 중인 컨텍스트 객체에 대한 참조
      • 함수를 전역 스코프에서 호출하면 this는 전역 객체를 가리킴(window, global)
      • 함수 이름은 단순히 포인터를 저장한 변수이기 때문에 함수 메서드는 같은 객체를 가리키며 단지 다른 컨텍스트에서 실행될 뿐
    • caller(ES5)
      • 해당 함수를 호출한 함수에 대한 참조를 저장
      • 전역 스코프에서 호출했다면 null이 저장
    • 스트릭트 모드에서 실행 중인 함수에서 arguments.calleearguments.caller에 접근하려 하면 에러가 발생
      • arguments.caller와 함수의 caller 프로퍼티를 구분하기 위함
      • 구분을 하는데 보안 목적도 있음
      • 써드파티 코드는 같은 컨텍스트에서 실행 중인 코드에 대해 알 수 없게 됨
      • arguments.callee
    • 스트릭트 모드에서 함수의 caller프로퍼티에 값을 할당할 수 없음
  • 함수 프로퍼티와 메서드
    • length 프로퍼티
      • 함수가 넘겨받을 것으로 예상하는 이름 붙은 매개변수의 숫자
    • prototype 프로퍼티
      • 모든 참조 타입의 인스턴스 메서드가 존재하는 곳
      • 개발자 자신만의 참조 타입과 상속을 정의할 때 중요
      • prototype 프로퍼티는 열거할 수 없는 프로퍼티이므로 for-in문에 나타나지 않음
    • apply()call()
      • 소유자인 함수를 호출하면서 객체를 넘겨 함수 내부에서 this 객체의 값을 바꿈
      • apply()는 매개변수로 넘겨줄 객체와 매개변수 배열을 받음(Array의 인스턴스 혹은 arguments 객체)
      • call()는 매개변수로 넘겨줄 객체와 매개변수를 각각 나열해 받음
      • 스트릭트 모드에서는 함수를 호출할 때 올바른 컨텍스트 객체가 없다면 thiswindow로 강제하지 않음
      • 명시적으로 지정하지 않은 함수의 thisundefied가 됨
      • apply()call()의 목적은 매개변수를 전달해 호출하는 것이 아니라 this를 바꾸는데 있음
    • bind()
      • 새 함수 인스턴스를 만들며 그 thisbind()에 전달된 값
      • 반환된 함수의 this는 전달된 객체에 묶이며 전역에서 호출하거나 apply()call()을 사용해 호출해도 변하지 않음
    • toLocaleString()toString()은 함수의 코드를 반환하지만 브라우저에 따라 구현이 다르므로 디버그 용도로만 사용을 권장
    • valueOf()는 함수 자체를 반환

원시 래퍼 타입

  • Boolean, Number, String은 원시 값을 편리하게 조작하기 위해 디자인된 참조 타입
  • 원시 값을 읽을 때마다 이에 해당하는 레퍼 타입이 이면에서 생성되므로 메서드를 사용할 수 있음
  • 참조 타입과 원시 타입의 주요 차이는 생명주기
    • new 연산자를 사용해 참조 타입의 인스턴스를 만들면 스코프를 떠날 때까지 메모리에 존재
    • 자동으로 생성된 래퍼 타입은 코드의 해당 행을 벗어나는 즉시 파괴되어 런타임에 프로퍼티나 메서드를 추가할 수 없음
  • Boolean, Number, String 생성자를 사용해 명시적으로 원시 래퍼 객체를 생성할 수 있지만, 지금 다루는 것이 원시 값인지 래퍼 객체인지 판단하기 힘드므로 반드시 필요할 떄로 한정해서 사용
  • 원시 래퍼 타입을 typeof에 대입하면 "object"를 반환하며 원시 래퍼 객체는 모두 불리언 값인 true로 변환
  • Object 생성자는 팩터리 함수처럼 동작할 수 있으며 생성자에 넘긴 타입에 따라 원시 래퍼 인스턴스를 반환
  • new를 사용해 원시 래퍼 생성자를 호출한 것과 같은 이름의 형변환 함수를 호출한 것은 결과가 다름(typeof Number(value)//number, typeof new Number(value) //object)
  • 원시 래퍼 객체를 명시적으로 생성하는 일은 권장하지 않지만 원시 값을 조작하려면 원시 래퍼 객체의 기능이 필요
  • Boolean 타입
    • Boolean 타입은 Boolean 값에 대응하는 참조 타입
    • Boolean 객체에는 혼란스러운 점이 있어서 자주 사용되지 않음(!!new Boolean(false)//true)
    • 사용을 권장하지 않음
  • Number 타입
    • Number 타입은 숫자형 값의 참조 타입
    • toFixed()
      • 지정한 만큼의 정확도로 소수점을 찍은 문자열을 반환
      • 브라우저에 따라 반올림 규칙이 다름(IE8 이하)
      • 소수점 이하 20자리까지 지원
    • toExponential()
      • 숫자를 지수 표기법 문자열로 반환
    • toPrecision()
      • 숫자에 따라 지수 표기법이나 소수점 표기법을 선태갛여 반환
      • 매개변수로 지정한 자리 수에 맞게끔 적절히 반올림하거나 내림함
      • 매개변수로 1~21 사이의 자리 수를 넘길 수 있음
      • Boolean과 비슷한 문제가 잠재하므로 사용을 권장하지 않음
  • String 타입
    • String 타입은 문자열을 나타내는 객체
    • String의 인스턴스는 문자열 길이를 나타내는 숫자인 length 프로퍼티가 있음
      • 문자열이 2바이트 문자이더라도 한 글자로 계산
    • 글자 메서드
      • 문자열의 특정 문자에 접근하는 메서드
      • 매개변수
        • 원하는 문자의 인덱스
      • charAt()
        • 매개변수로 받은 인덱스에 위치한 문자를 한글자로 이루어진 문자열로 반환
      • charCodeAt()
        • 매개변수로 받은 인덱스에 위치한 문자에 대한 문자 코드를 반환
      • 대괄호 표기법([], ES5)
        • 대괄호 표기법을 사용하여 특정 문자에 접근할 수 있음
    • 문자열 조작 메서드
      • concat()
        • 문자열을 병합하여 그 결과를 반환
        • 원본 문자열의 값을 조작하지 않고 새로운 문자열 값을 반환
        • 문자열을 병합하는 목적으로 사용할 때, + 연산자를 사용하는 방법이 더 많이 사용되며 성능도 좋음
      • slice()
        • 자신을 호출한 문자열의 일부분을 반환
        • 원본 문자열의 값을 조작하지 않고 새로운 문자열 값을 반환
        • 음수 매개변수를 받으면 문자열 길이에 해당 매개변수를 더한 값을 사용
        • 매개변수
          • 어디서부터 가져올 것인지
          • 어디까지 가져올 것인지(가져오기를 끝내는 위치 바로 다음)
      • substr()
        • 자신을 호출한 문자열의 일부분을 반환
        • 원본 문자열의 값을 조작하지 않고 새로운 문자열 값을 반환
        • 음수 매개변수를 받으면 문자열 길이에 해당 매개변수를 더한 값을 사용(IE8 이하는 원본 문자열을 반환하는 버그가 있음)
        • 매개변수
          • 어디서부터 가져올 것인지
          • 어디까지 가져올 것인지(몇 개를 가져올 것인지)
      • substring()
        • 자신을 호출한 문자열의 일부분을 반환
        • 원본 문자열의 값을 조작하지 않고 새로운 문자열 값을 반환
        • 음수 매개변수를 받으면 음수 매개변수를 0으로 바꿈
        • 매개변수
          • 어디서부터 가져올 것인지
          • 어디까지 가져올 것인지(가져오기를 끝내는 위치 바로 다음)
    • 문자열 위치 메서드
      • 문자열 안에서 원하는 문자열의 위치를 찾는 메서드
      • 매개변수로 넘긴 문자열을 검색해 그 위치를 반환하며 찾지 못했을 때는 -1을 반환
      • indexOf()
        • 문자열의 처음에서부터 검색을 시작
      • lastIndexOf()
        • 문자열의 마지막에서부터 검색을 시작
    • trim()(ES5)
      • 문자열을 복사한 후 앞뒤 공백을 모두 제거한 결과를 반환
      • 일부 브라우저에서는 비표준 메서드인 trimLeft()trimRight()를 지원
    • 대소문자 메서드
      • toLowerCase()toUpperCase()
        • java.lang.String의 해당 메서들르 본따 만들어진 메서드
      • toLocaleCase()toLocaleUpperCase()
        • 지역에 맞게 사용하도록 만든 지역 메서드
        • 일부 언어에서는 유니코드 대소문자 변환에 따른 특별한 규칙이 필요
    • 문자열 패턴 매칭 메서드
      • 문자열 내에서 패턴 매칭을 하도록 만들어진 메서드
      • match()
        • RegEXP 객체의 exec() 메서드와 같은 결과를 반환
        • 매개변수
          • 정규 표현식 리터럴이나 RegExp 객체
        • 반환 값
          • RegExp 객체의 exec() 메서들에 문자열을 넘겨 호출한 결과와 같은 배열
      • search()
        • 패턴에 일치하는 첫 번째 문자열 인덱스를 반환하며 이맃하는 것을 찾지 못했을 떄는 -1을 반환
        • 항상 문자열의 처음에서 검색을 시작
        • 매개변수
          • 정규 표현식 리터럴이나 RegExp 객체
      • replace()
        • 문자열 일부를 바꾸는 메서드
        • 첫 번째 매개변수가 문자열이라면 해당 문자열과 일치하는 첫 번쨰 문자열만 바꿈
        • 문자열 전체를 바꾸려면 정규표현식에 g플래그를 넘겨야 함
        • 매개변수
          • RegExp 객체 또는 문자열(정규 표현식으로 변환되지 않음)
          • 문자열 또는 문자열을 반환하는 함수
            • 정규 표현식에서 얻은 정보를 다양한 방법으로 응용하는 특수 문자가 있음
              • $$ : $
              • $& : 패턴에 일치하는 문자열 전체(RegExp.lastMatch)
              • $' : 일치하는 문자열 앞의 텍스트(RegExp.leftContext)
              • $' : 일치하는 문자열 다음의 텍스트(RegExp.rightContext)
              • $n : n번째 캡처 그룹이며 n0 ~ 9 사이, 해당하는 캡처 그룹이 없다면 빈 문자열을 사용
              • $nn : nn번째 캡처 그룹이며 nn01 ~ 99 사이, 해당하는 캡처 그룹이 없다면 빈 문자열을 사용
            • 콜백함수를 사용할 경우 일치하는 문자열, 해당 문자열의 위치, 전체 문자열을 매개변수로 받음
      • split()
        • 텍스트를 구분자 기준으로 분리해서 배열에 담아 변환
        • 정규 표현식 지원은 브라우저에 따라 다름
          • ECMA-262는 캡처 그룹을 배열에 포함하도록 명시
            • IE8 이하는 캡처 그룹을 무시함
          • ECMA-262는 캡처 그룹에 일치하는 것이 없을 때 결과 배열에 undefined를 사용하도록 정의
            • 파이어폭스 3.6까지는 빈문자열을 사용
        • 매개변수
          • 문자열(정규 표현식으로 간주하지 않음)이나RegExp 객체인 구분자
          • 반환 받을 배열의 크기를 지정하는 숫자
      • localeComare()
        • 문자열 두 개를 비교한 후 다음과 같이 세 가지 값 중 하나를 반환
          • 메서드를 호출하는 텍스트가 매개변수로 넘긴 문자열보다 알파벳 순서상 뒤에 있다면 양수를 반환(대부분 1)
          • 메서드를 호출한 텍스트와 매개변수 문자열이 일치한다면 0을 반환
          • 메서드를 호출하는 텍스트가 매개변수로 넘긴 문자열보다 알파벳 순서상 앞에 있다면 음수를 반환(대부분 -1)
        • 반환하는 값은 브라우저에 따라 다르므로 기능을 추상화한 함수를 만드는 편을 권장
        • 브라우저를 실행하는 지역(국가와 언어)에 따라 메서드가 어떻게 동작할지가 다름
      • fromCharCode()
        • 문자 코드를 이를 문자열로 변환
        • charCodeAt()메서드가 하는 일을 거꾸로 함
      • HTML 메서드
        • 웹 브라우저 제조사들이 자바스크립트에서 동적으로 HTML 형식을 생성할 필요가 있음에 따라 명세를 확장해서 HTML 형식 생서에 필요한 메서드를 제공
        • 시맨틱 마크업을 해치므로 사용을 권장하지 않음

내장된 싱글톤 객체

  • ECMA-262 명세에서는 내장 객체를 “ECMAScript 구현에서 제공하는 객체는 호스트 환경에 무관하며 ECMAScript 프로그램이 실행되는 즉시 이미 존재한다”라고 정의
  • 개발자가 내장 객체를 명시적으로 인스턴스화 할 피룡가 없음
  • Global 객체
    • Global 객체는 명시적으로 접근할 수 없음
    • ECMA-262는 Global 객체를 소유자가 없는 모든 프로퍼티와 메서드를 담는 객체로 정의
    • 전역 변수나 전역 함수라는 것은 존재하지 않으며, 전역에서 정의한 변수와 함수는 모두 Global 객체의 프로퍼티가 됨
    • URI 인코딩 메서드
      • encodeURI(), encodeURIComponent(), decodeURI(), decodeURIComponent()
      • 브라우저에 전달할 URI를 인코드/디코드하는 메서드
      • 유효한 URI는 공백문자 등의 일부 특수 문자를 포함할 수 없음
      • URI 인코딩/디코딩 메서드는 특별한 UTF-8 인코딩/디코딩을 써서 URI에 사용할 수 없는 문자를 브라우저가 인식하고 이해할 수 있는 문자로 바꾸거나 반대로 작동함
      • encodeURI()
        • 전체 URI에 대해 작업
        • :/?# 처럼 URI 일부분으로 쓰이는 특수문자는 인코드/디코드하지 않음
      • encodeURIComponent()
        • URI 일부분만 조작
        • 비표준 문자를 모두 인코드/디코드
      • 일반적으로 베이스 URI 뒤에 추가할 쿼리스트링을 인코드하는 경우가 많으므로 encodeURI()보다 encodeURIComponet()를 자주 씀
      • ECMA-262 3판에 폐기한 ASCII 문자만 변환하는 escape(), unescape() 메서드를 대체함
    • eval()
      • ECMAScript 인터프리터 자체인 듯 동자갛며 매개변수로 문자열 하나 받는데 이 문자열은 실행할 수 있는 ECMAScript 코드여야 함
      • 인터프리터가 eval()을 마난면 매개변수를 실제 ECMAScript 문장으로 해석해서 eval()이 있던 위치에 삽입
      • eval()이 실행하는 코드는 eval()을 호출한 실행 컨텍스트의 일부분으로 간주되며 해당 컨텍스트와 같은 스코프 체인을 갖음
      • eval() 내부에서 정의한 변수나 함수는 끌어올림(호이스팅)의 대상이 아니며 코드 파싱 단계에서는 문자열일 뿐이며 변수나 함수로 정의되는 시점은 eval()이 실행되는 시점
      • 스트릭트 모드에서는 eval() 내부에서 정의한 변수나 함수에 접근할 수 없음
      • 사용자가 입력한 데이터에 eval()을 쓸 때는 사용자가 애플리케이션 보안을 해치는 값을 입력할 수 있기 때문에 조심해야함(코드 주입)
    • Global 객체의 프로퍼티
      • 앞서 언급한 다양한 참조 타입 등
      • ES5에서는 스트릭트 모드가 아닐떄도 undefined, NaN, Infinity에 값을 할당할 수 없음
    • Window 객체
      • ECMA-262에서는 Global 객체에 직접적으로 접근할 수 없도록 했지만 웹 브라우저에서는 window 객체를 통해 Global 갱체에 접근할 수 있음
  • Math 객체
    • ECMAScript에서는 수학 공식과 각중 상수를 Math 객체에 저장
    • Math 프로퍼티
      • 수학에서 쓰이는 특별한 상수
    • min()max()
      • 가장 작은 숫자와 큰 숫자를 찾음
      • 매개변수의 숫자에는 제한이 없음
      • 배열의 데이터 중에서 최댓값이나 최솟값을 찾을 때는 apply() 메서드를 사용
        • var max = Math.max.apply(Math, value)
        • apply()의 첫 번쨰 매개변수로 Math 객체를 넘겨서 this가 설정되도록 해야함
    • 반올림 메서드
      • 소수점 있는 값을 정수로 바꿈
      • Math.ceil() : 가장 가까운 정수로 값을 올림
      • Math.floor() : 가장 가까운 정수로 값을 내림
      • Math.round() : 반올림
    • random() 메서드
      • 01 사이의 난수를 반환하되 0이나 1을 반환하지는 않음
    • 기타 메서드
      • Math 객체에는 단순한 것부터 높은 레벨까지, 수학과 관련된 다양한 메서드가 있음
      • ECMA-262에서 메서들을 정의하기는 했지만, 일부 메서드들은 브라우저에 따라 구현이 다를 수 있으므로 메서드가 반환하는 값의 정확도는 브라우저마다 다를 수 있음

SmileCat

SmileCat
How do you define yourself?

[Openlayers] Render Event 정리

## 이벤트### [Map](http://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html)| event | module | note || :--: | -- | -- || [postcompose](...… Continue reading