필고 - 강좌 : 자바스크립트 1 편 - 기초, 영역, 함수,컨텍스트, 클래스, 객체

강좌 : 자바스크립트 1 편 - 기초, 영역, 함수,컨텍스트, 클래스, 객체

서문

작성 : 송재호
출처 : 필고 http://www.philgo.com
허가 : 본 문서의 저작권은 없습니다. 본 문서는 마음데로 사용 할 수 있습니다.
본 강좌는 필리핀에 계신 분들 중 I/T 에 관심이 있어하시는 분들을 대상으로 작성하였습니다.
필고 개발자 스터디 그룹에서 진행하는 강좌이며 오프라인 모임도 계획 중에 있습니다.
본 강좌를 작성 할 때 고민 한 것 중 하나가 자바스크립트에서 어느 부분에 초점을 맞출 것인가 하는 것입니다.
과거 웹 개발자들은 자바스크립트를 등한 시 하거나 그냥 복사해서 붙여 넣기를 하면 되는 정도로 사용을 해 왔습니다.
하지만 요즘은 자바스크립트의 중요성이 크게 대두되었습니다.
이미 기초 자료는 인터넷 상에 너무나 많이 존재합니다.
그래서 저는 본 자바스크립트 강좌에서 기초 보다는 현재 요구되는 활용적인 면에서 강좌를 쓰고자 합니다.
따라서 본 강좌는 자바스크립트 기초를 설명하지 않습니다.
기초가 필요하신 분은 꼭 미리 공부를 하시기 바랍니다.
자바스크립트는 1995 년 네스케잎사의 Brenda Eich 라는 사람이 만들었습니다.
급하게 만들다 보니 초기에는 자바스크립트가 언어로서 제대로 정립이 되지 않았습니다. 하지만 그 때문에 정말 타 언어에서 보기 힘든 막강한 파워를 가지게 되었습니다.
강좌를 진행하면서 편의상 존칭을 생략할 수 있으니 양해 바랍니다.
RegExp

자바스크립트에서도 정규 표현식을 사용 할 수 있으므로 많이 활용 할 수 있도록 한다.
사용법

var patt=new RegExp(pattern,modifiers);
var patt=/pattern/modifiers;
Modifiers

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp
i 는 대소문자 구분을 하지 않는다.
g 는 모든 매치를 찾는다. 기본은 하나만 찾는데, g 를 사용하면 10개든 20개든 다 매치를 적용한다.
var str="Visit W3Schools";
var patt1=/w3schools/i;
test()

test 는 문자열을 입력받아서 해당 패턴을 검사한 다음 true 또는 false 를 리턴한다.
p1 = /E/;
p2 = /E/i;
console.log( p1.test("Hello philgo") );
console.log( p2.test("Hello philgo") );
exec()

매치된 문자열을 리턴한다.
p = /h*g/i;
console.log( p.exec( 'Hello philgo' );
주의 : g 옵션을 사용하면 exec() 를 실행할 때 마다 다음 매치를 찾고 더 이상 매치가 없으면 null 을 리턴한다.
p = /h[^o]*/gi;
console.log( p.exec( 'Hello philgo' ) );
console.log( p.exec( 'Hello philgo' ) );
console.log( p.exec( 'Hello philgo' ) );
그래서 일반적으로 아래와 같이 사용을 한다.
p = /h[^o]*/gi;
str = "Hello philgo";
while ( (arr = p.exec(str)) != null ) {
console.log(arr);
}
replace()

RegExp 와 함께 사용 할 수 있다.
p = /h[^o]*/gi;
str = "Hello philgo";
console.log( str.replace(p, '-----') );
객체

자바스크립트는 OOP 방식의 언어이다. 하지만 C/C++ 및 기타 언어에서 사용하는 클래스의 개념은 없다.
그냥 함수가 클래스이다.
객체의 정의

아래아 같이 객체를 정의 할 수 있다.
person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue";
또는 아래와 같이 객체 생성문(JSON 표현)으로 객체를 만들 수 있다.
person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};
아래와 같이 객체 내부를 참조할 수 있다.
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
객체의 property 또는 method 사용

“객체이름.프로퍼티” 와 같이 점(.)으로 연결하여 객체의 속성을 사용할 수 있다.
예를 들면 문자열 객체에는 그 문자열의 길이를 나타내는 length 라는 속성이 있다.
아래와 같이 사용 가능하다.
“abc”.length;
프로퍼티 뿐만아니라 메소드도 사용가능하다.
console.log( "Good Morning, philgo".toUpperCase() );
객체 속성 액세스

var person={fname:"John",lname:"Doe",age:25};
for (x in person)
{
txt=txt + person[x];
}
함수

함수 정의

자바스크립트의 함수 정의는 아래와 같이 합니다.
주의 : 아래의 함수는 올바른 문장이지만 syntax 에러 또는 token 에러가 발생합니다. 그 이유는 first class object 이지만 함수 이름이 없는 경우 대입(전달 또는 활용)을 하지 않아서 입니다.
function () {
console.log("Hello philgo");
}
위 함수를 정확하게 작성(정의)하려면 아래와 같이 함수 이름을 주거나 함수 이름 없이 괄호로 감싸주거나 객체로서 사용(변수에 대입, 파라메타로 전달 등)을 해야합니다.
일반적인 함수 정의와 사용

아래와 같이 정의 하고
function abc()
{
console.log("Hello philgo");
}
아래와 같이 호출하면 됩니다.
abc();
익명 함수와 사용

익명 함수라하면 함수에 함수 이름이 없는 것입니다.
예를 들면 아래와 같은데,
function () {
console.log("Hello philgo");
}
위 코드는 올바르지 않는 문장입니다. 함수 이름이 없으면 반드시 괄호로 감싸주어야 합니다.
따라서 아래와 같습니다.
(
function() {
console.log("Hello philgo");
}
)
위와 같이 해야 비로소 올바른 함수가 만들어 진 것입니다. 비록 함수의 이름은 없지만.
함수의 이름이 없는 함수를 어떻게 사용해야 할 까요?
이러한 점이 바로 자바스크립트를 이해하기 어렵게 하고 또한 아주 막강한 파워를 부여합니다.
자바스크립트 사고 방식을 길러야 하는 순간입니다.
함수 즉시 실행

자바스크립트는 모든 것이 객체입니다. 따라서 객체를 바로 실행해 보겠습니다. 객체를 실행할 때에는 “객체” 다음에 함수를 실행할 때 괄호를 붙여주죠? “abc()” 와 같이요.
그렇다면 위 이름 없는 함수(또는 객체라 할 수 있습니다.)에 괄호를 붙이면 됩니다.
아래와 같이 하면 됩니다.
(
function() {
console.log("Hello philgo");
}
)
();
그렇다면 위 함수 실행되면서 “Hello philgo” 라고 콘솔에 표시가 됩니다.
함수를 객체로 사용

함수를 필요할 때 사용하고 싶은 경우가 있습니다.
아래와 같이 정의하고
function abc() { ....}
필요할 때,
abc();
와 같이 호출해서 사용하면 됩니다.
그런데 이름이 없는 함수에서는요?
그 때에는 아래와 같이 함수를 변수에 저장하고
var abc = function () { ... };
필요한 때에
abc();
와 같이 사용을 하면 됩니다.
완전한 소스 코드는 아래와 같습니다.
var abc = function() {
return 'Hello philgo';
};
console.log(abc());
왜 이렇게 함수를 이름없이 만드냐구요? 불길하시죠? 앞으로 이 강좌가 어떻게 전개될지...
여러분들에게 상상, 그 이상의 파워를 드리기 위해서입니다.
객체를 리턴하는 함수

당연히 함수는 무엇이든지 리턴을 할 수 있습니다.
아래의 예제는 abc 변수에 함수(객체)를 저장합니다. 그러면 abc 변수 뒤에 괄호를 붙임으로서 그 함수를 사용 할 수 있습니다.
함수는 call 이라는 property 를 리턴합니다. property 는 점(.)으로 연결해 주면 사용이 가능합니다.
var abc = function() {
return {
call : "Hello philgo"
}
};
console.log(abc().call);
한번 더 강조를 하겠습니다.
자바스크립트는 자바스크립트 방식으로 생각을 하셔야합니다.
변수, 상수, 함수 기타 등등 모든 것을 객체로 생각하십시오.
그리고 객체를 객체 답게 쓰시면 됩니다.
함수가 객체를 리턴하는데 리턴하는 객체 안에 또 다른 함수 객체가 존재 할 수 있습니다.
아래의 예와 같습니다.
var abc = function() {
return {
call : function () {
return "Hello philgo";
}
}
};
console.log(abc().call());
아래와 같이 복합적으로 사용 할 수 있습니다.
var call = function() {
return {
after : function () {
return {
second : function(n) {
setTimeout(function(){
return console.log("Hello philgo");
},
n * 1000);
}
}
}
}
};
call().after().second(1);
변수 영역 : 내부 변수, 글로벌 변수

아래와 같이 내부 변수와 외부 변수를 다르게 사용 할 수 있다.
var schedule = function(timeout, callback) {
return {
start : function() {
setTimeout(callback, timeout);
}
};
};
(function(){
var timeout = 3000;
var count = 0;
schedule( timeout, function logCount() {
console.log( ++ count );
schedule(timeout, logCount).start();
}).start();
})();
var count = 0;
setInterval( function () { console.log("global count : " + (++count) ) }, 1000 );
First Class Object

이쯤에서 first class object 에 대해서 살펴 볼 필요가 있다.
이것은 언어학적인 이론에 가까운 것인데, 자바스크립트의 함수는 모두 first class object 이다.
현대 시대에서 통용되는 컴퓨터 언어에는 대부분 first class object 라는 개념이 있는데 이것은 변수 처럼 자유롭게 사용한 구조를 말한다. 함수가 되었던, union, structure, template, class 등등 그 무엇이 되었던 아래와 같은 조건을 만족한다면 그것은 first class object 라 할 수 있다.

변수에 저장할 수 있어야한다.

함수의 입력 파라미터로 사용할 수 있어야 한다.

함수의 출력 파라미터로 사용할 수 있어야 한다.

자료구조에 저장 가능해야 한다.

한 마디로 요약하자면 사용에 제약이 없는 함수라고 할 수 있다.
자바스크립트와 같이 동적인 언어와 자바(자바스크립트가 아님)와 같이 정적인 언어에는 근본 자체가 많이 틀려서 언어학적인 개념에서 많은 차이가 난다.
대부분 동적 언어에서 first class object 를 보다 명확하게 찾아 볼 수 있다.
Closure

위에서 자바스크립트의 모든 함수는 first class object 라고 했는데 뿐만아니라 자바스크립트의 모든 함수는 closure 이다.
closure 란 “환경”이다. 옛날 도스 시절(도스 시절이 맞나? 가물 가물)에 코딩을 하다 보면 포크(포크가 맞나 ㅡㅡ?)할 때 부모의 environment 를 전달해 주거나 새로운 environment 를 생성해 주고 난 다음 자식 프로젝스를 구동하는데 이 때에 하나의 완전한 실행 환경을 만들어주는 것이다.
(비교를 적당하게 했는지 모르겠다.)
Closure 에서 중요한 포인트는 바로 “자바스크립트 함수는 개별적인 context 를 가진다.” 라는 것이다.
함수가 호출되면 그 함수를 위한 실행 컨텍스트가 생성되고 그 컨텍스트로 진입을 한다. 또 다른 함수가 호출되거나 recursive 등으로 함수가 새로 호출될 때 마다 그 함수만을 위한 실행 컨텍스트를 만든다. 따라서 실행 컨텍스트가 stack 형태로 관리된다.
실행 컨텍스트가 생성되면 여러가지 일이 발생하는 데 먼저 실행 컨텍스트 안에 하나의 객체가 만들어지고 활성화된다. 그리고 arguments 객체를 생성하며 이것은 함수 호출시 넘겨 받은 인자들에 대한 값을 사용 할 수 있게 해 준다.
다음으로 실행 컨텍스트에 scope 을 할당이 된다. scope 는 실행 영역이라 할 수 있으며 리스트 또는 체인으로 내부 객체를 관리한다.
그 다음으로 scope 에서 사용 할 사용자 정의 변수의 생성이나 객체의 정의 등이 이루어진다.
가비지 컬렉션

ECMAScript 에서는 자동 가비지 컬렉션을 사용하는데 scope 체인이 더 이상 접근 가능하지 않을 때 가비지 컬렉션 대상이 된다.
Closure 구체적인 형성

함수가 함수를 리턴 할 때 그 리턴되는 함수에 만들어지는 context 를 말한다.
예를 들면 아래와 같다.
function abc() {
return function hello() {
console.log("Good Morning, philgo");
};
}
var morning = abc();
위 코드에서 함수가 리턴된다. 그 리턴되는 함수에는 특별한 context 가 형성이 되어 있는데 이것을 closure 라 한다.
위 코드에서 “var morning = abc();” 부분에서 함수 abc 가 호출되고 그 결과가 morning 이라는 변수에 대입 되면서 abc 함수의 역활은 끝났다. 따라서 가비지 컬렉션의 대상이 되어야 정상이지만, 리턴되는 값에는 closure 가 형성되어 있어서 가비지 컬렉션의 대상이 되지 않고 부모 함수의 실행이 종료되어도 리턴되는 context 는 살아 있어서 계속 사용이 가능하다.
물론 morning 이라는 변수가 더 이상 사용되지 않는 다면 리턴된 함수 hello 역시 가비지 컬렉션 대상이 된다.

이러한 Closure 는 setTimeout 와 같이 사용되는 경우에 자주 활용된다.