Web App. 개발을 위한 객체지향 JavaScript [2일차 - 1]

함수 호이스팅(Function Hoisting)

함수 호이스팅은 함수의 선언이 실행 부분보다 뒤에 있더라도 자바 스크립트 엔진이 함수 선언을 끌어 올려 실행하는 것을 뜻한다. 예제를 보면 왼쪽은 함수 호이스팅을 통해 정상적인 값을 출력한다. 하지만 오른쪽의 예제는 변수에 함수 선언문 형태로 정의한 방식으로 함수가 아닌 변수 이기때문에 호이스팅 되지 않는다.

add(2,3); function add(x,y){    return x + y; }	add(2,3) var add = function(x,y){    return x+y; }
5	undefined

* HTML은 순차적으로 파일을 읽어 온다. head에 script 파일들이 있을 경우 이를 모두 읽어온 후 실행 되어진다.

이는 응답속도 저하를 가져올 수 있다. 최근에는 body의 제일 마지막에 script등을 추가해 화면이 보인 후 script를 읽어오는 방식을 사용하기도 한다. 이때 주의 할 점은 필요한 함수들은 미리 선언해야 하는 것이다.

* Chrome DevTools에 가면 Memory Profiling 등 많은 정보를 얻을 수 있다. 

컴파일 언어와 스크립트 언어

 컴파일 언어에서 함수는 parameter와 return type을 설정해 주어야 한다. 하지만 script에서는 설정하지 않고 있다. 

컴파일 언어가 견고하고 잘 짜여 있지만 진입 장벽이 높고 유지 보수가 어려울 수 있다. 하지만  스크립트의 경우 진입 장벽이 낮고 유연하지만 컴파일, 빌드를 하지 않기 때문에 오류 등을 알 수 없어 주의가 필요하다.

컴파일	스크립트
int x = 1; double y = 3.14; String name = "이름"; int doSomething(int x, int y) { .... }; double doSomething(double x, double y) { ... }	var x = 1; var y  = 3.14; var name = "이름"; function doSomething(x,y){ ... }

이처럼 타입이 명확하지 않기 때문에 함수등에 에러가 발생해도 조용히 넘어가거나 결과가 이상한 증상들이 나타날 수 있는데 이런 것을 "우아하고" 유연하게 처리하는게 프로그램 스킬이라 할 수 있을 것 같다.

배열

두 가지 방식으로 초기화 할 수 있다.

1. var menu = ['에스프레소', '카페라떼'];

2. var menu = new Array('에스프레소', '카페라떼');

menu[0], menu[1] 과 같이 접근 할 수 있다.

Array 는 pop과 push의 동작도 한다. 이때 주의 할점은 array는 pop을 하면 마지막 값을 리턴한다는 것이다. 

push로 넣으면 마지막에 추가 되고, pop을 하면 마지막 값을 반환하고 삭제 한다.

* indexOf('찾는 값'): 처음 부터 시작해서 첫 번째 찾는 index를 return한다.

* lastIndexOf('찾는 값'): 뒤 부터 시작해서 첫 번째 찾는 index를 return한다.

  ==> 두개 모두 값을 찾지 못하면 -1을 리턴한다.

* reverse(): 역순으로 정렬한다.

* sort([func]): 요소를 오름 차순으로 정렬[비교 함수를 넣을 수도 있다])

* length: 배열의 사이즈

* toString(): [요소, 요소, ...] 방식으로 문자열로 치환

* unshift(data1, ..): 배열의 선두에 지정 요소를 추가한다.

* join(del): 배열 내의 요소를 구분자로 연결하여 return 함.('하나, 둘, 셋' 과 같이 string을 return 한다.)

* slice(start[,end]): start 부터 [end] 번째 이전 까지의 요소를 빼낸다. (주의: end 번째 이전 까지이다)

=> 배열 함수는 다음 페이지를 참조하자(http://www.w3schools.com/jsref/jsref_obj_array.asp)