[TypeScript]map/reduce/forEachg함수, rest 매개변수, spread 연산자, 디스트럭쳐링(destructuring), class, export, import

map함수

기존 배열의 요소를 하나씩 읽어들여, 콜백함수를 거쳐 새로운 배열을 생성

var arr=[1,2,3]; //var arr2:number[]={1,2,3};
var test=arr.map(function(x){
     return x+x;  //[2,4,6]
})
var arr3=arr.map((a,i)=>{//a:배열의 요소, i:인덱스(0부터 시작)
    console.log(a);
    return a+i;
})
console.log('c=>',c);//c=> [ 1, 3, 5 ]

//-------------동일-------------
var arr2=[2,4,6];
const test=arr2.map(x=>x+x);//es6문법
console.log('test->',test);//[4,8,12]

 

 

reduce함수

function add(x,y){
	return x+y;
}
var arr=[1,2,3,4];
//형식)reduce(호출할 함수명,임의의 매개변수);
var result=arr.reduce(add,1);
console.log('result->',result);//11 //(1,1)=>(2,2)=>(4,3)=>(7,4)=>11

 

 

forEach함수

var arr=[1,2,3,4];
arr.forEach(function(a,i){
    if(a===3){
        console.log(a+":"+i);//3:2
    }
});

 

 

rest 매개변수

매개변수값을 제대로 전달받지 못했을때 디폴트 매개변수값을 지정해준다

function plus(x=5,y=5){  
    return x+y;
}
console.log('plus(1,2)->',plus(1,2));//3
console.log('plus()->',plus());//10

 

 

spread 연산자

... 형식 

동적으로 매개변수 받기 가능

function test( ...arr){
  console.log(Array.isArray(arr))
  console.log('arr=>',arr);
}
test(10) 
/* true
   arr=> [10] */
test(1,2,3.4);
/* true
   arr=> [1, 2, 3.4] */

//여러 매개변수와 함께 쓰일때, spread연산자는 맨마지막에 위치해야 한다
function test2(param,param2,...param3){
    console.log('param=>',param); //5
    console.log('param2=>',param2) //6
    console.log('param3->',param3); //[7, 8, 9]
 }
 test2(5,6,7,8,9);

 

 

디스트럭쳐링(destructuring)

배열의 요소를 분리하여 각각 다른 변수에 저장

const arr=['a','b','c']
const [one,two,three]=arr;
console.log(one,two,three);//a b c

[a2,b2,c2]=[4,5,6];
console.log(`a2값 ${a2} b2값 ${b2} c2값 ${c2}`);
//a2값 4 b2값 5 c2값 6

 

let t1,t2,t3;
[t1,t2,t3=4]=['a',1];//a 1 4

[t1,t2]=[1,null];//값을 저장하지 않아도 자리수를 맞춰준다
                 //1 null

[t1,t2=10]=[1,null];//1 null

 

//함수, 객체 예시 
const {prop1:p1,prop2:p2}={prop1:'a',prop2:'b'};
console.log({prop1:p1,prop2:p2});//a b

//값이 대응되어 저장
function test(){
    const one=1,two=2,three=3,four=4;
    return {one,two,three,four}; //객체 리턴
}
const {one,four}=test();//{one,two,three,four}
console.log(one,four);//1,4

 

 

class

typescript는 class 작성 가능하지만 es6 문법에서는 클래스를 작성할 수 없다.

생성자는 한개만 생성할 수 있다

class Test{
    name;
    //멤버변수를 선언하지 않고도 생성자의 매개변수형태로 구현이 가능하다
    constructor(public age:numebr,public addr:string){}
}

 

 

함수 호출 시 매개변수를 받지 않아도 되게 하는 기능

매개변수명 뒤에 ?를 붙인다.

함수를 호출할때 해당 매개변수에 값을 넣어주지 않아도 에러가 발생하지 않는다

function test(id:number,name:string,addr?:string){
  console.log('id->',id,'name=>',name);
}
test(1,"Kim");//id-> 1 name=> Kim mail_id=> undefined
test(2,"Park","park@daum.net");//id-> 2 name=> Park mail_id=> park@daum.net

 

 

export

자주 사용하는 상수나 함수, 클래스를 간편하게 부를 수 있도록 도와준다

상수, 함수, 클래스명 앞에 export키워드를 줘도 되고, 한번에 줘도 상관없다

export키워드로 공유한 상수, 함수, 클래스는 import 하여 사용할 수 있다

*es6 문법에서는 멤버변수를 생성자를 통해서 초기화한다

export const pi=3.14;
export function add(x){
    return x+x;
}
export class Person{
    name:string;
    constructor(name){
        this.name=name;
    }
}
//-------------동일-------------
export {pi,add,Person};

    

 

import

export키워드로 공유한 상수,함수,클래스를 불러와 해당 파일에서 사용할 수 있다

특정값만 불러올 수도 있고, 별칭을 부여하여 사용할 수도 있다

//불러올 파일의 상대경로(확장자생략)
//import pi from './exp';
import * as cal from './exp';

console.log(cal.pi);
console.log(cal.add(10));
//형식)const 객체명=new 클래스명(매개변수,,,)
console.log(new cal.Person('Kim'));