javascript_jquery_basic_1_3

자바스크립트 코어 라이브러리

타이머(Timer)

자바스크립트 코드는 일반적으로 동기적으로 실행된다.
그러나 timer를 사용하여 코드 실행을 지연시키는 방법을 제공한다.

아래는 자바스크립트에서 제공하는 자주사용되는 타이머 관련 함수이다.

• setTimeout : 특정 밀리초(1000분의 1초)만큼 시간이 경과한 후에 실행될 함수를 등록한다.

• clearTimeout : 등록한 함수를 취소하는데 사용된다.

• setInterval : 특정 밀리초(1000분의 1초) 간격에 걸쳐 반복적으로 실행될 함수를 등록한다.

• clearInterval : setInterval을 통해 등록한 함수 취소하는데 사용된다.

setTimeout()/setInterval()은 취소가 가능하도록 함수 호출시 timeoutID(0이 아닌 숫자 값)를 반환하며, 반환된 timeoutID를 이용해 타이머를 취소할 수 있다.

setTimeout()과 setInterval()는 같은 ID 공간을 공유하기 때문에, clearTimeout()과 clearInterval() 둘 중 어느 것을 사용해도 기술적으로 동일하게 동작한다.

타이머 기본 예제
타이머 응용 예제
타이머 클로저로 동작하기

Math

Math 객체는 수학적인 상수들과 함수들을 위한 프로퍼티들과 메서드들을 가지는 내장객체이다.

MDN에 Math 객체에 대해 아래와 같은 내용이 있다.

다른 전역 객체들과 달리, Math는 생성자가 아니다. Math 객체의 모든 프로퍼티와 메서드는 정적(static) 하다.

• Math에 생성자가 없는 이유?
  Math 객체에 생성자가 없는이유는 ECMAScript의 규격이다.
  Math 객체는 [[Construct]] 를 내부 프로퍼티로 가질수 없고 new 연산자로 Math 객체를 생성자로 사용할 수 없다고 명시되어있다.
  ECMA-262

• 왜 생성자를 사용할수 없는가?
  new 연산자로 객체의 인스턴스를 생성하는 경우 생성자 함수를 작성하여야 하는데, Math는 생성자 함수가 아니라 미리 선언해놓은 객체이기 때문에 생성자 함수가 없으므로 new 연산자를 사용할 수 없다.

var math = {
  PI : 3.141592
}
var mt = new math; // math is not a constructor

new operator
Not_a_constructor
Math isn't a constructor but it has

Math.max()

max() 함수는 가장 큰 수를 반환한다.

Math.max(n1, n2, n3, ..., nX)

Math.max(10, 20);   //  20
Math.max(-10, -20); // -10
Math.max(-10, 20);  //  20

Math.min()

min() 함수는 가장 작은 수를 반환한다.

Math.min(n1, n2, n3, ..., nX)

Math.min(5, 10); // 5
Math.min(0, 150, 30, 20, 38);  // 0

Math.random()

random() 함수는 0(포함)과 1(불포함)사이의 랜덤한 숫자를 반환한다.

0.9155385791155863
0.7180965057937301
0.6913863084825393
0.24013469294573042

// min(포함)과 max(불포함)사이의 랜덤한 값을 만드는 방법
// floor()는 소수점 아래자리를 버리는 함수
Math.floor(Math.random() * (max - min)) + min;

Math.Random()

Math.pow()

pow() 함수는 지정한 값의 거듭제곱의 결과를 반환한다.

Math.pow(x, y)

Math.pow(3, 3);  // 27
Math.pow(-3, 3); // -27
Math.pow(2, 4);  // 16

Math.sqrt()

sqrt() 함수는 지정한 값의 제곱근 결과를 반환한다.

Math.sqrt(x)

Math.sqrt(9);   // 3
Math.sqrt(64);  // 8

String

length

length 프로퍼티는 문자열의 길이를 반환한다.

var str = "Hello World!";
var n = str.length; // 12

concat

concat()은 2개 혹은 더 많은 문자열들을 결합하고, 결합한 새로운 문자열을 반환한다.

str.concat(string2, string3[, ..., stringN])

var hello = 'Hello, ';
console.log(hello.concat('Kevin', ' have a nice day.'));

replace

replace()는 어떤 패턴에 일치하는 부분이 교체된 새로운 문자열을 반환한다.

str.replace(regexp|substr, newSubStr|function)

var str = "Mr Blue has a blue house and a blue car";
var res = str.replace(/blue/g, "red"); // Mr Blue has a red house and a red car.

split

split()는 문자열을 배열로 분할하여 새로운 배열로 반환한다.

string.split(separator, limit)

var str = "How are you doing today?";
var res = str.split(""); // H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?

var str = "How are you doing today?";
var res = str.split(" ", 3); // How,are,you

indexOf

indexOf는 문자열에 지정된 값이 처음 나타나는 위치를 반환한다.

string.indexOf(searchvalue, start)

var str = "Hello world, welcome to the universe.";
var n = str.indexOf("e"); // 1

var str = "Hello world, welcome to the universe.";
var n = str.indexOf("e", 5); // 14

slice

slice()는 문자열의 일부를 새로운 문자열을 만들어 반환한다.

string.slice(start, end)

var str = "Hello world!";
var res = str.slice(3, 8); // lo wo

substring

substr

Using Slice(), Substring(), And Substr() In Javascript

Date

Array

자바스크립트 내장 객체

== vs. ===

아래는 Douglas Crockford의 JavasScript: The Good Parts에 내용이다.

자바스크립트는 두개의 비교 연산자가 있다. ===/!== 그리고 사악한 쌍인 ==/!=가 있다. ===/!==는 당신이 기대한 것대로 동작한다. 만약 두 피연산자가 동일한 값과 동일한 타입을 갖는 경우 ===는 true를 생성하고, !==는 false를 생성한다. 사악한 쌍인 ==/!=는 서로 같은 타입일때는 올바르게 동작하지만, 타입이 다를때는 값을 강요하려고 한다. 그것들이 동작하는 규칙은 복잡하고 기억하기가 어렵다.
다음에 흥미로운 사례가 있다.

'' == '0'           // false
0 == ''             // true
0 == '0'            // true

false == 'false'    // false
false == '0'        // true

false == undefined  // false
false == null       // false
null == undefined   // true

' \t\r\n ' == 0     // true

나의 충고는 사악한 쌍을 사용하지말고 항상 ===/!==를 사용하라는 것이다. 위에서 표시된 모든 비교 상황에서 === 연산자는 false를 생성한다.