자바스크립트 타입기본 타입 Show
참조 타입(객체 타입)
NaN (Not a Number)수치 연산을 해서 정상적인 값을 얻지 못할 때 발생하는 에러
delete 연산자객체 프로퍼티를 삭제하는 기능. 객체 삭제는 불가능
객체의 모든 연산은 참조 값을 처리값 비교시에 사용하는 == 를 적용한 예제를 보자.
Array 랑 Object 구분 방법
delete & splice 연산자 in 배열배열에서 delete 를 사용하면 요소의 값만 undefined 로 변경하고, 해당 요소 index 를 지우지는 않는다.
반대로 splice 는 해당 요소 전체를 아예 잘라내서 없앤다.
typeof 연산자각 데이터 타입에 대한 typeof 수행결과는 다음과 같다.
== 연산자와 === 연산자== 와 === 의 가장 큰 차이점은 값 뿐만 아니라 타입까지 체크하느냐이다. 또한 == 는 수행시에 타입이 다를 경우 타입을 일치시켜 값을 비교하는 특징이 있다.
함수 호이스팅
위 코드의 실행 결과는 add is not a function 이다. 위 코드를 실행할 때 자바스크립트 엔진 관점에서 호이스팅을 적용하여 코드 순서를 변경해보면 아래의 결과가 된다.
함수의 length 속성
내부 함수함수의 내부에 정의한 함수
생성자 함수일반 객체 선언과 다르게 여러 개의 객체를 찍어낼 수 있는 함수. 함수명 맨 앞 글자는 대문자, 호출 시에 new 사용.
위에서 생성한 dev 객체는 아래와 같이 constructor(생성자)가 Developer이다. instaceof 를 활용한 생성자 함수 구분법자바스크립트는 생성자 함수 형식이 별도로 없기에 기존 함수에 new만 붙여주면 생성자 함수 생성이 가능하다. 따라서, 생성자 함수가 아닌데 new 를 붙이는 경우를 대비해서 아래와 같은 기법을 적용할 수 있다. 대부분의 오픈소스 라이브러리에서 사용하는 패턴
prototype & constructor
프로토타입 체이닝해당 함수에 존재하지 않는 속성, 메서드를 부모 객체(프로토타입 객체)를 찾음
obj에서 사용한 printName() 메서드는 obj에 선언되었기 때문에 사용이 가능하다. 하지만 hasOwnProperty() 메서드는 선언되지도 않았는데 사용할 수 있다. 왜냐면 obj의 프로토타입 객체가 Object이고, Object에 내장된 메서드가 hasOwnProperty() 이기 때문에, obj에서 프로토타입 객체의 hasOwnProperty() 를 호출한다. 참고로, 자바스크립트 모든 객체의 최상위 부모 객체는 Object 객체다. Object, String, Number 프로토타입 객체 메서드 재정의자바스크립트에서 기본으로 제공하는 Object, String, Number 등의 표준 객체에 사용자가 원하는 기능을 재정의하여 사용할 수 있다.
즉시 실행 함수함수를 정의함과 동시에 바로 실행하는 함수. 함수를 다시 호출할 수 없다는 특징이 있다. 따라서, 최초 한 번의 실행만 요구되는 초기화 코드에 적합하다. jQuery 와 같은 오픈소스 라이브러리들의 구조.
클로져실행이 끝난 함수의 스코프를 참조할 수 있는 함수
위 내부함수의 정의대로라면 parent 의 내부함수인 child() 는 외부에서 접근이 불가능하다. 하지만 return 값에 child 를 넘김으로써 외부에서도 child 를 호출할 수 있게 된다. 따라서, child() 에서 parent 의 값을 참고하고 있다면, child() 를 밖에서 호출함으로써 parent() 의 변수에 접근이 가능하게 된다. 이것이 클로져 map() 구현
실행 컨텍스트를 이해하기 위한 자바스크립트 동작과정
변수 초기화 과정
실행 컨텍스트를 이해하기 위한 문제비동기 실행 방식인 setTimeout 를 이용한 예제이다.
setTimeout 이 지연시간이 0 이라고 할지라도 실행 컨텍스트가 다르기 때문에 1,4 가 먼저 출력된다. 이번엔 for 문과 setTimeout 이다.
위 코드를 실행시켰을 때, 이 코드가 실행되는 메인 컨텍스트와 setTimeout 이 실행되는 컨텍스트가 다르기 때문에 일반 프로그래밍 지식 관점에서는 0,1,2,3,4 이라고 추측하겠지만, 실제로는 for 문의 실행이 모두 끝난 후에 setTimeout 의 콜백 함수가 실행되기 때문에 숫자 5가 다섯 번 출력된다. arguments 객체함수 호출시에 넘겨진 실제 인자 값을 가진 배열
arguments 의 활용 : 메서드에 넘겨 받을 인자의 개수를 모를 때 유용
참고: arguments는 length 속성과 `arguments[i]`와 같은 index를 지니지만 배열은 아니다. 이러한 객체를 배열과 비슷한 객체(array-like object)라고 한다. apply() & call()위에서 배운 arguments에
this 바인딩일반적으로 함수 내부에서 this를 사용하면 전역 스코프(window)에 접근한다.
객체의 속성에서 함수를 선언하고 this를 사용하면 해당 객체를 접근한다.
함수의 내부함수에서 this를 사용하면 전역 객체(window)에 접근한다.
스코프 체인을 이해하기 위한 예제아래는 전역 스코프와 함수 스코프를 구분하면 된다.
아래는 내부함수 innerfunc 에서 외부함수인 func 의 변수에 접근하고 있다.
아래 예제는 func1 의 실행 컨텍스트가 전역이라는 것에 주목한다.
클로져 정의 및 코드 예시
일정한 형식을 가진 템플릿에서 입력된 값에 따라 다른 결과물을 내는 코드
위 코드에 클로져를 적용하면
위 함수를 좀 더 기능 단위로 분할해보면
클로져 활용클로져를 활용하여 Java나 기타 언어처럼 속성 및 메서드의 범위를 정할 수 있다.
참고자료
|