[SK고용디딤돌] 자바스크립트 (4/7) - 1주차

/** 복습 **/

 

* for in 문

- .(dot) 표기법 못쓰니까 연관배열["  "]로 사용한다.

 

* try .. catch .. finally

- 예외를 처리할 수 있는 방법

 

* 중첩함수

- closure는 return 된 중첩함수이다

 

* scope chain

- 하위 스코프에서 식별자를 찾지 못하면 상위 스코프에서 찾고 상위 스코프에서 찾지 못하면 global에서 찾고 없으면 reference error가 발생

 

* 재귀호출

- arguments.callee는 익명함수일 때 재귀함수를 호출할 수 있다.

 

* 함수에 인자로 함수를 전달

- 함수적 언어의 특징

function operate1 (operator, op1, op2) {

  return operator(op1, op2);

}

 

function add(x, y) {

  return x + y;

}

 

operate1(add, 1, 2) => 결과 3

operate1(function(x,y){return x*y;},1,2); =>익명함수를 이용할 수 도있음. // 간접 구조

 

함수를 전달 받을 인자를 던달 받을 때 반드시 pure function을 사용해야한다

(다른데 의존성이 없고 독립적을 실행이 가능한 function을 사용해야 함) 일반함수는 pure function이다.

 

* 정규표현식

- new RegExp("  ", "  ");

 

* 함수에 함수 리터럴을 이용한 익명함수

- 즉시실행, 이벤트처리를 할 때 익명함수를 이용

 

* 자바스크립트는 .으로 접근가능한것은 모두 public 속성을 갖는다.

- 오염방지를 위해 중첩함수를 이용하여 접근

- 중첩함수를 외부에 노출시킨다

 

* arguments 객체

- 함수 scpoe 가 호출 될 때 자동적으로 생성되는 property

- array like object ( length propert, 0, 1, 2 ..)

- 어레이와 같은 오브젝트

- 가변형 매개변수(가변형 인자)

- var_args : 레이블 처럼 사용하여

 

* 용어

pattern 설계에 포인트가 있다

idiom 관용

convention 일종의 규칙

 

* Factory pattern

- 객체를 만들어내는 패턴

 

* Refactoring 해본 것

1) rename method

2) 조건문을 polymorphism 으로 바꾸기

3) introduce parameter object

 

* CallByValue vs CallByReference

callbyvalue : 값을 복사

callbyreference : 원본을 변경할 수 있음

 

* child(subclass) is a parent(super/base class) - inheritance

* Product has (a) Part(s) 제품은 부품을 갖는다 - composition

 

* parameter object

- 명시적인 매개변수는 매개변수의 순서에 상관이 없다.

- 넘기고 싶은 정보만 넘길 수 있다.

 

funciton test() {   var a = 2;   function test2() {     a = 4;   }   test(); } test();

global [     ]   ↑  test [a = 4]   ↑  test2 [     ]

 

* switch 문은

- 숫자형, 문자열 모두 가능

 

* ECMAScript5 까지 block scope가 존재하지 않는다.

* ECMAScript 6 

- var : function scope

- let : block scope 가능

 

/* JavaScript Day04 */

 

● 콜백함수(callback function)

 : 콜백함수는 직접 호출하는 함수가 아닌 어떤 특정 시점이나 조건을 만족 했을 때 호출될 수 있도록 라이브러리 함수의 인자로 전달되는 함수

  1) 완료 콜백 completion callback

  2) 에러 콜백 error callback

  3) 등등..

 

- 콜백함수는 pure function 이다.

- functional programing

  1) first-class function(object) : 인자로 쓰거나 return value로 가능

  2) higher order function : 순서가 다른것보다 우선되는 함수, 독립성이 보장되는 함수

  3) pure function                        --> 1,2,3 같은 의미로 쓴다.

 

콜백함수를 매개변수(인자)로 다루는 함수를 라이브러리 함수라고 한다. -> 콜백

 

Math.ceil() = 소수점 올림

Math.floor() = 소수점 버림

Math.round() = 소수점 반올림

 

● 클로저(Closure)

- 반환된 중첩 함수

- 실행될 코드와 함수의 유효 범위, 다시 말해 함수의 호출 객체와 연결된 스포크 체인의 조합

- 함수의 지역변수에 대한 중첩함수를 만들면 비공개 속성과 접근자 메소드를 구현해 겍체지향의 정보은닉을 실현할 수 있음

 

- 클로저가 필요한 이유

var contact = {   name : "홍길동"   phone : "010-1111-1111" };   contact.name = "이순신"            ㄴ public   var date = {   year : 2016   month : 7   day : 8 }   date.month = 12 date.day = 32 //없는 날은, 못하게 해야 함.

 

 

- 클로저 예제(1)

 

   

 

변수 changeDate는 date()가 리턴한 function(y, m, d)를 갖게되고 이를 통해서 데이터를 설정할 수 있다.

그렇기에 우리는 date()에 있는 year, month, day에는 직접 접근할 수 없고 값을 복사하여 데이터를 접근할 수 있다. (= 정보은닉 구현)

 

 

- 클로저 예제(2)

               

 

makeId()의 참조 카운터가 id() 호출할때마다 증가하는데 이는 null 해줄 필요 없이 가비지 컬렉션에 의해 자동으로 처리된다.

 

/* 5장 객체 */

 

- 객체 이름 : 값  --> 연관배열

 

* Hash Algorithm?

[내용]                            [16진수 값]

 비번 -> SHA (암호화)         -> Hash Value(암호화된 비번)

 파일 -> MD5 (파일 위변조 검사)-> checksum(특성 값)

 

- Hash는 암호화의 기본 알고리즘. 해쉬 값으로 내용을 찾을 수 없다. 역이 설립이 안됨.

※ Input -> Hash function -> Ouput (Ouput으로 Input을 유추할 수 없다)

 

● 자바스크립트의 객체

- Hash를 기반으로하고 있다 (이유? 접근속도가 빠르니까)

- 자바스크립트의 객체는 이름과 값으로 구성된 프로퍼티들의 집합, 이름이 붙어있는 데이터 값들의 모음이며, 복합 타입이다.

- 자바스크립트의 모든 객체는 Object 생성자 함수를 상속하며, 공통으로 Object에서 상속받은 프로퍼티와 메소드가 있음.

- 같은 내용이면 같은 해쉬값을 갖는다.

 

 

 

 

 

● 객체를 정의하는 방법

1) 객체 리터럴을 사용 -> {   }

[★★★★★] 모든 함수객체는 prototype 객체를 가진다

var empty = { } ; 와 var empty = new Object( );는 같다

 

2) 생성자 : 객체를 생성하는 방법

- 원하는 타입의 객체를 생성하고 초기화하지 위해서 필요한 거이 생성자 함수를 직접 정의하는 것

- 생성자 함수는 객체를 만드는 틀

- 생성자의 이름은 new 연산자와 생성자 함수 호출을 통해 만들게 될 객체의 타입을 분명하게 나타내는 것이 좋음

- 생성자의 이름 첫문자를 대문자로 하는 이유도 다른 함수와 구별하기 위함

- 생성자 함수의 역할은 this 키워드가 나타내는 객체를 초기화할 뿐 다른 역할은 수행하지 않는 것을 원칙으로 함

- 생성자 함수의 구현 시 return 문은 사용하지 않음

 

※ 일반함수에서의 this는 window 이다

 

3) new 연산자, 생성자 함수, 그리고 this

- new 연산자가 생성하는 객체에는 아무런 프로퍼티도 정의되어 있지 않음

- 객체 생성이후 new 연산자는 지정된 생성자 함수를 호출하여 명시된 인자들을 전달하고 방금 생성된 새 객체도 this 키워드를 통해 전달 함

- 생성자 함수는 이 this 키워드를 사용하여 나름대로의 새 객체를 초기화하는데 이 때 this는 생략할 수 없음

 

4) 생성자 함수를 이용한 객체 생성

- 자바스크립트가 제공하는 기본 생성자 함수들이 아닌 사용자 정의 생성자 함수를 이용해 객체를 생성하는 방법도 기존의 방법과 동일

- new 연산자 뒤에 생서자 함수의 호출이 따라와야 한다.

 

● 객체의 멤버 정의

undefined 상태에서는 추가적인 작업을 하면 안된다. 추가적인 작업을하면 Error 발생

prtotype은 공유되는 영역이기 때문에 여기에 method를 설게한다

객체가 이미 만들어져있으면  객체가 만들어진 시점에따라 method가 반영이 안될수도 있고 될수도 있어서 불안전한 코드이다.

-> 이를 극복하기 위해서 프로포타입 객체를 사용한다.

 

● 프로토타입 객체

- 자바스크립트의 모든 객체는 프로토타입이라 불리는 객체를 내부적으로 참조

- 프로토타입 객체의 실체는 new 연산자와 Object 생성자 함수 호출을 통해 생성한 Object 객체

- 객체는 프로토타입 객체이 있는 프로퍼티를 상속

- 프로토타입 객체를 이용하면 좀 더 효율적으로 메소드를 추가할 수 있음.

 

 

 

 

※ area()를 Rectangle에 생성하게 되면 생성한 객체마다 생기기 때문에 메모리 낭비가 발생하기 때문에 만들면 안됨.

/* Test Code */ var rect1 = new Rectangle(100, 120, 20, 30); var rect2 = new Rectangle(250, 300, 30, 50);   > rect1.constructor.prototype === rect1.__proto__ < true > rect1.constructor.prototype.constructor === Rectangle < true > rect1.__proto__.__proto__ === Object.prototype < true > rect1.__proto__.__ptoro__.constructor === Object < true > rect1.__proto__.__proto__.__proto__ < null > Object.constructor < function Function() { [native code] }

 

 

- 객체는 Object.__proto__ 가 null이 마지막

- 함수객체는 Function이 마지막

 

 

● prototype 프로퍼티

- new 연산자는 빈 객체를 성하고 해당 객체의 prototype 프로퍼티를 생성자 함수의 prototype 프로퍼티 값을 이용해 설정

- 모든 함수에는 prototype 프로퍼티가 있으며 함수가 정의될 때 생성되고 초기화 됨

- 프로토타입 객체는 생성자 함수와 연결되고 이 생성자 함수를 통해서 생성되는 객체들은 생성자 함수와 연결된 프로토타입 객체의 프로퍼티들을 똑같이 상송

- 프로토타입 객체가 메소드나 상수와 같은 프로퍼티들을 위치시키기에 적합한곳

 

Rectangle.prototype.area = function() {

  return this.width * this.height

} 

 

* 공유될 것은 prototype에다가 정의 

* 생성자는 다 함수로 만든 것임

* 함수 객체에만 protoype 프로퍼피가 있고, 모든 객체에는 __proto__

 

Object.prototype

Function.prototype

Rectangle

                                             < prototypes >

[번외]

Function.prototype 은 빈 함수 call(), apply(), bind()등이 있다

Function.__proto__ 는 빈 함수

Function.protoype.__proto__ 는 Object()

 

[최종 구조]

 

● constructor

- 모든객체는 constructor 를 가지고 있다.

- 자바스크립트의 모든 객체는 객체를 초기화하는데 사용하는 생성자 함수를 참조하는 constructor 프로퍼티를 가지고 있음

- constructor 프로퍼티를 이용해 객체의 타입을 판단할 수 있으며, 객체 생성도 가능

- instanceof 연산자는 constructor 프로퍼티 값을 사용해 객체의 타입을 판단

※ prototype chain에 대한 요약

- 모든 객체는 __proto__ 가 존재하고 함수 객체에는 prototype이 존재한다.

- __proto__는 constructor의 prototype의 객체를 가리킨다.

- 상수나 메서드는 프로토타입 객체에 둔다.

- 프로토타입은 자바스크립트에서 중요한 정보 -> 상속 메커니즘을 프로토타입 체인으로 구성한다. -> 핵심 컴포넌트

- 프로토타입은 상속을 이야기 한다.

- 프로토타입 객체에는 상수와 메서드를 넣어 둔다. -> 자바스크립트는 상수가 없다.-> 하지만 상수처럼 쓰이는 것을 넣어 둠 -> ECMAScript5 까지는 상수라는 것이 존재하지 않음 ECMAScript6 부터는 상수가 존재

- 자바스크립트의 상속을 이야기 할 때 사용

 

[링크]

www.zdnet.co.kr

www.bloter.net

http://javascript.crockford.com/private.html