1. 배열과 배열관련 메소드
- 배열은 하나의 변수에 여러개 값을 저장할때 사용
- 배열은 순서가 있다. 즉, 요소값과 인덱스(순서)를 가짐.
- 같은 형태의 값을 저장한다. 자바스크립트는 다양한 자료형을 넣을 수 있으나 동일한 데이터 유형의 값을 저장한다.
- 배열 생성
var fruits = [];
var colors = ["빨강", "노랑", "파랑"]; // 초기값을 가진 배열 생성
- 배열 요소 접근
console.log(colors[0]); // 빨강
console.log(colors[1]); // 노랑
- 배열 요소 수정
colors[1] = "주황";
console.log(colors); // [빨강, 주황, 파랑]
- 배열 길이 확인
console.log(colors.length); // 3
- 배열 메소드 사용
colors.push("녹색"); // [빨강, 주황, 파랑, 녹색]
- 배열에서 요소 제거 뒤에 제거
colors.pop(); // 녹색 제거. [빨강, 주황, 파랑]
- 배열에 요소 추가(앞에서)
colors.unshift("보라"); // [보라, 빨강, 주황, 파랑]
var colors = ["빨강","주황","파랑"];
- 배열에 요소 앞에서 제거
var firstColor = colors.shift(); // firstColor는 빨강
console.log(colors); // [주황, 파랑]
- 배열 메소드 정리
.concat(): 배열을 합침
.every(): 모든 요소가 조건을 만족하는지 확인
.filter(): 조건에 맞는 요소만 추출하여 새로운 배열 생성
.indexOf(): 배열에서 특정 요소의 인덱스를 검색
.join(): 배열 요소를 문자열로 합침
.sort(): 배열요소 정렬
.reverse(): 배열요소 순서 뒤집기
.push(): 배열 끝에 요소 추가
.pop(): 배열 끝에 요소 제거하고 반환
.shift(): 배열 앞의 요소 제거하고 반환
.unshift(): 배열 앞의 요소 추가
.slice(): 배열의 일부 추출하여 새로운 배열 반환
.splice(): 배열에서 요소를 추출하거나 변경- var a; 과 var b = [];에서 a[2] = 0은 에러. b[2] = 0 에러가 아님.
- 이유: a는 배열이 아니고, b는 배열.
(1) 1차원 배열 순회하는 방법
- for 루프 사용
- 배열의 길이를 사용하여 인덱스를 증가시키면서 배열 요소 접근
var arr = [1,2,3,4,5];
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}- for...of 루프 사용
- 배열의 값을 직접 순회할때 사용. 즉, 배열의 요소에 직접 접근
var arr = [1,2,3,4,5];
for (var item of arr) {
console.log(item);
}- forEach() 메소드 사용
- 배열의 각 요소에 대해 주어진 함수를 호출함. 간결하고 가독성 좋음
var arr = [1,2,3,4,5];
arr.forEach(function(item) {
console.log(item);
});- map() 메소드 사용
- 배열의 각 요소에 대해 변환작업을 수행하고 그 결과를 새로운 배열로 변환
var arr = [1,2,3,4,5];
var squaredArr = arr.map(function(item) {
return item * item;
});
console.log(squaredArr);- filter() 메소드 사용
- 주어진 조건에 맞는 요소만 새로운 배열을 필터링
var arr = [1,2,3,4,5];
var evenNumbers = arr.filter(function(item) {
reutrn item % 2 == 0; // false면 배열에서 삭제
});
console.log(evenNumbers);- reduce() 메소드 사용
- 배열의 요소를 하나로 축소하여 결과를 반환
var arr = [1,2,3,4,5];
var sum = arr.reduce(function(acc, curr) {
return acc + curr;
}, 0);
console.log(sum);(2) 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
var arr = [3, 6, 1, 2, 4]; // 배열 생성 방법
document.write(arr, '<br>'); // 배열의 내용 출력
document.write(arr[0], '<br>'); // 배열 읽는 방법
arr[0] = 20;
document.write(arr, '<br>');
arr[10] = 50; // 범위에 벗어나면 알아서 생성
document.write(arr, '<br>');
var arr2;
arr[10] = 10; // 정상
arr2 = []; // 배열로 만들어야 문제없이 사용할 수 있다.
arr2[10] = 20;
var arr3 = new Array(); // 변수를 배열 객체로 선언
// arr배열을 가지고 문제를 풀어보자.
// 배열안에 모든 값을 더한 합을 구해보자.
var sum = 0;
for (var i = 0; i < arr.length; i++) {
sum = sum + arr[i];
}
document.write(sum, '<br>');
// in: 배열에 있는 내용을 하나씩 가져와서 실행
var sum = 0;
for (var i in arr) {
sum = sum + i;
}
document.write(sum, '<br>');
// 배열안에 기존의 값에 3을 곱한 값을 넣어보자.
for (var i = 0; i < arr.length; i++) {
arr[i] = arr[i] * 3;
}
document.write(arr, '<br>');
// .length 배열에 길이를 생성해준다.
// .concat 원소 또는 배열 합침
var arr1 = [1, 2, 3, 4];
var arr2 = arr1.concat(5);
document.write(arr1, '<br>'); // 1,2,3,4
document.write(arr2, '<br>'); // 1,2,3,4,5
var arr3 = [2, 3, 4].concat([5, 6, 7]);
document.write(arr3, '<br>');
//.every() 배열의 데이터가 모두 조건에 맞는지 확인
// 콜백함수의 결과가 모두 true이면 true 하나라도 만족하지 않으면 false
var arr1 = [1, 2, 3, 4];
var result = arr1.every(function (x) {
return x < 5;
});
document.write(result, '<br>'); // true
var result = arr1.every(function (x) {
return x < 2;
});
document.write(result, '<br>'); // false
// filter 배열에서 조건에 맞는 값만 추출해서 새로운 배열 만듬
var arr1 = [1, 2, 3, 4, 5];
var result = arr1.filter(function (x) {
return x % 2 == 1;
});
document.write(arr1, '<br>'); // 1,2,3,4,5
document.write(result, '<br>'); // 1,3,5
var f1 = function (x) {
return x % 2 == 1;
};
var result = arr1.filter(f1);
// 화살표함수
// 자바스크립트에서 함수를 간단하게 만드는 방법.
// 기존의 함수를 좀 더 짧고 간결하게 작성가능
const greet = (name) => '안녕하세요, ' + name + '님!';
// 화살표함수 선언: function 키워드 대신 => 기호 사용하여 함수 선언
// 인자: 매개변수에 전달. 여러개 인자가 있을경우 괄호를 감싸준다.
var result = arr1.filter((x) => x % 2 == 1);
// .indexOf() 앞에서부터 원하는 데이터의 인덱스 추출
// .lastIndexOf 뒤에서부터 찾기
var arr1 = [1, 2, 3, 4];
document.write(arr1.indexOf(2), '<br>');
document.write(arr1.lastIndexOf(3), '<br>');
// indexOf
document.write(arr1.indexOf(2, 2), '<br>');
// .join 배열을 합쳐서 하나의 문자열을 만듬
var arr1 = [1, 2, 3, 4];
document.write(arr1.join('-'), '<br>');
// 자료구조 데이터를 사용하는 방법
// 변수, 배열, List, stack, que
// 변수 하나의 데이터 저장
// 배열 여러개의 데이터 저장
// list 연속된 데이터
// 스택 LIFO : 마지막 들어간 것이 먼저 나옴
// 큐 FIFO: 처음 들어간 데이터가 먼저 나옴
// 두 메소드를 사용해서 배열을 stack처럼 사용할 수 있다.
// .push(), .pop()
var arr1 = [1, 2, 3, 4];
arr1.push(5);
document.write(arr1, '<br>'); //1,2,3,4,5
arr1.push(6);
document.write(arr1, '<br>'); //1,2,3,4,5,6
document.write(arr1.pop(), '<br>'); //6
document.write(arr1, '<br>'); //1,2,3,4,5
document.write(arr1.pop(), '<br>'); //5
document.write(arr1, '<br>'); //1,2,3,4
// 큐 que
// shift() 배열의 첫번째 값을 읽어와 제거
// unshift() 배열의 마지막에 값을 추가
var arr1 = [1, 2, 3, 4];
document.write(arr1.shift(), '<br>'); //1
document.write(arr1, '<br>'); //2,3,4
arr1.unshift(5);
document.write(arr1, '<br>'); //2,3,4,5
// .sort
var arr1 = [5, 1, 3, 2, 4];
document.write(arr1.sort(), '<br>');
document.write(arr1, '<br>'); //1,2,3,4,5
var arr1 = ['b', 'c', 'a'];
document.write(arr1.sort(), '<br>');
document.write(arr1, '<br>'); //a,b,c
//sort는 기본적으로 문자열 정렬된다.
var arr1 = [5, 1, 3, 2, 4, 10];
document.write(arr1.sort(), '<br>'); //1,10,2,3,4,5(문자열로 변환시 "10"이 "2"보다 큽니다.)
document.write(arr1, '<br>');
// sort를 숫자로 정렬하고 싶다면 콜백함수 사용
// 매개변수가 함수인경우 콜백함수.
arr1.sort(function (a, b) {
// 오름차순 정렬
if (a > b) return 1;
if (a < b) return -1;
if (a == b) return 0;
});
document.write(arr1, '<br>');
// reverse 배열의 내용을 역정렬
arr1.reverse();
document.write(arr1, '<br>');
// .slice 배열에 특정부분 추출
var arr1 = [5, 1, 3, 2, 4, 10];
// 인덱스 3이후 출력
document.write(arr1.slice(3), '<br>');
// 인덱스 2부터 인덱스 5 앞쪽의 데이터까지
document.write(arr1.slice(2, 5), '<br>');
document.write(arr1, '<br>');
// splice 추출 및 변경
// 2번 인덱스부터 2개 추출
// 리턴값은 삭제된 데이터가 리턴
var arr1 = [5, 1, 3, 2, 4, 10];
var remove = arr1.splice(2, 2);
document.write(arr1, '<br>');
document.write(remove, '<br>');
var arr4 = [
[1, 2, 3, 4],
[5, 6, 7, 8],
[9, 10, 11, 12],
[13, 14, 15, 16],
];
// arr4 배열의 데이터가 총 4개 존재
document.write(arr4.length, '<br>'); // 4
// arr4 배열의 1번째 값 읽어오기
document.write(arr4[0], '<br>');
// arr4 배열의 2번째 값 읽어오기
document.write(arr4[1], '<br>');
// 3값을 읽어와서 찍어보자.
document.write(arr4[0][2], '<br>');
// arr4[0]이 배열이므로 이 배열에 []를 사용하여 원하는 값 찾기
document.write(arr4[0][2], '<br>');
// 15값을 읽어와서 찍어보자.
document.write(arr4[3][2], '<br>');
// 10값을 찾아서 100으로 변경해보자.
arr4[2][1] = 100;
document.write(arr4, '<br>');
</script>
</head>
<body></body>
</html>(231004 기준) 추가 설명
sort() 메소드
- 문자열로 변환된 배열 요소를 기본적인 유니코드 순서로 정렬
- 예:
var arr = [5,1,3,2,4,10];
sort 메소드를 사용하면 각 숫자를 문자열로 변환함.
그러면 "5","1","3","2","4","10"으로 변환
문자열로 변환된 숫자들이 크기 순서대로 정렬함.
따라서 정렬하면, "1","10","2","3","4","5"가 된다.
여기서 의문점이 있다.
문자열로 변환된 숫자들이 크기 순서대로 정렬한다고 하였다.
그렇다면 10이 먼저 와야 하지 않을까? 10 다음이 1이 와야하지 않을까?
검색해본 결과, 1이 10보다 먼저 와야 한다.
예를 들자면 [1,2,3,4,5] 와 같이 숫자가 작은 것부터 큰 순서대로 정렬하기를 기대하지만
문자열로 변환하여 정렬한다면 숫자의 크기를 기준으로 정렬하는 대신 첫번째 자리부터 비교한다.
"1","10","2"를 문자열로 정렬하면 "1"이 "10"보다 먼저옴.
다시 말해서, 문자열로 변환된 숫자를 정렬할때 문자열의 첫 자리부터 크기를 비교하고 이 때문에 "1"은 "10"보다 작기 때문에 배열에서 "1"이 먼저 나옴
또 하나의 의문점은 "1"이 "10"보다 작아서
1이 첫번째이고 10이 두번째인데
이후의 배열 값인 "2","3","4","5" 순서는 어떻게 나온거지?
이유는 문자열로 된 숫자의 비교에서 각 문자의 첫번째 숫자만 고려되기 때문이다.
그래서 이후에 "2","3","4","5"는 예상과 다른 순서로 정렬됨.
우리는 숫자를 기준으로 작은 순서부터 큰 순서대로 정렬되게 하려면 비교함수를 사용하여 순서를 결정함.
IT 개발자가 되기 위한 기록