5.자바스크립트 실행 순서, 값 복사 등

 

자바스크립트 실행 순서

 

- 함수중 웹 브라우저에 처리를 부탁하는 함수가 있다.

웹 브라우저가 처리하고, 처리가 완료되었다는 것을 JavaScript에 알려줌.

현재 실행중인 다른 코드의 실행이 끝나기 절에는 실행이 안됨.

 

ex) 타이머 함수, 웹 요청 함수

alert('A');

setTimeout(function() {

alert('B');

}, 0 );

alert('C');

 

출력 : A, C, B

timeout은 타이머 함수로, alert함수들이 끝나기 전에는 실행이 되지 않음.

 

 

 

 

 

 

화살표 함수 - 기존의 코드를 쉽게 사용하기 위해 ECMA6에서 추가.

 

사용법

( ) => { }

; 한 줄이라면 중괄호를 생략해도 됨. return을 쓰지 않아도 리턴함

 

ex)

<script>

const multiply = (a, b) => a*b;

alert(multiply(1,2) );

alert(multiply(3,4) );

</script>

 

 

 

익명함수와 비슷하나, this 키워드의 의미가 다름

 

익명 함수 : 함수 자체에 바인딩되어 있는 객체

화살표 함수 : 전역 객체

 

바벨도 화살표 함수를 익명함수로 단순 변환함.

this키워드를 주의해서 사용해야 함.

 

화살표 함수 사용조건

- 프로토타입을 사용하지 않고 ECMA6에서 추가된 클래스를 사용.

- jQuery의 문서 객체 조작에서 this가 아니라 event.currentTarget을 사용

 

전개연산자 ' ... '

; 함수 또는 배열에 적용.

 

ex) 가변 매개변수 함수

 

function test(...numbers){

alert(numbers[0]);

alert(numbers[1]);

alert(numbers[2]);

 

}

 

test(1,2,3);

 

 

 

 

옵션 객체 : 함수의 매개변수로 전달하는 객체.

 

 

 

JavaScript의 값 복사

 

- 기본자료형(= 깊은복사, 숫자,문자열, 불) : 값만 복사.(독립적임)

=> 임시 변수를 만들어 값을 복사하고 대입하면 깊은복사가 된다.

=> 반복문을 쓰게 되고, Clone이라고 생각하면 된다.

 

 

- 참조복사(=얕은복사, 객체) : 주소를 복사.(종속적임)

객체를 저장하면, 객체를 메모리 어딘가에 만들고, 그 주소를 저장한다.

=> Array를 복사하면, 원본 값이 변경하면, 복사한 변수의 내부의 값도 변경된다. (적절한 표현인지는 모르겠다)

 

- 깊은 복사를 하고싶은 경우는 underscore.js 의 clone() 메서드를 사용하면 된다.

 

 

 

전개연산자 & 배열 테크닉

- ECMA6에서 추가

 

 

- 배열 복제 by 전개연산자

ex)

const originalArray = [1,2,3,4,5] ;

const newArray = [...originalArray];

// 깊은 복사임. 출력해 보면 값이 다른 것을 알 수 있다.

 

 

- 배열 병합

 

ex1)const arrayA = [1,2,3,4,5];

const arrayB = [52, 273, 103, 32, 57];

 

const newArray = [...arrayA , ...arrayB];

alert(newArray);

 

출력 : 1, 2, 3, 4, 5, 52, 273, 103, 32, 57

 

ex2)

const originalArray = [52, 273, 103, 32, 57];

const newArrayA = [1, 2, 3, 4, 5, ... originalArray];

const newArrayB = [...originalArray, 1, 2, 3, 4, 5];

 

ex3) 바벨을 활용 한다면, 변환 때 stage를 활성화 하여.

----------------------------------------------------------------

const originalObject = {

name : '윤인성'

birthDay : new Date(2016, 12 - 1, 9). toString()

};

const newObject = {...originalObject };

---------------------------------------------------------------

위와 같이 사용할 수 있다.

 

 

 

 

 

 

 

7. 생성자 함수

; 객체를 생성할 때 사용하는 함수

 

ex)

----------------------------------------------------------------

function 생성자 함수 이름 () {

this.속성이름

this.속성이름

}

생성자 함수 이름. prototype. 메서드 이름

-------------------------------------------------------------------

 

- 관행 : 함수 이름은 대문자로 시작

ex)XMLHttpRequest()

 

- 객체[ 인스턴스] 생성 : new키워드

 

ex) function Student(){}

var student = new Student();

 

- 관련용어

인스턴스 : 생성자 함수를 기반으로 생성한 객체

프로토타입 : 생성자 함수로 생성한 객체들이 공동으로 갖는 공간.

: 일반적으로 메서드를 선언하는 공간.

 

7.1 this키워드

- 생성자 함수 안에서 객체의 속성을 지정하는 키워드.

 

ex1)속성 생성

function Student(name, korean, math, english, science) {

this.이름 = name;

this.국어 = korean;

this.수학 = math;

this.영어 = english;

}

var student = new Student('윤하린', 96, 98, 92);

 

 

ex2)메서드 생성

function Student(name, korean, math, english){

this.이름 = name;

this.국어 = korean;

this.수학 = math;

this.영어 = english;

 

this.getSum = function(){

return this.국어 + this.수학 + this.영어 ;

};

 

this.getAverage = function(){

return this.getSum()/4;

};

 

this.toString = function () {

return this.이름 + '\t' + this.getSum() + '\t' + this.getAverage();

};

}