기억을 지배하는 자

http 프로토콜을 통해 데이터를 주고 받는 방법은 많이 알려져 있다.

하지만 내가 원하는 것은 로컬에 있는 HTML파일간의 데이터 전송이다.

이것도 http 전송방식과 매우 비슷하다.

var name = "Tom"
var age = 23;
window.open("receive.html?name:"+name+"&age:"+age);

receiver.html

var temp = location.href.split("?");
data = temp[1].split(":");
key = data[0];
vale = data[1];

JSON(JavaScript Object Notation) 표기법은 

서로 다른 프로그래밍 언어간에 데이터를 교환하기 위한 표기법으로서 읽고 쓰기 쉬운 표기법이다.

사용되는 데이터 형식은 두가지 이다.

• 이름/값 쌍
• 배열

이름/값 싸을 표현할 때에는 다음과 같은 표기법을 사용한다.

{이름1:값1, 이름2:값2, 이름3:값3}

예를들어, 국가별 코드와 이름을 표현하고 싶다면 다음과 같이 JSON 표기법을 사용할 수 있다.

var countries = {ko:'대한민국', fr:'프랑스', uk:'영국'};
var koName = countries.ko;
var frName = countries['fr'];

배열로 표기하고 싶다면

[값0, 값1, 값2, 값3]

var countryCodes = ['ko', 'fr', 'uk', 'us']
var idx0 = countryCodes[0];   // 'ko'
var idx2 = countryCodes[2];   // 'uk'

이름/값 형태와 배열 혼함

var number = {
   name:'최범균',
   favoriteColors:['파랑', '노랑', '빨강']
};
var message = member.name + "님이 좋아하는 색상은 " + member.favoriteColors.length + "개 이고," ;
message += "그 중 첫번 째 색상은 " + member.favoriteColors[0] + "입니다.";

콜백함수로 넘길 함수가

어떤 객체의 프로퍼티이고, 함수 내부에서 this를 사용했다면,

콜백을 전달받은 함수에서 이 콜백함수를 호출하게되면 this의 값이 달라진다.

다음 예를 보면,

var myobj = {}
var myobj.color = "green"
var myobj.paint = function(node) {
	node.style.color = this.color
};

myobj.paint 함수를 다른 함수의 콜백인자로 넘겨보자.

var setColor = function(callback) {
	...
	if ( typeof callback === "function" ) {
		callback(node);
	}
	...
};

setColor(myobj.paint);

myobj.paint 함수 정의의 this는 setColor의 함수객체를 가리킨다. 즉 전역에 color 이라는 필드가 선언되어 있다면 그 값이 나오겠지만 선언되지 않았다면 ReferenceError exception이 발생한다.

이 상황을 해결하기 위해 myboj 객체도 인자로 같이 넘겨받아 this를 알아내는 방법이 있다.

자바스크립트는 함수 선언도 hoisting 기능이 적용된다.

다음 예를 보자.

//전역 함수 선언
function foo1() {
	alert('global foo1');
}
function foo2() {
	alert('global foo2');
}
function hoistMe() {
	foo1();
	foo2();

	function foo1() {
		alert('local foo1');
	}
	var foo2 = function() {
		alert('local foo2');
	}
}
hoistMe();

결과는 어떻게 될까......

의도된 결과는

'global foo1'

'global foo2'

였을 것이다.

하지만 자바스크립트의 hoisting 기능으로 인해 결과는

'local foo1'

Type Error

가 된다.

어째서?

자바스크립트는 hoistMe() 함수 내부에 선언된 변수 및 함수를 hoisting 하는데

foo1()은 함수 선언이므로 함수 정의 자체도 같이 hoisting되어서

전역 foo1() 함수를 가린다.

따라서 호출 결과 global이 아닌 local 이 불리게 되는것이다.

그럼 왜 foo2는 global도 local도 아닌 Type error 일까?

foo2()는 hoistMe 함수 내부에서 함수표현식으로 함수를 정의 했다.

hoist 기능은 선언문만 유효범위 맨 위로 올려지기 때문에

var foo2; 만 hoisting되고 함수 정의는 그 위치 그대로 남게 된다.

따라서 foo2()를 호출 하였을 때엔 

var foo2; 는 선언이 되어있지만 정의가 안된 undefined 값이어서,

즉 foo2라는 객체가 isCallerble이 아니기 때문에 Type Error 예외를 발생시킨다.

local 안에서 새로 정의한 함수를 호출 할 의도였으면

함수 선언문으로 선언을 하자.

자바스크립트의 함수를 정의하는 방법은 두가지가 있다.

함수 선언문, 함수 표현식

함수 선언문

function foo() {}

를 evaluation 하게되면

foo.name 은 "foo" 가 된다.

기명 함수 표현식

var fun = function add (a, b) {
	return a+b;
};

를 evaluation 하게되면

name 프로퍼티에 "add"라는 값을 가지는 함수 객체를 f에 리턴해 준다.

즉, fun.name 은 "add" 가 된다.

익명 함수

var fun = function (a, b) {
	return a+b;
};

는 fun.name 은 "" 이다. (IE에서는 undefined)

표현식에는 마지막 세미콜론을 꼭 써줘야 한다.

자바스크립트는 함수와 클래스의 구분이 없다.

만약 함수를 생성자로 정의하였을 때 객체를 생성하려면 new 키워드를 사용해야 한다.

하.지.만.

실수로 new 를 사용하지 않고 객체를 생성하게 되면 전역 유효범위에 프로퍼티가 생성되는 역효과가 발생한다.

function Person(name) {
	this._name = name;
}

var p = Person("pp");              // new를 빼먹었다!!!!
console.log(typeof p);            // "undefined"
console.log(typeof _name);     // "pp"    // 전역(함수 바디의 this가 전역을 가리킴)에 _name이 선언되었다.

객체 리터럴을 사용할 수 있는 상황에서는 new Object() 생성자를 쓸 이유가 없다.

하지만 다른사람이 작성한 레거시 코드를 물려받을 수도 있기 때문에 이 생성자의 '기능' 하나를 알아 둘 필요가 있다.

Object()는 인자를 받을 수 있는데 이 값에 따라 맞는 생성자로 객체를 생성한다.

//빈 객체
var o = new Object();
console.log(o.constructor === Object);    // true

// 숫자 객체
var o = new Object(1);
console.log(o.constructor === Number);    // true
console.log(o.toFixed(2));    // "1.00"

// 문자열 객체
var o = new Object("I am string");
console.log(o.constructor === String);    // true
console.log(typeof o,substring);            // "function"

// 불린 객체
var o = new Object(true);
console.log(o.constructor === Boolean);    // true

따라서 어떤 상황이 발생할 지 모르므로 Object로는 객체를 생성하지 말자.

객체 생성 시, 

생성자(Array(), Object(), String(), Boolean(), Number()) 사용을 자제하고 대신 리터럴 표기법을 사용하여 생성하자.

// 리터럴 사용
var car = { goes: "far" };

// 생성자 사용
var car = new Object();
car.goes = "far";

생성자를 사용해서 객체를 생성하면 득이 되는 것이 없다.

1. 코드가 더 길어진다.
2. 유효범위 판별 작업을 해야 한다.
   동일한 이름(Object()) 함수가 새로 정의되어 있는지 여부를 유효범위 체인을 따라가며 확인할 필요가 없다.