This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
디버거 종류
Microsoft Script DebuggerFireFox : Venkman
자바스크립트 코드에서 흔히 발생하는 문제점들을 찾아 주는 jslinthttp://jslint.com
2 장 어휘 구조(lexical structure)
코드를 두 줄로 나눌 때 앞줄의 온전한 문장형태라면, 자바스크립트는 자동으로 세미콜론을 삽입함. returntrue; ( 잘못된 표현임)
null 이 아닌 객체가 불리언 문맥에서 사용되면 true 로 변환된다. 객체가 문자열 문맥에서 사용되면 객체의 toString() 메서드가 호출되고 이 메서드가 반환하는 문자열이 대신 사용된다. 객체가 숫자 문맥에서 사용되면 자바스크립트는 먼저 객체의 valueOf() 메서드를 호출한다.
3.6 배열 일반적인 배열은 음수가 아닌 정수로 인덱싱됨. 연관 배열은 문자열로 인덱싱.
자바스크립트는 다차원 배열을 지원하지 않음. 배열의 원소들이 모두 동일한 타입을 가질 필요가 없다.
var a = new Array();a[0] = 1.2; a[1] = “javascript”; a[2] = true; a[3] = { x:1, y:3 };
var a = new Array(1.2, “javascript”, true, { x:1, x: 3});
문자열은 필요할 경우 String 객체로 자동 변환된다. 모든 숫자, 문자열, 혹은 불리언 값들은 Object() 함수를 사용하여 대응되는 래퍼 객체로 변환할 수 있다.
var number_wrapper = Object(3);
모든 객체들은 불리언 문맥에서 사용될 때 true 로 변환된다.new Boolean(false); // 내부 값은 false 이지만 객체는 true 로 변환된다.new Number(0);new String(“”);new Array();
배열의 toString() 메서드는 각 배열 원소를 문자열로 변환하고 배열 원소 사이에 쉼표를 삽입하여 이어 붙인 문자열을 결과로 반환한다. 따라서 아무 원소도 없는 배열은 빈 문자열로 변환되고 이것은 숫자 0 으로 변환된다. (valueOf)
Date 객체는 toString(), valueOf() 메서드를 + 연산에는 toString 을 비교연산(<,>, <=, >=) 에는
valueOf 를 사용한다.
4 장 변수 프로퍼티의 이중성( duality )
var 문에서 변수의 초기값을 지정하지 않을 경우 변수 선언은 되지만, 값이 저장되기 전까지 값은undefined이다.
아직 var 문으로 선언되지 않은 변수에 값을 할당하려 하면, 자바스크립트가 암묵적으로 그 변수를선언한다. 단, 암묵적으로 선언되는 변수는 항상 전역변수로 선언된다. 설사 그 변수가 함수 안에서
쓰인다 하더라도 마찬가지다.
4.3.1 블록 단위의 유효 범위는 없다. 자바스크립트는 불록 단위의 유효 범위라는 것이 존재하지 않는다. 함수 안에서 정의된 변수는 그것이
정의된 위치와 관계없이 항상 함수전체에 걸쳐 유효하다.
놀라운 결과var scope = “global”;function f() {
alert(scope); // “global” “이 아닌 undefined” 를 표시한다.var scope = “local”; // 변수는 이곳에서 초기화 되었지만 함수 전체에 걸쳐 정의되어 있다.alert(scope); // “local” 을 표시한다.
}
5 장 표현식과 연산자=, ==, ==== 는 취하다(gets) 또는 할당하다(assigned), == 는 ~ 와 동등하다(is equal to), === 는 ~ 와 일치한다(is identical to) 라고 읽는다.
var point = { x:1, y:1 };“x” in point; // true“y” in point; // true“z” in point; // false
“toString” in point; // 상속된 프로퍼티. true.
자바스크립트 객체의 클래스는 그 객체를 초기화하는 생성자 함수에서 정의된다.var d = new Date(); // Date() 생성자로 새로운 객체를 생성한다.d instanceOf Date; // true.d instanceOf Object; // true. 모든 객체는 Object 의 인스턴스.d instanceOf Number; // false
var a = [1,2,3]; // 배열a instanceOf Array; // truea instanceOf Object; // true.a instanceOf RegExp; // false
+ 연산자는 숫자 피연산자보다 문자열 피연산자에게 우선권을 부여한다.+ 연산자의 두 피연산자 중 하나가 문자열이면 ( 또는 객체이면) 다른 하나의 피연산자를 문자열로변환하고( 또는 두 피연산자 모두 문자열로 변환하고) 결과로 얻어지는 두 문자열을 이어 붙인다. (
숫자끼리의 덧셈이 아닌 것이다)
반면, 비교 연산자는 오직 두 피연산자가 모두 문자열인 경우에 한해서 문자열 비교를 수행한다. 하나의 피연산자만 문자열인 경우 자바스크립트는 이를 숫자로 변환하려 할 것이다.
1 + 2 // 덧셈. 3“1” + “2” // 이어 붙이기. “12” “1” + 2” // 이어 붙이기. “12”11 < 3 // 숫자 비교 false“11” < “3” // 문자열 비교 true
“11” < 3 // 숫자 비교. false“one” < 3 // 숫자 비교. “one” 이 NaN 으로 변환된다. false
s = 1 + 2 + “blind mice”; // “3 blind mice”t = “blind mice” + 1 + 2; // “blind mice: 12”+ 연산자가 왼쪽에서 오른쪽으로 적용된다.
delete 연산자
var o = {x:1, y:2}delete o.x; // 객체 프로퍼티 중 하나를 삭제한다. truetypeof o.x; // 존재하지 않는 프로퍼티, “undefined”delete o.x; // 존재하지 않는 프로퍼티, truedelete o; // 선언된 변수는 삭제할 수 없다. falsedelete 1; // 정수도 삭제할 수 없다. falsex = 1;delete x; // 이와 같은 종류의 변수는 삭제할 수 있다. true
x; // 런타임 에러, x 는 정의되지 않았다.
var my = new Object(); my.hire = new Date();my.fire = my.hire;delete my.hire;document.write(my.fire); // my.fire 는 여전히 Date 객체를 참조하고 있다.
void 연산자
6 장 문장
throw
function factorial(x) {if(x < 0) throw new Error(“x must not be negative”);….
var base = 1024;var table = [base, base+1, base+2, base+3];
var b = [[1, {x:1, y:2}], [2, {x:3, y:4}]];
var count = [1,,3]; // 이 배열의 원소는 세개다. 가운데 원소는 정의되지 않았다.var undefs = [,,]; // 이 배열의 원소는 두 개다. 두 원소가 모두 정의되지 않았다.
var a = new Array();var a = new Array(5, 4, 3, 2, 1, “testing, testing”);
배열의 길이를 지정하는 숫자 값을 전달인자로 하여 호출하는 방법var a = new Array(10);
이 경우에는 생성자의 전달인자로 지정된 수치만큼원소를 갖는 배열을 생성한다. 각 원소의 값은undefined 이며 length 프로퍼티 값은 생성자의 전달인자에 명시된 수치이다.
배열의 인덱스에는 반드시 0 보다 크거나 같고 2^32-1 보다 작은 정수를 사용해야만한다. 만약 너무 큰 수나 음의 정수, 부동소수점 값, 불리언 값과 객체 같은 다른 값을 인덱스로 사용하려면 자바스크립트는 이를 문자열로 변환하고 이 문자열을 객체의 프로퍼티 이름으로 간주한다. 즉, 이것은 더 이상 배열의
인덱스가 아니다.
a[-1.23] = true;
자바스크립트 배열의 인덱스는 연속적이지 않아도 된다. 이것은 배열의 인덱스를 반드시 연속된 범위의 숫자 안에서 고르지 않아도 됨을 의미한다. 자바스크립트는 배열에 실제로 저장된 원소들에 대해서만
메모리를 할당하도록 구현할 수 있다. 즉, 다음과 같은 코드를 실행할 때에 자바스크립트 인터프리터는 0 번 인덱스와 10,000 번 인덱스를 위해서만 메모리를 할당하며 그 사이에 있는 9,999 개의 인덱스에
대해서는 메모리를 할당하지 않는다.
a[0] = 1;a[10000] = “this is element 10,000”;
// ???var c = new Circle(1,2,3);c[0] = “this is an array element of an object !”; // c[0] 는 객체의 배열 원소이다.
“이 예는 단지 객체에 0” 이라는 이름의 프로퍼티를 추가할뿐이다. 객체에 배열 원소를 추가한다고 해서 객체가 배열이 되지는 않는다.
7.5.2 배열 원소 삭제하기delete 연산자를 사용하면 배열 원소의 값을 undefined 값으로 설정할 수 있다.
Array.shift(), Array.pop(), Array.splice();
7.6.5 배열의 크기 조절하기
배열의 length 프로퍼티는 읽고 쓸수 있는 값이다. length 프로퍼티는 현재의 값보다 작게 설정하면 배열은 그 새로운 길이로 축소된다. 즉 새롭게 설정된 배열의 길이를 벗어나는 위치의 원소들은 버려지고
그 원소들의 값은 전부 잃어버린다.
length 프로퍼티를 현재의 값보다 크게 설정하면 배열의 끝부분에 정의되지 않은 원소들이 추가되면서 배열이 새로운길이로 늘어난다.
7.6.6 다차원 배열 구구단 예
var table = new Array(10);for(var i = 0; i < table.length; ++i) table[i] = new Array(10);
for(var r = 0; r < table.length; ++r) {for(var c = 0; c < table[r].length; ++c) {
table[r][c] = r * c;}
}
7.7 배열 메서드join() ⇒ 모든 원소를 문자열로 변환하고 이어 붙여서 반환한다. 전달인자를 넘겨 구분자 문자열을
지정할 수 있다. ‘기본값 ,’ 반대 기능 split() ⇒ 문자열을 조각들로 분리하고 이 조각들을 원소로 하는 배열을 생성
reverse() ⇒ 배열 안의 원소 순서를 반대로 정렬하여 반환한다. 이미 존재하는 배열 안에서 원소들의 순서를 뒤바꾼다.
var a = [1,2,3,4,5,6,7,8];a.splice(4); // [5,6,7,8] 을 반환한다. a = [1,2,3,4]a.splice(1,2); // [2,3] 을 반환한다. a = [1,2];a.splice(1,1); // [4] 를 반환한다. a = [1]
var a = [1,2,3,4,5];a.splice(2,0, ‘a’, ‘b’); // [] 를 반환한다. a 는 이제 [1,2,’a’, ‘b’, 3, 4, 5]a.splice(2,2,[1,2],3); // [‘a’, ‘b’] 를 반환한다. a 는 이제 [1,2,[1,2],3,3,4,5]
}var a = [1,2,3,4];var b = new Array(4);easycopy({from:a, to:b, length:4});
// 튼튼한 함수 만들기 예
function sum(a) {if( (a instanceOf Array) || (a && typeof a == “object” && “length” in a)) { var total = 0;
for(var i = 0; i < a.length; ++i) {var element = a[i];if(!element) continue;if(typeof element == “number”) total += element;else throw new Error(“sum(); 모든 배열 원소는 숫자이어야 함.”);
} return total;} else { throw new Error(“sum(): 전달인자는 반드시 배열이어야 함.”);}
}
자바스크립트는 매우 유연하고 또 데이타 타입 제약이 느슨한 언어라서 때로는 함수가 건네받은 전달인자들의 개수와 데이터 타입에 유연하게 대처 할 수 있는 함수를 작성하는 것이 적절할 수 있음.
예.
function flexisum(a) {var total = 0;for(var i = 0; i < arguments.length; ++i){
var element = arguments[i];if(!element) continue;
var n;switch(typeof element) {case “number”:
n = element;
break;case “object”:
if( element instanceOf Array) {n = flexisum.apply(this, element);
} else {n = element.valueOf();
}break;
case “function”:n = element();break;
case “string”:n = parseFloat(element);break;
case “boolean”:n = NaN;break;
}
if(typeof n == “number” && !isNaN(n)) total += n;else throw new Error(“sum(): “ + element + “ 을 숫자로 변환하는데 실패.”);
}
return total;}
8.3 데이타로서의 함수
8.4 메서드로서의 함수
호출된 메서드가 속하여 있는 객체는 메서드 몸체 안에 this 라는 키워드의 값으로 저장된다. var calculator = {
function PositionedRectangle(x, y, w, h) {// 초기화될 객체의 매서드로 생성자를 호출할 수 있게 call() 메서드를 사용한다.// 이 기법은 생성자 체이닝( chaining) 이라고 불린다.Rectangle.call(this, w, h);
this.x = x;this.y = y;
}
// Rectangle 을 서브클래스화 시키려면 명시적으로 프로토타입 객체를 생성해야 한다.PositionedRectangle.prototype = new Rectangle();