3일차 정리

1. 자바스크립트의 자료형

자료형	설명
Boolean	[기본 자료형] true와 false의 두 가지 값을 가지는 자료형
Number	[기본 자료형] 64비트 형식의 IEEE 754값이며 정수나 부동소수 값을 가지는 자료형
String	[기본 자료형] 문자열 값을 가지는 자료형
undefined	값을 할당하지 않은 변수의 값
null	존재하지 않는 값을 가리키는 값
Object	객체를 값으로 가지는 자료형  객체는 속서들을 담고 있는 가방(Collection)으로 볼 수 있으며, 대표적인 객체로 Array나 Date를 들 수 있음

2. 객체 속성 + 초기화

객체의 속성으로 함수를 할당	객체 선언시 속성
var Person = {}; Person['age'] = 20; Person['name'] = '소녀시대'; var oper = function(a, b) { return a + b; }; Person['add'] = oper; console.log('더하기 : %d', Person.add(10,10));	var Person = { age: 20, name: '소녀시대', add: function(a, b) { return a + b; } }; console.log('더하기 : %d', Person.add(10,10));

3. 배열 객체의 대표적인 속성과 메소드

속성/메소드 이름	설명
push(object)	배열의 끝에 요소를 추가
pop()	배열의 끝에 있는 요소를 삭제
unshift()	배열의 앞에 요소를 추가
shift()	배열의 앞에 있는 요소를 삭제
splice(index, removeCOunt [,object])	여러 개의 객체를 요소로 추가하거나 삭제
slice(index, copyCount)	여러 개의 요소를 잘라내어 새로운 배열 객체로 만듬

4. 콜백함수(Callback function) 이해하기

주로 비동기 프로그래밍(Non-Blocking Programming) 방식으로 코드를 작성시 사용

function add( a, b, callback) { var result = a + b; callback(result); }   add(10, 10, function(result) { console.log('파라미터로 전달된 콜백 함수 호출됨.'); console.log('더하기 (10, 10)의 결과 : %d', result); });	function add(a, b, callback) { var result = a + b; callback(result); var history = function() { return a + ' + ' + b + ' = ' + result;  }; return history; } var history = add(10, 10, function(result) { console.log('파라미터로 전달된 콜백 함수 호출됨.'); console.log('더하기 (10, 10)의 결과 : %d', result); }); console.log('결과값으로 받은 함수 실행 결과 : ' + history());	function add(a, b, callback) { var result = a + b; callback(result); var count = 0; var history = function() { count++; return count + ' : ' + a + ' + ' + b + ' = ' + result;  }; return history; } var history = add(10, 10, function(result) { console.log('파라미터로 전달된 콜백 함수 호출됨.'); console.log('더하기 (10, 10)의 결과 : %d', result); }); console.log('결과값으로 받은 함수 실행 결과 : ' + history()); console.log('결과값으로 받은 함수 실행 결과 : ' + history()); console.log('결과값으로 받은 함수 실행 결과 : ' + history());
		클로저Closure) 활용 - 반환된 history함수가 실행될 때는 이미 add함수가 메모리에서 접근할 수 없는 상태가 된다음, 따라서 history함수가 실행될떄는  add함수안에 만들어진 count변수도 같이 접근할 수 없어야 된다. 하지만 이와 같이 함수안에서 새로운 함수를 만들어 반환하는 경우에는 예외적으로 변수 접근을 허용

5. 프로토타입 객체

함수에 여러 가지 기능과 속서이 추가되면서 객체 지향(Object oriented) 언어에서 객체의 원형(Prototype)인 클래스를 만들고, 그 클래스에서 새로운 인스턴스 객체를 여러 개 만들어 내듯이 자바 스크립트에서도 객체의 원형을 정의한 후 그 원형에서 새로운 인스턴스 객체를 만들어 낼 수 있다.

그리고 Person 객체안에 있는 prototype 속성에 데이터나 함수를 속성으로 추가하면 실제 인스턴스 객체를 만들 때 메모리를 효율적으로 관리할 수 있다.

Person 함수가 만들어질 때 자동으로 prototype 객체가 만들어진다. 이 prototype 객체는 Person 객체 자신을 가리키도록 되어 있다.

그러므로 아래 2코드는 같은 결과를 보여준다.

Person.walk = function() {...}

Person.prototype.walk = function() {...} 

또한 constructor 같은 객체도 자동으로 만들어 진다.

function Person(name, age) { this.name = name; this.age = age; } Person.prototype.walk = function(speed) { console.log(speed + 'km 속도로 걸어갑니다.'); } var person01 = new Person('소녀시대', 20); var person02 = new Person('걸스데이', 22); console.log(person01.name + ' 객체의 walk(10)을 호출합니다.'); person01.walk(10); console.log('person01의 생성자 : \n'+person01.constructor);

추가자료. 출처 : https://www.zerocho.com/category/JavaScript/post/573c2acf91575c17008ad2fc

프로토타입

function Person(name, gender) {
  this.name = name;
  this.gender = gender;
}
Person.prototype.sayHello = function() {
  alert(this.name + ' said "hello"');
};

이번에는 다른 건 위의 코드와 같은데 this.sayHello 대신에 Person.prototype에 sayHello를 넣었습니다. prototype은 처음보죠? prototype 객체는 사전 그대로 원형을 뜻합니다. 원래의 모습이죠. 같은 생성자로부터 만들어진 객체들은 모두 이 원형 객체를 공유합니다. 따라서 Person의 prototype 객체에 sayHello라는 메소드를 넣으면 Person 생성자로 만든 모든 객체는 이 메소드 사용이 가능합니다. 공유하고 있기 때문이죠.

그런데 this.sayHello보다 prototype에 Person.prototype.sayHello로 넣는 게 더 효율적입니다. prototype은 모든 객체가 공유하고 있어서 한 번만 만들어지지만, this에 넣은 것은 객체 하나를 만들 때마다 메소드도 하나씩 만들어지기 때문에 불필요한 메모리 낭비가 발생합니다.

아예 메소드뿐만 아니라 속성까지 다 prototype에 넣기도 합니다. 어떤 때 그러는지는 링크 를 참조하세요.

prototype과 __proto__

new Person('Nero', 'm'); // Person {name: "Nero", gender: "m", __proto__: Object}

Nero라는 새 사람 객체를 만들었더니 그 안에 처음보는 __proto__라는 객체가 있습니다. 눌러보니

{
  constructor: function Person(name, gender),
  sayHello: function() {},
  __proto__: Object
}

constructor과 우리가 추가한 sayHello 그리고 또다시 __proto__가 있네요.

__proto__가 바로 실제 객체를 만들 때 생성자의 prototype이 참조된 모습입니다. 생성자의 prototype을 참조하기 때문에 __proto__와 prototype은 같습니다. 아까 Person.prototype.sayHello를 했던 것이 들어있죠. 추가로 constructor(생성자)에 대한 정보까지 들어있습니다. __proto__ 안에 들어있는 __proto__는 지금은 생각하지 않으셔도 됩니다. 이 강좌 에 나와있습니다.

정리하면

• constructor는 생성자 함수 그 자체를 가리킴
• prototype은 생성자 함수에 정의한 모든 객체가 공유할 원형
• __proto__는 생성자 함수를 new로 호출할 때, 정의해두었던 prototype을 참조한 객체
• prototype은 생성자 함수에 사용자가 직접 넣는 거고, __proto__는 new를 호출할 때 prototype을 참조하여 자동으로 만들어짐
• 생성자에는 prototype, 생성자로부터 만들어진 객체에는 __proto__
• 따라서 사용자는 prototype만 신경쓰면 된다. __proto__는 prototype이 제대로 구현되었는지 확인용으로 사용한다.

prototype, __proto__와 constructor의 관계

prototype과 constructor는 부모자식 관계라고 생각하면 됩니다. Person.prototype.constructor === Person; 입니다. 또한 Person.prototype === (Person생성자로 만들어진 객체).__proto__; 이기 때문에 (Person생성자로 만들어진 객체).__proto__.constructor === Person; 도 성립합니다.

6. URL, Querystring

- url 모듈의 주요 메소드

메소드 이름	설명
parse()	주소 문자열을 파싱하여 URL 객체를 만들어 줍니다.
format()	URL 객체를 주소 문자열로 변환

- querytstring  모듈의 주요 메소드

메소드 이름	설명
parse()	요청 파라미터 문자열을 파싱하여 요청 파라미터 객체로 만들어 준다
stringify()	요청 파라미터 객체를 문자열로 변환

Querystring 은 요청 파라미터를 쉽게 분리할 수 있도록 지원

참조 : https://opentutorials.org/module/938/7369

var url = require('url'); // 주소 문자열을 URL 객체로 만들기 var curURL = url.parse('https://m.search.naver.com/search.naver?query=steve+jobs&where=m&sm=mtp_hty'); // URL 객체를 주소 문자열로 만들기 var curStr = url.format(curURL); console.log('주소 문자열 : %s', curStr); console.dir(curURL); // 요청 파라미터 구분하기 var querystring = require('querystring'); var param = querystring.parse(curURL.query); var param2 = querystring.parse(curURL.query, '&', '=', { maxKeys: 2 }); console.log('요청 파라미터 중 query의 값 : %s', param.query); console.log('원본 요청 파라미터 : %s', querystring.stringify(param)); console.log(querystring.stringify(param, '; ', '->')); console.log(querystring.stringify(param2, '; ', '->'));