6.arrow.ts
먼저 알아두실 사항으로
- [es6] 는 클래스 보다는 함수위주로 작성됩니다.
- [TypeScript] 는 자료형이 추가되었고, class 작성이 가능합니다.
익명함수
화살표 함수를 배우기 전에 익명함수부터 알아보겠습니다.
형식 ) var(혹은 let) 변수명 = function(매개변수명 : 자료형) {
처리구문
}
변수가 함수의 이름을 대신하게 되고, 이 변수를 사용해서 함수의 기능을 실행할 수 있습니다.
자바스크립트를 배우신 분이라면, 함수를 만들때 사용하는 일반적인 방법임을 아실겁니다.
사용해봅시다
var pow_ = function(x:number){ //function pow_(x:number)
console.log('x=>'+x);
return x*x;
}
console.log(pow_(10));
/*
매개변수의 자료형을 쓰지 않으면, 어떤 자료형이든 받을 수 있는 any(default)
하지만 권장하지 않는다. 자료형은 명시하자
*/
const test_=x=>x*x;
console.log(test_(20)); 
※ 화살표 함수는 이 방식과 비슷합니다
arrow function : 화살표함수
얘는 꼭 알아두고 넘어가셔야합니다.
형식) const 변수명=(매개변수명 : 자료형) => {
처리구문
}
const test_=x=>x*x;
console.log(test_(20)); 
7. arrow2_.ts : indexOf 함수() / filter() 함수
위에서 배운 함수생성법을 활용해서 몇가지를 알아보겠습니다.
(1) indexOf()
: 어떤 특정한 값을 찾기 위해서 사용합니다.
형식) 배열.indexOf('찾는값')> 못찾으면 -1 리턴
사용해봅시다
// 먼저 배열하나를 선언해 줍니다.
let str_: string[] = ["테스트", "연습", "es6"];
let isExist_ = false; // 판단 결과를 저장하기 위한 변수입니다.
// 일단 indexOf를 사용하지 않고 직접 찾아봅니다.
for (var i = 0; i <= str_.length; i++) {
if (str_[i] === "연습") { // === 를 사용해 직접 찾아줍니다.
isExist_ = true;
console.log('데이터 찾은 인덱스:', i);
} else {
console.log('데이터 못찾은 인덱스:', i);
}
}
// indexOf를 사용하면, 한줄로 간단하게 찾을 수 있습니다.
let isExist2_ = (str_.indexOf('연습') !== -1);
// 못찾으면 -1을 리턴한다는 걸 기억해주세요
console.log('isExist2_:', isExist2_);
(2) filter()
: JSON 객체중에서 특정한 값만 추출(=filter)해서 반환시켜주는 함수입니다.
보통 콜백으로 많이 사용합니다.
형식) 배열.filter(function(item)){
처리구문(콜백)
}
사용해봅시다
// 이번에도 배열을 선언합니다. JSON 객체들을 갖고 있는 배열입니다.
let arr_ = [{ "name": "apple", "count": 2 },
{ "name": "orange", "count": 5 },
{ "name": "banana", "count": 16 },
{ "name": "orange", "count": 3 }];
let newArr_ = arr_.filter(function(item){
// return item.count === 2 : count가 2인 객체를 리턴
return item.name === 'orange' // : name이 orange인 객체를 리턴
})
// item이 arr_ 내부의 객체입니다.
// 매개변수로 쟤를 받고, 그 객체를 검사해서 name = orange 인 개체를 찾아서 리턴 -> newArr_로 들어가게됩니다.
console.log(newArr_);
// name이 orange인 객체 2가지가 콘솔에 표시될것입니다.
8. arrow3_.ts : map 함수() / reduce() 함수
(1) map()
: 기존의 배열의 요소들을 하나씩 읽어들여서 계산후 길이가 같은 새로운 배열을 만들어주는 함수입니다. 마찬가지로 callback 형태로 많이 쓰입니다.
형식) 배열.map(function(매개변수)){
return 반환값;
}
사용해봅시다
let arr2_=[1,2,3];
let test_ = arr2_.map(function(x){
return x+x;
})
// 여기서의 x도 arr_의 각 값들입니다.
// 내부적으로 forEach 로 각 개체들의 값을 반복시키면서 처리합니다.
console.log(test_); // [2,4,6]
const arr3_ = [6,5,8];
//화살표 함수를 사용해서 간단하게 표시해봅니다.
const test4_ = arr3_.map(x=>x+x);
console.log(test4_); [12,10,16]
let a_ = [3,4,5,6,7];
let c_ = a_.map(function(v,i){
// v는 각 값, i는 인덱스 번호입니다.
console.log('v:',v);
return v+3;
// 배열의 길이만큼 반복되며 값을 출력합니다.
// 또한 배열의 각 값에 3을 더해서 리턴해서 새로운 배열 c_를 생성합니다.
})
console.log('c_:',c_);
(2) reduce() + (forEach)
: 배열을 순회하며 인덱스 데이터를 줄여가며 어떠한 기능을 수행합니다.
여기서는 새로운 배열을 리턴합니다. callback 형태로 기능합니다.
얘는 좀 어렵습니다. 이해가 안되시면 손으로 직접 써보시면 머리로도 이해가 되실 겁니다.
형식) const 변수(새로운 배열) = 기존배열.reduce(함수명) or (함수명,매개변수);
구글링을 해보면,
형식 ) array.reduce(callbackFunction(previousValue, currentValue, currentIndex, array_), initialValue);
이렇게도 나옵니다.
위의 형식에 얘기한 reduce의 매개변수는 callback함수와 initialValue입니다.
initialValue
: callback함수를 호출할때 첫 previousValue 값으로 사용되는 값입니다.
이 값으로 인해, 선택적 사용이 가능해집니다.
(1) initialValue값이 있을 경우
: 이 값이 callbackFunction의 첫번째 previousValue 값이 되고 currentValue가 배열의 첫번째 인자가 됩니다.
(2)없을 경우
: 첫번째 previousValue에는 배열의 첫번째 값이 됩니다.
callback함수
: 4개의 매개변수를 선택적으로 받을 수 있습니다.
previousValue 는 배열의 첫번째 인자, 혹은 initialValue가 있을경우 initialValue.
currentValue 는 배열 내 현재 처리되고 있는 값.
currentIndex 는 배열 내 현재 처리되는 있는 값의 인덱스.
array_는 현재 호출된 배열이 들어갑니다.
사용해봅시다 (주석을 잘 읽어주세요)
/* addRounded 라는 함수를 만듭니다. 두개의 매개변수를 받으며
해당 매개변수 두개를 더해서 반환합니다.*/
function addRounded_(pre, current){
return pre+current;
}
//활용하기 위한 배열 1개를 선언합니다.
let numbers_=[1,2,3,4];
//함수를 실행해서 결과값을 담을겁니다.
let result_ = numbers_.reduce(addRounded_,1);
console.log('result_',result_);
// (1) 1 은 콜백함수인 addRounded에 들어갈 previousValue(initialValue)입니다.
// (2) 1은 addRounded의 이전 값으로 들어가게 됩니다.
// (3) addRounded_(1,1) > (numbers 의 첫번째 값 1, 현재 index 번호)
// (4) addRounded_는 2를 반환합니다.
// (5) 계산한 값 > 다음번 항목의 매개변수로 들어감(previousValue)
// 진행과정을 보면, (1,1) > (2,2) > (4,3) > (7,4) > 11(결과값)을 리턴
// 5. 비슷한 기능으로 forEach 함수가 있습니다.
// > for문 대신에 사용하는데, 성능은 더 좋습니다.
const array_ =[1,2,3];
array_.forEach(function(v,i){
if(v===3){ // 값이 3이면, 그때의 값과 인덱스 번호를 출력하도록 합니다
console.log(v+":"+i); //1. 배열의 항목 2. 배열의 인덱스번호
}
})
9.arrow4_.ts
JSON 표기법 형태의 객체 내부에서는 함수를 작성할 때, 화살표 함수를 사용할 수 없습니다.
사용해봅시다
const obj3_ ={
name:'devtaco',
// JSON 객체 내부에 함수 작성이 가능합니다.
sayHi(){ //앞에 function 생략되어 있습니다. function sayHi()
console.log(`Hi ${this.name}`); // this(현재 생성된 객체)
/*
sayHi : () => console.log(`Hi ${this.name})
이런식으로의 작성이 불가능합니다.
*/
}
}
obj3_.name='PARK';
obj3_.sayHi();
