[Javascript] 배열

« 2025/02 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

[목차]

01. 배열이란?

💡

➡️ 하나의 저장소에 여러 데이터 타입을 저장 할 수 있는 방법입니다.

➡️ 공간에 생기는 주소를 index라고 한다.

➡️ index의 처음 시작 주소는 0번부터 시작된다.

➡️ index를 활용하여 배열에 접근이 가능하며, 접근이 되었다면 값을 저장하거나 값을 가져올 수 있다.

02. 배열 선언

💡

선언 방법 1️⃣ const arr1 = []; ➡️ good 2️⃣ const arr2 = new Array(); ➡️ 내장객체

[코드예제] 배열 선언

// 배열선언 키워드 : const 선언
// 인수가 1개 일 때 공간을 의미
const arr3 = new Array(3);
console.log(arr3); // 3 empty

// 배열 선언 및 초기화
const arr4 = [1, 2, 3, 4]; // good
// Array() 인수가 두개 이상일 경우 요소를 의미
const arr5 = new Array(1, 2, 3, 4, 5); // bad
console.log(arr4); // 1, 2, 3, 4
console.log(arr5); // 1, 2, 3, 4, 5

// 배열에 어떠한 데이터 타입이든 요소 삽입이 가능하다.
const arr6 = ['가', 1, '나', true, null, undefined, [1,2,3]];
console.log(arr6);

03. 배열 값 저장 및 접근

💡

변수명[인덱스] = 값;

[코드예제] 배열 값 대입 및 접근

const arr7 = [1, 2];
console.log(arr7[0], '배열 변수의 인덱스 번호로 요소 접근');
arr7[3] = 4;
console.log(arr7); // 1, 2, empty, 4

04. 배열객체의 속성 및 메서드

💡

length, push(), pop(), splice(), Array.isArray() 등

[코드예제] 속성과 메서드

// length : 배열의 크기를 알수 있는 속성
const arr8 = [1, 2];
console.log(arr8.length, 'arr8의 배열의 크기');

// push() : 배열에 값을 삽입하는 메서드
let result1 = arr8.push(3);
arr8.push(4, 5);
console.log(result1, arr8);

// pop() : 배열의 마지막 요소 제거 후 제거된 요소 반환
let result2 = arr8.pop();
console.log(result2, arr8);

// splice(삭제를 시작할 인덱스, 삭제할 요소수) : 특정배열 요소 삭제
let result3 = arr8.splice(1, 2);
console.log(result3, arr8);

// Array.isArray(배열 변수명) : 배열 여부 확인
console.log(Array.isArray(result1), 'result1 배열여부확인');
console.log(Array.isArray(result3), 'result3 배열여부확인');

05. 얕은복사와 깊은복사

💡

얕은복사 ➡️ 새로운 복합 객체를 만들고,(가능한 범위까지) 원본 객체를 가리키는 참조를 새로운 복합 객체에 삽입/복사 후 같은 주소를 참조 (인스턴스 생성 ex) == '주소 값'을 복사한다는 의미 깊은복사 ➡️ 새로운 복합 객체를 만들고, 재귀적으로 원본 객체의 사본을 새로 만든 복합 객체에 삽입/복사 후 다른 주소를 참조 (인스턴스 생성 o) == '실제 값'을 새로운 메모리 공간에 복사하는 것을 의미

[코드예제] 얕은복사, 깊은복사

const targetArr1 = [1, 2, 3, 4];
const shallowCopyArr = targetArr1; // 주소 값만 복사
console.log(targetArr1 == shallowCopyArr, 'true 얕은복사');
shallowCopyArr[2] = 5;
console.log(targetArr1); // 1, 2, 5, 3, 4
console.log(shallowCopyArr); // 1, 2, 5, 3, 4

const targetArr2 = [1, 2, 3, 4];
const deepCopyArr = []; // 새롭게 객체 생성
for(let num of targetArr2) {
	deepCopyArr.push(num);
}
console.log(targetArr2 == deepCopyArr, 'false 깊은복사');
deepCopyArr[2] = 5;
console.log(targetArr2); // 1, 2, 3, 4
console.log(deepCopyArr); // 1, 2, 5, 3, 4

06. 배열 실습

[코드예제] 배열과 반복문1

const arr = [
							'서강준',
              '손석구',
              '카리나',
              '태연',
              '뉴진스',
              '아이유'
            ];
for(let idx = 0; idx < arr.length; idx++) {
    console.log(arr[idx], `배열의 ${idx}번째 요소`);
}

// for of 배열을 순회하면서 배열요소를 변수에 담는다.
let idx=0;
for(let name of arr) {
    console.log(name, `배열의 ${idx++}번째 요소`);
}

// for in 배열을 순회하면서 배열의 인덱스를 변수에 담는다.
// 객체(Java : Class로 생성된 객체)
for(let idx in arr) {
    console.log(arr[idx], `배열의 ${idx}번째 요소`);
}

[코드예제] 배열과 반복문2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="#" type="image/x-icon">
		<title>배열과 반복문 실습</title>
</head>
<body>
	<h1>배열과 반복문</h1>
	<h2>실습1</h2>
	실습. 아래의 배열의 요소에 접근하여 콘솔에 차례대로 출력 하도록 하시오.
	<script type="text/javascript">

		const arr1 = ['손흥민', '김민재', '황희찬', '황의조', '이강인', '김승규'];
		
		for(let idx = 0; idx < arr1.length; idx++) {
			console.log(arr1[idx], 'for문 사용');
		}

		for(let name of arr1) {
			console.log(name, 'for_of 사용');
		}

		for(let idx in arr1) {
			console.log(arr1[idx], 'for_in 사용');
		}

		let idx = 0;
		while(idx < arr1.length){
			console.log(arr1[idx], 'while문 사용');
			idx++
		}
		
	</script>

	<h2>실습2</h2>
	실습. 아래의 배열의 요소에 접근하여 이름만 콘솔에 차례대로 출력 하도록 하시오.
	ex) 손흥민, 황희찬, 이강인, 김승규
	<script type="text/javascript">

		const arr2 = [4, '손흥민', 1, '황희찬', 2, '이강인', '김승규', 3, undefined, null, true];
		
		let isFrist = true;
		let namePrint = '';
		for(let name of arr2) {
			if(typeof name == 'string'){
				if(isFrist) {
					namePrint += name;
					isFrist = false;
				} else {
					namePrint += `, ${name}`;
				}
			}
		}
		console.log(namePrint);

	</script>

	<h2>실습3</h2>
	실습. 배열에 담긴 숫자형 값 중 짝수만 찾아 합산하여 그 결괏값만 출력하시오.
	실습. 추출한 짝수만 evenArray 참조변수(배열)에 담으시오
	<script type="text/javascript">

		var nArr = [13,15,20,22,35,50,70,99];

		let evenTotal = 0;
		const evenArray = [];
		for(let num of nArr) {
			if(num%2 == 0) {
				evenTotal += num;
				evenArray.push(num);
			}
		}
		console.log(`짝수의 합 : ${evenTotal}\n짝수배열 : ${evenArray}`);
		
	</script>

	
	<h2>실습4</h2>
	실습. 아래의 배열에 학생의 점수가 담겨 있다. 학생들의 평균 점수를 구하시오.
	<h2>실습5</h2>
	실습. 아래의 배열에 학생의 점수가 담겨 있다. 60점 이상인 학생 수를 구하시오.
	<script type="text/javascript">

		var oddArr01 = [60, 70, 55, 60, 80, 99];

		let total = 0;
		let cut = [];
		for(let num of oddArr01) {
			total += num;
			if(num >= 60) cut.push(num);
		}
		console.log(`평균점수 : ${parseInt(total/oddArr01.length)}점`);
		console.log(`60점 이상 : ${cut.length}명`);

	</script>

	<h2>실습6</h2>
	실습. 0~1000까지 홀수인 숫자만 배열에 담으시오. 홀수들의 합산을 구하시오.
	<script type="text/javascript">
		var oddArr01 = [];

		let oddSum = 0;
		for(let i = 0; i <= 1000; i++) {
			if(i%2 == 1) {
				oddArr01.push(i);
				oddSum += i
			}
		}
		console.log(`홀수배열 : ${oddArr01}\n합산 : ${oddSum.toLocaleString('ko-KR')}`);
		
	</script>
</body>
</html>

[코드예제] 배열 테이블

var student = [
                '헤리케인', '히샬리송', '모우라', '페리시치',
                '세세뇽', '요리스', '에릭다이어', '벤데이비스',
                '산체스', '손흥민', '후보1', '후보2', '후보3'
            ];


let colSize = 6;
let html = `<table border="1" style="width:400px; table-layout:fixed;">\n`;
let thead = `\t<thead>\n\t\t<tr>\n`;
let tbody = `<tbody style="text-align:center;">\n\t\t<tr>\n`;
let lastIdx = (student.length - 1);

for(let idx = 0; idx < student.length; idx++) {

    // thead th 구현 => colsize만큼
    if (idx < colSize) thead += `\t\t\t<th style="width:calc(400px/3)">${idx+1}조</th>\n`;

    // tr 구현
    if(idx % colSize == 0 && idx > 0) tbody += `\t\t</tr>\n\t\t<tr>\n`

    // td 배열의 크기만큼
    tbody += `\t\t\t<td>${student[idx]}</td>\n`;

    // 셀 병합 미정 구현
    if(idx == lastIdx && student.length % colSize > 0) {
        let size = colSize - (student.length % colSize);
        let colspan = (size > 1) ? ` colspan = "${size}"` : ``;
        tbody += `\t\t\t<td${colspan}>미정</td$>\n`;
    } 
}

html += `${thead}\t\t</tr>\n\t<thead>\n\t${tbody}\t\t</tr>\n\t</tbody>\n</table>`;

console.log(html);
document.write(html);

[코드예제] 배열 2개 값 출력

/* 
실습. 아래에 학생의 점수와 학생의 목록이 담긴 배열이 있다.
이 두 배열은 요소의 순서가 일치하는 점수와 학생목록이다.
최고의 점수를 받은 학생의 명을 출력하도록 하시오.
최소의 점수를 받은 학생의 명을 출력하시오
*/
const scoreArr = [70,60,70,80,55,80];
const studentArr = ['A', 'B', 'C', 'D', 'E','F'];

let maxScore = scoreArr[0];
let minScore = scoreArr[0];

const maxScoreStudentArr = [];
const minScoreStudentArr = [];

for(let idx = 1; idx < scoreArr.length; idx += 1) {
    if(maxScore < scoreArr[idx]) {
        maxScore = scoreArr[idx];
    }
    if(minScore > scoreArr[idx]) {
        minScore = scoreArr[idx];
    }
}

for(let idx in scoreArr) {
    if(scoreArr[idx] == maxScore) {
        maxScoreStudentArr.push(studentArr[idx]);
    }

    if(scoreArr[idx] == minScore) {
        minScoreStudentArr.push(studentArr[idx]);
    }
}

console.log(`최고점을 받은 학생명: ${maxScoreStudentArr}`);
console.log(`최저점을 받은 학생명: ${minScoreStudentArr}`);

tag : #javascript #배열 #선언 #인덱스 #배열객체 #얕은복사 #깊은복사

Uploaded by N2T

[Javascript] 함수 (1)	2023.04.29
[Javascript] 객체 (0)	2023.04.29
[Javascript] 반복문 (1)	2023.04.29
[Javascript] 제어문, 스코프, 블록문, 조건문 (1)	2023.04.29
[Javascript] 자바스크립트란, 변수, 데이터 타입, 연산자 (0)	2023.04.29

멋쟁이v의 개발일지

멋쟁이v의 개발일지