목차
- 배열
1-1. 배열
1-2. 배열 선언
1-3. 배열 초기화 []
1-4. 배열 순회 for문, for of문 - Array 객체 메소드 - 요소 추가/제거
2-1. push(값) 맨 뒤 요소 추가
2-2. pop() 맨 뒤 요소 제거
2-3. unshift(값) 맨 앞 요소 추가
2-4. shift() 맨 앞 요소 제거 후 반환
2-5. slice(시작 index, 끝 index) 선택 요소 잘라내기, 원본 배열에 영향X
2-6. splice(index, 제거수, 추가값1, 추가값2, ...) index 위치 요소 제거 및 추가, 원본 배열에 영향O
2-7. concat(배열명1, 배열명2, ...) 두 개 이상의 배열 결합, 원본 배열에 영향X - Array 객체 메소드 - forEach() 메소드
- Array 객체 메소드 - 배열 탐색
4-1. indexOf(값)
4-2. lastIndexOf(값)
4-3. includes(값) true/false - Array 객체 메소드 - 배열 변형
5-1. map(fuction(item, index, array) {})
5-2. sort(function compare() {}) 원본 배열에 영향 O
5-3. reverse() 원본 배열에 영향 O
5-4. join(구분자) 배열 → (구분자)로 결합 → 문자열
5-5. split(구분자) 문자열 → (구분자)로 잘라 → 배열
1. 배열
1-1. 배열
- 자바스크립트에서는 숫자, 문자열, 함수, boolean, undefined, 객체 등 모든 자료형을 보관하는 변수의 모음을 배열로 처리한다.
- 대괄호 [] 통해 생성 및 초기화 동시에 수행할 수 있다.
- 자바 언어에서 다룬 배열은 같은 자료형을 취급한다는 데 한정돼 있어 차이가 있고, 결국 자바스크립트의 배열은 자바의 컬렉션 개념과 유사하다고 볼 수 있다.
<body>
<script>
function test() {
let arr = ['홍길동', 20, true, [1, 2, 3, 4]];
// 배열 출력
console.log(arr);
console.log('arr : ' + arr);
console.log(arr.length);
}
test();
</script>
</body>
- 소괄호 () 안에 배열명만 넣어 그냥 호출하면 index별로 자세히 반환된다.
- 한편, 문자열과 더해지면 내장된 toString()이 자동 호출돼 콤마(,) 기준으로 합쳐진 문자열로서 반환된다.
- arr.length 통해 배열 길이를 확인할 수 있다. 예시에서는 4라는 값이 출력된다.
<body>
<script>
function test() {
let arr = ['홍길동', 20, true, [1, 2, 3, 4]];
// 인덱스로 접근
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]); //배열
// 배열 안의 배열 인덱스 접근
console.log(arr[3][0]);
console.log(arr[3][1]);
console.log(arr[3][2]);
console.log(arr[3][3]);
}
test();
</script>
</body>- 각 인덱스 통해 인덱스별 데이터에 접근하거나, 배열 안의 배열에 접근할 수 있다.
1-2. 배열 선언
-- 배열 크기를 지정하지 않은 배열 선언
✅ let 변수명 = new Array();
-- 배열 크기를 지정한 배열 선언
✅ let 변수명 = new Array(개수);
- new 연산자 및 Array 객체를 통해 배열을 선언한다.
- 소괄호 ()를 빈 공간으로 두거나 개수에 해당하는 숫자값을 명시하는 방법으로 배열 크기 지정 유무를 다르게 할 수 있다.
<body>
<script>
function test() {
let arr1 = new Array();
let arr2 = new Array(3); //3개 길이의 배열
// 배열 출력
console.log(arr1);
console.log(arr2);
// 배열 길이 출력
console.log(arr1.length); //0
console.log(arr2.length); //3
arr2[100] = '테스트';
console.log(arr2);
console.log(arr2.length);
arr2.length = 0;
console.log(arr2);
}
test();
</script>
</body>
- 소괄호 안에 (배열명)을 전달해 출력한다. 현재로서는 값 대입이 일어나지 않은 단계이기에 사진에서처럼 [] 또는 (3) [empty x 3] 처럼 결과가 반환된다.
- 배열 길이를 출력하기 위해서는 length를 사용한다. 위 예시에서는 각각 숫자값 0, 3이 얻어진다.
❗ 차곡차곡 쌓아서 인덱스(index)를 활용하려는우리의 배열 사용 목적과는 어울리지 않지만, 특정 인덱스(index)로 값 할당이 가능함을 보여주는 예시이다.
- 테스트를 위해
존재하지 않는 배열 arr2의 100번째 index를 지정하고 값을 할당한다. - 콘솔창에서 확인한 결과 0~99까지 100개의 index는 [empty x 100]가 들어가 있고, 마지막 인덱스에 작성한 데이터가 대입돼 있음이다.
- 또, length는 요소 내 개수가 아니라 가장 큰 index에 1을 더한 값을 반환하므로 101이라는 숫자값이 나옴을 알 수 있다.
- length에 0을 기록하면 배열 값 삭제 또한 치를 수 있다: arr2.length = 0;
1-3. 배열 초기화 []
<body>
<script>
function test() {
...
// 배열에 값 대입
arr1[0] = '바나나';
arr1[1] = '복숭아';
arr1[2] = '키위';
console.log(arr1);
// new 연산자 활용한 초기화
let arr3 = new Array('홍길동', '임꺽정', '신사임당'); //숫자 대신 데이터를 전달해 초기화
console.log(arr3);
// 대괄호를 활용한 초기화 -- 가장 많이 활용
let arr4 = ['Java', 'Oracle', 'HTML5', 'CSS3'];
console.log(arr4);
}
test();
</script>
</body>
- 첫 번째 초기화 방법은 각 인덱스(index)별로 값을 대입시키는 것이다.
- 두 번째로는 new 연산자 및 Array 객체 활용한 초기화 방법이다. 이때 뒤따르는 소괄호 () 부분에 숫자 대신 데이터를 전달해 초기화한다.
- 다음으로는 대괄호 [] 이용한 초기화가 있다. 가장 많이 활용될 방법이기도 하다.
1-4. 배열 순회 for문, for of문
A. for문 이용
<body>
<script>
function test() {
let arr = ['Java', 'Oracle', 'HTML5', 'CSS3', 'JavaScript'];
// for문 이용
for(let i=0; i < arr.length; i++) {
console.log(arr[i]);
}
}
test();
</script>
</body>- let i 변수를 인덱스(index)로 활용해 (초기식, 조건식, 증감식) 작성한 뒤 출력한다.
- 중괄호 {} 안에서 arr[i]로 각 인덱스 접근 가능하다.
B. for of문 이용
<body>
<script>
function test() {
let arr = ['Java', 'Oracle', 'HTML5', 'CSS3', 'JavaScript'];
// for of문 이용
for(let subject of arr) {
console.log(subject);
}
}
test();
</script>
</body>- 자바 언어에서 다룬 향상된 for문과 유사하다.
- 배열 arr에 들어있는 값들을 let subject라는 변수에 담아 출력한다: for(let subject of arr) {}
- 중괄호 {} 안에서 변수명으로 각 인덱스 접근 가능하다.
2. Array 객체 메소드 - 요소 추가/제거
| 배열명.push(값) | 맨 뒤 요소 추가 |
| 배열명.pop() | 맨 뒤 요소 제거 후 반환 |
| 배열명.unshift(값) | 맨 앞 요소 추가 |
| 배열명.shift() | 맨 앞 요소 제거 후 반환 |
| 배열명.slice(시작 인덱스, 끝 인덱스) | 선택 요소 잘라내기 |
| 배열명.splice(index, 제거수, 추가값, ...) | index 위치의 요소 제거 및 추가 |
| 배열명.concat(배열명, ...) | 두 개 이상의 배열 결합하여 반환 |
2-1. push(값) 맨 뒤 요소 추가
let arr = ['자장면', '짬뽕', '우동'];
console.log('push 전 arr : ' + arr);
//arr.push('탕수육');
//arr.push('양장피');
arr.push('탕수육', '양장피');
console.log('push 후 arr : ' + arr);
- push(값)을 전달할 때 하나 이상의 인자를 담을 수도 있다.
- 이때는 작성된 순서대로 맨 뒷자리에 추가 반영된다.
2-2. pop() 맨 뒤 요소 제거
console.log('arr.pop() : ' + arr.pop());
console.log('arr.pop() : ' + arr.pop());
console.log('arr.pop() : ' + arr.pop());
- 맨 뒤에서부터 요소 제거 후 반환 과정이 치러진다.
- 결과적으로 원본을 변경시킨다. 예시에서도 pop() 구문에 세 번 출력되면서 뒤에서부터 세 가지 요소가 제거돼 → [0], [1]에 해당하는 인덱스만 남아있음을 알 수 있다.
2-3. unshift(값) 맨 앞 요소 추가
let arr = ['양념치킨', '후라이드', '파닭'];
console.log('unshift 전 arr : ' + arr);
//arr.unshift('간장치킨');
//arr.unshift('마늘치킨');
arr.unshift('간장치킨', '마늘치킨');
console.log('unshift 후 arr : ' + arr);
- 맨 앞에 요소를 추가하는 것이 unshift() 메소드의 특징이다.
- 예시의 경우 arr.unshift('간장치킨');과 arr.unshift('마늘치킨');이 각각 작성됐다면 마늘, 간장, 양념순으로 출력된다.
- 다음으로 arr.unshift('간장치킨', '마늘치킨');일 때는 덩어리째 앞에 추가되므로 간장, 마늘, 양념순으로 이어진다.
2-4. shift() 맨 앞 요소 제거 후 반환
console.log('arr.shift() : ' + arr.shift());
console.log('arr.shift() : ' + arr.shift());
console.log('arr.shift() : ' + arr.shift());
console.log('shift 후 arr : ' + arr);
- 맨 앞에서부터 요소를 제거시키고 반환한다.
- 결과적으로 원본 배열 역시 달라지게 된다.
2-5. slice(시작 index, 끝 index) 선택 요소 잘라내기, 원본 배열에 영향X
let arr = ['Java', 'HTML', 'CSS', 'JavaScript'];
console.log('arr : ' + arr);
console.log('arr.slice(2, 4) : ' + arr.slice(2, 4));
console.log('arr : ' + arr);
- 끝 index 자리는 포함되지 않는다. 시작 index <= 해당 범위 < 끝 index에 대해서 치러진다.
- 따라서 예시에서도 [2], [3] index 값에 대해서만 반환되었음을 알 수 있다.
- 원본 배열 데이터에 영향을 미치지 않는다.
2-6. splice(index, 제거수, 추가값1, 추가값2, ...) index 위치 요소 제거 및 추가, 원본 배열에 영향O
console.log('arr.splice(2, 1, "Servlet") : ' + arr.splice(2, 1, "Servelet"));
console.log('arr : ' + arr);
- index [2]부터 1개 값을 제거하고, 추가값으로 "Servlet"을 지정한 예시이다.
- splice() 메소드는 실행에 따라 실제 제거된 값에 대해 출력한다: CSS
- 원본 배열을 변경시킨다. 따라서 index [2] 자리에 있던
"CSS"가 제외되고, 같은 자리에 지정한 데이터가 새롭게 삽입되었음을 확인할 수 있다.
2-7. concat(배열명1, 배열명2, ...) 두 개 이상의 배열 결합, 원본 배열에 영향X
let arr1 = ['아이유', '블랙핑크', '오마이걸'];
let arr2 = ['트와이스', '에스파'];
let arr3 = arr1.concat(arr2);
let arr4 = arr2.concat(arr1, arr3);
console.log('arr1 : ' + arr1); //원본 그대로
console.log('arr2 : ' + arr2); //원본 그대로
console.log('arr1 기준으로 arr2 배열을 합친 arr3 : ' + arr3);
console.log('arr2 기준으로 arr1, arr3 배열을 합친 arr4 : ' + arr4);
- 새로운 배열 arr3, arr4에 concat()을 적용했다하더라도 기존 배열 arr1, arr2가 달라지지는 않는다. 즉 원본 배열 그대로 유지된다.
- 단, 새롭게 할당한 배열 arr3, arr4에는 뒷자리에 concat()한 배열이 자리해 결합되었음을 알 수 있다.
3. Array 객체 메소드 - forEach() 메소드
배열.forEach(function(item, index, array)) {};
<body>
<script>
function test() {
let arr = [1, 2, 3, 4, 5];
arr.forEach(function(item, index, array) {
console.log(item + " " + index + " " + array);
});
arr.forEach(item => console.log(item * 10));
}
test();
</script>
</body>- 콜백 함수로서 인자로 함수가 전달된다.
- item은 콜백 function의 데이터를 말한다. item이든 value이든 네이밍하기 나름이다.
- item, index, array를 콘솔창에 출력하면 위 이미지와 같은 결과로 반환된다.
- item은 데이터, index는 해당 인덱스, array는 배열을 말한다.
- 따라서 각 item에 10씩 곱한 구문을 통해서는 위와 같은 결과를 얻을 수 있다.
4. Array 객체 메소드 - 배열 탐색
| 배열명.indexOf(값) | 요소 위치 인덱스 반환 |
| 배열명.lastIndexOf(값) | 요소 위치 마지막 인덱스 반환 |
| 배열명.includes(값) | 해당 요소 포함 여부 반환 |
4-1. indexOf(값)
<body>
<script>
function test() {
let arr = ['물회', '삼계탕', '냉면', '수박', '물회'];
console.log("arr.indexOf('물회') : " + arr.indexOf('물회')); //[0]
console.log("arr.indexOf('물회', 1) : " + arr.indexOf('물회', 1)); //[4]
console.log("arr.indexOf('삼겹살') : " + arr.indexOf('삼겹살')); //[-1]
}
test();
</script>
</body>- 배열에서 요소가 위치한 인덱스를 리턴한다.
- indextOf(값, 시작 인덱스)를 명시하면 해당 인덱스부터 찾기에 예시에서는 index [1]부터 찾아가 index [4]를 결과값으로 반환 받았다.
- 이처럼 해당 index가 존재할 경우 [index] 값을 전달 받지만, 존재하지 않는 경우 -1이라는 숫자값이 출력된다.
4-2. lastIndexOf(값)
console.log("arr.lastIndexOf('물회') : " + arr.lastIndexOf('물회'));
console.log("arr.lastIndexOf('삼겹살') : " + arr.lastIndexOf('삼겹살'));- 배열의 요소가 위치한 마지막 인덱스를 리턴한다.
- 끝에서부터 찾아 첫 번째 예시는 4, 두 번째 예시는 -1이라는 숫자값을 반환한다.
4-3. includes(값) true/false
console.log("arr.includes('물회') : " + arr.includes('물회'));
console.log("arr.includes('삼겹살') : " + arr.includes('삼겹살'));- 배열에 해당 요소 포함 여부를 true/false로 리턴 받는다.
- 첫 번째 예시의 값은 포함하고 있으므로 true, 두 번째 예시는 포함되지 않아 false라는 값이 출력된다.
5. Array 객체 메소드 - 배열 변형
| 배열명.map(function(item, index, array {}) | 요소 전체 대상으로 함수 호출 후 결과 배열로 반환 |
| 배열명.sort(compare 함수) | compare 함수 기준으로 정렬 |
| 배열명.reverse() | 배열 순서 뒤집음 |
| 배열명.join(구분자) | 구분자로 결합하여 문자열로 반환 |
| 배열명.split(구분자) | 구분자로 잘라 배열로 반환 |
5-1. map(fuction(item, index, array) {})
<body>
<script>
function test() {
let types = [true, 1, 'text'].map(item => typeof item);
console.log(types);
let lengths = ['apple', 'banana', 'cat', 'dog', 'egg'].map(item => item.length);
console.log(lengths);
}
test();
</script>
</body>map(item => typeof item);
요소별 타입 반환
let types = [true, 1, 'text'].map(item => typeof item);
let types = [true, 1, 'text'].map(function(item,index, array) {
returntypeof item;
}
- 첫 번째 문장을 화살표 함수 대신 function 형태의 원문 그대로 작성하면 위와 같다.
- index, array 요소는 현재로서는
사용하지 않을 것이라 생략하고, 이를 간단히 고쳐쓴 셈이다. - 결과로서 각 요소의 타입이 반환된다: ['boolean', 'number', 'string']
map(item => item.length);
요소별 길이 반환
let lengths = ['apple', 'banana', 'cat', 'dog', 'egg'].map(item => item.length);
let lengths = ['apple', 'banana', 'cat', 'dog', 'egg'].map(function(item,index, array) {
returnitem.length;
}
- 위처럼 화살표 함수 구문을 function 형태의 원문으로 고쳐 비교해본다.
- item.length 통해 요소별 길이를 반환 받을 수도 있다.
- ['apple', 'banana', 'cat', 'dog', 'egg']로 이루어진 배열에 대고 map() 메소드를 작성한다. 이때 메소드 전달인자로서 소괄호 () 안에 length를 쓴다.
- 결과적으로 index [0]의 'apple'은 5, index[1]의 'banana'는 6 등등 길이에 해당하는 숫자값을 반환 받는다.
5-2. sort(function compare() {}) 원본 배열에 영향 O
sort(); 기본 오름차순 정렬
문자열 기준(*숫자 사용 시 오류 발생*)
<body>
<script>
function test() {
let arr = [];
for(let i=0; i < 10; i++) {
arr[i] = Math.floor(Math.random() * 100) + 1;
}
console.log('정렬 전 arr : ' + arr);
arr.sort();
console.log('정렬 후 arr : ' + arr);
}
test();
</script>
</body>- 소괄호 () 안에 기준을 전달하지 않으면 기본 오름차순 정렬을 행한다: arr.sort();
- 정렬 순서를 유지한다. 즉 정렬 작업이 이뤄질 때 원본 데이터에 변경이 생기는 것이다.
- 단, 숫자 크기가 아니라 문자열로서 정렬되기에 한 한 자리 수 혹은 세 자리 수가 뒤섞이는 오류를 확인할 수 있다. 맨 앞이 1로 시작하기에 첫 번째, 9로 시작하기에 89 뒤에 자리하는 것이다: 100, 89, 9...
sort(compare); 지정한 비교 기준에 따라 정렬
<body>
<script>
function test() {
...
arr.sort(compare);
console.log('매개변수로 compare 함수 전달하여 숫자 오름차순 정렬');
console.log(arr);
// 숫자 내림차순 정렬
arr.sort((a, b) => b - a);
console.log('숫자 내림차순 정렬');
console.log(arr);
}
function compare(a, b) {
if(a > b) return 1; //바꾼다
if(a == b) return 0; //그대로 둔다
if(a < b) return -1; //바꾸지 않는다
}
test();
</script>
</body>- 기본 sort(); 메소드의 단점을 보완하기 위해 별도의 compare() 함수를 정의해 비교 기준으로 전달한 예시이다.
- compare(a, b) 함수에서는 '양수, 0, 음수'를 결과값으로 의도해 오름차순/내림차순 정렬을 직접 지정한다: ① 결과값이 양수이면 바꾼다, ② 값이 같아 0으로 읽히면 그대로 둔다, ③ 음수이면 자리를 바꾸지 않는다
❗ compare(a, b) 오름차순 정렬 : ① a > b ? return 1; ② a == b ? return 0; ③ a < b ? return -1;
오름차순은 앞에 온 a가 더 클 경우에만 위치를 바꾸는 것이다.
❗ compare(a, b) 내림차순 정렬 : ① a > b ? return -1; ② a == b ? return 0; ③ a < b ? return 1;
반대로 내림차순은 앞에 온 a가 더 작은 경우에만 자리 변경이 일어나도록 한다.
-- 내림차순 sort(function() {}) 메소드
arr.sort(function(a, b) {
returnb - a;
});
-- 화살표 함수 적용
arr.sort((a, b) => b - a);
- 내림차순 메소드를 위와 같이 정의할 수도 있다. b - a;일 때, 즉 뒤에 있는 b가 더 큰 값일 때 바꾸라는 의미가 된다.
- 화살표 함수를 적용할 때 전달인자가 (a, b) 두 가지이므로 소괄호를 써야 한다.
5-3. reverse() 원본 배열에 영향 O
arr.reverse();
console.log('reverse 호출 후 arr : ' + arr);- reverse() 메소드는 선언만으로 배열의 데이터를 거꾸로 뒤집는다.
- 이는 원본 배열에 고스란히 영향을 끼치는 것으로, 정렬 순서가 유지된다.
5-4. join(구분자) 배열 → (구분자)로 결합 → 문자열
<body>
<script>
function test() {
let arr = ['사탕', '초콜릿', '껌', '과자'];
console.log(arr);
console.log('arr.join() : ' + arr.join());
console.log('arr.join("/") : ' + arr.join("/"));
}
test();
</script>
</body>
- join(구분자) 메소드는 배열을 → 구분자로 결합하여 → 문자열로 반환한다.
- 별도 지정 없이 출력하자 문자열로 반환되는 과정에서 기본 구분자로서 콤마(,)가 삽입된 모습을 확인할 수 있다: console.log(arr.join());
- 소괄호 () 안에 구분자를 직접 작성하면 이처럼 배열의 인덱스별 데이터 사이사이에 해당 구분자가 반영된 결과를 보인다.
5-5. split(구분자) 문자열 → (구분자)로 잘라 → 배열
...
let str = arr.join("*");
console.log(str);
console.log('str.split("*") : ' + str.split("*"));
console.log(str.split("*"));- split(구분자) 메소드는 문자열 대상으로 호출돼 → 구분자로 잘라 → 배열로 반환한다.
- 앞서 작성한 배열 arr에 join("*") 메소드를 곁들인 결과값을 별도의 문자열 str로 정의한 예시이다.
- 이때 split(구분자)를 적용하자 다시금 배열로서 리턴됨을 확인할 수 있다.
'Frontend > JavaScript' 카테고리의 다른 글
| [JavaScript] 숫자 | 문자 | 날짜 | 객체 메소드 (0) | 2022.02.20 |
|---|---|
| [JavaScript] 객체 | for in | 메소드 | 객체 배열 | filter (0) | 2022.02.19 |
| [JavaScript] 함수 선언문 | 함수 표현식 | 콜백 함수 | 화살표 함수 (0) | 2022.02.17 |
| [자바스크립트/수업 과제 practice] 기본 문법 실습 (0) | 2022.02.16 |
| [JavaScript] 변수 | 자료형 | 입출력 | 형변환 | 연산자 (0) | 2022.02.16 |
