1. 배열의 반복
let sum = 0 을 하지 않는다면
sum = undefined + 10 = NaN 이 나옴
2. 배열 메서드
1) typeof 대신 Array.isArray();
typeof 뒤에 배열을 넣으면 object 값이 나온다.
Array.isArray([])
true
빈 배열을 넣어도 당연히 true가 나온다.
2) console.table(array);
console.table(arr);을 넣으면 배열을 시각화가 된 표로 볼 수 있다.
3) 배열.push(뒤에 넣을 값);
배열.pop(); // 제일 뒤의 index 삭제
앞에다 추가하고 삭제하기
4) 배열.unshift(앞에 넣을 값);
/ 배열.shift(); // 제일 앞의 index 삭제
5) 배열.indexOf(찾을 값);
배열 안에 특정 엘리먼트가 존재하는 지의 여부
있다면 인덱스 값 도출
없다면 -1 도출
6) 배열.includes(찾을 값);
hasElement라는 유틸리티 함수를 만들자
사실 배열.includes(찾을 값); 이라는 내장된 메서드가 있다.
인덱스 값이 포함되어 있지 않은 boolen 값만 도출함.
7) Array.prototype.splice()
splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다.
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
매개변수
배열의 변경을 시작할 인덱스입니다. 배열의 길이보다 큰 값이라면 실제 시작 인덱스는 배열의 길이로 설정됩니다. 음수인 경우 배열의 끝에서부터 요소를 세어나갑니다(원점 -1, 즉 -n이면 요소 끝의 n번째 요소를 가리키며 array.length - n번째 인덱스와 같음). 값의 절대값이 배열의 길이 보다 큰 경우 0으로 설정됩니다.
deleteCount Optional배열에서 제거할 요소의 수입니다. deleteCount를 생략하거나 값이 array.length - start보다 크면 start부터의 모든 요소를 제거합니다. deleteCount가 0 이하라면 어떤 요소도 제거하지 않습니다. 이 때는 최소한 하나의 새로운 요소를 지정해야 합니다.
item1, item2, <em>...</em> Optional배열에 추가할 요소입니다. 아무 요소도 지정하지 않으면 splice()는 요소를 제거하기만 합니다.
하나도 제거하지 않고, 2번 인덱스에 "drum" 추가
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2, 0, 'drum');
// myFish is ["angel", "clown", "drum", "mandarin", "sturgeon"]
// removed is [], no elements removed
하나도 제거하지 않고, 2번 인덱스에 "drum"과 "guitar" 추가
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2, 0, 'drum', 'guitar');
// myFish is ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
// removed is [], no elements removed
var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
var removed = myFish.splice(3, 1);
// removed is ["mandarin"]
// myFish is ["angel", "clown", "drum", "sturgeon"]
2번 인덱스에서 한 개 요소 제거하고 "trumpet" 추가
var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
var removed = myFish.splice(2, 1, 'trumpet');
// myFish is ["angel", "clown", "trumpet", "sturgeon"]
// removed is ["drum"]
0번 인덱스에서 두 개 요소 제거하고 "parrot", "anemone", "blue" 추가
var myFish = ['angel', 'clown', 'trumpet', 'sturgeon'];
var removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue');
// myFish is ["parrot", "anemone", "blue", "trumpet", "sturgeon"]
// removed is ["angel", "clown"]
var myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon'];
var removed = myFish.splice(myFish.length - 3, 2);
// myFish is ["parrot", "anemone", "sturgeon"]
// removed is ["blue", "trumpet"]
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(-2, 1);
// myFish is ["angel", "clown", "sturgeon"]
// removed is ["mandarin"]
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2);
// myFish is ["angel", "clown"]
// removed is ["mandarin", "sturgeon"]8) Array.prototype.slice()
slice() 메서드는 어떤 배열의 begin 부터 end 까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환한다. 원본 배열은 바뀌지 않는다.
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2));
// Expected output: Array ["camel", "duck", "elephant"]
console.log(animals.slice(2, 4));
// Expected output: Array ["camel", "duck"]
console.log(animals.slice(1, 5));
// Expected output: Array ["bison", "camel", "duck", "elephant"]
console.log(animals.slice(-2));
// Expected output: Array ["duck", "elephant"]
console.log(animals.slice(2, -1));
// Expected output: Array ["camel", "duck"]
console.log(animals.slice());
// Expected output: Array ["ant", "bison", "camel", "duck", "elephant"]
구문
arr.slice([begin[, end]])
매개변수
0을 시작으로 하는 추출 시작점에 대한 인덱스를 의미한다. 음수 인덱스는 배열의 끝에서부터의 길이를 나타낸다. slice(-2) 는 배열에서 마지막 두 개의 엘리먼트를 추출한다. begin이 undefined인 경우에는, 0번 인덱스부터 slice 한다. begin이 배열의 길이보다 큰 경우에는, 빈 배열을 반환한다.
end Optional추출을 종료 할 0 기준 인덱스이다. slice 는 end 인덱스를 제외하고 추출한다. 예를 들어, slice(1,4)는 두번째 요소부터 네번째 요소까지 (1, 2 및 3을 인덱스로 하는 요소) 추출한다. 음수 인덱스는 배열의 끝에서부터의 길이를 나타낸다. 예를들어 slice(2,-1) 는 세번째부터 끝에서 두번째 요소까지 추출한다. end가 생략되면 slice()는 배열의 끝까지(arr.length) 추출한다.
만약 end 값이 배열의 길이보다 크다면, slice()는 배열의 끝까지(arr.length) 추출한다.
설명
slice()는 원본을 대체하지 않는다. 원본 배열에서 요소의 얕은 복사본을 반환한다. 원본 배열의 요소는 다음과 같이 반환 된 배열에 복사된다:
- 객체 참조(및 실제 객체가 아님)의 경우, slice()는 객체 참조를 새 배열로 복사합니다. 원본 배열과 새 배열은 모두 동일한 객체를 참조합니다. 참조 된 객체가 변경되면 변경 내용은 새 배열과 원래 배열 모두에서 볼 수 있습니다.
- String 및 Number 객체가 아닌 문자열과 숫자의 경우 slice()는 문자열과 숫자를 새 배열에 복사합니다. 한 배열에서 문자열이나 숫자를 변경해도 다른 배열에는 영향을 주지 않습니다.
새 요소를 두 배열 중 하나에 추가해도 다른 배열은 영향을 받지 않는다.
예제
다음 예제에서 slice()는 myCar에서 newCar라는 새 배열을 만듭니다. 두 가지 모두 myHonda 객체에 대한 참조를 포함합니다. myHonda의 색상이 자주색으로 변경되면 두 배열 모두 변경 사항을 반영합니다.
// Using slice, create newCar from myCar.
let myHonda = { color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2 } }
let myCar = [myHonda, 2, 'cherry condition', 'purchased 1997']
let newCar = myCar.slice(0, 2)
// Display the values of myCar, newCar, and the color of myHonda
// referenced from both arrays.
console.log('myCar = ' + JSON.stringify(myCar))
console.log('newCar = ' + JSON.stringify(newCar))
console.log('myCar[0].color = ' + myCar[0].color)
console.log('newCar[0].color = ' + newCar[0].color)
// Change the color of myHonda.
myHonda.color = 'purple'
console.log('The new color of my Honda is ' + myHonda.color)
// Display the color of myHonda referenced from both arrays.
console.log('myCar[0].color = ' + myCar[0].color)
console.log('newCar[0].color = ' + newCar[0].color)
스크립트를 실행하면 다음과 같은 기록을 남깁니다.
myCar = [{color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2,
'cherry condition', 'purchased 1997']
newCar = [{color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2]
myCar[0].color = red
newCar[0].color = red
The new color of my Honda is purple
myCar[0].color = purple
newCar[0].color = purple
배열형 객체
slice() 메서드를 호출하여 배열형 객체와 콜렉션을 새로운 Array로 변환할 수 있습니다. 단순히 Function.prototype.bind()를 사용해 객체에 slice()를 바인딩 하면 됩니다. 대표적인 "배열형 객체"의 예시는 함수 내의 arguments입니다.
function list() {
return Array.prototype.slice.call(arguments);
}
let list1 = list(1, 2, 3); // [1, 2, 3]
Function.prototype.call() 메서드를 사용해서도 바인딩을 할 수 있으며, Array.prototype.slice.call 대신 더 짧게 [].slice.call로 작성할 수도 있습니다.
아무튼, 다음과 같이 bind()를 사용해 줄일 수 있습니다.
let unboundSlice = Array.prototype.slice
let slice = Function.prototype.call.bind(unboundSlice)
function list() {
return slice(arguments)
}
let list1 = list(1, 2, 3) // [1, 2, 3]
9) Array.prototype.shift()
shift() 메서드는 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환한다. 이 메서드는 배열의 길이를 변하게 한다.
const firstElement = array1.shift();
console.log(array1);
// Expected output: Array [2, 3]
console.log(firstElement);
// Expected output: 1
구문
arr.shift()
반환 값
배열에서 제거한 요소. 빈 배열의 경우 undefined 를 반환한다.
설명
shift 메서드는 0번째 위치의 요소를 제거 하고 연이은 나머지 값들의 위치를 한칸 씩 앞으로 당긴다. 그리고 제거된 값을 반환한다. 만약 배열의 length가 0이라면 undefined를 리턴 한다.
shift는 의도적인 일반형태로써; 이 메서드는 배열과 유사한 형태의 객체에서 호출 하거나 적용 할 수 있습니다. 연속된 일련의 마지막 항목을 나타내는 길이 속성을 가지고 있지 않은 객체의 제로베이스 수치 속성에는 의미 있는 작동을 하지 않을 수 있습니다. (Objects which do not contain a length property reflecting the last in a series of consecutive, zero-based numerical properties may not behave in any meaningful manner.)
예제
while 반복문 안에서 shift() 사용하기
shift() 메서드는 while 문의 조건으로 사용되기도 한다. 아래 코드에서는 while 문을 한번 돌 때 마다 배열의 다음 요소를 제거하고, 이는 빈 배열이 될 때까지 반복된다.
var names = ["Andrew", "Edward", "Paul", "Chris" ,"John"];
while( (i = names.shift()) !== undefined ) {
console.log(i);
}
// Andrew, Edward, Paul, Chris, John10) Array.prototype.join()
join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만든다.
경고: 요소가 undefined 또는 null이면 빈 문자열로 변환한다.
console.log(elements.join());
// Expected output: "Fire,Air,Water"
console.log(elements.join(''));
// Expected output: "FireAirWater"
console.log(elements.join('-'));
// Expected output: "Fire-Air-Water"
구문
arr.join([separator])
매개변수
배열의 각 요소를 구분할 문자열을 지정한다. 이 구분자는 필요한 경우 문자열로 변환된다. 생략하면 배열의 요소들이 쉼표로 구분된다. separator가 빈 문자열이면 모든 요소들이 사이에 아무 문자도 없이 연결된다.
반환 값
배열의 모든 요소들을 연결한 하나의 문자열을 반환한다. 만약 arr.length 가 0이라면, 빈 문자열을 반환한다.
예제
네 가지 다른 방법으로 배열 연결하기
다음 예제에서는 3개의 요소를 가진 배열 a를 만들고, 기본 구분자, 쉼표와 공백, 더하기 기호, 빈 문자열의 네 가지 구분자를 사용해 배열을 연결합니다.
var a = ['바람', '비', '불'];
var myVar1 = a.join(); // myVar1에 '바람,비,불'을 대입
var myVar2 = a.join(', '); // myVar2에 '바람, 비, 불'을 대입
var myVar3 = a.join(' + '); // myVar3에 '바람 + 비 + 불'을 대입
var myVar4 = a.join(''); // myVar4에 '바람비불'을 대입
11) string.split(separator, limit)
문자열을 일정한 구분자로 잘라서 각각의 문자열을 배열로 저장하기 위해서는 split() 함수를 사용한다.
string.split(separator, limit)
- split() 함수는 문자열을 'separator'로 잘라서 'limit' 크기 이하의 배열에 잘라진 문자열을 저장하여 리턴한다.
- separator
- 필수 아님
- 문자열을 잘라 줄 구분자 (문자열 또는 정규식)
- 값이 입력되지 않으면 문자열 전체를 배열에 담아서 리턴
- limit
- 필수 아님
- 최대 분할 갯수
예제 1. 파라미터를 입력하지 않을 경우
const str = "apple banana orange";
const arr = str.split();
document.writeln(arr); // apple banana orange
document.writeln(arr.length); // 1
- 파라미터로 아무것도 전달하지 않으면 문자열 전체를 length 1인 배열에 담아서 리턴한다.
예제 2. 단어별로(separator=" ") 잘라서 배열에 담기
const str = "apple banana orange";
const arr = str.split(" ");
document.writeln(arr.length); // 3
document.writeln(arr[0]); // apple
document.writeln(arr[1]); // banana
document.writeln(arr[2]); // orange- separator로 " "(스페이스)를 지정하면, 문자열을 구분자로 잘라서 각각의 잘라진 조각들을 배열에 저장하여 리턴한다.
예제 3. 글자별로(separator="") 잘라서 배열에 담기
const str = "a b c";
const arr = str.split("");
document.writeln(arr.length); // 5
document.writeln(arr[0]); // a
document.writeln(arr[1]); // ' '(space)
document.writeln(arr[2]); // b
document.writeln(arr[3]); // ' '(space)
document.writeln(arr[4]); // c- separator로 ""(length가 0인 문자열)을 전달하면 문자열을 각각의 문자별로 잘라서, 한 글자씩(공백 포함) 배열에 저장하여 리턴한다.
예제 4. 특정 구분자로 잘라서 배열에 담기
const str = "apple,banana,orange";
const arr = str.split(",");
document.writeln(arr.length); // 3
document.writeln(arr[0]); // apple
document.writeln(arr[1]); // banana
document.writeln(arr[2]); // orange- separator(여기서는 ',')를 지정하여 문자열을 separator로 잘라서 만들어진 조각들을 배열에 담아서 리턴한다.
예제 5. limit 값 지정하기
const str = "apple,banana,orange";
const arr = str.split(",", 2);
document.writeln(arr.length); // 2
document.writeln(arr[0]); // apple
document.writeln(arr[1]); // banana
document.writeln(arr[2]); // undefined- 두번째 파라미터인 limit 값을 지정하였습니다.
- 위의 예제에서 문자열을 ','로 자르면 총 3개의 배열이 만들어지지만, limit 값을 2로 지정하였기 때문에 2개의 배열만 생성된다.
12) Array.prototype.concat()
concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환한다.
- 기존배열을 변경하지 않습니다.
- 추가된 새로운 배열을 반환합니다.
시도해보기
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
console.log(array3);
// Expected output: Array ["a", "b", "c", "d", "e", "f"]
구문
array.concat([value1[, value2[, ...[, valueN]]]])
매개변수
- 배열 또는 값
- 만약 value1 ~ valueN 인자를 생략하면 기존배열의 얕은 복사본을 반환.
- valueN Optional
반환값
새로운 Array 객체.
설명
concat은 메서드를 호출한 배열 뒤에 각 인수를 순서대로 붙여 새로운 배열을 만든다. 인수가 배열이면 그 구성요소가 순서대로 붙고, 배열이 아니면 인수 자체가 붙는다. 중첩 배열 내부로 재귀하지 않는다.
concat은 this나 인수로 넘겨진 배열의 내용을 바꾸지 않고, 대신 주어진 배열을 합친 뒤 그 얕은 사본을 반환한다. 새 배열에는 원본 배열의 요소를 다음과 같은 방법으로 복사한다.
- 실제 객체가 아닌 객체 참조: concat은 새 배열에 참조를 복사한다. 원본 배열과 새 배열에서 같은 객체를 가리키게 된다. 즉, 참조하는 객체를 수정하면 그 내용이 새 배열과 원본 배열 둘 다에서 나타난다.
- 문자열, 숫자, 불리언 등 자료형(String, Number, Boolean 객체 아님): concat은 새 배열에 문자열과 수의 값을 복사합니다.
참고: 배열이나 값을 이어붙여도 원본은 변하지 않으며, 새로운 배열이나 원본 배열을 조작해도 서로 영향을 받지 않는다.
예제
배열 세 개 이어붙이기
다음 예제는 세 개의 배열을 이어붙인다.
const num1 = [1, 2, 3];
const num2 = [4, 5, 6];
const num3 = [7, 8, 9];
num1.concat(num2, num3);
// 결과: [1, 2, 3, 4, 5, 6, 7, 8, 9]
배열에 값 이어붙이기
다음 코드는 배열에 세 개의 값을 이어붙입니다.
const alpha = ['a', 'b', 'c'];
alpha.concat(1, [2, 3]);
// 결과: ['a', 'b', 'c', 1, 2, 3]'FE > JavaScript' 카테고리의 다른 글
| [JS] 객체 - 개념 정리 (0) | 2023.02.28 |
|---|---|
| [JS] 객체 Object (0) | 2023.02.27 |
| (JS) 배열의 기초 (0) | 2023.02.27 |
| [JS] 함수 (0) | 2023.02.21 |
| [JS] 반복문 (0) | 2023.02.21 |