자바스크립트 중급 강의 정리

자바스크립트 중급 강의 정리

자바스크립트는 제어를 하는 언어입니다.

DOM을 표현하는 것은 HTML, CSS가 담당합니다. file과 message관련된 것은 HTML5API가 담당합니다. 그래픽적인 부분은 SVG와 Canvas, WebGL이 담당합니다. 화면의 구조와 표현을 CSS가 모두 담당하고 있습니다.(범위가 제어부분까지 커지고 있습니다.)

Object가 중심 (아키텍쳐)

name: value 구조로 되어있으며 자바스크립트 아키텍처의 근간이 됩니다.

설계사상

스크립팅 언어로 많이 사용하는 컴파일 언어와 프로그램 기법이 달라집니다. UI/UX를 표현하는 일이 많이 있고 웹 브라우저에서 돌아갑니다. 요즘은 웹서버로 구동하기도 합니다.

자바스크립트는 지속성이 좋음

보유한 컨텐츠가 방대하고 W3C협의기구에서 정의하는 국제표준 언어입니다.

자바스크립트의 범위

자바스크립트는 OOP(객체지향 프로그래밍) 언어입니다. 스크립팅 언어의 특징은 코드를 만나는 시점에 컴파일, 실행합니다.

자바스크립트 언어 해석 특징

크롬에서는 JIT 컴파일(Just In Time Compile)을 사용합니다. 이 방법은 함수의 코드 전체를 먼저 컴파일한 후에 실행을 하는 방법을 취하고 있습니다.

인터프리터는 문장단위로 컴파일 하고 코드를 만나는 시점에 컴파일을 합니다.

렌더링

<script>

코드를 만났을 때 자바스크립트 실행 환경을 설정하고 렌더링을 합니다. 렌더링 결과로는 오브젝트를 생성하고, 값을 초기화하며, 연산자를 설정합니다. 그리고 빌트인을 생성하는데 빌트인은 어느 함수에서나, 그리고 아무때나 호출 가능한 함수를 말합니다.

빌트인

빌트인은 데이터 타입 오브젝트 연산자로 종류는 아래와 같습니다.

  • 데이터 타입
  • Undefined Null Boolean Number String
  • 빌트인 오브젝트
  • Global Object Function Array
  • String Boolean number
  • Math Date RegExp JSON Error
  • 빌트인 연산자
    ++, --

빌트인의 오브젝트는 글로벌 오브젝트, Object, Function Object로 나누어집니다.

프로퍼티

  • name, value의 쌍을 프로퍼티라고 합니다.

prototype

오브젝트의 형태로 프로퍼티를 연결할 때 사용하고 오브젝트의 메소드가 여기에 정의됩니다. 그리고 prototype을 이용하여 상속을 구현할 수 있습니다.

new 연산자

인스턴스를 생성하는 연산자로 prototype에 있는 프로퍼티들은 인스턴스간에 공유됩니다. instanceof 연산자를 이용해서 어떤 생성자 함수로 만들어졌는지 찾을 수 있습니다.

ES5: JSON프로젝트

JavaScript Object Notation의 약자로 자바스크립트 구문을 적용할 때 쓰입니다. 배열로 시작하며 안은 object의 형태입니다. JSON에서 Javascript객체로 변환하는 parse메서드와 그 반대로 작동하는 stringfy메서드가 있습니다.

Function Object

function이라는 키워드를 만나면 Function 오브젝트를 만듭니다. Function 오브젝트는 독립된 객체로 인식하고 접근해야 합니다. 그 이유는 자바스크립트는 OOP 언어이기 때문입니다. 이 오브젝트는 call, apply, bind 3개의 메소드를 가지고 있습니다. 함수가 호출이 되면 엔진은 함수를 찾아서 실행시킵니다.

아키텍처, 메커니즘

아키텍처와 메커니즘은 다음과 같이 나타낼 수 있습니다. - 아키텍처 목적을 가진 구조 - 메커니즘 목적을 달성하기 위한 방법

아키텍처와 매커니즘을 제대로 구현하기 위해서는 정확한 이해가 필요합니다.

자바스크립트 목적

자바스크립트는 프로그래밍 언어이고 언어의 목적은 소통입니다. 그러므로 자바스크립트 프로그램의 목적은 프로그램을 통한 자바스크립트 엔진과의 소통에 있습니다. 그러므로 자바스크립트를 문법중심으로 접근하기 보다는 자바스크립트 엔진의 상태를 파악하고 아키텍처와 매커니즘을 이해해야 합니다.

실행환경 인식

자바스크립트 엔진이 function 오브젝트를 생성하는 목적은 function 오브젝트 단위로 호출하고 실행하기 위해서입니다. 실행 환경이 만들어지고 이를 인식하기 위해서는 환경을 저장할 필요가 있습니다.

내부 프로퍼티

내부 프로퍼티는 엔진이 인식할 수 있는 프로퍼티를 말합니다. 이는 내부처리를 위해 사용되며 스펙상의 사항으로 외부에서 접근 불가합니다. 표기는 [[ ]] 형태로 하며 예를 들면 [[Scope]] 이와 같습니다. 내부프로퍼티는 공통 프로퍼티와 선택적 프로퍼티로 나누어집니다.

공통 내부 프로퍼티

  • [[Prototype]]: 오브젝트의 프로토타입(Object or Null)
  • [[Extensible]]: 오브젝트에 프로퍼티 추가 가능여부(Boolean)
  • [[Get]]: 이름을 가진 프로퍼티 값을 반환(any)
  • [[GetOwnProperty]]: 오브젝트 소유의 프로퍼티 디스크립터 속성반환(프로젝트 디스크립터 - Enummarable)
  • [[GetProperty]]: 오브젝트의 프로퍼티 디스크립터 속성 반환(프로퍼티 디스크립터)
  • [[Put]]: 프로퍼티 이름의 값을 설정
  • [[HasProperty]]
  • [[Delete]]: 오브젝트에서 프로퍼티 이름 삭제
  • [[DefaultValue]]-프리미티브 값: 오브젝트의 디폴트 값(함수) - Boolean, number, string, date 에서만 적용가능확인해봐야함
  • [[DefinedOwnProperty]]: 오브젝트에 프로퍼티 추가, 값, 변경

선택적 내부 프로퍼티

  • [PrimitiveValue]]: Boolean, Number, String, Date에서만 제공(값)
  • [[Constructor]]: new연산자로 생성시 반환
  • [[Call]]: 함수를 호출 function object만 있음
  • [[HasInstance]]: 오브젝트 생성한 인스턴스
  • [[Scope]]: Function 오브젝트 실행되는 렉시컬 환경(정적인 환경 - lexical environment)
  • [[FormalParameters]]: 호출된 함수의 파라미터 이름 리스트(유사배열)
  • [[Code]]: 함수가 호출되었을때 실행(함수의 코드 내용)
  • [[TargetFunction]]: 바인드에서만 사용
  • [[BoundThis]]: 바인드에서만사용
  • [[Boundarguments]]: 파인드에서만 사용
  • [[Match]]: 정규식을 중간중간 저장
  • [[ParameterMap]]: 아규먼트 오브젝트와 함수 파라미터의 프로퍼티 매핑(호출과 정의의 매개변수 연결)

함수 선언방법

  • 함수 선언문
function funcName() {

}
  • 함수 표현식
var funcName = function() {

}

자바스크립트 엔진 해석

스크립팅 언어로 한 줄씩 해석합니다. 함수형태에 따라서 중간에 있는 코드가 먼저 해석되기도 합니다.(JIT컴파일러) 자바스크립트 엔진은 코드를 해석할 때 함수 선언문을 먼저 해석하고, 변수를 초기화한 후에 자바스크립트 코드를 실행시킵니다. 즉, 함수는 호출하는 위치에 영향을 받지 않습니다.

함수선언문 오버라이딩

함수 이름이 같은 함수를 함수선언문으로 중복 정의하면 뒤에 있는 함수로 정의됩니다.

아규먼트 오브젝트

함수의 파라미터로 아규먼트 오브젝트가 만들어집니다. 함수를 호출하는 곳에서는 값을 넘겨주고, 함수를 호출받는 곳에서는 이름을 정의합니다. 호출한 함수에서 부른 아규먼트의 순서대로 파라미터 이름을 설정합니다.(함수 안에서 파라미터 이름으로 값을 사용하기 위해 설정)

arguments로 호출할 때 넘어온 파라미터들을 사용할 수 있습니다.(파라미터가 유동적일 때 사용하면 유용합니다.) arguments.length에는 호출할 때 넘겨준 파라미터들의 개수를 알 수 있습니다. 예를 들어

get({soccer: 11}, {book: 20});

으로 호출하면

arguments = {0: {soccer: 11}, 1: {book: 20}, length: 2};

형태로 저장됩니다. 이런 형태이기 때문에 for-in 문을 작성하면 length까지 고려해 줘야합니다. 즉, for-in보다는 for문이 사용하는데 편리합니다.

스코프

범위의 개념으로 범위를 제한하고 신속한 검색을 하며, 접근을 편리하게 하는 목적으로 사용됩니다. 스코프의 구조는 계층적 구조를 형성하고 있으며 Function 오브젝트를 생성할 때 스코프를 설정합니다.

글로벌

글로벌 오브젝트는 프로그램의 시작점으로 전체 프로그램에 1개가 있습니다. 글로벌 스코프는 최종적으로 검색이 되는 스코프이며 역시 전체에서 1개가 있습니다. 글로벌 변수는 글로벌 오브젝트에 선언이 되어있으면 글로벌 변수로 보며, 함수 또한 마찬가지입니다.

지역

지역변수는 함수안에서 var 키워드를 사용하여 만들며, 상수의 개념은 존재하지 안습니다.

바인딩

구조적으로 결속된 상태로 만들어주는 것을 바인딩이라고 하며, 정적 바인딩과 동적바인딩이 있습니다. 정적바인딩이란 초기화 단계에서 바인딩을 하는 것으로 대부분 Function 오브젝트를 설정할 때 바인딩이 됩니다.

참고) 파라미터가 고정적일때는 call을 사용하고 유동적일 때는 apply를 사용함 참고) built-in 오브젝트를 사용할 때는 name value로 처리해야하므로 Object를 상속받음

참고자료

김영보 (2015). 몰입! 자바스크립트 완전하게 내 것으로 만들기. ITC

Comments