[패스트캠퍼스:5주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 2/5

5주차.Chapter 2

 

함수 복습

매개변수와 인수

 

x, y는 매개변수

1,3 / 4, 12는 인수

각 매개변수 자리에, 같은 자리에 넣은 인수가 들어간다.

따라서, 첫 console.log에서 x=1, y=3이고 두 번째에서 x=4, y=12이다.

 

 

return에 대하여

return이 선언된 줄에서 함수 동작이 끝난다.

따라서, 그 다음줄에 오는 코드는 실행되지 않는다.

(if 조건문으로 return을 넣은 경우는 예외)

 return 우측에 반환할 값을 꼭 넣지 않고, 코드를 종료시키는 용으로 사용할 수 있다.

 

return을 사용해 값을 반환하는 경우,

반환된 값을 사용하기 위해서 어떻게든 그 값을 우선 받아야 한다.

const a = 받을 함수; 혹은 함수(); 이런식으로

 

코드가 종료되어 console.log(y)가 동작하지 않음

함수에서 반환된 값 받기

 

arguments에 대하여

일반적이진 않지만

arguments라는 객체를 이용해, 매개변수를 넣지 않고, 인수의 순서로 선택해서 사용할 수 있다.

인수가 많은 경우에 사용한다고 한다.

argument[0] = 7, argument[1] = 3

 

---

 

화살표 함수

함수의 코드를 축약할 수 있다.

**익명함수에서만 사용이 가능하다.**

 

 

방법1

function (매개변수) => { 실행코드 }

fuction을 빼고, =>가 들어간다.

 

 

방법2

(매개변수) = { return }

함수 내부에 코드가 return 한 줄만 있는 경우 가능하다.

{}(중괄호)와 return을 뺀다.

 

 

방법3

(매개변수) => 반환코드;

매개변수가 1개 있는 경우 가능하다.()(소괄호)를 뺀다.

 

 

방법4

매개변수 => ({ key : value })

방법2와 방법3에서 객체데이터를 반환하기 위해서는

소괄호로 중괄호(객체 데이터에 사용하는 {})를 감싸준다.

 

---

 

즉시실행함수

(IIFE, Immediately-Invoked Function Expression)

함수를 만들자마자 실행시키고, 다시 실행시키지 않을 함수를 위해 사용한다.

방법1. (function () {})();

방법2. (function () {}());

둘 다 동일하게 동작한다.

주의할 점은, 즉시실행함수 이전 코드를 ;(세미콜론)으로 마무리해야지

그렇지 않으면 브라우저에서 에러가 발생한다.

 

---

 

호이스팅(Hoisting)

함수 선언부가 유효 범위 최상단으로 끌어올려지는 현상

**기명함수만 가능하다.**

함수선언을 맨 밑에 모아서 적으면 보기도 좋고,

코드를 읽는데도 덜 복잡하다.

익명함수는 호이스팅이 적용되지 않는다.

---

타이머 함수

setTimeout(), setInterval(), clearTimeout(), clearInterval()

익명함수, 기명함수로 사용 가능하다.

 

setTimeout(함수, 시간) : 일정 시간 후 함수 실행

clearTimeout(종료할 timeout 함수명) : 설정된 Timeout 함수를 종료

3초가 지나면 'Heropy!'가 console.log에 나타난다. (setTimeout)

h1El 변수에 담긴 태그를 3초가 지나기 전에 클릭하면 나타나지 않는다. (clearTimeout)

 

 

setInterval(함수, 시간) : 시간 간격마다 함수 실행

clearInterval() : 설정된 Interval 함수를 종료

3초가 지날 때 만다 계속해서 'Heropy!'가 console.log에 나타난다. (setInterval)

h1El2 변수에 담긴 태그를 클릭하면 더 이상 나타나지 않는다. (clearInterval)

 

---

 

콜백(Callback)

함수의 인수로 사용되는 함수

이 코드를 실행하면 'Heropy!'를 먼저 입력하긴 했지만 3초 뒤에 코드가 실행되는 코드라서

'done!'이 먼저 콘솔창에 나타나고 'Heropy!'가 나타난다.

제대로 된 순서로 'Heropy!'가 먼저 나오고 'done!'이 나오게 하기 위해

callback 함수를 사용할 수 있다.

 

함수선언 함수이름(매개변수) { 콜백함수 }

함수실행(함수() {})

 

1. 함수를 하나 만든다.

2. 매개변수를 넣어준다 (콜백함수를 부를 때 쓸 것)

3. 콜백함수가 실행됐으면 하는 위치에 '매개변수()' 넣기

4. 함수실행() 안에 콜백함수를 넣어준다. ( 함수실행(()=>{}) or 함수실행(function(){}) )

 

 

**

함수는 실행되면서 속도를 지연시키고 메모리를 잡아먹기 때문에

호출하는 수는 최대한 적게 해야 좋다.

**

---

 

자바스크립트 클래스

메모리의 효율적인 관리를 위해 '자바스크립트 클래스'를 만들어 사용한다.

객체데이터를 만들 때, 

같은 내용의 함수가 다른 객체데이터 내부에 들어있으면

같은 내용의 함수이더라도 계속해서 메모리에 저장을 한다.

이때 사용할 수 있는 게 '자바스크립트의 클래스'이다.

 

세 getFullName 메서드가 같지만 세 번 메모리에 저장된다.

 

 

생성자 함수(prototype)

자바스크립트 클래스를 만들기 위해 생성자 함수에 대해 알고 있어야 한다.

생성자 함수로 데이터 만들기

1. 함수를 만든다.

(일반 함수와 생성자 함수를 구분하기 위해 함수명은 파스칼표기법으로 작성한다.)

2. 생성자 함수를 만들기 위해 변수를 선언하고, new를 붙여 함수실행을 넣어준다.

const 변수명 = new 생성자함수명(인수, 인수);

:

이렇게 함수를 실행시키는 것처럼 한 줄로 쉽게 객체 데이터가 생성된다.

 

일반 함수는 함수 코드를 동작시키고, 생성자 함수는 객체 데이터를 생성시킨다. 
(데이터 덩어리를 생성시키는 용의 함수-라고 나는 이해했다.)

 

인스턴스에 함수 할당하기

객체 데이터에는 prototype이라는 속성이 있는데,

여기에 함수를 할당해서 이것을 메서드로 사용할 수 있다.

*배열 데이터에도 prototype 속성이 있다.

*함수는, function name() {}; name();

*메서드는 ' . (마침표)'로 연결되는 것들

 

함수 할당은

생성자함수.prototype.함수명 = function () {};

이렇게 작성하면 된다.

:

이렇게 되면 객체를 여러 개 만들어도 생성자 함수에 함수를 한 번만 선언, 할당해서

메서드로 여기저기서 사용할 수 있다.

:

이 모든 걸 통틀어서  '자바스크립트 클래스'라고 한다.(?)

 

 

사용된 용어 정리

생성자함수 : 하나의 객체 데이터를 생성한다.

리터럴 : 복잡한 코드를 거치지 않고 기호만으로 손쉽게 데이터를 생성하는 개념(예. [배열], {객체}, "문자")

인스턴스 : 생성자 함수의 인스턴스. 생성자 함수로 만든 데이터가 할당된 변수(예. heropy, amy, neo)

 

---

 

this

일반 함수는 호출/실행 위치에 따라 this 정의

화살표 함수는 자신이 선언된 함수 범위에서 this 정의

 

예제1

일반함수 해석

(함수 실행 위치 먼저 확인하기)

(정상적인 값을 갖는 예시)

mi 객체 안에 normal 메서드가 어디서 어디에 연결돼서 보면,

mi라는 객체에 연결되어 있고,

그 mi 객체 안에 name이라는 key와 value 'mi'가 있어서

console.log에 'mi'가 찍힌다.

 

화살표함수 해석

(선언된 함수를 감싸고 있는 일반 함수 찾기)

(undefined값을 갖는 예시)

arrow가 선언된 곳을 보면,

그냥 mi 객체 안에 arrow라는 key 안에 있다.

화살표함수를 감싸고 있는 일반함수를 찾을 수 없다.

그래서 undefined.

 

 

예시2

일반함수 해석 

(함수 실행 위치 먼저 확인하기)

(비정상적인 값을 갖는 예시)

함수가 setTimeout의 내부에서 실행되고 있다.

그래서 setTimeout이 this인 것 같은데,

console.log에는 빈칸이 나타난다.

아무튼 정상적으로 'mi'가 나타나지 않는다.

 

 

화살표함수 해석

(선언된 함수를 감싸고 있는 일반 함수 찾기)

(정상적인 값을 갖는 예시)

화살표 함수를 감싸고 있는 메서드 function () {}이

화살표 함수의 함수 범위이고,

그 함수가 mi 객체의 메서드이기 때문에

this = mi 객체로 돼서

console.log에 'mi'가 나타난다.

 

:

normal : function () {}

축약형으로 이렇게 작성이 가능하다.

---

생성자 함수를 ES6 Class로 작성하기

기존 작성법

 

ES6 Class 작성법

constructor라는 내부함수를 정의해서 작성한다.

메서드를 내부에 작성한다.

 

---

 

클래스 확장/상속

운송수단에 관련된 클래스 생성

 

class 덧붙일클래스명 extends 어디에붙일지 {}

Bicycle/Car 라는 클래스를 Vehicle 클래스에 덧붙여 사용한다.

super() 위치에서 Vehicle의 클래스가 호출된다. 

Vehicle에 매개변수가 2개 들어가 있는 것처럼,  Bicycle/Car에도 그 2개를 넣어줘야 한다.

 

확장을 위해 만든 클래스에는

Vehicle이 갖고 있지 않은 코드를 추가해서 넣을 수 있다.

 

 

생성자함수, 클래스, this가 어려웠다...😭