Where the light is

- innerHTML과 타이머 함수 innerHTML 속성은 한 요소의HTML 컨텐츠를 가지고 있는 것이다. 또한 타이머 함수는 특정한 시간에 특정한 함수를 실행할 수 있게 하는 함수이다. 다음은 타이머 함수와 innerHTML을 활용하여 body의 HTML 컨텐츠를 1초마다 load 완료 후 10초까지 Date를 추가하는 예제이다. 메서드 이름 설명 setTimeout(function, millisec) 일정 시간 이후 함수를 한 번 실행 setInterval(function, millisec) 일정 시간마다 함수를 반복 실행 clearTimeout(id) 일정시간 후 함수를 한 번 실행하는 것 중단 clearInterval(id) 일정 시간마다 함수 반복하는 것을 중단 DOCTYPE html> fun..

3) 클로저 로컬 변수를 다른 함수가 참조하면, 그 로컬 변수는 이후에도 활용될 가능성이 있으므로 로컬 변수가 존재하는 함수가 종료되어도 로컬 변수를 제거하지 않는다. 이를 클로저라고 한다. function test() { var localNum = 10; return function(){ document.write(localNum); }; } var func = test(); func(); 10 위의 예제는 클로저의 예이다. 분명 localNum은 test()의 로컬 변수인데, test() 함수가 종료한 후 실행된 func() 함수의 결과로 localNum의 값인 10이 출력됨을 볼 수 있다. 다른 각도에서 이 클로저를 바라보자. test( ) 함수가 종료된 후에, localNum에 접근할 수 있는 방..

2) 자바스크립트에서의 scope (로컬, 글로벌) 자바스크립트의 scope는 로컬과 글로벌만이 있고, 블록 단위의 scope은 지원하지 않는다. 다음 예제는 이를 테스트한 예제이다. function test() { for(var i = 0; i < 10; i++){ } alert('local : ' + i); } test(); alert('global : ' + i); function test() { for(i = 0; i < 10; i++){ } alert('local : ' + i); } test(); alert('global : ' + i); 첫 번째 예제의 결과는 local : 10 출력한 후에 에러를 발생 시키고, 두 번째 예제는 local : 10과 global : 10을 출력한다. 두 번째..

- JavaScript에서의 scope와 클로저 1) 로컬 변수, var과 글로벌 변수 function test() { var myName = 'longlee'; } test(); alert(myName); function test() { myName = 'longlee'; } test(); alert(myName); 위의 첫 번째 예제는 var 키워드를 통해서 선언한 변수이고, 두 번째 예제는 var 키워드를 사용하지 않고 선언과 동시에 초기화한 변수이다(var 키워드를 사용하지 않으면 선언과 동시에 초기화를 해주어야 한다.). 첫 번째 예제는 에러를 발생 시키는데, 두 번째는 에러 없이 작동한다. 그 이유는 무엇일까? 그 이유는 var 키워드를 사용하지 않고 선언한 변수는 글로벌 변수이기 때문이다. ..

- 콜백 함수 자바스크립트에서는 함수도 하나의 자료형이므로 매개변수로 전달할 수 있다. 이렇게 매개변수로 전달하는 함수를 콜백 함수라고 한다. 콜백 함수를 사용하는 이유는 특정 함수 동작 후에 다른 함수를 처리하고자 하는 것과 같은 비동기처리를 위함이다. 자바스크립트에서는 특히 비동기처리를 지원하는 웹 개발 기법이 있는데, 이를 Ajax (Asynchronous JavaScript and XML)라고 한다. DOCTYPE html> function cbTest(callback){ for(var i = 0 ; i < 3; i++){ callback()+ ‘; } } var callback = function(){ document.write('callback test '); } cbTest(callback)..

- 내부 함수 함수 안에도 그 함수 코드 안에서만 사용할 수 있는 함수들을 작성할 수 있는데, 이를 내부 함수라고 한다. 내부 함수는 그 내부 함수를 포함한 외부 함수 안에서만 사용할 수 있다. 내부 함수를 사용하는 일반적인 이유는, 특정 함수에서만 사용하는 함수들을 내부 함수로 작성하여 다른 함수와의 충돌을 방지하기 위함이다. 다음은 내부 함수의 syntax이다. function externalFunc(){ function internalFunc(){ // 내부 함수 코드 } // 외부 함수 코드 } 사실 이 부분은 자바스크립트를 객체 지향적으로 프로그래밍하면 함수 충돌과 같은 문제가 발생될 여지가 없다.

- 리턴값 return 키워드는 함수가 실행되는 도중에 함수를 호출한 곳으로 돌아가라는 의미이다. 이때 리턴 값이 없는 경우 그 리턴 값의 데이터 타입은 undefined 가 된다. DOCTYPE html> function returnFunc(){ return; }; var obj = returnFunc(); document.write(obj + ' : ' + typeof(obj)); undefined : undefined

- 가변 인자 함수와 arguments 개체 가변 인자 함수는 매개변수의 개수가 변할 수 있는 함수이다. 매개변수와 함수 호출은 별개이기 때문에, 매개변수를 잘못 넘겨준다고 해서 함수 호출이 중단되는 경우는 없다. 따라서 함수에서는 넘어오는 매개변수의 데이터 타입을 검증하고(입력 정합성) 이에 따라 결과를 다르게 하는 작업을 꼭 수행해주어야 한다. 실제로 넘겨지는 인수를 사용하기 위해서 arguments 개체를 사용하는데, 이는 현재 실행 중인 함수 및 이 함수를 호출한 함수에 대한 인수를 나타내는 개체이다. arguments 개체는 명시적으로 만들 수 없고, 함수가 실행을 시작할 때만 사용할 수 있다. 함수의 arguments 개체는 배열이 아니지만 배열 요소에 엑세스하는 방식과 동일하게 각각의 인수에..

- 매개 변수와 리턴값 함수를 호출할 때 괄호 안에 적어서 함수 안으로 보내는 변수를 매개변수라고 하며 함수가 반환하는 값을 리턴값이라고 한다. 다음은 매개 변수와 리턴값 syntax이며, 매개 변수의 제곱을 반환해주는 함수의 예이다. function funcName(매개변수, 매개변수){ return 리턴값; }; function func(x) { return x * x }; alert(func(3)); 자바스크립트에서의 함수의 특이한 점은, 매개변수와 리턴값의 데이터 타입을 정하지 않는다는 점이다. 즉 매개변수와 리턴에는 var라는 키워드를 넣지 않고, 하나의 변수가 모든 종류의 데이터 타입을 받을 수 있다는 것이다. 이는 자바스크립트가 동적 타입 언어이기 때문이다. DOCTYPE html> func..

- 함수의 정의와 호출 함수의 정의를 보고 싶은 경우, 함수 이름 자체를 출력하여 볼 수 있다. 또한 함수를 호출하고 싶은 경우에는 ( )를 함수명 뒤에 붙여서 사용한다. 단 빌트인 함수의 경우 함수의 내부 내용을 볼 수 없다. DOCTYPE html> var func = function(){ return '함수 예제'; }; document.write(func + ' '); document.write(func() + ' '); document.write(prompt); function (){ return '함수 예제'; } 함수 예제 function prompt() { [native code] }