'나홀로스터디'에 해당되는 글 27건

웹 브라우저와 자바스크립트

2014. 11. 18. 18:05 나홀로스터디/JS 완벽가이드


13장 웹 브라우저와 자바스크립트

이 포스팅은 "자바스크립트 완벽 가이드(인사이트, 송인철,이동기,이유원,황인석 옮김)"에서 발췌 요약한 것입니다.
 
13.1 웹 브라우저 환경
13.2 HTML에 스크립트 내장하기
13.3 HTML의 이벤트 처리기
13.4 URL 안의 자바스크립트
13.5 자바스크립트 프로그램의 실행
13.6 클라이언트 측 호환성
13.7 접근성
13.8 자바스크립트 보안
13.9 웹과 관련된 다른 자바스크립트 내장 기법들


자바스크립트를 웹 브라우저 안에 내장하면 브라우저가 공개하는 강력하고 다영한 기능들을 스크립트 안에서 제어할수 있다.

13.1 웹 브라우저 환경
자바스크립트를 이해하려면 웹 브라우저가 제공하는 프로그래밍 환경을 이해해야만 한다.

13.1.1 전역 실행 컨텍스트로서의 Window 객체
클라이언트 측 자바스크립트에서는 Document 객체가 HTML 문서를 나타내며 Window 객체는 브라우저 창(또는 프레임)을 나타낸다. 모든 자바스크립트 구현에는 유효 범위 체인의 가장 앞에 항상 전역 객체가 위치하며 이 전역 객체의 프로퍼티들은 전역 변수들이다. 클라이언트 측 자바스크립트에서 전역 객체는 Window 객체고 이 객체에는 두 개의 자기 참조 프로퍼티 windowself 가 있다.
Window 객체는 클라이언트 측 자바스크립트의 전역 객체이기 때문에 모든 전역 변수는 이 객체의 프로퍼티로 정의된다.
애플리케이션에 속한 각 창은 고유한 Window 객체를 가지며 클라이언트 측 자바스크립트 코드의 고유한 실행 컨텍스트를 정의한다.

13.1.2 클라이언트 측 객체 계층 구조와 DOM
웹 브라우저가 프레임으로 구분된 문서를 표시할 때에는 최상위 Window 객체의 frames[] 배열이 각 프레임을 표현하는 Window 객체들에 대한 참조를 저장한다.

13.1.3 이벤트 구동 프로그래밍 모델
클라이언트 측 자바스크립트에서 웹 브라우저는 사용자 입력이 들어올 때 이벤트를 생성하여 프로그램에게 알려준다. 이벤트가 발생하면 웹 브라우저는 이벤트에 반응하기 위해 적절한 이벤트 처리기 함수를 찾아 호출하려고 시도한다. 따라서 동적이며 상호 작용할 수 있는 클라이언트 측 자바스크립트 프로그램을 작성하기 위해선 알맞은 이벤트 처리기를 구현하여 등록함으로써 적절한 시점에 이를 호출할수 있게 해야한다.
이벤트 처리기는 사용자 입력에 의해 구동되기 때문에 예측할 수 없는 시점에 비동기적으로 호출된다.

13.1.4 웹상에서 자바스크립트의 역할
자바스크립트의 역할은 정보의 획득과 전달을 용이하게 함으로써 사용자의 브라우징 경험을 증대시키는 일이다.
- 이미지 롤오버 같은 시각 효과를 생성하여 사용자의 페이지 탐색을 넌지시 도울수 있다.
- 표의 열을 정렬함으로써 사용자가 원하는 것을 빨리 찾게 할 수 있다.
- 사용자가 문서의 내용을 깊이 파고 들어감에 따라 선택적으로 어떤 내용은 감추고 또 어떤 내용은 더 자세히 노출하는 등의 작업을 할 수 있다.
- 웹 서버와 직접 통신하여 전체 페이지를 다시 읽어오지 않고도 새로운 정보가 표시될 수 있게 함으로써 브라우징 경험이 끊이지 않고 물 흐르듯 진행되게 할 수 있다.

13.1.5 겸손한 자바스크립트
겸손한 자바스크립트의 첫 번째 목표는 자바스크립트 코드와 HTML 마크업을 분리하는 것이고 두번째 목표는 단계적으로 성능을 축소하는 것이다. 자바스크립트는 html내용을 강화하기 위한 용도로써 이해되고 설계되어야 하며 그 내용은 자바스크립트 코드가 없이도 사용할 수 있어야 한다.
자바스크립트의 세 번째 목표는 html 페이지의 접근성을 해치지 않게 하는것이다.(또한 이상적으로 접근성을 강화해 줄 수 있어야만 한다.)

 

13.2 HTML에 스크립트 내장하기
- <script>와 < /script> 태그 사이에서
- <script> 태그의 src 어트리뷰트로 지정되는 외부 파일에서
- onclick이나 onmouseover 같은 HTML 어트리뷰트의 값으로 지정되는 이벤트 처리기 안에서
- 특수한 javascript: 프로토콜을 사용하는 URL안에서

13.2.1 <script> 태그
XHTML에서 <script> 태그의 내용은 다른 문서 내용들과 똑같이 다뤄지는데 만약 < 또는 & 문자를 포함한다면 이들 문자는 XML 마크업으로 해석된다. 이런 이유로 XHTML을 사용할 때는 모든 자바스크립트 코드를 CDATA 구역 안에 두는 것이 가장 좋다.
<script><![CDATA[
]]></script>
하나의 HTML문서는 임의 개수의 <script> 엘리먼트를 포함할 수 있다.
비록 한 파일의 분리된 스크립트들이 HTML 파일을 읽고 파싱하는 과정에서 서로 다른 시간에 실행되지만 결국 같은 자바스크립트 프로그램의 일부를 구성하기 때문에 한 스크립트에서 정의한 변수와 함수는 같은 파일에서 뒤따라 나오는 다른 모든 스크립트에서도 사용할 수 있다.
스크립트가 HTML 문서에 삽입되는 출력물을 생성할 수 있다는 것은 HTML 파서가 문서 파싱 프로세스의 일부로서 자바스크립트 스크립트를 해석해야만 한다는 것을 의미한다.

13.2.2 외부 파일에 저장된 스크립트
<script> 태그는 자바스크립트 코드를 담은 파일의 URL을 지정하는 src 어트리뷰트를 지원한다.
 <script src = "../../script/utill.js"></script>
- 커다란 블록의 자바스크립트 코드를 HTML 파일에서 제거할 수 있기 때문에 결과적으로 HTML 파일을 간단히 만들 수 있다.
- 서로 다른 HTML 파일들이 공유하며 사용하는 함수나 자바스크립트 코드가 있다면 이들을 하나의 파일로 저장하고 필요로 하는 HTML파일에서 읽어서 사용할 수 있으므로 코드의 유지와 보수에 용이하다.
- 자바스크립트 함수들이 하나 이상의 페이지에 의해 사용된다면 이들을 분리된 자바스크립트 파일에 놓아둠으로써 브라우저가 캐시에 저장하여 더 빨리 불러오게 할 수 있다.


13.2.3 스크립트 언어 지정하기

브라우저 벤더는 어떠한 스크립트 언어라도 선택하여 지원할 수 있다. 파일의 기본 스크립트 언어는 HTTP Content-Script-Type 헤더를 사용해 지정할 수 있으며, HTML의 <meta> 태그를 사용해 이 헤더를 흉내낼 수 있다.
기본 스크립트 언어를 지정하지 않았거나 또는 기본으로 설정된 사항을 번복하고 싶을때는 <script> 태그의 type 어트리뷰트를 시용해야 한다. 그러나 type 어트리뷰트를 지원하지 않던 시절 스크립트 언어는 language 어트리뷰트를 통해 지정했다.

13.2.4 defer 어트리뷰트
스크립트에서는 document.write() 메서드를 사용해 문서에 동적으로 내용을 첨가할 수 있는데 이 때문에 HTML 파서는 문서의 파싱 작업 중에 스크립트를 만났을 때 파싱 작업을 일단 멈추고 스크립트가 실행되기를 기다려야 한다. HTML4 표준은 이러한 문제를 다루기 위하여 <script> 태그에 defer 어트리뷰트를 정의했다.
스크립트의 실행을 미루는 것은 스크립트를 외부 파일에서 불러야 할 때 특히 유용하나 브라우저에서는 이 기능이 정확하게 구현되어 있지 않음에 주의해야 한다.

13.2.5 <noscript> 태그
HTML은 자바스크립트가 브라우저에서 비활성화된 경우에만 렌더링할 내용을 담는 용도로 <noscript> 엘리먼트를 정의한다. 이상적으로는 페이지를 정교하게 만들어서 자바스크립트는 성능 향상을 위한 용도로만 사용하게 해야 하지만 이러한 작업이 여의치 않다면 <noscrip> 태그를 사용하여 사용자로 하여금 자바스크립트가 꼭 필요하다는 사실을 알리거나 대신 보여줄 내용의 링크를 제공할 수도 있다.

13.2.6 </script> 태그
document.write() 메서드나 innerHTML 프로퍼티를 사용하여 다른 스크립트를(보통 다른 창이나 프레임으로) 출력하는 스크립트를 작성할 수도 있다.  HTML파서는 코드안에 "</script>"문자열을 스크립트를 끝내는 태그를 발견한 것이라 생각하기 때문에 이를 방지하기 위해서는 "</" + "script>" 같은 표현식을 사용해 출력하거나 </script>의 / 문자를 백슬래시를 사용하여 이스케이프 시퀀스로 표현할 수도 있다.

13.2.7 오래된 브라우저에서 스크립트 감추기
자바스크립트가 해로운 것이던 시절 브라우저들의 렌더링으로 HTML 주석을 사용하는 간단한 방법(<!-- // -->)이 사용되었다.

13.2.8 비공식 스크립트 어트리뷰트
eventfor 어트리뷰트를 사용하면 <script> 태그를 사용해서 이벤트 처리기를 정의할 수 있다. 이 어트리뷰트들은 오직 IE에서만 작동하며 이러한 기능은 다른 방법을 사용하여 쉽게 구현할 수 있으므로 이 어트리뷰트는 사용하지 않는것이 좋다.



 

13.3 HTML의 이벤트 처리기
스크립트 안의 자바스크립트 코드는 이 스크립트를 포함한 HTML 파일이 웹 브라우저로 읽혀 들어올 때 한 번 실행된다. 이벤트 처리기 정의안에는 자바스크립트 문장을 얼마든지 넣을 수 있지만 일반적으로 사용되는 기법은 <script>태그로 정의한 함수를 단순히 호출만 하는 용도로 사용하는 것이다. 겸손한 자바스크립트 패러다임을 위해서라면 문서 내용과 동작을 완전히 분리해야만 한다.

onclick
이 처리기는 <a>와 <area> 태그를 비롯해 버튼과 유사한 모든 폼 엘리먼트에서 지원하며 사용자가 엘리먼트를 클릭할 떄 구동된다.
onmousedown, onmouseup
이 이벤트 처리기는 onclick과 매우 유사하지만 사용자가 마우스를 눌렀을때와 놓았을때를 구분하여 구동된다는 것이 다르다.
onmouseover, onmouseout
이 이벤트 처리기는 마우스 포인터가 문서 엘리먼트의 위로 올라올때와 엘리먼트를 벗어날 때 구동된다.

onchange
이 이벤트 처리기는 <input>과 <select>, <textarea> 엘리먼트에서 지원하며 엘리먼트에 의해 표시된 값을 사용자가 변경한 뒤 탭이나 다른 방법을 사용해서 엘리먼트로부터 입력 포커스를 다른 곳으로 이동할 때 구동된다.
onload
<body> 태그 안에 등장하며 문서와 문서에 연결된 외부 내용들을 완전히 불러온 후에 구동된다.



 

13.4 URL 안의 자바스크립트

자바스크립트 코드를 클라이언트 측에 포함시키기 위한 또 다른 방법은 javascript: 모조 프로토콜로 지정된 URL을 사용하는 것이다. 이 특별한 프로토콜 타입은 URL의 몸체가 자바스크립트 인터프리터에 의해 실행될 자바스크립트 코드를 담은 문자열임을 알리는 역할을 한다.

13.4.1 북마클릿
자바스크립트의 URL의 특별히 중요한 용도 중 하나는 북마클릿이라 부르는 즐겨찾기 툴바나 메뉴에서 손쉽게 실행할수 있게 하는것이다.
 

13.5 자바스크립트 프로그램의 실행
13.5.1 스크립트 실행
<script>와 </script> 태그 사이에 위치한 자바스크립트 문장들은 스크립트에 나타난 순서대로 실행된다.
스크립트는 HTML 문서의 <head>나 <body> 안에 나타날수 있는데 <head>안의 스크립트는 보통 다른 코드에 의해 호출될 함수들을 정의하며 또한 다른 코드에 의해 사용될 변수들을 선언하고 초기화하기도 한다. 일반적으로 문서 <head>안의 스크립트는 함수 하나를 정의하여 차후 실행을 위해 onload 이벤트 처리기에 등록한다.
문서 <body> 안의 스크립트는 <head>안의 스크립트가 하는 모든 일을 할 수 있다.
만약 스크립트가 차후에 사용할 함수와 변수들을 단순히 정의하기만 하고 document.write() 호출과 같이 문서 내용을 바꾸는 어떠한 시도도 하지 않는다면 관습에 따라 이 스크립트 문서의 <body>가 아니라 <head> 안에 위치해야만 한다.

13.5.2 onload 이벤트 처리기
문서의 파싱이 끝나고 모든 스크립트가 실행된 후 모든 보조내용이 전부 불려온 후에 브라우저는 onload 이벤트를 발생시켜 Window 객체에 onload 이벤트 처리기로 등록된 모든 자바스크립트 코드를 실행한다.
onload 처리기는 <body> 태그의 onload 어트리뷰트를 설정함으로써 등록할 수 있는데 onload 처리기가 구동되는 때는 문서의 읽기 작업과 파싱 작업이 완전히 끝난 후이기 때문에 모든 문서 엘리먼트는 자바스크립트 코드를 사용하여 조작할 수 있다.
onload 이벤트 처리기는 문서 파싱 작업이 완료된 다음에 호출되기 때문에 document.write()를 호출해선 안된다.

13.5.3 이벤트 처리기와 자바스크립트 URL
문서의 읽기와 파싱 작업이 끝난 후에는 onload 처리기가 구동되며 자바스크립트 실행은 이벤트 구동 단계로 진입한다. 이 단계에서는 마우스 움직임, 클릭, 키입력과 같은 사용자 입력에 의한 비동기적 이벤트 처리기가 실행되고 자바스크립트 URL 또한 이 단계에서 비동기적으로 호출될 수 있는데 javascript:모조 프로토콜을 사용하는 href 어트리뷰트를 가진 링크를 클릭하는 경우가 이에 해당한다.

13.5.4 onunload 이벤트 처리기
사용자가 웹 페이지를 떠나 다른 곳으로 이동할 때 브라우저는 현재 페이지에 대한 자바스크립트 코드의 마지막 실행 기회로 onunload 이벤트 처리기를 구동한다.  onunload 이벤트를 처리하면 웹 페이지의 onload 처리기나 다른 스크립트에 의한 효과를 되돌릴수 있다.

13.5.5 실행 컨텍스트와 Window 객체
문서의 모든 스크립트와 이벤트 처리기, 자바스크립트 URL은 그들의 전역 객체로 하나의 Winodw 객체를 공유한다. 새 문서가 창으로 불려올 때는 언제나 그 창의 Window 객체가 기본 상태로 복원된다. Window 객체에 있는 프로퍼티들의 수명은 그 프로퍼티를 정의한 자바스크립트가 포함된 문서의 수명과 같다. 하지만 Window 객체는 이 객체가 나타내는 창이 존재하는 한 계속해서 남는다. Window 객체에 대한 참조는 이 창이 얼마나 많은 웹 페이지를 읽고 버렸는지에 상관없이 항상 유효한 상태로 남아있다.

13.5.6 클라이언트 측 자바스크립트 쓰레드 모델
클라이언트 측 자바스크립트는 단일 쓰레드다(또는 마치 그러한 것처럼 작동한다). 스크립트를 읽고 실행하는 도중에는 문서 파싱이 중단되고, 이벤트 처리기가 실행되는 중에는 웹 브라우저도 사용자 입력에 반응하지 않는다. 단일 쓰레드 실행은 코드작성시 두 이벤트가 절대로 동시에 실행되지 않음을 보장받는 동시에 스크립트나 이벤트 처리기가 절대로 오랜시간 동안 실행되어선 안됨을 의미한다.

13.5.7 읽기 중인 문서 조작하기
문서에 대한 읽기와 파싱 작업이 진행되는 동안 <script> 엘리먼트 안의 자바스크립트 코드는 document.write()를 사용하여 문서에 내용을 삽입할 수 있다. 하지만 이 작업에 대해선 표준화가 진행된바 없으며 막연한 불안이 있기도 하다. 이것에 대해 일치하는 의견이 하나 있다면 그것은 onload 이벤트가 구동된 다음의 문서 조작은 안전하다는 것이다.
문서에 포함된 이미지의 크기가 크거나 개수가 많다면 이미지에 대한 읽기 작업이 전부 완료되어 onload 이벤트가 구동되기 전에도 주요 문서의 파싱 작업은 충분히 완료될 수 있다.
 
 
13.6 클라이언트 측 호환성
웹 브라우저는 애플리케이션들을 실행하기 위한 보편적 플랫폼이며 자바스크립트는 그 애플리케이션들을 개발하기 위해 사용되는 언어다. 모든 웹 브라우저가 HTML을 출력하지만 CSS와 DOM 같은 표준을 지원하는 방식들에는 서로 차이가 있다.
온라인에서 브라우저 호환성 정보를 검색할 수 있는 사이트를 소개한다.
- http://www.quirksmode.org/dom/


13.6.1 비호환의 역사
웹 프로그래밍의 초창기는 넷스케이프와 마이크로소프트 간의 '브라우저 전쟁'으로 특징 지을수 있다. 브라우저 전쟁은 마이크로소프트가 압도적인 시장 점유를 달성하며 끝이 났고 DOM이나 CSS 같은 웹 표준들이 자리를 잡아가기 시작했다.

13.6.3 기능테스트
기능 테스트의 중요한 점은 이것이 특정 브라우저 벤더나 특정 브라우저 버전에 종속되지 않는 코드를 만들 수 있게 해준다는 것이다. 기능테스트는 어떤 기능들을 구현하는지에 관계없이 오늘날 존재하는 브라우저들과 작동함은 물론 미래의 브라우저들과도 계속하여 작동할 수 있게 한다.
document.all[] 배열은 마이크로소프트가 IE4에서 제안한것인데 이것은 자바스크립트 코드로 하여금 문서의 모든 엘리먼트를 가리킬 수 있게 했지만 표준으로 채택되지는 못했고 document.getElementById() 가 그 자리를 대신하게 되었다.

13.6.4 브라우저 테스트
기능테스트는 넓은 범위의 기능 검사를 수행할 때 잘 어울린다. 현재 브라우저 벤더나 버전을 판별하기 위한 코드는 종종 브라우저 스니퍼나 클라이언트 스니퍼라 불리기도 한다. 클라이언트 스니퍼는 넷스케이프와 IE가 서로 호환되지 않고 막 나가던 시절의 웹에서 흔히 사용되던 기법이다.

13.6.5 인터넷 익스플로러 조건부 주석
실무에서 클라이언트 측 자바스크립트 프로그래밍의 많은 비호환 문제들이 IE에 한정된 것임을 보게 될것이다. IE는 HTML과 자바스크립트 모두에서 유용하게 사용할 수 있는 조건부 주석을 지원한다.
조건부 주석은 또한 IE의 자바스크립트 인터프리터에서도 지원된다. 조건부 주석 안에서는 @if, @else, @end 키워드들이 IE의 자바스크립트 인터프리터에 의해 조건부로 실행될 코드들을 구분한다.
 
 


13.7 접근성
웹은 정보를 널리 퍼뜨리는데 매우 훌륭한 도구이며 자바스크립트 프로그램은 이러한 정보들로의 접근성을 강화하는데 사용할수 있다. 그러나 시각장애 혹은 신체장애가 있는 방문자에게 정보를 줄수 없는 코드를 작성하기 쉬우니 각별히 주의해야한다. 자바스크립트 접근성과 관련된 가장 기본적인 규칙은 자바스크립트 인터프리터가 비활성화된 상태에서도 여전히 웹 페이지가 기능을 다할 수 있게 코드를 작성하는 것이다.
접근성과 관련된 또 다른 중요한 점은 키보드는 사용할 수 있으나 마우스 같은 포인팅 장치는 사용할 수 없는 사용자들을 배려하는 것이다. 접근성을 위해서는 가능한 장치 독립적인 이벤트의 사용을 선호해야만 한다.
 




13.8 자바스크립트 보안
13.8.1 자바스크립트가 할 수 없는 것
웹 브라우저에 자바스크립트 인터프리터가 도입되었다는 말은 웹 페이지를 읽어들이는 과정에서 임의의 자바스크립트 코드를 이용하는 컴퓨터에서 실행할 수 있음을 의미한다. 유해한 코드에 맞서기 위한 자바스크립트의 첫 번재 대응책은 단순히 이 언어가 특정 기능들을 지원하지 않게 하는 것이다. 두번재 대응책은 자바스크립트가 지원하는 기능들을 제약하는 것이다.

13.8.2 동일 출처 정책
동일 출처 정책은 자바스크립트 코드가 상호 작용할 수 있는 웹 문서 내용에 관한 광범위한 보안 제약이다. 이것은 보통 웹 페이지가 <iframe> 태그를 사용하여 어러 프레임으로 구성되었거나 다른 브라우저 창을 열 때 적용된다. 명확히 말하면 스크립트는 그 자신이 포함된 문서와 출처가 동일한 문서나 창의 프로퍼티들만 읽을 수 있다. 동일 출처 정책은 XMLHttpRequest 객체와 함께 HTTP를 스크립트 안에서 직접 제어할 때에도 적용된다.
다른 서버에서 불러온 문서를 포함하는 창은 사실상 스크립트가 출입할 수 없는 구역이라고 생각해야 한다. 동일 출처 정책은 스크립트가 개인 소유의 정보를 빼돌리는 것을 방지하기 위해 필요하다

13.8.3 플러그인과 ActiveX 컨트롤 스크립팅
많은 웹 브라우저에서 자바스크립트는 인터넷 익스플로러의 ActiveX 컨트롤이나 다른 브라우저들의 플러그인 같은 소프트웨어 컴포넌트들을 실행하기 위한 '스크립트 엔진'으로 사용되곤 한다. 만약 스크립트에서 어떤 플러그인을 직접 제어할 수 있다면 웹 브라우저의 보안 아키텍처를 신뢰하는 데에서 나아가 플러그인 그 자체의 보안 아키텍처도 신뢰할 수 있어야만 한다는 것이다.

13.8.4 크로스 사이트 스크립팅
크로스 사이트 스크립팅 또는 XSS는 공격자가 공격의 대상이 된 웹 사이트로 HTML 태그나 스크립트를 주입해 넣는 종류의 보안 쟁점을 일컫는 용어다. 웹 페이지는 사용자가 전송해온 데이터에 기반하여 동적으로 문서 내용을 생성하는데 이에 앞서서 우선 사용자의 데이터에서 내장된 HTML 태그를 제거하는 식의 '검열' 과정을 거치지 않으면 이 웹 페이지는 크로스 사이트 스크립팅에 대해 취약해진다.

13.8.5 서비스 거부 공격
사악한 사이트는 무한 루프나 의미없는 계산을 끊임없이 수행함으로써 여러분의 CPU를 불통으로 만들어버릴 수도 있다. 웹 브라우저의 공격을 방어하기 위한 일반적인 방법론은 존재하지 않는다.
 



13.9 웹과 관련된 다른 자바스크립트 내장 기법들
클라이언트 측 자바스크립트 외에도 자바스크립트 언어를 웹에 내장하기 위한 다른 방법들이 있다.

사용자 스크립팅
사용자 스크립팅을 사용하면 HTML 문서가 브라우저에 의해 렌더링되기 전에 우선 사용자가 정의한 스크립트를 거쳐서 조작될 수 있다. 가장 널리 알려진 사용자 스크립팅의 예는 파이어폴스 웹 브라우저의 Greasemonkey 확장 기능이다.

SVG
SVG(Scalable Vector Graphics, 가변 벡터 도형 처리)는 XML 기반의 그래픽 포맷으로 자바스크립트 스크립트를 포함할 수 있다.  클라이언트 측 자바스크립트는 자신이 내장된 HTML 문서를 스크립팅 할수 있고 이와 마찬가지로 SVG 파일에 끼워 넣어진 자바스크립트 코드는 그 문서의 XML 엘리먼트들을 스크립트로 직접 제어할 수 있다.

XUL
XUL은 사용자 인터페이스를 기술하기 위한 XML 기반의 문법이다. 파이어폭스 웹 브라우저의 GUI는 XUL 문서로 정의되어 있다. XUL 문서 안의 자바스크립트 코드는 클라이언트 측 자바스크립트 코드와는 다른 객체와 API들을 사용하며 또한 다른 보안 모델을 따른다.

액션스크립트
액션스크립트는 자바스크립트와 유사한 언어이며(동일한 ECMAscript 명세서에서 유래했으나 객체지향적인 방향으로 진화했다) 플래시 무비에서 사용된다. 플래시는 XML이나 HTML에 기반을 두지 않으며 플래시에 의해 제공되는 API들은 이책에서 논의되는 것과는 관련이 없다.
 
 
 

 

'나홀로스터디 > JS 완벽가이드' 카테고리의 다른 글

CSS와 DHTML  (0) 2014.12.15
문서 스크립팅  (0) 2014.11.26
함수  (0) 2014.10.27
객체와 배열  (0) 2014.10.20
문장  (0) 2014.10.16

브라우저 객체모델

2014. 11. 12. 11:30 나홀로스터디/JS For Web Dev


8장 브라우저 객체 모델

이 포스팅은 "프론트엔드 개발자를 위한 자바스크립트(2013 인사이트, 한선용 옮김)"에서 발췌 요약한 것입니다.
 
8.1 BOM의 핵심인 window 객체에 대한 이해
8.2 창과 프레임, 팝업 컨트롤
8.3 location 객체에서 얻는 페이지 정보
8.4 navigator 객체를 통한 브라우저 이해



8.1 window 객체
window 객체는 브라우저 창의 자바스크립트 인터페이스 구실을 하고 다른 한편으로는 ECMAScript Global 객체로 기능하며 window에 정의된 parseInt() 등의 메서드를 이용한다.


8.1.1 전역 스코프
window 객체가 ECMAScript의 Global 객체 구실을 하므로 전역에서 선언한 변수와 함수는 모두 window 객체의 프로퍼티 및 메서드가 된다.


8.1.2 창 사이의 관계와 프레임
페이지에 프레임이 들어있으면 각 프레임은 독자적인 window 객체를 가지며 이 객체들은 frames 컬렉션에 저장된다.
각 window 객체는 프레임의 name을 프로퍼티로 가진다.
top 객체는 항상 최상위(즉, 가장 바깥에 있는) 프레임을 가리키는데 이는 곧 브라우저 창이다.
window 객체 중에는 parent도 있는데 parent 객체는 항상 현재 프레임의 바로 상위인 부모 프레임이다.

최상위 window에는 name 프로퍼티 값이 존재하지 않는데 window.open() 메서드를 통해 창을 열었을 때는 예외다. self 객체는 항상 window를 가리키므로 window 객체는 self와 서로 바꿔서 써도 된다.

8.1.3 창의 위치
창의 위치를 가져오거나 설정하는 프로퍼티와 메서드도 다양한데 IE/Safari/Opera/Chrome은 모두 화면 왼쪽위에서 각각 얼마나 떨어졌는지를 나타내는 screenLeft/screenTop 프로퍼티를 지원한다.
FF는 이 기능을 screenX/screenY 프로퍼티로 지원하는데 Safari/Chrome도 이 프로퍼티를 지원한다.

var leftPos = (typeof window.screenLefr == "number") ? window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ? window.screenTop  window.screenY;

이 예제는 사용해도 브라우져마다 지원하는 위치값의 차이가 있기 때문에 일관적으로 구할 방법은 없다.
하지만 moveTo()/moveBy() 메서드로 정확한 위치로 옮기는 일은 가능하다. 각 메서드는 두개의 매개변수를 받는데 moveTo()는 이동할 x/y 좌표를 받고 moveBy()는 각 방향으로 몇 픽셀 이동할지 나타내는 숫자를 받는다.
브라우저에서 이 메서드를 금지할 가능성이 있다.


8.1.4 창 크기
창크기를 알아내는 방법은 IE9/FF/Safari/Opera/Chrome 모두 innerWidth, innerHeight, outerWidth, outerHeight 네가지 프로퍼티를 지원한다.
outerWidth, outerHeight 브라우저 창 크기를 반환하고  innerWidth, innerHeight 프로퍼티는 브라우저 창 내부의 페이지 뷰포트 크기를 나타낸다.
IE/FF/Safari/Opera/Chrome 에서 document.documentElement.clientWidthdocument.documentElement.clientHeight 프로퍼티는 각각 페이지 뷰포트의 너비와 높이를 나타낸다.

8.1.5 네비게이션과 열기
window.open() 메서드는 URL 로 이동한 후 브라우저 창을 새로 연다.
이 메서드는 이동할 URL, 대상 창, 기능을 나타내는 문자열, 새 페이지가 브라우저 히스토리에서 현재 페이지를 대체할지 나타내는 불리언 값 네가지 매개 변수를 받는데 일반적으로 세번째 매개변수까지만 사용하며 마지막 매개변수는 새 창을 열때는 적용되지 않는다.
window.open()의 두 번째 매개변수가 이미 존재하는 창이나 프레임 이름이라면 주어진 URL은 해당 이름의 창이나 프레임에서 열린다.

팝업창
두 번재 매개변수가 기존의 창/프레임 이름이 아니라면 세 번재 매개변수에 지정한 문자열로 새 창이나 탭을 생성하고 세번째 매개변수가 없다면 새 브라우져 창이 열리고 기본 브라우저 창 설정(툴바, 주소표시 줄, 상태 바 등)이 적용된다. 세 번째 매개변수는 새 창을 열 때에만 적용되고 새 창의 정보를 나타내는 쉼표로 구분된 문자열이다.

fullscreen = "yes" or "no" : 브라우저 창을 최대 크기로 생성할지 나타냄(IE전용)
height = 숫자 : 새창의 높이를 나타냄, 최소값은 100
left = 숫자 : 새 창의 x 좌표로 음수는 쓸수 없음
location = "yes" or "no" : 주소 표시줄을 표시할지 나타냄, 기본값은 브라우저에 따라 다름
menubar = "yes" or "no"  : 메뉴바를 표시할지 나타냄, 기본값은 "no"
resizable = "yes" or "no"  : 새 창의 테두리를 드래그해서 크기를 조절할수 있는지 나타냄, 기본값은 "no"
scrollbas = "yes" or "no"  : 새 창 컨텐츠가 뷰포트를 넘칠 때 스크롤을 허용할지 나타냄, 기본값은 "no"
status = "yes" or "no"  : 상태바를 표시할지 나타냄, 기본값은 브라우저에 따라 다름
toolbar = "yes" or "no"  : 툴바를 표시할지 나타냄, 기본값은 "no"
top = 숫자  : 새 창의 y 좌표, 음수는 쓸 수 없음
width = 숫자 : 새 창의 너비, 최소값은 100


이름- 값  쌍은 등호(=)로 구분하며 각 쌍은 공백을 포함할 수 없다.
window.open("http://www.wrox.com/","wroxWindow","height=400,width=400,top=10,left=10,resizable=yes");

팝업 차단
브라우저에 내장된 팝업 차단기가 동작했다면 window.open()은 대개 null을 반환한다.


8.1.6 인터벌과 타임아웃(setTimeout(), clearTimeout())
브라우저에서 자바스크립트는 단일 스레드로 실행되지만 타임아웃과 인터벌을 통해 코드가 특정 시간에 실행되게끔 조절할 수 있다.
타임아웃은 일정 시간 뒤에 코드를 실행하는 것이고, 인터벌은 일정 시간마다 코드를 반복 실행하는 것이다.
타임아웃은 window의 setTimeout() 메서드로 설정한다. 이 메서드는 매개 변수를 두 개 받는데 하나는 실행할 코드이고 하나는 코드를 실행할 때까지 기다리는 시간(밀리초)이다.
setTimeout()을 호출하면 해당 타임아웃의 숫자형 ID를 반환하고 대기중인 타임아웃을 취소하려면 다음 예제처럼 clearTimeout() 메서드에 타임아웃 ID를 넘긴다.

타임아웃으로 실행하는 코드는 항상 전역 스코프에서 실행되므로 함수의 this값은 스트릭트 모드가 아닐 때는 항상 window이고 스트릭트 모드에서는 항상 undefined이다.

인터벌은 타임아웃과 비슷하지만 페이지가 종료되거나 인터벌을 취소하기 전에는 일정한 시간마다 코드를 반복 실행한다는 점이 다르다. setInterval() 메서드로 인터벌을 설정하며 이 메서드는 setTimeout()과 같은 매개변수, 즉 실행할 코드(문자열 또는 함수)와 각 실행 사이에 대기할 시간을 밀리초로 받는다.
setInterval() 메서드 역시 인터벌 ID를 반환하며 clearInterval() 메서드는 이 ID를 매개변수로 받아 해당 인터벌을 취소한다. 인터벌을 취소하지 않으면 페이지가 떠 있는 동안 계속 실행되므로 인터벌 취소는 타임아웃 취소보다 중요하다.


8.1.7 시스템 대화상자
브라우저는 alert(), confirm(), prompt() 메서드를 통해 사용자에게 시스템 대화상자를 표시한다.
얼럿 대화상자는 일반적으로 에러처럼 사용자가 할수 있는 일이 없지만 반드시 알려야 할때 쓴다.
컨펌 대화상자는 확인과 취소버튼이 있어서 사용자가 선택할 수 있고, true 또는 false 불리언 값을 반환한다.
프롬프트 대화상자는 확인과 취소버튼 외에도 사용자가 데이터를 입력하는 텍스트 박스가 있다. prompt() 메서드는 매개변수를 두개 받는데 하나는 대화상자에 표시할 텍스트이며 하나는 텍스트 박스의 기본값(빈 문자열 가능)이다.

 

8.2 location 객체
location 객체는 현재 창에 불러온 문서 정보와 함께 일반적인 네비게이션 기능을 제공한다. location 객체는 window 의 프로퍼티인 동시에 document의 프로퍼티다. location은 현재 문서에 대한 정보를 갖고 있으며 URL 을 파싱해서 몇가지 조각으로 분리해 각각을 프로퍼티로 저장한다.


8.2.1 쿼리스트링 확장
URL 정보중 쿼리스트링은 다루기 쉬운 형태로 제공되지는 않으므로 쿼리스트링을 파싱해서 각 매개변수를 프로퍼티로 갖는 객체를 반환한다.


8.1.2 location 조작
다양한 방법으로 location 객체를 조작해서 페이지를 이동할 수 있다. 가장 많이 쓰이는 것은 assign() 메서드다.

location.assign("http://www.wrox.com"); 


이렇게하면 즉시 새 URL로 이동하며 브라우저의 히스토리 스택에 기록이 추가되는데 lacation.href이나 window.lacation에 URL을 지정하면 그 값으로 assign() 메서드를 호출한다.  헤이지를 이동하는 이 세가지 방법중에서 lacation.href을 설정하는 방법이 가장 자주 쓰인다.
location 객체의 프로퍼티를 변경하면 현재 페이지에도 영향이 있다. hash, search, hostname, port 프로퍼티를 변경하면 현재 URL에 새 값이 반영되며 새 URL로 페이지를 다시 읽는데 hash 프로퍼티를 바꿀 때는 예외이다.

 location.hash ="#section1";
 location.search = "?q=javascript";
 location.hostname = "www.yahoo.com";
 location.patname = "mydir"; 

이와 같은 방법으로 URL을 수정하면 브라우저의 히스토리 스택에 기록이 남아 사용자가 뒤로가기 버튼을 클릭해 이전 페이지로 돌아갈 수 있다. replace() 메서드를 쓰면 매개변수로 URL을 받아 이동하지만 히스토리 스택에 기록을 남기지 않기 때문에 뒤로가기 버튼을 클릭해 이전 페이지로 돌아갈 수 없다.

현재 위치를 다시 불러오는 reload() 메서드는 매개변수 없이 호출하면 페이지를 가능한 한 가장 효과적인 방법으로 다시 읽는다. 마지막 요청이후 페이지가 바뀌지 않았다면 브라우저 캐시에서 읽어오는데 서버에서 읽어오도록 강제하려면 true를 매개변수로 넘긴다.

location.reload(); // 가능하면 캐시에서
location.reload(true); // 항상 서버에서 

reload() 호출 이후에 있는 코드는 네트워크 지연이나 시스템 자원 같은 요인의 영향으로 코드 마지막에 두는 것이 최선이다.

 


8.3 navigator 객체
navigator 객체의 프로퍼티는 일반적으로 웹 페이지를 실행중인 브라우저 타입을 판단하는데 사용한다.
브라우저에 따라 navigator 객체에서 지원하는 프로퍼티가 다르다.


8.3.1 플러그인 감지
스크립트로 가장 많이 탐지하는 것 중 하나는 브라우저에 특정 플러그인이 설치되어 있는지이다. IE 이외의 브라우저에서는 plugins 배열에서 이 정보를 얻을수 있다.

name - 플러그인 이름
description - 플러그인 설명
filename - 플러그인 파일 이름
length - 플러그인이 처리하는 마임 타입 숫자

일반적으로 name만 있으면 플러그인을 식별하기 충분하지만 항상 그렇지는 않다.


각 plugin 객체는 MineType 객체의 배열이기도 하며 대괄호 표기법으로 접근 가능하다. 각 Mime Type 객체에는 프로퍼티가 네개 있는데 마임 타입 설명인 description, plugin, 객체를 가리키는 포인터인 enablePlugin, 마임 타입의 파일 확장자를 쉼표로 구분한 문자열인 suffixes, 마지막으로 완전한 마임 타입 문자열인 type이다.


IE는 넷스케이프 스타일 객체를 지원하지 않으므로 플러그인 탐지가 어렵다. IE는 플러그인을 COM 객체로 구현했고 이들을 고유한 문자로 식별하기 때문에 hasIEPlugin() 함수로 IE 전용타입인 ActiveXObject를 사용해서 플러그인을 인스턴스화 하는 방법으로 플러그인 설치여부를 판단하는 함수를 만들수 있다.

plugins 컬렉션에는 refresh() 라는 메서드가 있는데 이 메서드는 새로 설치된 플러그인이 반영되도록 plusgins을 갱신한다. 이 메서드는 매개변수로 페이지를 새로고침해야 하는지 나타내는 불리언 값을 받는다.





8.3.2 처리기 등록
FF2는 navigator 객체에 registerContentHangler()와  regitorProtocalHandler() 메서드를 도입했다.
이 메서드는 웹사이트가 특정한 타입의 정보를 처리할 수 있음을 나타낸다.
registerContentHangler() 메서드는 처리할 마임타입, 해당 마임 타입을 처리할 페이지 URL, 애플리케이션 이름 세가지 매개변수를 받는다.
regitorProtocalHandler()은 처리할 프로토콜("mailto", "ftp" 등), 프로토콜을 처리할 페이지 URL, 애플리케이션 이름을 매개변수로 받는다. 




8.4 screen 객체
screen 객체 역시 window의 프로퍼티인데 이 객체에는 픽셀 너비와 높이 등 클라이언트 화면에 관한 정보가 들어있고 브라우저별로 screen 객체에서 지원하는 프로퍼티가 다르다.




8.5 historty 객체
history 객체는 창을 첫 번째 연 이후 사용자의 네비게이션 히스토리를 보관한다.
history는 window의 프로퍼티이므로 브라우저 창, 탭, 프레임은 각각 자신의 window 객체에 속한 history 객체를 가진다.

go() 메서드는 사용자의 이동 히스토리에서 앞으로 또는 뒤로 이동한다. 이 메서드는  매개변수로 이동할 페이지 수를 나타내는 하나의 정수를 받는데,음수를 받으면 히스토리에서 뒤로 이동하고 양수를 받으면 앞으로 이동한다.
매개변수로 문자열을 받는 경우 브라우저는 히스토리에서 해당 문자열을 포함한 첫 번째 위치로 이동한다.
go() 메서드 대신 단축 메서드인 back()forward() 메서드를 쓸수 있다.

history 객체의 length  프로퍼티는 history 스택에 기록이 얼마나 많이 있는지 나타낸다.

페이지의 URL이 바뀔 때마다 히스토리 스택에 새 기록이 추가된다. IE8 이상, Opera FF Safari3 이상, 크롬에서는  이 기록에 URL 해시가 포함되며 따라서 이들 브라우저에서 location.hash를 설정하면 히스토리 스택에 새 기록이 추가된다




 

'나홀로스터디 > JS For Web Dev' 카테고리의 다른 글

DOM  (0) 2014.12.08
클라이언트 감지  (0) 2014.11.20
함수 표현식  (0) 2014.10.23
참조타입  (0) 2014.10.17
객체에 대한 이해  (0) 2014.10.15

함수

2014. 10. 27. 11:42 나홀로스터디/JS 완벽가이드


8장 함수

이 포스팅은 "자바스크립트 완벽 가이드(인사이트, 송인철,이동기,이유원,황인석 옮김)"에서 발췌 요약한 것입니다.
 
8.1 함수 정의와 호출
8.2 함수 전달인자
8.3 데이터로서의 함수
8.4 메서드로서의 함수
8.5 생성자 함수
8.6 함수 프로퍼티와 메서드
8.7 유용한 함수들
8.8 함수 유효 범위와 클로저
8.9 function() 생성자



함수란 한 번 정의되면 임의 횟수에 거쳐 호출되거나 실행될 수 있는 자바 스크립트 코드 블록으로 매개변수(parameter) 혹은 전달인자(arguments)라 불리는 지역 변수를 가질수 있는데 이 변수의 값은 함수가 호출되는 시점에 주어진다. 객체상에서 호출되는 함수는 메서드라 칭하며 이때 객체는 함수의 암묵적 전달인자로 전달된다.

 

8.1 함수 정의와 호출
가장 일반적인 방법은 function문을 사용하는 것인데 이 문법은 function 키워드로 시작하며 다음과 같은 항목들이 따라온다

함수의 이름
괄호() 안에 0개 혹은 임의 개수의 매개변수 이름을 쉼표로 분리한 목록
중괄호 {} 안에 함수의 몸체를 구성하는 자바스크립트 문장들


만약 함수에 return 문이 없으면 단순히 함수 몸체를 이루는 문장들을 하나씩 실행한 뒤에 undefined 값을 호출자에게로 반환한다.
함수를 호출할 때에는 이름 뒤에 괄호() 연산자가 따라오고 이 괄호 안에는 선택적으로 전달인자 값(또는 표현식)을 쉼표로 분리하여 연결한 목록이 위치한다.
만약 함수가 기대하는 개수보다 많은 수의 전달인자를 전달하면 추가분의 전달인자들을 무시하고 만약 기대하는 개수보다 적은 수의 전달인자를 전달하면 빠뜨린 매개변수에는 undefined 값이 할당된다.


8.1.1 중첩된 함수
자바스크립트에서 함수는 다른 함수 안에 중첩되어 정의될 수 있는데 중첩된 함수는 그 함수가 중첩되어 위치하는 함수의 최상위 레벨에서만 정의될 수 있다.


8.1.2 함수 리터럴
함수 리터럴은 이름 없는 함수를 정의하는데 사용되는 표현식으로 자바스크립트 문장이 아니라 표현식으로 사용된다.

function f(x){ returnn x*x;}   // function문
var f = function(x){ return x*x }   // 함수 리터럴 

한번만 사용되고 버려지기 때문에 일회용 함수를 정의하는데 적합하고 리터럴 표현식에 의해 기술된 함수는 변수에 저장될 수 있고 다른 함수에 전달인자로 전달될 수 있고 곧바로 호출될 수도 있다.


8.1.3 함수 이름 붙이기
함수 이름은 일반적으로 동사 혹은 동사로 시작하는 구절로 관습적으로 소문자로 시작하고 내부적으로만 사용하거나 숨겨진 함수로 사용하려면 밑줄 문자로 시작한다.

 


8.2 함수 전달인자


8.2.1 생략 가능한 전달인자
생략 가능한 전달인자를 사용하여 함수를 작성할 때는 생략 가능한 것들을 함수 전달인자 목록의 끝에 위치하게 하여 호출할 때에 임의로 생략할 수 있게 하는 것이 중요하다


8.2.2 가변 길이 전달인자 목록: 전달인자 객체
함수 몸체에서 식별자 arguments는 특별한 의미를 지니는데  arguments는 Arguments 객체를 참조하는 특별한 프로퍼티다. 이 객체는 배열과 유사한 객체로서 함수에 전달된 전달인자의 값을 전달인자 이름이 아니라 숫자를 사용해 접근하기 위한 방법을 제공한다. 전달인자가 없는 객체는 arguments[1] 로 접근할수 있다.

Arguments객체는 숫자 인덱스가 붙은 배열 원소들과 length 프로퍼티를 정의한다.
만약 함수에 이름붙은 전달인자가 있으면 Arguments 객체의 배열 원소는 함수 전달인자를 담은 지역 변수의 별칭이 된다.


8.2.2.1 callee 프로퍼티
 Arguments 객체는 배열 원소뿐만 아니라 현재 실행되고 있는 자기 자신을 재귀적으로 호출할수 있는 callee 프로퍼티를 추가로 정의한다.


 8.2.3 객체 프로퍼티를 전달인자로 사용하기
 전달인자를 순서에 관계없이 이름의 쌍으로 전달해 주는 방식의 함수 호출을 구현하려면 우선 하나의 객체를 전달인자로 받는 함수를 정의하고 함수의 사용자로 하여금 함수에서 필요로 하는 이름과 값의 쌍들을 객체 리터럴로 정의하여 전달하게 하면 된다.


 8.2.4 전달인자 데이터 타입
 자바스크립트에서는 필요에 따라 자유롭게 데이터 타입을 변환하기 때문에 만약 문자열 전달인자를 기대하는 함수를 작성하고 이 함수를 다른 데이터 타입의 값과 함께 호출하면 함수가 그 값을 문자열로 쓰려는 시점에 문자열로의 변환 작업이 수행된다.

 

 

 8.3 데이터로서의 함수
자바스크립트에서 함수는 변수에 할당되거나 객체 프로퍼티와 배열 원소들에 저장될 수 있고 함수의 전달인자 등으로도 사용될 수 있다.

 

8.4 메서드로서의 함수
메서드는 객체 프로퍼티에 저장되어 객체를 통해 호출할 수 있는 자바스크립트 함수에 지나지 않는다. 메서드의 몸체 안에는 this 라는 키워드 값이 있다.
만약 함수를 메서드로서가 아니라 함수로 호출했다면 this 키워드는 전역객체를 가리킨다.

 


8.5 생성자 함수
생성자 함수는 객체의 프로퍼티들을 초기화하려는 함수로 new 연산자와 함께 사용될 의도로 저장된다.

 

8.6 함수 프로퍼티와 메서드
함수에 대해 typeof 연산자를 사용하면 "function" 문자열을 반환한다. 그러나 실제로 함수는 특수화된 종류의 자바스크립트 객체다.


8.6.1 length 프로퍼티
함수의 몸체 안 arguments 배열의 length 프로퍼티는 함수가 건네받은 전달인자의 개수를 명시한다. Function 객체의 length 프로퍼티는 함수에 선언된 매개변수가 정확히 몇개인지 명시한다.
arguments.length 와는 달리 length 프로퍼티는 함수 몸체의 안과 밖에서 모두 사용할 수 있다.


8.6.2 prototype 프로퍼티
prototype 객체는 함수가 new 연산자를 통해 생성자로 사용될 때 새 객체를 정의하는 과정에서 중요한 역할을 수행한다.


8.6.3 나만의 함수 프로퍼티 정의하기
존재가 유지되는 변수를 사용해야 할 경우 정보를 Function 객체의 프로퍼티에 저장하는것이 더 좋다.


8.6.4 apply() 와 call() 메서드
모든 함수에 대하여 call()과 applay() 메서드를 정의할수 있는데 이 메서드를 사용하면 함수가 마치 다른 어떤 객체의 메서드인 것처럼 호출할 수 있다. call()과 apply() 메서드의 첫 번재 전달인자는 함수가 소속되어 호출될 객체를 지정하며 이 전달인자는 함수 몸체 안에서 this 키워드 값이된다.
apply() 메서드는 call() 메서드와 유사하지만 함수로 건네줄 전달인자들을 배열로 지정한다는 점이 다르다.

 


8.7 유용한 함수들



8.8 함수 유효 범위와 클로저
자바스크립트 함수의 몸체는 전역 유효 범위와는 다른 지역 유효 범위 상에서 실행된다.


8.8.1 어휘적 유효 범위
함수가 정의될 때는 현재의 유효 범위 체인이 저장되며 이 것은 함수의 내부 상태 중 일부가 된다. 중첩된 함수를 정의하면 유효 범위는 함수를 포함하며 이는 중첩된 함수가 그 함수를 포함하는 함수의 모든 전달인자와 지역 변수들에 접근할 수 있음을 의미한다.


8.8.2 호출 객체
자바스크립트 인터프리터가 함수를 호출할 때엔 먼저 유효 범위를 함수가 정의될 당시의 효력을 지니는 유효 범위 체인으로 설정하고 새로운 객체를 생성하여 유효 범위 체인의 맨 앞에 추가한다. 이 호출 객체는 함수의 Arguments 객체를 가리키는 arguments 프로퍼티로 초기화 된다.


8.8.3 네임스페이스로서의 호출 객체
코드의 충돌을 해결하기 위한 해답은 코드를 함수 안에 넣고 함수를 호출하는 것이다. 이 경우 변수들은 함수의 호출 객체 안에 정의된다.

function init(){
  // 코드를 여기에 넣는다. } init();

이 코드는 함수를 가리키는 단 한 개의 프로퍼티 init을 전역 네임스페이스에 추가하는데 만약 단 한 개의 프로퍼티를 추가하는 것도 많다고 생각되면 익명 함수를 정의하고 호출하는 단일 표현식을 사용할 수 있다.

(function(){   // 코드를 여기에 넣는다 })();  // 함수 리터럴을 종결하고 호출한다.


8.8.4 클로저로서의 중첩된 함수
자바스크립트가 중첩된 함수를 허용한다는 사실, 함수를 데이터로 사용할 수 있다는 사실, 어휘적 유효 범위를 사용한다는 사실은 함께 상호작용하여 매우 강력한 결과를 낸다.
자바스크립트에서 함수는 다른 모든 값과 마찬가지로 데이터다. 따라서 함수는 다른 함수에 의해 반환될 수 있고 객체에 프로퍼티로 할당될 수 잇으며 또한 배열 등에 저장될 수도 있다.

자바스크립트 함수는 실행될 코드와 이 함수가 실행될 유효 범위의 조합이다. 이러한 코드와 유효 범위의 조합은 클로저로 알려져 있고 모든 자바스크립트 함수는 클로저다.


8.8.4.1 클로저 예
클로저를 사용하면 사라지지 않는 값을 저장하기 위한 용도로 사용할수 있고 private 속성을 지니는 변수를 생성할 수 있다.
가장 자연스러운 클로저 사용 예는 스티브옌의 중단점 기능구현으로 클로저를 사용하여 함수 안의 현재 유효 범위(지역 변수들과 함수의 전달인자들을 포함하는)를 포착하고 이를 전역 함수인 eval()과 함께 사용함으로써 포착한 유효 범위 안의 값을 조사할수 있게 한다. eval()은 자바스크립트 코드를 담은 문자열을 평가하고 그 값을 반환한다.
inspect()함수는 사용자에게 텍스트를 출력하고 또 사용자에게 문자열을 입력받기 위해서 .Window.prompt() 메서드를 사용한다.


8.8.4.2 클로저와 인터넷 익스플로러의 메모리 누수 현상
IE 웹 브라우저가 사용하는 가비지 컬렉션 기법은 ActiveX 객체와 클라이언트 측 DOM 엘리먼트에 대해 취약하다.
참조의 수가 0이 되는 순간 객체를 메모리상에서 제거하는 방식을 사용하는데 이 방식은 순환 형태의 참조가 존재할 경우 실패한다.

 

 

8.9 function() 생성자
함수는 일반적으로 함수 정의 문장이나 함수 리터럴 표현식의 function 키워드를 사용하여 정의된다. 또한 Function() 생성자를 사용해서도 정의될 수 있다.

var f = new Function("x", "y", "return x*y;");
function f(x,y){return x*y}; 

Function() 생성자는 함수 리터럴과 마찬가지로 이름이 없는 익명 함수를 생성하는데 보통 함수 리터럴을 사용하는 것보다 난해하기 때문에 널리 쓰이지는 않는다.

Function() 생성자를 사용하면 실행시점에 자바스크립트 코드를 동적으로 생성하고 컴파일할 수 있다.
Function() 생성자는 호출될때마다 함수 몸체를 파싱하고 새로운 함수 객체를 생성한다. 반면 루프와 함수안에 함수 리터럴이나 중첩된 함수는 그것이 나타날 때마다 매번 다시 컴파일되지 않는다.
Function() 생성자의 가장 중요한 점은 생성된 함수가 어휘적 유효 범위를 사용하지 않는다는 것이다.


 

'나홀로스터디 > JS 완벽가이드' 카테고리의 다른 글

문서 스크립팅  (0) 2014.11.26
웹 브라우저와 자바스크립트  (0) 2014.11.18
객체와 배열  (0) 2014.10.20
문장  (0) 2014.10.16
표현식과 연산자  (0) 2014.10.13

함수 표현식

2014. 10. 23. 09:55 나홀로스터디/JS For Web Dev


7장 함수 표현식

이 포스팅은 "프론트엔드 개발자를 위한 자바스크립트(2013 인사이트, 한선용 옮김)"에서 발췌 요약한 것입니다.
 
함수 표현식의 특징
함수와 재귀
클로저를 이용한 고유 변수


함수를 정의하는 방법은 함수 선언함수 표현식 두 가지다.

첫 번째 방법인 함수 선언은 function 키워드에 함수 이름을 쓰는 형태로 파이어폭스, 사파리, 크롬, 오페라는 모든 함수에 프로퍼티인 name을 지원하므로 이 값은 function 키워드 다음에 쓴 함수의 이름과 항상 일치한다.
function functionName(arg0, arg1, arg2){
  // 함수 본문
}
alert(functionName.name);  // "functionName"
함수 선언에서 가장 뚜렷한 특징은 '함수 선언 끌어올림(함수 선언부를 다른 코드보다 먼저 읽고 실행한다)'이다.


함수를 정의하는 두 번째 방법은 함수 표현식이다.
var functionName = function(arg0. arg1. arg2){
  // function body
}
함수를 생성하고 이를 functionName 이란 변수에 할당하도록 생성된 함수는 function 키워드 다음에 함수 이름이 없으므로 익명 함수로 간주한다. 따라서 함수의 name프로퍼티는 빈 문자열이다. 그러므로 함수 표현식은 반드시 호출하기 전에 할당해야한다.
 



7.1 재귀
'재귀 함수'는 함수가 자기 자신을 이름으로 호출하는 형태이다.
function factorial(num){
  if(num <= 1){
    return 1;
  }else{
    return num * arguments.callee(num-1);
    // return num * factoriial(num-1);
  }
}
arguments.calee는 현재 실행중인 함수를 가리키는 포인터이므로 재귀 함수를 사용할 때는 함수 이름 대신 arguments,callee를 권장한다.
 



7.2 클로저
'익명함수'와 '클로저'는 자주 잘못 혼용되지만 '클로저'란 다른 함수의 스코프에 있는 변수에 접근 가능한 함수이다.
클로저를 이해하기 위해서는 스코프 체인이 어떻게 생성되고 사용되는지 알아야 한다. 함수를 호출하면 실행 컨텍스트와 스코프 체인이 생성되고 함수의 활성화 객체는 arguments 및 이름 붙은 매개변수로 초기화 된다.
외부 함수의 활성화 객체는 스코프 체인의 두 번째 객체이고 이 과정이 포함 관계에 있는 함수에서 계속 생성하여 스코프 체인이 전역 실행 컨텍스트에서 종료될 때까지 이어진다.
함수를 실행하면 값을 읽거나  쓸 변수를 스코프 체인에서 검색한다.
스코프 체인이란 변수 객체를 가리키는 포인터 목록이며 객체를 직접 포함하는 것은 아니다.
클로저는 외부 함수의 스코프를 보관해야 하므로 다른 함수에 비해 메모리를 많이 요구한다. 클로저를 사용하면 메모리 문제가 생길 수 있으니 반드시 필요할 때만 사용하길 원한다. 크롬 v8처럼 자바스크립트 코드를 최적화하는 엔진은 클로저 때문에 반환 불가능해진 메모리를 회수하려 시도하기도 하지만 클로저를 쓸 때는 조심하는 편이 상책이다.
 
7.2.1 클로저와 변수
스코프 체인에는 한 가지 눈에 띄는 부작용이 있는데 항상 외부함수의 변수에 마지막으로 저장된 값만 알 수 있다는 점이다.
클로저가 특정 변수가 아니라 전체 변수 객체에 대한 참조를 저장한다는 것을 기억하라.

7.2.2 this 객체
this 객체는 런타임에서 함수가 실행 중인 컨텍스트에 묶인다. 즉 전역함수에서 this는 스트릭트 모드가 아닐 때는 window, 스트릭트 모드에서는 undefined 이며 함수가 객체 메서드로 호출되었을 때 this 는 해당 객체이다.
모든 함수는 호출되는 순간 자동으로 thisarguments 두 특별한 변수를 갖게 되는데 내부 함수는 결코 외부함수의 this, arguments에 직접적으로 접근할 수 없다.  외부 스코프의 매개변수 객체에 접근해야 한다면 클로저에서 접근할 수 있도록 이에 대한 참조를 다른 변수에 저장해야 한다.

7.2.3 메모리 누수
클로저는 인터넷 익스플로러 9 이전 버전에서 메모리 문제를 일으키는데 이는 JScript 객체와 COM 객체에 사용하는 가비지 컬렉션 방법이 다르기 때문이다.
 



7.3 블록 스코프 흉내내기
자바스크립트에는 블록 레벨 스코프라는 개념이 없으므로 블록 문장에서 정의한 변수는 해당 문장이 아니라 외부 함수에 묶여서 그 시점수터 함수 내에서 접근 할수 있게 된다. 이것은 익명 함수를 블록 스코프처럼 쓰는 문법(고유 스코프)으로 해결할 수 있다.
(function(){
  // 코드블록
})();
이 문법에서는 익명 함수를 정의하는 즉시 호출한다. 이를 '즉시 호출 함수'라고 부르기도 한다.
 


 
7.4 고유 변수
함수 안에서 정의한 변수는 함수 밖에서 접근할 수 없으므로 모두 고유 변수라고 간주한다. 함수 내부에서는 고유 변수에 접근 할 수 있지만 함수 밖에서는 불가능하다. 클로저를 이 함수 안에서 만들면 스코프 체인을 통해 이들 변수에 접근할 수 있다.
특권 메서드는 고유 변수.함수에 접근 가능한 공용 메서드로 만드는 방법은 두 가지가 있다.


7.4.1 정적 고유 변수
특권 메서드는 고유 변수나 함수를 정의할 때 쓰는 고유 스코프를 통해서 생성할 수도 있다.

7.4.2 모듈 패턴
모듈 패턴은 객체를 반환하는 익명 함수를 사용한다.
모듈 패턴은 단 하나의 객체를 반드시 생성하고 몇 가지 데이터를 가지며 또한 고유 데이터에 접근 가능한 공용 메서드를 외부에 노출하도록 초기화 해야 할 때 유용하다.

7.4.3 모듈 확장 패턴
객체를 반환하기 전에 확장하는 확장 패턴은 싱글톤 객체가 특정 타입의 인스턴스지만 프로퍼티나 메서드를 추가하여 확장해야 할 때 유용하다.
 
 

 

'나홀로스터디 > JS For Web Dev' 카테고리의 다른 글

클라이언트 감지  (0) 2014.11.20
브라우저 객체모델  (0) 2014.11.12
참조타입  (0) 2014.10.17
객체에 대한 이해  (0) 2014.10.15
변수와 스코프, 메모리  (0) 2014.10.07

객체와 배열

2014. 10. 20. 17:37 나홀로스터디/JS 완벽가이드


7장 객체와 배열

이 포스팅은 "자바스크립트 완벽 가이드(인사이트, 송인철,이동기,이유원,황인석 옮김)"에서 발췌 요약한 것입니다.
 
7.1 객체 생성하기
7.2 객체 프로퍼티
7.3 연관 배열로서의 객체
7.4 공통적으로 나타나는 객체 프로퍼티와 메서드
7.5 배열
7.6 배열 원소 읽고 쓰기
7.7 배열 메서드



객체와 배열은 자바스크립트에서 가장 중요한 타입인데 집합을 다룬다는 점에서 하나의 값을 다루는 기본타입인 문자열이나 숫자 타입과는 다르다. 객체는 이름이 붙은 값들의 집합이며 배열은 특별한 형태의 객체로서 숫자가 붙은 값들의 순서 있는 집합이다.



7.1 객체 생성하기
객체는 복합 타입으로 여러 값들을 결합한 것으로 각각에 붙은 이름을 사용하여 원하는 값을 저장하고 읽어올수 있다. 다시 말하면 객체는 이름으로 구성된 프로퍼티들의 집합이라고 할 수 있다.

객체를 생성하는 가장 쉬운 방법은 객체 리터럴(중괄호 {})을 사용하는 것으로 이름과 값을 한 쌍으로 하는 프로퍼티들을 콤마로 분리하여 연결한 리스트다. 객체 리터럴은 평가될 때마다 새로운 객체를 생성하고 초기화함으로 루프 안에서 반복적으로 호출되는 함수 내에 있다면 복수의 새로운 객체를 생성해 낼 수 있다.

객체를 생성하는 다른 방법은 new 연산자를 사용하는것이다.
new 연산자 뒤에는 객체의 프로퍼티들을 초기화하는 생성자 함수의 호출이 뒤따라야 한다.

var a = new Array();  // 빈 배열 생성 var d = new Date();  // 현재 날짜와 시간을 나타내는 객체 생성 var r = new RegExp("javascript", "i");  // 패턴 매칭을 위한 객체 생성

Object() 생성자를 사용하면 리터럴 {}과 마찬가지로 빈 객체를 생성할 수 있다.

 


7.2 객체 프로퍼티
객체 프로퍼티에 접근하기 위해서는 마침표(.) 연산자를 사용하며 접근하려는 프로퍼티를 소유한 객체가 이 연산자 좌측에 위치한다. 우측에는 프로퍼티 이름이 위치해야 하고 반드시 식별자를 사용해야만 하며 문자열이나 표현식은 쓸수 없다.

객체에 값을 할당하는 방법으로 새로운 프로퍼티를 생성한 후에는 언제든 이 프로퍼티에 새로운 값을 할당함으로써 프로퍼티의 값을 변경할 수 있다.

book.title = "Javascrip : The Rhino Book"


7.2.1 프로퍼티 열거하기(for/in)
스크립트를 디버깅 할때 혹은 이름을 알수 없는 임의의 프로퍼티를 가진 객체에 접근하려 할때 유용하게 사용할수 있다. for/in 루프는 모든 사용자 정의 프로퍼티를 열거하지만 미리 정의된 프로퍼티나 메서드는 열거하지 않고 특정 순서를 따르지 않는다.


7.2.2 프로퍼티 존재 확인하기(in)
프로퍼티의 존재 여부를 확인하는 in 연산자는 좌측에 프로퍼티 이름이 문자열로 위치하고 오른쪽에는 프로퍼티의 존재를 확인하려는 객체가 위치한다.

if("x" in o) o.x =1;  // 객체 o 에 프로퍼티 "x"가 있으며  1을 저장한다.
if(o.x !== undefined) o.x =1;  // 프로퍼티 x가 존재하고 값이 undefined가 아니라면 1을 저장한다.

객체에 없는 프로퍼티에 접근하려면 undefined 값이 반환되기 때문에 in 연산자는 자주 사용하지 않는다.


7.2.3 프로퍼티 삭제하기(delete)
객체의 프로퍼티를 삭제하기 위해서는 delete 연산자를 사용한다.

delete book.charter2;

프로퍼티를 삭제하는 것은 단순히 프로퍼티에 undefined 값을 할당하는 것이 아니라 실제로 객체에서 프로퍼티를 완전히 제거하는 것을 의미한다.

 


7.3 연관 배열로서의 객체
객체의 프로퍼티에 접근하기 위한 방법은 마침표(.) 연산자와 대괄호[]가 있다.

object.property
object["property"]

이 두 구문의 차이점은 프로퍼티 이름이 식별자인 것과 문자열이라는 점이다.
마침표(.) 연산자를 사용하여 프로퍼티에 접근할 때는 이름이 식별자로 표현되어야 하고 자바스크립트 프로그램에 직접 표기하는 이름이고 데이터 타입이 아니기 때문에 프로그램이 실행 시간에 조작할 수 없다.

반면 []를 사용하여 객체의 프로퍼티에 접근할 때에는 프로퍼티의 이름이 문자열로 표현된다.
문자열은 자바스트립트의 데이터 타입이므로 프로그램이 실행되는 동안 새롭게 생성되고 조작될 수 있다.

연관 배열은 동적으로 임의의 값과 임의의 문자열을 연관지어 저장할 수 있는 자료구조로 자바스크립트 객체에서는 추가로 데이터 값을 임의의 문자열과 연관지을 수 있는 강력한 기능이 있다.

 


7.4 공통적으로 나타나는 객체 프로퍼티와 메서드
자바스크립트의 모든 객체는 Object 클래스를 상속하고 상속받은 프로퍼티와 메서드가 있다.


7.4.1 constructor 프로퍼티
자바스크립트 모든 객체는 객체를 초기화하는데 사용되는 생성자 함수인 constructor 프로퍼티를 지니고 있다.
생성자 함수는 객체의 범주 즉 클래스를 정의하므로 constructor  프로퍼티는 객체의 타입을 판단하는데 사용될수 있다.

   

if((typefo o == "object")  &&  (o.constructor == Date))
instanceof연산자는 constructor 프로퍼티의 값을 사용한다.
if((typeof o == "obeject")  && (o instanceof Date))


7.4.2 toString() 메서드
toString() 메서드는 별도의 전달인자 없이 호출되며 메서드를 호출한 객체의 값을 어떤 방식으로든 표현하는 문자열을 만들어 결과로 반환한다. 배열을 문자열로 반환하면 배열의 각 원소를 문자열로 변환하여 연결한 문자열을 얻을 수 있으며 함수를 문자열로 변환하면 함수의 소스코드를 얻을 수 있다.


7.4.3 toLocaleString() 메서드
객체의 지역화된 문자열 표현을 제공하기 위한 것으로 그 자체로는 지역화 작업을 행하지 않는다. 그러므로 기본으로 제공되는 toLocalseStrung() 메서드가 반환하는 값은 toString()과 같다.


7.4.4 valueOf() 메서드
자바스크립트가 객체를 문자열이 아니라 숫자 같은 다른 기본 타입으로 변환하려 할때 호출되는 메서드로 객체가 기본 타입 값을 필요로 하는 문맥 안에서 사용될 때, 자바스크립트는 valueOf() 메서드르 자동으로 호출한다.


7.4.5 hasOwnProperty() 메서드
이 메서드는 프로퍼티의 이름을 담는 한 개의 문자열 전달인자를 받아 객체가 이 프로퍼티를 소유하고 있는지 검사하는데 프로퍼티가 상속받은 것이 아니고 객체 안에 지역적으로 정의되어 전재한다면 true를 반환하고 그렇지 않으면 false를 반환한다.


7.4.6 propertylsEnumerable() 메서드
이 메서드는 프로퍼티의 이름을 담는 한 개의 문자열 전달인자를 받아  이 이름의 프로퍼티를 객체가 상속받지 않고 직접 지역적으로 정의했는지 검사하고  이 프로퍼티가 for/in 루프를 사용하여 열거될 수 있는지 검사한다. 모든 조건을 충족하면 true를 반환하고 그렇지 않으면 false를 반환한다.


7.4.7 isPrototypeOf() 메서드
이 메서드의 객체가 전달인자로 주어진 객체의 프로토타입 객체라면 true를 반환하고 그렇지 않으면 false를 반환한다.

 


7.5 배열
배열은 순서 있는 값들의 집합이다. 배열 안의 각 값을 원소라 부르며 각 원소는 배열 안에서 그 위치를 가리키는 번호를 할당 받는데 이 번호를 인덱스(index)라고 한다.
배열리터럴([, ,])을 사용하면 가장쉽게 배열을 생성할수 있다.

var empty = [];   // 빈배열
var primes = [2,3,4,5];   //4개의 숫자 값들로 이루어진 배열
var misc = [1.1, true, "a",]   // 서로 다른 타입을 가진 3개의 원소로 구성된 배열

배열리터럴에는 상수뿐 아니라 임의의 표현식도 사용할 수 있고 객체 리터럴이나 또 다른 배열 리터럴을 포함할 수도 있다.

배열을 생성하는 또 다른 방법은 Array() 생성자를 사용하는 것이다

var a = new Array();   // 전달인자 없이 호출하는 방법
var a = new Array(5, 4, 3, 2, 1, "testing, testing");  // 명시적으로 배열의 처음 n개의 원소를 정의하며 호출하는 방법
var a =  new Arra(10);  //  배열의 길이를 지정하는 숫자값을 전달인자로 하여 호출하는 방법

 


7.6 배열 원소 읽고 쓰기
배열의 각 원소에 접근할 때에는 [] 연산자를 사용한다.
배열은 객체의 특별한 종류이기 때문에 . 또는 [] 구문을 사용하여 배열 안에 숫자가 아닌 이름의 객체 프로퍼티를 정의하고 접근할 수 있다.


7.6.1 배열에 새로운 원소 추가하기
자바스크립트의 배열은 임의 개수의 원소를 가질 수 있으며 원소의 개수는 언제든 변경할 수 있다.
배열의 인덱스는 연속적이지 않아도 되고 배열에 새로운 원소를 추가하려면 그 값을 할당하기만 하면된다.

 a[10] = 10;

배열 원소는 객체에도 추가될 수 있다.

var c = new Circle(1,2,3);
c[0] = "this is an array element of an object!";   // c[0]은 객체의 배열 원소

위 예는 단지 객체에 "0"이라는 이름의 프로퍼티를 추가할 뿐이다. 객체에 배열 원소를 추가한다고 해서 객체가 배열이 되지는 않는다.


7.6.2 배열 원소 삭제하기(delete)
delete 연산자를 사용하면 배열 원소 그 자체는 사라지지 않고 존재하며 배열 원소의 값은 undefined 값으로 설정된다.
배열 원소를 배열에서 완전히 삭제하고 삭제한 배열 원소의 뒤쪽에 위치한 원소들을 앞쪽으로 옮겨서 저장하려면 배열 메서드를 사용해야만 한다.
Array.shift() 메서드는 첫번째 원소를 삭제하고 Array.pop() 메서드는 배열의 마지막 원소를 삭제하며 Array.slice() 메서드는 연속된 범위 안에의 원소들을 일괄적으로 삭제한다.


7.6.3 배열의 길이(length)
Array() 생성자 혹은 배열 리터럴 등의 방법을 사용하여 생성된 모든 배열에는 이 배열에 있는 원소의 수를 알려주기 위한 length라는 이름의 프로퍼티가 있다.


7.6.4 배열 순회하기
length 프로퍼티의 가장 일반적인 용도는 배열의 모든 원소를 순회하는 작업이다.


7.6.5 배열의 크기 조절하기
배열의 length 프로퍼티는 읽고  쓸 수 있는 값으로 length 프로퍼티를 현재의 값보다 작게 설정하면 배열은 새로운 길이로 축소된다.


7.6.6 다차원 배열
자바스크립트는 진정한 의미에서 다차원 배열을 지원하지는 않지만 배열의 배열에서 원소에 접근하기 위해서는 [] 연산자를 두 번 사용하면 된다.

 


7.7 배열 메서드
그 외에 다양한 종류의 메서드가 Array() 클래스 안에 정의되어 있다.


7.7.1 join()
Array.join() 메서드는 배열의 모든 원소를 문자열로 변환하고 이어 붙여서 반환한다. 결과로 반환되는 문자열에서 배열의 원소들을 구분하기 위해 구분자 문자열이 사용되는데 Array.join()에 전달인자를 넘겨 구분자 문자열을 지정할 수 있다.
이 메서드는 String.split() 메서드와 반대되는 기능을 한다.


7.7.2 reverse()
Array.reverse() 메서드는 배열 안의 원소 순서를 반대로 정렬한다.


7.7.3 sort()
Array.sort() 메서드는 배열 안의 원소들을 정렬하여 반환하고 알파벳 순으로 정렬한다.
알파벳순이 아니라 다른 순서로 배열을 정렬하려면 sort() 메서드의 전달인자를 통해 비교 함수를 직접 명시해주어야 한다.


7.7.4 concat()
Array.concat() 메서드는 본래 배열의 모든 원소에 concat() 메서드의 전달인자들을 전부 이어붙인 배열을 새롭게 생성하여 반환한다.


7.7.5 slice()
Array.slice() 메서드는 배열의 일부분 혹은 부분 배열을 반환한다. slice() 메서드는 전달인자를 두 개 받는데, 반환되는 배열은 첫번재 배열인자가 지정하는 위치부터 두번째 전달인자가 지정하는 위치를 제외한 그 사이의 모든 원소를 포함한다.


7.7.6 splice()
Array.splice() 메서드는 배열에 원소를 삽입하거나 원소를 제거하려 할 때 사용할 수 있는 메서드다. 이 메서드는 배열안에서 직접 수행하므로 slice(), concat()과 달리 새로운 배열을 만들어 반환하지 않는다.
splice() 의 첫 번재 전달인자는 배열 상에서 삽입 혹은 삭제 작업이 시작하게 될 위치를 지정하며 두번재 전달인자는 배열에서 삭제할 원소들의 개수를 지정한다.  이렇게 잘라낸 배열을 반환하며 만약 잘라낸 원소가 하나도 없다면 빈배열을 반환한다.


7.7.7 push()와 pop()
이 메서드를 사용하면 배열을 마치 스택인것 처럼 조작할 수 있다.
push() 메서드는 하나 혹은 그 이상의 원소들을 배열의 끝 부분에 이어 붙이고 배열의 새로운 길이를 반환한다.  pop() 메서드는 push()와 반대로 작동한다. pop() 메서드는 배열의 마지막 원소를 제거하고 배열의 길이를 감소시킨 후 배열에서 제거한 원소를 반환한다. 이 두 메서드는 새로운 배열을 만들어 반환하는 것이 아니라 배열 그 자체를 변화시킴을 유의하라


7.7.8 unshift()와 shift()
unshift()와 shift() 메서드는  push(), pop() 과 매우 유사하게 작동하는데 이 메서드들은 배열의 끝이 아니라 배열의 맨 앞에서 원소를 삽입하고 제거한다는 점이 다르다.


7.7.9 toString()과 toLocalString()
배열의 toString() 메서드는 우선 배열의 모든 원소를 문자열로 변형하고 이 문자열들을 콤마(,)로 분리한 목록을 반환한다.
결과 문자열은 대괄호 [] 문자나 배열 값들을 둘러싼 다른 종류의 구분자들을  포함하지 않는다.
 toLocaleString() 은 toString()의 지역화된 버전으로 우선 배열의 각 원소들을 그 원소의 toLocaleString() 메서드를 사용하여 변환하고 지역에 특화되었거나 구현에 정의된 구분자 문자열을 사용하여 각 결과 문자열을 연결한다.


 7.7.10 추가적인 배열 함수
 indexOf(), lastIndexOf() - 배열상에서 주어진 값을 빠르게 찾을 수 있는 메서드
 forEach() - 배열의 모든 원소에 대해 지정된 함수를 호출
 map() - 배열의 각 원소에 지정된 함수를 호출하여 얻은 결과를 원소로 하는 배열 반환
 filter() - 지정된 술어함수가 true를 반환하는 원소들로 구성된 배열을 반환

 

 

 


 

'나홀로스터디 > JS 완벽가이드' 카테고리의 다른 글

웹 브라우저와 자바스크립트  (0) 2014.11.18
함수  (0) 2014.10.27
문장  (0) 2014.10.16
표현식과 연산자  (0) 2014.10.13
변수  (0) 2014.10.07
Copyright © HuckleberryM All Rights Reserved | JB All In One Designed by CMSFactory.NET