— javascript — 7 min read
/* ... */) 은 정규 표현식 리터럴과 충돌할 수 있기 때문에 안전하지 않다. 한 줄 주석(// ...)을 사용하는 것이 더 좋다.1/*2var rm_a = /a*/.match(5);3*/1abstract2boolean break byte3case catch char class const continue4debugger default delete do double5else enum export extends6false final finally float for function7goto8if implements import in instanceof int interface9long10native new null11package private protected public12return13short static super switch synchronized14this throw throws transient true try typeof15var volatile void16while withundefined, NaN, Infinity 등은 예약어가 아니다.isNaN() 함수를 사용한다.1.76769313486231570e+308 보다 큰 값은 Infinity 로 나타낸다.1var maximum = 1.76769313486231570e+308;2var infinity = 1.76769313486231570e+309;34console.log(maximum);5console.log(infinity); // Infinity 가 출력된다.1var alphabet = 'A';2var unicode = '\u0041';34console.log(unicode);5console.log(alphabet === unicode);<script> 태그는 컴파일되어 즉시 실행되는 하나의 컴파일 단위이다.1var obj = {};2if(obj.prop && obj.prop.prop) {3 console.log('obj.prop.prop 가 존재합니다.');4} else {5 console.log('obj.prop 나 obj.prop.prop 이 존재하지 않습니다.');6}Object.create 를 통해서 프로토타입을 지정해서 객체를 생성할 수 있다. 참고typeof 로 속성의 타입을 알 수 있다. 하지만 해당 객체의 속성이 아니라 프로토타입 체인 상에 있는 속성을 반환할 수 도 있다.1var obj = {2 first: 1,3 second: 'two'4};56for (var prop in obj) {7 if (obj.hasOwnProperty(prop)) {8 console.log(prop + ' : ' + obj[prop]);9 }10}1// 예시2getElement('myBoxDiv')3 .move(350, 150)4 .width(100)5 .height(100)6 .color('red')7 .border('10px outset');1var count1 = 0;2var fibonacci = function(n) {3 count1++;4 return n < 2 ? n: fibonacci(n - 1) + fibonacci(n - 2);5};67for (var i = 0; i <= 10; i += 1) {8 console.log(i + " = " + fibonacci(i));9}10console.log("count1 = " + count1);1112var count2 = 0;13var fibonacci2 = function(){14 var memo = [0, 1]; // 메모이제이션을 할 객체1516 var fib = function(n) {17 count2++;18 var result = memo[n];19 if (typeof result !== 'number') {20 result = fib(n-1) + fib(n-2);21 memo[n] = result; // 연산한 결과를 객체에 저장한다.22 }23 return result;24 };25 return fib;26}();2728for (var i = 0; i <= 10; i += 1) {29 console.log(i + " = " + fibonacci2(i));30}3132console.log("count2 = " + count2)1var myObj1 = maker(f, l, s, c); // 매개변수가 많다.2var myObj2 = maker({3 first: f,4 last: l,5 state: s,6 city: c7});Object.create() 를 통해서 유사한 객체들을 만들 수 있습니다.1var myMammal = {2 name: 'Mammal',3 getName: function() {4 return this.name;5 }6};78var myCat = Object.create(myMammal); // 객체 상속Object.create 메소드를 사용할 수 도 있고, 객체를 반환하는 함수를 호출할 수도 있다.1// pseudocode2// spec 객체는 constructor가 인스턴스를 만드는데 필요한 정보가 들어 있다.3// my 객체는 상속 연결상에서 생성자와 공유하게 되는 비밀들을 담는 컨테이너다.4var constructor = function (spec, my) {5 var that;6 // 필요한 private 변수들 추가78 var my = my || {};9 // 공유할 변수와 함수를 my에 추가1011 that = {}; // that에 새로운 객체 할당1213 // 앞서 정의한 변수들에 접근할 권한이 있는 메소드들을 that 에 추가1415 return that; // that 반환16}1var mammal = function (spec) {2 var that = {};34 that.getName = function() {5 return spec.name;6 };78 that.says = function() {9 return spec.saying || '';10 };1112 return that;13};1415var myMammal = mammal({16 name: 'Herb'17});1819console.log(myMammal.getName());20console.log(myMammal.says());2122var cat = function (spec) {23 spec.saying = spec.saying || 'meow';2425 var that = mammal(spec);2627 that.purr = function(n) {28 var s = '';2930 for (var i = 0; i < n; i += 1) {31 if (s) {32 s += '-';33 }34 s += 'r';35 }36 return s;37 };3839 that.getName = function() {40 return that.says() + ' ' + spec.name + ' ' + that.says();41 };4243 return that;44};4546var myCat = cat({47 name: 'Henrietta'48});4950console.log(myCat.getName());51console.log(myCat.says());52console.log(myCat.purr(5));5354// super 메소드를 다룰 수 있는 방법도 있다.55Object.prototype.superior = function (name) {56 var that = this;57 var method = that[name];5859 return function() {60 return method.apply(that, arguments);61 }62};6364var coolcat = function (spec) {65 var that = cat(spec);66 var superGetName = that.superior('getName');6768 that.getName = function (n) {69 return 'like ' + superGetName() + 'baby';70 };7172 return that;73};7475var myCoolCat = coolcat({76 name: 'Bix'77});78var name = myCoolCat.getName();7980console.log(name);1var arr = [];2console.log(arr.length);34arr[100000] = 1;5console.log(arr.length);delete 키워드로 속성을 삭제할 수 있다. 하지만 그 위치에 구멍이 생긴다.Array.splice 를 사용하면 빈 공간 없이 삭제할 수 있다. 뒤의 값들의 인덱스가 하나 씩 앞당겨지는 과정이 발생하게 배열이 아주 큰 경우 성능이 느려질 수 있다.for in 으로 배열을 열거할 수 있다. 하지만 for in 은 순서를 보장하지 않으며 prototype chain으로 예상치 못한 속성도 열거될 수 있다.1var isArray = function(value) {2 return value &&3 typeof value === 'object' &&4 typeof value.length === 'number' &&5 typeof value.splice === 'function' &&6 !(value.propertyIsEnumerable('length'));7};1var parse_url = /^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/;2// / 정규표현식 시작3// ^ 문자열 시작4// (?:([A-Za-z]+):)? A~Z 또는 a~z 사이의 문자가 반복되며 이 문자열은 캡쳐된다. 하지만 맨 뒤에 콜론(:)이 붙은 문자열은 캡쳐되지 않는다.5// (\/{0,3}) 슬래시 0번에서 3번 반복6// ([0-9.\-A-Za-z]+) 숫자나 문자, 점(.)과 대쉬(-) 가 가능한 문자의 반복. 대쉬(-)는 이스케이프가 필요하다.7// (?::(\d+))? 콜론(:) 뒤에 하나 이상의 숫자의 연속. 숫자의 연속은 캡쳐된다.8// (?:\/([^?#]*))? 슬래시(/)로 시작하며 ?와 #를 제외한 모든 문자가 반복할 수 있다.9// (?:\?([^#]*))? 물음표(?)로 시작하며 #을 제외한 모든 문자가 반복할 수 있다.10// (?:#(.*))? #으로 시작하며 마침표(.)는 라인 종료 문자를 제외한 어떤 문자나 가능하다는 뜻이다.11// $ 문자열의 끝12// /;13var url = 'http://www.ora.com:80/goodparts?q#fragment';1415var result = parse_url.exec(url);16console.log(result);1718var names = ['url', 'scheme', 'slash', 'host', 'port', 'path', 'query', 'hash'];1920var blanks = ' ';2122var i;2324for (i = 0; i < names.length; i++) {25 console.log(names[i] + ':' + blanks.substring(names[i].length) + result[i]);26}^: 문자열의 시작(?:([A-Za-z]+):)?: 프로토콜 이름(?:...): 캡쳐하지 않는 그룹(...)는 캡쳐하는 그룹이다.[] 뒤에 붙는 접미사 +는 문자 클래스가 한 번 이상 일치한다는 것을 나타낸다.(\/{0,3}): /(슬래시)가 0에서 3번 일치([0-9.\-A-Za-z]+): 숫자나 문자, 점(.)과 대쉬(-) 가 가능한 문자의 반복. 대쉬(-)는 이스케이프가 필요하다.(?::(\d+))?: 콜론(:) 뒤에 하나 이상의 숫자의 연속. 숫자의 연속은 캡쳐된다.(?:\/([^?#]*))?: 슬래시(/)로 시작하며 ?와 #를 제외한 모든 문자가 반복할 수 있다.(?:\?([^#]*))?: 물음표(?)로 시작하며 #을 제외한 모든 문자가 반복할 수 있다.(?:#(.*))? #으로 시작하며 마침표(.)는 라인 종료 문자를 제외한 어떤 문자나 가능하다는 뜻이다.$: 문자열의 끝1var parse_number = /^-?\d+(?:\.\d*)?(?:e[+\-]?\d+)?$/i;23console.log(parse_number.test('1'));4console.log(parse_number.test('number'));5console.log(parse_number.test('98.6'));6console.log(parse_number.test('132.21.86.100'));7console.log(parse_number.test('123.45E-67'));8console.log(parse_number.test('123.45D-67'));^, $ 가 사용되면 모든 문자가 정규표현식에 대응해서 일치해야 한다는 뜻이다.^만을 사용하면 숫자로 시작하는 문자열에 대응하게 된다.$만을 사용하면 숫자로 끝나는 문자열에 대응하게 된다.-?: 음수를 표현하는 -는 옵셔널하다.\d+: 숫자가 하나 이상 가능하다는 의미이다.(?:\.\d*)?: 소수점(이스케이프 필요)과 그 뒤에 올 수 있는 0개 이상의 숫자에 대응한다. 이 값 역시 옵셔널하다.(?:e[+\-]?\d+)?: e나 E와 선택적인 부호(+/-) 그리고 하나 이상의 숫자에 대응한다. 이 값 역시 옵셔널하다./로 묶인다. /는 주석이나 나누기 에도 사용되므로 주의가 필요하다.new RegExp('', ''); 로 사용된다.| 를 키워드로 하나 이상의 정규 표현식 시퀀스가 포함된다."into".match(/in|int/): into는 앞서 나온 in과 일치하기 때문에 뒤에 int 와 비교하지 않고 완료된다.\ / [ ] ( ) { } ? + * | . ^ $: 이 문자들을 사용하기 위해서는 반드시 이스케이프(\) 해야 한다.\는 문자열과 정규 표현식 요소에서 모두 이스케이프 됐다는 것을 나타낸다. 대부분 같은 의미를 가지지만 \b 는 역스페이스 문자가 아니다.(?: ... ) 로 묶이는 그룹(?= ... ) 로 묶이는 그룹(?! ... ) 로 묶이는 그룹- 키워드를 이용해서 지정할 수 있다. ex) [A-Za-z]1- / [ \ ] ^[\b] 는 단어 경계가 아니고, 역스페이스 문자이다.{숫자,숫자} 로 구성되며 숫자를 하나만 입력하면 일치하는 부분을 최대한 많이 찾으려고 한다./w{0,1}/ w가 0개 에서 1개 까지 찾는다.1return2{3 status: true4};위 코드는 객체가 아닌 undefined 를 반환한다.
1return {2 status: true3};다음과 같이 해야 정상적으로 객체를 반환한다.
typeof NaN // 'number'NaN === NaN // falseNaN !== NaN // trueisNaN() 함수를 사용하라isFinite() 함수는 NaN 과 Infinity 를 거부하기 때문에 숫자인지 구분하기 좋지만 숫자가 아닌 경우 숫자로 변환하려고 한다.typeof 로 배열과 객체를 구분할 수 없다. 구분하기 위해서는 constructor 속성이 Array 인지 확인해야 한다.== != 는 반드시 피한다.1'' == '0' // false20 == '' // true30 == '0' // true45false == 'false' // false6false == '0' // true78false == undefined // false9false == null // flase10null == undefined // true1112' \t\r\n ' == 0 // truefunction foo() {} 는 var foo = function foo() {}; 로 표현하는 것이 더 좋다.new String(), new Boolean(), new Number() 등은 불필요할 때가 많으며 혼란을 줄 수 있기 때문에 리터럴을 사용해라.new Object(), new Array() 도 {}, [] 를 사용하는 것이 좋다.