TS
✨ let을 이용한 변수 선언
let 선언자는 ES6 표준에서 추가되었으며, 호이스팅을 방지하기 위해 등장했다.
호이스팅이란? JS ES5 이하에서 변수의 유효 범위를 블록 스코프로 처리하지 않음으로써, 지역 스코프에 선언된 변수가 전역 스코프에 선언된 변수에 영향을 미치는 것
TS는 변수를 선언할 때 타입을 추가할 수 있는 타입 언어이다.
변수명 뒤에 : 을 사용해서 타입을 지정해준다.
let variable: string[] = ["a","b","c"]제네릭 타입 형식도 지정할 수 있다.
let num:Array<number> = [1, 2, 3];✨ 유니언 타입
유니언 타입은 2개 이상으로 입력된 타입에 대해 하나의 타입으로 정의하며, |키워드로 타입을 나열하는 형태로 선언한다.
var x: string | number = 1;
var y: boolean | string = true;유니언 타입은 둘 중 하나의 타입만 유효하면 할당이 이루어진다. 위 코드의 실행 결과는 다음과 같다.
colsole.log(typeof x, x) // number 1
colsole.log(typeof y, y) // boolean true문자열로 할당하고 싶다면 "" 안에 내용을 넣어준다. 허용되지 않은 타입이 입력되면 컴파일 단계에서 에러 메시지를 확인할 수 있다.
함수의 매개변수와 반환에서 유니언 타입을 사용할 수도 있다. 괄호 () 안이 매개변수, : 뒤가 반환값이다.
function typeCheck(p: string|number): string|number{
return p;
}
let type1 = typeCheck(1);
let type2 = typeCheck("1");
console.log(typeof type1, type1);
console.log(typeof type2, type2);✨ 디스트럭처링 (Destructuring)
배열이나 객체에서 데이터를 선택적으로 추출할 수 있는 자바스크립트 할당식으로 ES6에 포함되었다.
var person =['james', 21];
let [name, age] = person;
cosole.log(`
이름: ${name}
나이: ${age}
`);지난 포스팅에서 공부했던 템플릿 문자열을 이용했다. 백틱 문자를 사용해서 개행 문자 없이 여러 줄의 문자열을 입력할 수 있다. ${} 표현식 안에는 해석 가능한 모든 대상 (변수,수식, 함수 반환값)이 들어갈 수 있으며, 위 코드에서는 변수를 삽입했다.
✨ 배열 메소드
타입스크립트는 ES5 상위 표준의 특징까지 포함하므로 배열 메소드도 사용할 수 있다.
Array.isArray()
Array.prototype.every()
Array.prototype.filter()
Array.prototype.forEach()(1) filter 메소드
Array.filter(콜백함수);filter() 메소드에서 배열을 필터링 한다는 것은 배열에서 특정 조건에 부합하는 요소만 거른다는 의미이다. filter() 메소드의 매개변수로 필터링 조건을 포함한 콜백 함수를 전달한다.
아래 예제는 양수만 반환하는 콜백함수 positiveNumber를 매개변수로 준 것이다.
function positiveNumber(value){
return value > 0;
}
var result = [-4, 0, 5, -2, 9, 1].filter(positiveNumber);
console.log(result);(2) forEach 메소드
Array.forEach(콜백함수);forEach() 메소드는 배열을 순회하는 역할을 한다. 순회 가능한 배열을 대상으로 순회를 처리하는 함수를 외부에 정의하고 해당 메소드의 이름을 콜백 함수로 지정한다.
아래 예제는 배열의 인덱스와 값을 출력한다.
function printArray(element, index, array)[
console.log('[' + index + '] = ' + element);
}
[1, 2, 3, 'four'].forEach(printArray);
// 익명 함수 버전
[1, 2, 3, 'four'].forEach(function(element, index, array) {
console.log('[' + index + '] = ' + element);
}익명함수란? 이름이 없는 함수로, 변수에 함수의 코드를 저장하는 대신 함수명을 사용하지 않는다. 익명함수는 변수명을 함수명처럼 사용해서 함수를 호출하거나 변수값을 이동시키는 데 사용한다. 변수 없이 주로 즉시 실행이 필요한 경우에도 사용한다. 일반 함수는 호이스팅이 가능하지만 익명함수는 호이스팅이 불가능하다. 즉 선언부보다 호출부가 뒤에 위치해야 한다.
✨ 화살표 함수
ES6부터 화살표 함수를 이용해 익명함수를 더 간단한 형태로 표현할 수 있다. 화살표 함수는 객체나 기능을 변수 형태로 표현하거나 익명 함수를 간략히 표현하기에 유용한 기능이다.
//익명함수
function(){
};
//화살표함수
() => {}익명함수는 특정한 이름만 없을 뿐 function 이라는 키워드를 포함했는데, 화살표함수에서는 그마저도 없애버렸다. 아무런 키워드 없이 파라미터를 ()에 넣는 것으로 시작한다.
//기본 함수
var pow = function(x) {return x*x};
console.log(pow(3));
//익명 함수 (다중 라인)
var pow = (x) => {
return x*x;
};
console.log(pow(3));
//익명 함수 (축약 형식)
var pow = (x) => x*x;
console.log(pow(3));
//변수 없이 바로 실행 가능한 함수
((x)=> {
console.log(x*x);
})(3);화살표 함수를 필터 메소드에 적용할 수 있다. 다음 예제는 배열에서 짝수를 찾는 예제이다.
var num_list = [1, 2, 3, 4, 5];
num_list = num_list.filter(n => {
return n%2 === 0;
});
console.log(num_list);
===는 JS에서 엄격한 비교를 위한 연산자이다.==를 쓸 경우 자동으로 유형 변화 후 비교하므로 상당히 혼란을 줄 수 있다. (참고로null==undifined는 true이다).===는 피연산자의 값과 원래 타입을 모두 비교하여 boolean 형식으로 반환한다. 부정의 경우(!연산자 추가) 틀린 경우 true를 반환한다. (참고로 Nan은 어느 것과도 같지 않다.)
✨ 게터함수와 세터함수
ES6부턴 게터와 세터함수로 프로퍼티 설정과 출력 시 특정 처리를 가능하게 한다. 함수지만 다른 함수 내부에 속성처럼 할당할 수 있다.
{set 속성이름(매개변수 선언) {...}}
{get 속성이름() {...}}세터 함수는 값을 할당 받기 대문에 선언 시 매개변수를 선언해주어야 한다. 게터함수는 get 키워드를 통해 값을 가져오기 때문에 매개변수는 없지만 반환 값을 갖는다.
//리터럴 객체에 get과 set 함수 선언
var obj = {
msg: '';
get hello(){
return this.msg+" world";
},
set hello(value){
this.msg = value;
}
};
obj.hello="hello";
console.log(obj.hello);
// 실행결과: hello world리터럴 객체이기 때문에 get 함수에 명시적 타입을 선언하지 않았다. 리터럴 객체에 선언하는 게터 함수에는 반환형을 허용하지 않는 이유) get 함수에 반환형을 선언하려면 클래스 기반으로 변경해야 한다.
//클래스 기반 get과 set 함수 선언
Class Hello{
private _hello: string;
get hello(): string{ // 반환형 string으로 선언
return this._hello+" world";
}
set hello(name: string){ // 파라미터 타입 string으로 선언
this._hello = name;
}
}
var m = new Hello();
m.hello = "hello";
console.log(m.hello);