■ Javascript

[자바스크립트] Javascript를 기초부터 시작해보자! (3)

이번엔 좀더 자바스크립트의 내부를 살펴보도록 하겠다.

 

먼저 다음의 코드 부터 확인해보자.
아래 코드의 console.log()의 값은 1,2,3 각각 어떻게 나올까?

console.log(1, Person());
console.log(2, person);

var person = 1001;

function Person() {
    return 1000;
}

var Person = function(age, height) {
    return age + “:” + height;
}

person = Person(10,100);

console.log(3, person);

설명을 하면, 자바스크립트는 크게 두단계의 과정을 걸쳐서 프로그램을 실행시킨다.
이러한 이유는 자바스크립트는 약한타입언어이기 때문에, var라는 키워드로 모든 변수의 타입을 결정한다.
이말은 즉 런타임때 자료형이 결정된다는 의미이다. (여기서 자료형과 타입은 같은 말이다.)
그렇다면 어떤 과정이 강한타입언어와 다른지 살펴보자.

위에서 두단계과정을 걸쳐 실행한다고 했는데 첫번째가 파싱단계이다.
파싱단계는 자바스크립트의 코드중에서 var, function 두 키워드에 집중한다.
(WebStorm과 같은 IDE들을 보면 var, function 키워드만 다른 키워드와는 다른색으로 하이라이팅이 되어있다.)

이단계에서는 var 키워드로 만들어진 변수에 undefined를 할당하고, function 키워드로 만들어진 함수를 위해
메모리에 해당 함수의 로직을 올리고 Person이라는 변수에 주소를 할당한다. (특별히 = 연산자 뒤에 function은 무시한다.)

[파싱단계] *주소는 예시이다.

1. person = undefeind (0x111)

2. 0x123 = “function{return 1000;}”

3. Person = 0x123

4. Person = undefined(할당안함) => 그대로 0x123

4번 부분을 보자. 원래대로라면 undefined가 된다고 생각하겠지만 function 키워드가 var 키워드보다 우선순위가 높다는 것을 기억해두자.

다음은 실행단계이다.
이 단계에서는 실제 var, function키워드를 가지고 했던 파싱단계에서 수행했던 위 4단계를 제외하고 남은 모든 코드를 실제 수행한다.
로그 1번에서는 Person()를 수행한다.

[실행단계]

console.log(1, Person());
console.log(2, person);

var person = 1001;

function Person() {
    return 1000;
}

var Person = function(age, height) {
    return age + “:” + height;
}

person = Person(10,100);

console.log(3, person);

1. console.log(1, Person());
이부분은 Person이라는 0x123에 접근한뒤 () 연산자를 통해서 함수를 실행시킨다.
그러면 “function{ return 1000; }” 이라는 코드가 위에서 말한 파싱과 실행단계를 다시한번 거치고,
1000을 반환한다. 따라서 console.log(1, 1000)과 같게된다.
(여기서 유추할수 있는건 파싱과 실행단계는 함수단위로 이루어진다. 그렇다면 실제 아무것도 없는 상태에서
코드를 작성했단 것은 아무것도 없는 것도 무언가의 함수스코프 영역내 라는 의미이다.)

2. console.log(2, person); 을보면 현재 person에는 undefined가 할당되어 있다. 따라서 console.log(2, undefined)와 같게 된다.

3. person = 1001; var 부분을 제외하고 person에 1001이 할당된다.

4. 함수코드를 메모리 어딘가에 올린다.
0x999 = “function(age, height) {
return age + “:” + height;
}”

5. Person = 0x999
var 부분을 제외하고 아래 코드가 수행된다. 즉 Person에 함수의 주소를 할당한다.

6. person = Person(10, 1000);
에서 먼저 Person(10, 1000)를 수행하면, 리턴되는 값인 문자열 “10:100″이 person에 할당된다.
즉 person = “10:100″; 과같다.

7. console.log(3, person)
이부분은 결국 console.log(3, “10:100″); 으로 된다.

Standard
■ Javascript

[자바스크립트] Javascript를 기초부터 시작해보자! (1)

자바스크립트에 대해서 알아보도록 하겠다.

현재 Client scripting으로서, jQuery 및 backbone.js, angluar.js 등 다양한 프레임워크가 사용된다. 허나 이는 모두 자바스크립트란 사실!  기본부터, 아주기본이지만 중요한것 위주로 알아보도록 하겠다.

레퍼런스는 “객체지향자바스크립트 (황인균 저 | 위키북스)”를 토대로하나 추가되거나 빠진 내용이 있다.

1. 리터럴

var a = 10;
var b = “abc”;
var c = 10.3;
“good literal”;

여기에서 10, “abc”, 10.3, “good literal” 이것이 모두 상수 이고, 이러한 상수를 리터럴 이라고 한다.
literal뜻은 “문자그대로” 란 의미인데, 보통 우리가 작성하는 코드는 변수 및 키워드로 대부분 이루어져 있다. 그중에 상수값, 즉 변수가 아닌 값이 되는 상수는 코드상에 적혀있는 있는 그대로의 값이 되며 따라서 리터럴 이라고 부른다.

이중에서 특별히 객체, 배열의 리터럴도 존재한다. 따라서 일반적으로 쓰이는 상수가 아닌 리터럴 이라고 하는 것이다.

[객체리터럴]
{age:28, tall:”172m”};

[객체 프로퍼티 표현] *여기서는 객체 전체가 아닌 28, “172m” 두 값만 리터럴이 된다.
var obj = new Obj();
obj.age = 28;
obj.tall = “172m”;

[배열리터럴]
[“nice”,1,3];

[배열 인덱표현]
var arr = new Array();
arr.push(“nice”);
arr.push(1);
arr.push(3);

2. 변수는 생략한다.

3. 데이터 타입

데이터 타입은 크게 두가지 범주로 나뉜다.

첫번째는 프리미티브(원시) 타입, 그리고 그외로 나눌 수 있다.
나누게 되는 기준은 포인터값인가, 실제 값인가의 차이이다.

프리미티브타입은 다시 크게 5가지로 나뉜다.

– 숫자 (Number) : 모든 숫자는 부동소숫점이다. 정수는 없다.
– 문자열 (String) : 문자는 없다 모두 문자열이다.
– 불린 (Boolean)
– null : 명시적으로 데이터가 없음을 나타낸다.
– undefined : 초기화가 되지 않았을때 자동으로 들어가 있는 값이다.

그외 Object, Array, Function, Date, RegExp 등이 있다.

4. var
var는 모든 변수를 만들기 위한 키워드이다.
데이터 타입이 정해져 있지 않기 때문에, 약한타입언어라고 한다.
이부분 때문에 일반 강한타입형언어와는 다른 특색들이 나타난다. 아래서 다시 알아보자.

5. 값 타입과 포인터(참조) 타입
간단한 예로, 함수를 예를 들어보자.
자바스크립트에서 함수는, 코드를 가르킨다. 이말은 즉, 우리가 작성한 자바스크립트 코드가,
메모리 어딘가에 올라가 있다는 의미이다. 근데 다른 언어와는 다르게 코드 자체가 그대로 올라간다.
그럼 어떤 변수를 이용해서 함수를 호출할때 함수안에는 코드가 있을까?
정답은 아니다. 함수안에 코드가 직접적으로 문자열 형태로 들어가 있다면 여러 문제가 발생한다.
예를 들면 A함수에 B함수를 넣어서 두개가 동일한 함수로 만든다고 가정해보자.
그럼 A함수와 B함수 모두 해당 함수의 문자열을 들고 있는다. 따라서 중복의 문제가 발생한다.
따라서 A와B는 모두 함수의 대한 주소값 (여기서는 메모리 주소)을 가르킨다.
특히 () 키워드는 해당 코드를 실행 시키라는 의미이다.

Standard