[TypeScript] 기본2 arrow, indexOf, reduce, rest, des

/*
arrow.ts

화살표 함수 => 자바의 람다함수(->) 기능상 똑같다.
형식) var or let or const 변수명=function(매개변수명:자료형){처리구문}
*/

let po = function(x:number) {
    console.log("x=>"+x);
    return x * x;
}
console.log(po(10)); 

/*
형식2) const 변수명=(매개변수1, 매개변수2,...)=>{처리 구문}
매개변수 한개면 () 생략 가능, 함수의 내용이 한문장이상 { } 처리
매개변수의 자료형을 쓰지 않으면 any(어떠한 자료형도 ok) -> 권장하지 않는다.  반드시 자료형을 쓰는 것이 좋다.
*/

const po2 = x => x * x;
console.log(po2(20));

//tsc arrow.ts
//node arrow.js

/*
자바스크립트에서 가장 많이 사용하는 함수(배열과 연관) 

1. indexOf 함수(검색할 때 사용)
*/

var str:string[]=["테스트","연습","리액트"];
var isExist=false; //찾았는지 유무

for(var i=0; i<str.length; i++){
    if(str[i]==="연습"){
        isExist=true;
        console.log('데이터 찾음=>',str[i]);
    }else{
        console.log('데이터 못찾음=>',str[i]);
    }
}

// 배열.indexOf("찾고자하는 값")!== -1(못찾으면 -1을 리턴)

var isExist2=(str.indexOf("연습")!==-1)
console.log('isExist2=>',isExist2);

// 2.filter()=>JSON객체중에서 특정한 값만 추출 => 반환
var arr=[
    {"name":"apple","count":2},
    {"name":"orange","count":5},
    {"name":"banana","count":3},
    {"name":"melon","count":10}
];
var newArr=arr.filter(function(item){ 
    //반환시켜줄 수 있는 익명함수를 콜백하여 newArr에 넣어준다. 
    return item.name==='orange' //return item.count===2 
    //return 매개변수(객체).특정한키명 === '찾을 값'
})
console.log('Filter result=>',newArr);

//tsc arrow2.ts
//node arrow2.js

 

/*
 3. map함수 => 기존의 배열의 요소들을 하나씩 읽어들여서 계산 후 
            길이가 같은 새로운 배열을 하나 만들때 사용하는 함수
 */

 var arr2=[1,2,3] //var arr2:number[]={1,2,3,}
 var po3=arr2.map(function(x){
     return x+x;
 })
 console.log(po3); //[2,4,6]

 const arr3=[6,7,8]
 const po4=arr3.map(x=>x+x)
 console.log('po4->',po4);//[12,14,16]

 const a=[3,4,5,6,7]
//  const c=a.map(function(v,i){ // v 배열의 항목, i 인덱스번호
//     console.log(v)
//     return v+1;
//  })
 const c=a.map((v,i)=>{
     console.log(v)
     return v+1;
 })

 // 4.reduce()함수 => 콜백함수이용 => 새로운 배열을 리턴 (앞의 매개변수, 뒤의 매개변수)

 function addRounded(pre,current){
     return pre+current;
 }

 var numbers=[1,2,3,4]
 //const or let 변수(새로운 배열)=기존의 배열명.reduce(함수명) or (함수명,매개변수)
 var result=numbers.reduce(addRounded,1) //1은 첫번째 매개변수가 된다.
 console.log('result=>',result) //11

 // 5.forEach => for문 
 const array=[1,2,3]
 array.forEach(function(v,i){
     if(v===3){
         console.log(v+":"+i)
     }
 })
 //tsc arrow3.ts
 //node arrow3.js
 
 
 //터미널 결과
 /*
 Windows PowerShell
PS C:\Users\user\Desktop\vsc\src> tsc arrow3.ts
PS C:\Users\user\Desktop\vsc\src> node arrow3.js
[ 2, 4, 6 ]
po4-> [ 12, 14, 16 ]
3
4
5
6
7
result=> 11
3:2
PS C:\Users\user\Desktop\vsc\src> 
 */

/*
화살표함수를 작성하면 안되는 경우
 => 객체를 생성하고 메서드를 내부에서 작성하는 경우
*/

const obj3={
    name:'Lee',
    //sayHello():()=>console.log(`Hi ${this.name}`)  --> name에 빨간줄이 생긴다.
    sayHello(){ //function 생략
        console.log(`Hi ${this.name}`)
    }
}
obj3.name='Kim' //객체명.키명=새로운 값
obj3.sayHello()

 

/*
 5. rest함수 
 함수를 작성하고 매개변수를 전달할 때 -> 만약에 전달하지 못하면 에러유발
 만약에 매개변수를 전달 받지 못할경우에는 내부적으로 디폴트 매개변수값을 지정할 수가 있다. 
 => rest 매개변수 (정상적으로 매개변수값이 전달되면 적용X)
 */

 function plus(x=8,y=9){
     return x+y;
 }
 console.log('plus()=>',plus())
 console.log('plus(1,2)=',plus(1,2))
//1. spread 연산자->react에서 많이 사용하는 연산자(...배열명)=>동적배열
function ktest(...abc){
    console.log(Array.isArray(abc))
    //Array.isArrya(배열명)->배열이명 true 아니면 false
    console.log('abc->',abc)
}
ktest(1,2,3,4,5,6,7)

//2. 주의할점(매개변수를 전달받을 때 순서가 정해져 있다.)
//spread 연산자는 맨 마지막에 위치
function ktest2(param,param2, ...abc){
    console.log('param->',param)
    console.log('param2->',param2)
    console.log('abc->',abc)
}
ktest2(7,8,9,10,11,12)//param=7, abc=8,9,10,11,12
ktest2(13,14,15)//param=13, param2=14, abc=15
console.log('============================================')
// function ktest4(...abc,param1,param2,param3){ //에러발생 

// }

//tsc rest.ts
//node rest.js


// 터미널화면
rest.ts:31:17 - error TS1014: A rest parameter must be last in a parameter list.

31 function ktest4(...abc,param1,param2,param3){ //에러발생
                   ~~~
Found 1 error.

PS C:\Users\user\Desktop\vsc\src> tsc rest.ts
PS C:\Users\user\Desktop\vsc\src> node rest.js
plus()=> 17
plus(1,2)= 3
true
abc-> [
  1, 2, 3, 4,
  5, 6, 7
]
param-> 7
param2-> 8
abc-> [ 9, 10, 11, 12 ]
param-> 13
param2-> 14
abc-> [ 15 ]
============================================

(function ktest4(...abc,param1,param2,param3) spread연산자가 맨 앞에 있을 경우 에러

 

 

/*
 6. des
 배열 디스트럭처링 -> 배열의 각각의 요소를 분리 -> 각각의 다른 변수에 저장시키는 방법
 */

 let karr=['a','b','c']
 let one=karr[0] //let one='a';
 console.log(one,karr[1],karr[2])

 const karr2=['d','e','f']
 /*
 let one1=karr2[0]
 let two2=karr2[1]
 let three3=karr2[2]
*/
 //형식) const [변수1,변수2,변수3]=배열명
 const [one1,two2,three3]=karr2
 console.log(one1,two2,three3)

 let a2,b2,c2 //변수를 ,로 구분해서 나열
 [a2,b2,c2]=[4,5,6]
 console.log(`a2값 ${a2} b2값 ${b2} c2값 ${c2}`)

 // tsc des.ts
 // node des.js

 

/*
des2.ts 
배열+함수, 객체에서도 사용이 가능
형식) const {키명:값, 키명2:값2,...}={키명:저장할값,키명2:저장할값2,...}
*/

const {prop1:p1,prop2:p2}={prop1:'a',prop2:'b'} //p1='a' p2='b'
console.log({prop1:p1,prop2:p2}) //a,b

// 객체 => default value값 설정이 가능
const {prop1,prop2,prop3='cc'}={prop1:'aa',prop2:'bb'}

// 함수를 이용해서 값을 저장시킬 수 있다.
function margin(){
    const left=1, right=2, top=3, bottom=4
    return {left,right,top,bottom} //객체로 만들어서 반환
}
const {left,bottom}=margin()
console.log(left,bottom) //1,4

// tsc des2.ts
// node des2.js