Array.slice() - IMMUTABLE
이 메소드는 array의 특정 부분을 잘라서 새로 반환을 해 주는 메소드이다.
- arr.slice(start, end)
start엔 시작할 인덱스를, end엔 마지막 인덱스를 작성한다.- start의 값이 음수라면 뒤에서부터 내려간다.
- start의 값이 인덱스보다 크다면, 빈 배열을 반환한다.
- slice는 end를 제외하고 추출한다.
- slice의 end 값이 음수라면 배열의 끝에서부터의 길이를 나타낸다.
- end가 생략되면 start부터 끝까지 반환한다.
- end가 배열의 길이보다 길다면 끝까지 반환한다.
- 기본 값은 0이다
이 메서드는 이뮤터블 메서드로, 원본에 전혀 영향을 주지 않기 때문에 새로운 변수를 통하여 값을 주어야 한다.
newArr = ['가','나','다'];
arr = ['가'];
//arr에 나, 다를 추가한 배열을 만드려면?
newArr = arr.slice(); // ['가']
newArr.concat(['나','다');
console.log(newArr);
//newArr = ['가','나','다']만약, 기존 어레이에서 일부만 빼서 복사하고 싶다면?
arr = [1,2,3,4,5];
newArr = arr.slice(-3,4);
//newArr = [3,4];
newArr.push('나는한글');
console.log(newArr);
//[3,4,'나는한글'];콜백 함수
함수는 값이기 때문에 어디에든 담길 수 있다.
변수, 인자, 리턴 값으로 담길 수 있는데, 어디에서나 쓰일 수 있기 때문에 first class citizen이라고 말한다.
a = { b: function() {} } ;
함수는 객체에 담기게 되면 이름이 바뀌는데,
객체 안에서 변수 역할을 하는 것을 속성이라고 하고,
변수 안의 값이 함수인 것은 메소드라고 한다.물론 배열의 값으로도 담길 수가 있다.
그래서 이것을 일컫는 말이 있는데, 이것이 바로 콜백 함수다.
콜백 함수란, 어떠한 함수가 수신하는 인자가 함수인 경우를 일컫는다. 왜 이것을 인자로 받느냐? 어떠한 것을 동작할 수 있는 것에 대한 방법을 사용자한테 넘기고 싶기 때문이다.
클로저
클로저는 외부 함수에 접근이 가능한 내부 함수를 일컫는 말이다. 콜백 함수가 곧 클로저라고 생각할 수도 있다.
function a() {
let computer = 'LG';
console.log(computer);
function b() {
let notebook = 'SAMSUNG';
console.log(notebook);
}
return b;
}
펑션 b가 사용할 수 있는 스코프는 b, a, 전역스코프 모두 포함이다.
let outer = a();
outer; // LG
outer(); // SAMSUNG
a()(); // SAMSUNG
a(); //LG , 아직 리턴하지 않은 function b();이것을 유용하게 사용할 수 있는 두 가지 방법이 있다.
- 커링
- 클로저 모듈 패턴
커링은 함수 하나에 n개의 인자를 받는 대신, n개의 함수를 생성해서 각각의 인자를 받을 수 있게 만드는 것이다.
이 방법의 좋은 점은, 기존 함수의 값을 고정해 두고, 안에 있는 함수의 값을 바꿀 수 있다는 것이다.
function htmlMaker(tag) {
let startTag = '<' + tag + '>';
let endTag = '/<' + tag + '>';
return function(content) {
return startTag + content + endTag;
}
}
//이런 식으로 쓰면, htmlMaker의 tag를 고정시켜서 템플릿처럼 변환을 하게 하고, content만 변환시킬 수 있는 함수가 만들어진다.
div = htmlMaker('div');
div('안녕하세요?');
//<div>안녕하세요?</div>클로저 모듈 패턴이란, 변수를 스코프 안에 가두어 함수 밖으로 노출시키지 않게 하는 방법인데, 전역 변수를 쓰지 않기 위해 만들어진 방안이다.
function makerCounter() {
let parameter = 0;
return {
plus: function() { parameter++; },
minus: function() {parameter--; },
getNum: function() {return parameter}
}
}
//이런 함수가 있다고 했을 때,
let countNum = makerCount(); //plus() minus() get()
countNum.plus(); // (더해지기만 함)
countNum.get(); // 1매개변수
매개변수와 전달인자
function a (매개변수) {
console.log(매개변수)
};
a(전달인자); //전달인자만약, 전달인자의 갯수가 유동적이라면?
- rest parameter를 사용함. (ES6)
매개변수가 배열 형태로 전달된다.
function a (...num) {
console.log(num)
}; // [3, 5, 7, 9]
a(3, 5, 7, 9);
- argument 키워드를 사용할 수도 있다. (ES5)
매개변수가 배열 형태로 전달되지만, 이것은 진짜 배열이 아니다. 유사배열이라고 한다.
function a() {
console.log(argument)
}; // [3, 5, 7, 9]
a(3, 5, 7, 9);
진짜 배열이 아니므로 배열 메소드를 사용할 수 없다.매개변수에 기본 값을 사용하고 싶을 경우?
function a (des, dep = 'ICN') {
return console.log(des, dep)
}
a('OSK'); //OSK,ICN만약, 기본 값이 든 매개변수가 중간에 있다면?
function a (des = 'ICN', dep) {
return console.log(des, dep)
}
a(undefined,'OSK'); //ICN,OSK
// undefined를 넘겨 주면 기본 값으로 처리한다.