typescript tutorial(2탄)

3. 함수

함수를 다른 함수의 인자로 넘길 수도 있고, 함수가 함수를 리턴하기도 하는 등 함수가 다른 문자열, 숫자 등의 값과 동일하게 취급된다. 때문에 함수는 자바스크립트 프로그래밍에서 가장 핵심적인 역할을 차지한다.

3-1. 기본 매개변수

[참고 1] 기본 매개변수 예제 1 (ES6)

→ ES6 이전 버전은 매개변수 값이 없으면 그거에 따른 예외처리를 해줘야하는 번거로움이 있었지만 ES6버전 이후부터는 1번째 줄에 기본 값을 선언하면 함수를 호출할 때 매개변수 값이 없어도 자동 세팅되어 [참고 1]과 같은 결과 값이 출력된다.

 

 

3-2. 화살표 함수

→ function () {...} (ES5 버전)에서의 내용이 더 간단하게 사용하기 위하여, () => {...}(ES6 버전)으로 변형됬다.

[참고 2] 화살표 함수 예제 1

→ getNames()를 호출하면 a.getName()은 javascript 로그 결과가, getName()은 undefined가 출력되는 것을 확인할 수 있는데, 이는 a.getNames()의 this는 a의 객체를 가르키므로 a.name인 javascript가 출력되는 것이고, getName()로 호출한 것의 this는 globalThis를 가르키므로 선언이 안되어있기 때문에 undefined가 출력된다.

 

[참고 3] 화살표 함수 예제 2

→ 화살표 함수와 function함수는 [참고 3]과 같이 다른 결과 값이 나온다.

 

this의 동작 이외에도 화살표 함수는 function 키워드를 이용해 선언한 함수와 다음의 차이점을 갖는다.

• 생성자로 사용할 수 없다.

• 함수 내에 arguments 바인딩이 존재하지 않는다.

• prototype 프로퍼티를 갖고 있지 않는다.

 

4. 템플릿 리터럴

4-1. 멀티라인 문자열

const a = `First line
              Second line`;
console.log(a); // First line
                   //               Second line

→ 백틱은 공백 및 줄바꿈을 모두 보존한다.

 

4-2. 문자열 치환

[참고 4] 문자열 치환 예제 1

→ ES5버전 이전에는 문자열 포매팅을 위한 이렇다할 기능이 없었다. ES6버전 이후 부터는 [참고 4]의 예제처럼 문자열 포매팅을 손쉽게 할 수 있게 대체되었다. 2번째 줄하고 5번째 줄의 차이를 보면 알것이다.