Where the light is

- ECMAScript 5 Array 객체 HTML5와 함께 출현한 자바스크립트 표준안을 ECMAScript 5라고 한다. ECMAScript 5의 Array는 여러 유용한 속성들이 추가되었고, 앞으로 이를 소개하고자 한다. 1) Array.isArray() Array 생성자 함수에 배열인지 확인하는 메서드가 추가되었다. 이 메서드가 의미가 있는 것은, 기존의 typeof 키워드는 Array가 배열이기 이전에 객체이므로 Array 객체의 자료형을 object라고 출력했기 때문이다. 다음은 Array 생성자 함수의 isArray() 메서드를 활용하여 배열, 객체, number 각각에 대하여 배열 객체인지 테스트하는 예제이다. 위의 결과로 true, false, false를 alert하는 것을 확인할 수 있..

- Date 객체 Date 객체는 날짜와 시간을 표시하는 기본 내장 객체이다. Date 객체는 정말 많은 메서드를 가지고, 이 메서드들은 세 가지로 분류할 수 있다. getter, setter와 toString 관련 메서드이다. 먼저 getter는 Date 객체의 날짜, 시간 관련 정보를 가지고 오는 것이고, setter는 Date 객체의 날짜, 시간 관련 정보를 설정하는 것이다. 년, 월, 일, 시, 분, 초, 요일 등의 정보들을 가지고 오고 설정 할 수 있다. 다음은 getTime 함수를 사용하여 두 날짜 사이의 간격을 요일로 출력하는 예제이다. 현재 날짜와 2000년 1월 1일 사이의 간격을 출력하는 것을 볼 수 있다. getTime() 함수는 시간을 milliseconds 단위로 return하기 ..

- 메서드 체이닝 자바스크립트는 동적 타입 언어이기 때문에 메서드 체이닝 패턴을 사용하면 간결하고 효율적인 코드를 작성할 수 있다. 다음은 배열의 요소 중 가장 큰 값을 추출하는 예제이다. 내림차순으로 정렬 후 첫 번째 요소의 값을 slice하여 해결하는 것을 볼 수 있다. 위의 코드는 메서드 체이닝을 활용하면 코드가 다음과 같이 간결해진다.

- Array 객체 1) Array 객체의 생성 Array 객체는 여러 가지 자료를 쉽게 관리할 수 있도록 도와주는 객체이다. Array 객체의 생성자 함수는 눈 여겨 볼 필요가 있다. 다음은 Array 생성자 함수를 정리한 표이다. 생성자 함수 설명 Array() 빈 배열을 만든다. Array(number) number만큼의 크기를 가지는 배열을 만든다. Array(arg1, arg2...) 매개변수를 배열로 만든다. 매개 변수가 없는 생성자 함수의 경우 빈 배열을 만드는 것이 쉽게 이해가 된다. 하지만 두 번째 매개 변수가 하나인 Array 생성자 함수는 자칫 배열 요소가 하나인 배열 객체가 만들어진다고 오해할 여지가 있다. 다음은 Array 생성자 함수로 Array 객체를 만드는 예제이다. 2) A..

- String 객체 String 객체도 역시 생성하는 방법은 primitive type처럼 생성하는 것과 new 키워드와 생성자 함수를 사용하는 방법이 있다. 다음은 String 객체를 생성하는 예제이다. String 객체는 여러 속성을 갖고 있다. 다음은 String 객체의 속성을 정리한 표이다. 속성 이름 설명 length 문자열의 길이를 나타냄 charAt(position) position에 위치하는 문자를 리턴함 concat(args) 매개변수로 입력한 문자열을 이어서 리턴함 slice(start, end) start부터 end 전까지의 문자열을 잘라서 리턴함 split(separator, limit) separator로 문자열을 잘라서 배열을 리턴함 toUpperCase() 문자열을 대문자로 ..

- Number 객체 1) Number 객체의 메서드 Number 객체는 다음 세 가지 메서드를 갖는다. 메서드 이름 설명 toExponential() 숫자를 지수 표시로 나타낸 문자열을 리턴 toFixed() 숫자를 고정 소수점 표시로 나타낸 문자열을 리턴 toPrecision() 숫자를 길이에 따라 지수 표시 또는 고정 소수점 표시로 나타낸 문자열을 리턴 위의 세 가지 메서드는 모두 매개변수로 숫자 하나를 입력 받는데, toPrecision() 메서드의 매개변수는 유효 숫자의 자릿수를 의미하며, 그 이외의 메서드는 소수점 몇 째 자리까지 나타낼 것인지를 의미한다. 다음은 toFixed() 메서드의 예이다. 첫 번째 alert는 273.5가 출력되고, 두 번째 alert는 273.5120를 출력함을 알..

- 기본 자료형의 객체화, 프로토타입 기본 자료형은 자바스크립트의 여섯 가지 자료형 중 숫자, 문자열, 불 세 가지 자료형을 의미한다. 기본 자료형은 분명 객체가 아니기 때문에 속성을 가질 수 없지만, 기본 자료형에서 dot operation으로 속성에 접근 시 그 자료형을 객체화하여 해당 자료형의 속성을 사용할 수 있다. 그렇지만 기본 자료형과 객체에는 분명 차이가 있는데, 이는 속성을 추가할 수 없다는 점이다. 이를 해결하기 위해서는 기본 자료형에 해당하는 생성자 함수의 프로토타입에 속성을 추가할 수 있다. 프로토타입에 추가된 속성은 해당 자료형으로 만들어진 객체가 모두 사용할 수 있다. 다음은 Number 생성자 함수의 프로토 타입에 test라는 속성을 추가한 예제이다. 기본 자료형 변수인 num이..

- 숫자 변환 함수 숫자 변환 함수로 Number( )를 사용할 수 있지만, 숫자로 변환할 수 없는 파라미터가 들어오면 NaN으로 리턴된다. 반면 parseInt( ) 함수와 parseFloat( ) 함수는 숫자로 변환할 수 있는 부분까지는 모두 숫자로 변환한다. DOCTYPE html> var won = '1000원'; var dollar1 = '1.5$'; var dollar2 = '1.5$111'; var dollar3 = '$1.5'; alert(parseInt(won)); alert(parseFloat(dollar1)); alert(parseFloat(dollar2)); alert(parseFloat(dollar3)); alert 결과 : 1000 1.5 1.5 NaN 이 숫자 변환 함수의 두 ..

- 코드 실행 함수 eval 자바스크립트는 eval 함수를 사용하여 자바스크립트 소스 코드를 동적으로 실행할 수 있다. 문자열은 자바스크립트 파서에 의해 구문 분석되고 실행된다. 다음은 그 예이다. eval 함수로 평가된 변수들은 eval 함수가 종료되어도 유지된다. 이는 런타임 시 문자열 코드들을 동적으로 평가하는 경우 많이 사용되는데, 보안 상의 이유로 인증된 URI로 들어오는 스크립트 코드들에 국한해야 한다. DOCTYPE html> var str = 'var num = 10;'; str += 'alert(num);'; eval(str); document.write('eval 함수에서 평가된 변수 : ' + num); - 숫자 확인 함수 자바스크립트에서 Infinity, NaN이라는 특별한 숫자가 ..

- 인코딩과 디코딩 함수 인코딩은 문자를 컴퓨터에 저장하거나 통신에 사용할 목적으로 부호화는 방법이다. 웹에서 통신할 때 한글 같은 유니코드 문자가 오작동을 일으킬 수 있으므로 인코딩해야 한다. 문자를 부호화하는 것이 인코딩이고, 그 반대가 디코딩이다. 다음은 인코딩과 디코딩 함수이다. 메서드 이름 설명 encodeURI(uri) 최소한의 문자만 인코딩한다. (; ;; / = ? &) decodeURI(uri) 최소한의 문자만 디코딩한다. encodeURIComponent(uriComponent) 대부분의 문자를 모두 인코딩한다. decodeURIComponent(uriComponent) 대부분의 문자를 모두 디코딩한다. URI는 인터넷 그 자체이므로, encodeURI는 메서드 이름에서 알 수 있듯이 ..