Professional JavaScript for Web developers. 3/E

자바스크립트란 무엇인가

• 코어 (ECMAScript)
  • 웹 브라우저에 종속되지 않음
  • 입력이나 출력을 담당하는 메서드가 전혀 엇음
  • 웹 브라우저는 ECMAScript를 구현하는 호스트 환경
  • 호스트 환경은 ECMAScript를 기본적으로 구현
• 문서 객체 모델 (DOM)
  • XML을 HTML에서 사용할 수 있도록 확장한 애플리케이션 프로그래밍 인터페이스
  • 전체 페이지를 노드의 계층 구조로 변환
• 브라우저 객체 모델 (BOM)
  • 브라우저와 상호작용하는 메서드와 인터페이스 제공

HTML 속의 자바스크립트

• <script> 요소 내부의 자바스크립트 코드는 위에서부터 차례로 해석
• 외부 파일로 분리 추천
  • 관리가 쉬움
  • 캐싱
  • 미래에도 안전

언어의 기초

• 대소문자구분
• 문장 마지막에 세미콜론을 권장
• 키워드는 식별자나 프로퍼티 이름에 불가
• 변수를 초기화 하지 않으면 undefined가 할당
• 기본 데이터 타입
  • 원시 데이터
  • Undefined
    • 기본적으로 초기화 하지 않을 때
  • Null
    • Null은 빈 객체를 참조
  • Boolean
    • 대소문자를 구분
      • true
        • 비어 있지 않은 문자열
        • 0이 아닌 모든 숫자
        • 모든 객체
        • Undefined는 해당 없음
      • false
        • 빈 문자열
        • 0, NaN
        • null
        • undefined
  • 숫자
    • 메모리 제한 떄문에 모든 숫자를 나타낼 수 없음
    • 브라우저마다 범위 다름
    • NaN
      • 숫자를 반환할 것으로 의도한 조작이 실패했을 때 반환하는 값
      • 에러를 반환하는 것이 아님
      • 숫자를 0으로 나누면 NaN을 반환하고 에러는 발생하지 않음
  • 문자열
    • 불변
• null == undefined 는 항상 true
  • == 연산자가 타입 변환을 함
• 객체
  • Object 타입의 인스턴스는 Object 타입의 프로퍼티와 메서드를 전부 상속
• 매개변수
  • 매게변수 숫자를 따지지 않으며 데이터 타입도 체크하지 않음
  • 매개변수만큼 안 넘겨도됨
  • 매개변수가 내부적으로 배열로 표현
  • 매개변수와 내부배열은 동기화 되지 않음
• 오버 로딩이 없음

변수와 스코프, 메모리

• 변수
  • 원시 값
    • 단순한 데이터
  • 참조 값
    • 여러 값으로 구성 되는 객체
    • 메모리에 저장된 객체
• 값 복사
  • 원시 값
    • 값을 그대로 복사
  • 참조 값
    • 힙에서 저장된 객체를 가리키는 포인터가 같음
• 매개 변수
  • 값 형태
    • 지역 변수에 복사
  • 참조 형태
    • 메모리 상의 값의 위치가 지역 변수에 저장
  • 함수 매개변수는 지역 변수
• 타입
  • 모든 참조 값은 Object의 인스턴스로 정의 되어 있음
• 실행 컨텍스트와 스코프
  • 가장 바깥쪽에 존재하는 실행 컨텍스트는 전역 컨텍스트
    • 웹 브라우저에서는 window
    • 전역 변수와 함수는 window 객체의 프로퍼티 및 메서드로 생성
  • 실행 컨텍스트
    • 코드가 모두 실행될 떄 파괴
  • 전역 컨텍스트
    • 애플리케이션이 종료될 때 파괸
  • 컨텍스트에서 코드를 실행하면 변수 객체에 스코프 체인이 만들어짐
  • 활성화 객체는 항상 arguments 변수 단 하나로 시작
    • 전역 컨텍스트에는 존재 하지 않음
• 스코프 체인 확장
  • 블록 레벨 스코프가 없음
    • if
    • for
  • var를 사용해 선언한 변수는 자동으로 가장 가까운 컨텍스트에 추가
• 메모리 관리
  • 필요 없어진 데이터에는 null을 할당하여 참조를 제거하는게 좋음
    • 주로 전역 변수 및 전역 객체의 프로퍼티
    • 지역 변수는 컨텍스트를 빠져나가는 순간 자동으로 참조가 제거

참조 타입

• Object
  • {} 는 new Object() 와 같음
• Array
  • 어떤 타입의 데이터라도 넣을 수 있음
  • 동적으로 크기를 조절
• 스택 메서드
  • 배열이 stack 처럼 사용 가능
  • 배열이 큐 처럼 사용 가능
• 반복 메서드
  • every
    • 전부 true 여야 true
  • filter
    • true인 데이터만 새 배열에 저장해서 반환
  • foreach
    • 모든 데이터에 대한 콜백
  • map
    • 모든 데이터에 콜백 함수를 호출하고 그 결과를 새 배열에 저장해 반환
  • some
    • 하나라도 true이면 true
• 감소 메서드
  • reduce
    • 모든 배열을 순회하여 값을 만들어 반환
  • reduceRight
    • 역순으로 모든 배열을 순회하여 값을 만들어 반환
• Date
  • java.ujtil.Date에 기반
  • 1970년 1월 1일 자정부터 표현
  • toLocalString()은 브라우저가 실행 중인 지역의 관슴에 맞게 바꿔서 반환
  • toString()은 일반적으로 날짜와 시간에 타임존 정보를 포함하여 24시간 형식
  • toUTCString() UTC형식으로 표현하며 브라우저에 따라 다름
• RegExp
  • 메타 문자에는 역슬래시를 써서 이스케이프 사용
  • g : 전역모드로 지정하며 문자열 전체에서 동작
  • i : 대소문자 비구분 모드
  • m : 여러 줄 모드
  • exec()
    • 패턴에 일치하는 문자열을 반환하며 없으면 null 반환
    • 반환하는 배열은 Array 인스턴스와
    • 패턴에 캡쳐 그룬이 없다면 반환하는 배열은 하나
    • g 플래그가 설정되어 있더라도 한번에 한 가지 매치에 관한 정보 본환
    • g 플래그가 없으면 첫 번째 매치에 대한 정보 반환
  • test()
    • 패턴에 일치하면 true 아니면 false
• Function 타입
  • 함수가 사실은 객체
  • 모든 함수는 Function 타입 인스턴스이며 다른 참조 타입과 마찬가지로 프로퍼티와 메소드가 있음
  • 함수 이름은 함수 객체를 가리키는 포인터
  • 오버로딩 없음(마지막에 정의한 함수 실행)
• 함수 선언 vs 함수 표현식
  • 함수 선언은 코드 실행하기전에 컨텍스트에 접근하여 실행할 수 있지만 함수 표현식은 해당 줄까지 진행하기 전에는 사용할 수 없음
  • 코드 실행하기 전에 '함수 선언 호이스팅' 과정을 통해 함수 선언을 읽고 실행 컨텍스트에 추가
  • 자바스크립트 엔진이 함수 선언을 끌어올림
  • 변수를 포함한 선언은 끌어올리지 않음
• 함수의 내부 구조
  • arguments
    • 객체는 함수에 전달된 매게변수를 포함하는 배열과 비슷한 객체
    • 객체의 소유자인 함수를 가리키는 포인터인 calee 프로퍼티가 있음
  • this
    • 함수가 실행 중인 컨텍스트 객체에 대한 참조
    • 전역 스코프에서 호출 했다면 window를 가리킴
  • 함수 프로퍼티와 메서드
    • length
      • 함수가 넘겨받는 이름 붙은 매개변수의 숫자
    • prototype
      • 모든 참조 타입의 인스턴스 메서드가 존재하는 곳
      • apply()
        • 함수 내부에서 this 객체의 값을 바꾸는 것
        • 매개변수 소유자 함수에 넘길 this와 매개변수 배열을 받음
      • call()
        • apply()와 마찬가지로 동작
        • 매개변수를 나열해야함
      • apply()와 call()은 this를 바꾸는데 효과적
      • bind()
        • 새 함수 인스턴스를 만들며 this는 bind에 전달된 값
  • 원시 래퍼 타입
    • new 연산자를 사용해 참조 타입의 인스턴스를 만들면 스크프를 벗어날 때 까지 메모리에 존재
    • 자동으로 생성된 원시 래퍼 탕비은 코드 해당 행을 벗어나는 즉시 파괴
    • 원시 래퍼 타입은 런타임에 프로퍼티나 메서드를 추가할 수 없음
    • new를 사용한 것과 원시 래퍼 생성자를 호출한 타입은 다름
  • 불리언 타입
    • valueOf() 메서드를 오버라이드
    • 불리언 표현식에는 모든 객체를 자동으로 true로 변환한다
      • new Boolean(false) && true : true
    • Boolean 객체 사용을 권하지 않음
  • Number 타입
    • toFixed()는 소수점 뒤 몇자리 표시하며 20자리까지 지원(반올림)
    • toPrecision()는 숫자를 지수 표기법 문자열로 반환
  • String 타입
    • length
      • 문자열 2바이트 문자(ASCII 문자는 1바이트)이더라도 한 글자로 계산
    • conat()
      • 기존 문자열은 변하지 않음
      • +연산자가 더 빠름
    • slice(), substring(), substr()
      • 첫번째 매개변수는 어디서부터 가지고 올지 정함(해당 위치의 문자는 가지고 오지 않음)
      • 옵션인 두번째 매개변수는 어디까지 가지고 올지 정함
        • substr()는 가지고 올 문자 개수
      • 매개변수 음수값
        • slice(), substr()
          • 문자열 전체 길이값에서 뺴고 실행
        • substr()
          • 매개변수 값을 0으로 만듬
        • 두번째 매개변수 음수 값
          • slice()
            • 문자열 길이에서 매개변수 값을 사용
          • substring()
            • 0으로 바꾸고 사용
            • 두 매개 변수 중 작은쪽을 index로 큰 쪽을 마지막 인덱스로 사용
          • substr()
            • 0으로 바꾸고 사용
    • indexOf(), lastIndexOf()
      • 문자열 위치를 찾고 없으면 -1
      • 두번째 매개변수는 시작위치
    • trim()
      • 앞 뒤 공백을 모두 제거 후 결과 반환
    • 대소문자 메서드
      • 터키어 같은 일부 언어에서는 유니코드 대소문자 변환에 따른 특별한 규칙이 필요하여 지역메서드를 추천
    • 패턴
      • match()는 RegExp 객체의 exec()와 같은 결과 반환
      • search()는 패턴에 일치하는 첫 번재 문자열 인덱스 반환 없으면 -1
      • reaplace()는 문자열을 바꿈 문자열 전체를 바꾸려면 g플래그 사용
        • 두 번째 매개변수에 함수도 가능
      • htmlEscape()는 HTML에서 사용할 수 잇도록 특수문자를 이스케이프
      • split() 텍스트를 구분자를 기준으로 분리해서 배열에 담아 변환
        • 두 번째 매개변수에는 배열의 크기 지정
        • 정규 표현식 지원은 브라우저에 따라 다름
    • localeCompare()
      • 문자열 두 개를 비교한 후 (-1, 0, 1) 중에 하나를 반환
      • 메서드를 호출하는 텍스트가 매개변수로 넘긴 문자열보다 알파벳 순서상
        • 뒤에 있다면 음수
        • 일치하면 0
        • 크다면 양수
      • 추상화한 함수를 사용하면 모든 브라우저에 지원
    • fromCharCode() 는 문자 코드를 받아 문자열로 변환