기타
isArray
어떤 변수가 배열인지 판별하는 데 사용되는 메소드
주어진 인자가 Array인지 아닌지를 판별하고, 그 결과를 불리언(boolean) 값으로 반환
기본문법
Array.isArray(value)
- value가 배열이라면 true, 아니라면 false를 반환함.
<script>
alert(Array.isArray({})); // false
alert(Array.isArray([])); // true
</script>thisArg
여러 고차 함수(higher-order functions)에서 사용되는 선택적 매개변수.
함수 내부에서 this 키워드의 값을 정의하는 데 사용.
즉, thisArg는 콜백 함수 내에서 this가 가리킬 객체를 지정할 수 있게 해줌.
기본문법
array.method(function(element, index, array) { 함수 본문 }, thisArg);
- array.method : map(), forEach(), filter() 등의 배열 메소드 중 하나.
- function(element, index, array): 배열의 각 요소에 대해 실행될 콜백 함수.
element는 현재 처리 중인 요소, index는 그 요소의 인덱스, array는 메소드가 호출된 배열.- thisArg: 콜백 함수 내부에서 this로 사용될 값.
arr.find(func, thisArg);
arr.filter(func, thisArg);
arr.map(func, thisArg);
//thisArg는 선택적으로 사용할 수 있는 마지막 인수
//여기서 thisArg는 func의 this가 됨.밑에 예시를 보자.
<script>
let army = {
minAge: 18,
maxAge: 27,
canJoin(user) {
return user.age >= this.minAge && user.age < this.maxAge;
}
};
let users = [
{age: 16},
{age: 20},
{age: 23},
{age: 30}
];
// army.canJoin 호출 시 참을 반환해주는 user를 찾음
let soldiers = users.filter(army.canJoin, army);
alert(soldiers.length); // 2
alert(soldiers[0].age); // 20
alert(soldiers[1].age); // 23
</script>let army변수가 선언됨.
객채안에 속성과 값들이 있고,canjoin이라는 메서드가 있다.(객체 내에 정의된 함수는 메소드임)
그안에 this는 army를 가르키는중.
let soldiers = users.filter(army.canJoin, army); 이부분에서 콜백 함수로 army.canJoin을 사용, thisArg로 army를 전달하고 있음.
오롯히 canJoin 메서드 안에서 사용되는 this가 army 객체를 가리키도록 하기 위함임.
이렇게 하면 army.canJoin 함수 내부에서 this 키워드가 army 객체를 참조하게 되어,
this.minAge와 this.maxAge가 정상적으로 army 객체의 속성을 참조하게 됨
soldiers는 filter메소드를 이용해서 조건을 통과하는 요소들을 모아 새로운 배열을 만듬.
canJoin(user) {
return user.age >= army.minAge && user.age < army.maxAge;
}
let soldiers = users.filter(army.canJoin);이렇게 해도 결과값은 같으나, this를 사용하는 것이 코드의 재사용성,유연성,유지보수측면에서
좋다고 함. 현재는 피부로 와 닫는 게 없다 보니 이해를 잘 못하겠음.
너무 여기에 매몰되면 안 될거 같아서 일단 패스.
some과 every
some : 배열의 요소 중 적어도 하나가 주어진 함수에 의해 정의된 조건을 만족하는지를 검사.
만약 배열의 어떤 요소라도 해당 조건을 만족한다면 true를 반환하고, 그렇지 않다면 false.
기본문법
array.some(function(element, index, array) { 조건 검사 로직 }, thisArg);
- element : 배열에서 현재 처리되고 있는 요소.
- index (선택적) : 배열에서 현재 처리되고 있는 요소의 인덱스.
- array (선택적) : some 메서드가 호출된 배열.
- thisArg (선택적) : 콜백 함수 내에서 this로 사용할 값.
<script>
const array = [1, 2, 3, 4, 5];
const Number = array.some(element => element % 2 === 0);
// 배열 내에 짝수가 적어도 하나 이상 있는지 확인,
// %는 나누기가 아니라 나머지값을 구하는 기호
console.log(Number); // true, 왜냐하면 배열 내에 2와 4가 짝수이기 때문.
</script>every : 배열의 모든 요소가 주어진 테스트 함수를 만족하는지를 검사.
배열 내의 모든 요소들이 해당 함수에 의해 제시된 조건을 만족할 경우에만 true를 반환하며,
그렇지 않은 경우에는 false를 반환
기본문법
array.every(function(element, index, array) { 조건 검사 로직 }, thisArg);
- element : 배열에서 현재 처리되고 있는 요소.
- index (선택적) : 배열에서 현재 처리되고 있는 요소의 인덱스.
- array (선택적) : some 메서드가 호출된 배열.
- thisArg (선택적) : 콜백 함수 내에서 this로 사용할 값.
<script>
const array = [1, 2, 3, 4, 5];
const Number = array.every(element => element < 10);
// 배열 내의 모든 요소가 10보다 작은지 확인
console.log(Number); // true, 왜냐하면 배열의 모든 요소가 10보다 작기 때문.
</script>fill
배열 내의 시작 인덱스부터 끝 인덱스까지(끝 인덱스는 포함되지 않음)
모든 요소를 정해진 값으로 채움
만약 시작 인덱스와 끝 인덱스가 지정되지 않으면, 전체 배열을 해당 값으로 채움
원본 배열을 변경. 즉, 배열 자체가 변경되며 새로운 배열을 반환하지 않음.
테스트 데이터를 생성하거나, 배열의 모든 요소를 특정 값으로 초기화할 때 유용하게 사용
기본구문
array.fill(value, start, end)
- value: 배열을 채울 값.
- start (선택적): 시작 인덱스. 기본값은 0.
- end (선택적): 끝 인덱스. end는 미포함(exclusive)이며, 기본값은 배열의 길이(array.length).
<script>
const array = [1, 2, 3, 4, 5];
array.fill(0);// 배열의 모든 요소를 0으로 채움
console.log(array); // [0, 0, 0, 0, 0]
const array2 = [1, 2, 3, 4, 5];
array2.fill(8, 1, 3);// 인덱스 1부터 3까지의 요소를 8로 채움 (3번 인덱스는 포함되지 않음)
console.log(array2); // [1, 8, 8, 4, 5]
</script>copyWithin
배열 내부에서 요소를 복사하여 다른위치에 붙여넣고,
배열의 크기를 변경하지는 않고 원본 배열은 수정됨.
배열 내의 요소를 재배치할 때 사용
기본문법
array.copyWithin(target, start, end)
- target: 복사된 요소가 삽입될 위치의 인덱스입.
만약 target의 값이 배열의 길이보다 크거나 같으면 아무변화 없음.- start (선택적): 복사를 시작할 위치의 인덱스.
기본값은 0. start가 음수라면, 배열의 끝에서부터의 위치를 나타냄.- end (선택적): 복사를 끝낼 위치의 인덱스. end 위치의 요소는 포함되지 않음(exclusive).
end가 생략되면, 배열의 끝까지 복사됨.
end가 음수라면, 배열의 끝에서부터의 위치를 나타냄.
<script>
const array = [1, 2, 3, 4, 5];
array.copyWithin(0, 3, 5);// 인덱스 0의 위치에 인덱스 3에서 4까지의 요소를 복사해서 붙여넣습니다.
console.log(array); // 결과: [4, 5, 3, 4, 5]
</script>const fruits = ['바나나', '오렌지', '사과', '망고'];
fruits.copyWithin(2, 0); //인덱스 2번위치에 인덱스0부터 끝요소까지 복사후 붙여넣기.
//배열의 크기를 변경하지는 않기 때문에 바나나 오렌지까지만 바뀜
console.log(fruits); // ["바나나", "오렌지", "바나나", "오렌지"]const numbers = [1, 2, 3, 4, 5];
numbers.copyWithin(-2, -3, -1);//-2번 인덱스위치에 -3인덱스부터 -1까지 복사후 붙여넣음
//뒤에서부터는 인덱스 0출발아니고 바로 -1임.
console.log(numbers); // [1, 2, 3, 3, 4]