⏰ 2024.11.14 (D+26)
1. Javascript 배열이란?
📢 정의 ]
- 배열 : 자바와는 다르게 여러 타입(자료형)의 값을 저장할 수 있는 자료구조(메모리)
- (자바의 컬렉션과 같다)
- 그리고 배열의 크기가 고정되어 있지 않다
- 선언방법:
① var 배열명 = new Array(); // var 배열명 =[]랑 완전 동일
② var 배열명 = new Array(배열크기);
③ var 배열명 = new Array(요소1,요소2,.....);//[요소1,요소2,.....]랑 완전 동일
💡 배열 선언 방법 1 - 배열 크기 미지정 ]
① var 배열명 = new Array(); // var 배열명 =[]랑 완전 동일
- 배열 크기가 0인 배열이 생성됨
- 최종적으로 넣은 마지막 인덱스 값에따라 배열 크기가 결정됨.
- var arr1 = new Array();//var arr1=[]와 동일([]은 배열 리터럴)
- console.log('arr1의 값:%o, arr1의 타입:%s',arr1,typeof arr1);console.log('배열의 크기:',arr1.length); arr1[3]=100; console.log('배열의 크기:',arr1.length); arr1[5]=200; console.log('배열의 크기:',arr1.length); for(var i=0;i < arr1.length;i++) console.log('arr1[%d]:%s',i,arr1[i])
💡 배열 선언 방법 2 - 배열 크기 지정 ]
② var 배열명 = new Array(배열크기);var arr2 = new Array(3);//인자가 하나고 숫자면 배열 크기 즉 3이 배열의 크기. 단 배열크기는 가변적이다 console.log(arr2.length);//3 arr2[5]=100; console.log(arr2.length);//6
💡 배열 선언 방법3-선언과 동시에 초기화(new 사용)]
③ var 배열명 = new Array(요소1,요소2,.....);//[요소1,요소2,.....]랑 완전 동일var arr3 = new Array('가길동',20,'서초동',new Date());//인자가 두개 이상이면 요소로 처리 console.log(arr3.length); for(var i=0;i < arr3.length;i++) console.log('arr3[%d]:%s,타입:%s',i,arr3[i],typeof arr3[i]); arr3.push('010-1234-5678'); console.log('배열의 크기:',arr3.length);
💡 배열 선언 방법 4 - 선언과 동시에 초기화(new 미 사용,[]대괄호 사용(배열 리터럴))]
var arr4 = ['ICT', 10, '자바 AI 과정',{소유쥬:'가길동',설립일:1970}]; arr4[arr4.length]=20; console.log('배열의 크기:',arr4.length); for(var i=0;i < arr4.length;i++){ var type; if(typeof arr4[i] === 'object') type='%o'; else type='%s'; console.log('arr4[%d]:'+type+',타입:%s',i,arr4[i],typeof arr4[i]); }
응용 예시 📖]
- for(var 변수 in 배열 혹은 객체)문은 객체({})와 배열에 모두 사용가능
- 배열일때는 순회하면서 인덱스를 꺼내오고
- 객체일때는 .. 키를 꺼내온다var arr5 = ['가',"나","다"]; console.log('[일반 for문 형식]'); for(var k=0;k < arr5.length;k++) console.log(arr5[k]); console.log('[for~in문 형식]'); for(var index in arr5) console.log(arr5[index]); var obj = arr4[3]; console.log(obj); for(var key in obj) console.log('Key:%s,Value:%s',key,obj[key]);
문제 1] 학생 수 만큼 점수 입력받고 총합 및 평균 구하기
<script> var score=[];//[]는 new Array();와 같다 var textNode = document.querySelector('#students'); function getAverage(){ console.log('사용자 입력값:',parseInt(textNode.value)); var numberOfStudents = parseInt(textNode.value); if(isNaN(numberOfStudents)){ alert('숫자만 입력하세요') return; } //학생 수 만큼 점수 입력받고 총합 및 평균 구하기 var total=0; for(var i=0; i < numberOfStudents; i++){ //크기를 지정안해도 된다 score.push(parseInt(prompt(i+1+"번째 점수 입력?"))) total += score[i]; } console.log('[학생의 성적 출력]'); for(var index in score) console.log("%d번째 학생 : %d",index+1,score[index]); console.log('총점:%s, 평균:%s',total,total/score.length); </script>
2. Javascript 배열의 주요 메소드
1) 배열 변형 메소드
① push()
: 배열의 끝에 새로운 요소를 추가하고, 배열의 길이를 반환합니다.let arr = [1, 2, 3]; arr.push(4); // [1, 2, 3, 4]
② pop()
: 배열의 마지막 요소를 제거하고, 제거된 요소를 반환합니다.let arr = [1, 2, 3]; let last = arr.pop(); // last = 3, arr = [1, 2]
③ shift()
: 배열의 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다.let arr = [1, 2, 3]; let first = arr.shift(); // first = 1, arr = [2, 3]
④ unshift()
: 배열의 앞에 새로운 요소를 추가하고, 배열의 길이를 반환합니다.let arr = [1, 2, 3]; arr.unshift(0); // [0, 1, 2, 3]
⑤ splice()
: 배열의 특정 위치에 요소를 추가하거나 제거합니다.let arr = [1, 2, 3, 4]; arr.splice(1, 2, 'a', 'b'); // [1, 'a', 'b', 4] // 첫 번째 인수: 시작 인덱스, 두 번째 인수: 제거할 요소의 개수, 세 번째 인수 이후: 추가할 요소들
⑥ concat()
: 두 개 이상의 배열을 결합하고 새로운 배열을 반환합니다.let arr1 = [1, 2]; let arr2 = [3, 4]; let combined = arr1.concat(arr2); // [1, 2, 3, 4]
2) 검색 및 탐색 메소드
① indexOf()
: 배열에서 특정 요소의 첫 번째 인덱스를 반환합니다. 없으면 -1을 반환합니다.let arr = [1, 2, 3]; arr.indexOf(2); // 1
② lastIndexOf()
: 배열에서 특정 요소의 마지막 인덱스를 반환합니다.let arr = [1, 2, 3, 2]; arr.lastIndexOf(2); // 3
③ includes()
: 배열에 특정 요소가 포함되어 있는지 여부를 true 또는 false로 반환합니다.let arr = [1, 2, 3]; arr.includes(2); // true
④ find()
: 조건을 만족하는 첫 번째 요소를 반환합니다. 조건을 만족하는 요소가 없으면 undefined를 반환합니다.let arr = [1, 2, 3, 4]; let found = arr.find(element => element > 2); // 3
⑤ findIndex()
: 조건을 만족하는 첫 번째 요소의 인덱스를 반환합니다. 없으면 -1을 반환합니다.let arr = [1, 2, 3, 4]; let index = arr.findIndex(element => element > 2); // 2
3) 배열 변환 메소드
① map()
: 배열의 모든 요소에 대해 함수 실행 결과로 새로운 배열을 반환합니다.let arr = [1, 2, 3]; let doubled = arr.map(x => x * 2); // [2, 4, 6]
② filter()
: 조건을 만족하는 요소들로 새로운 배열을 반환합니다.let arr = [1, 2, 3, 4]; let evens = arr.filter(x => x % 2 === 0); // [2, 4]
③ reduce()
: 배열의 각 요소에 대해 누적 계산을 수행하여 하나의 값으로 반환합니다.let arr = [1, 2, 3, 4]; let sum = arr.reduce((acc, curr) => acc + curr, 0); // 10
④ reduceRight()
: reduce()와 비슷하지만 오른쪽에서 왼쪽으로 누적 계산을 수행합니다.
4) 정렬 메소드
① sort()
- 배열을 정렬합니다.
- 기본적으로 문자열 기준으로 정렬하므로, 숫자 정렬 시 콜백 함수를 사용합니다.let arr = [3, 1, 4, 1, 5]; arr.sort((a, b) => a - b); // [1, 1, 3, 4, 5]
② reverse()
: 배열의 순서를 반대로 바꿉니다.let arr = [1, 2, 3]; arr.reverse(); // [3, 2, 1]
5) 기타 메소드
① join()
: 배열의 모든 요소를 연결해 하나의 문자열로 반환합니다.let arr = ['Hello', 'world']; let str = arr.join(' '); // "Hello world"
② slice()
: 배열의 일부를 잘라 새로운 배열을 반환합니다. 원본 배열은 변경되지 않습니다.let arr = [1, 2, 3, 4]; let subArr = arr.slice(1, 3); // [2, 3]
③ forEach()
: 배열의 각 요소에 대해 지정된 함수를 실행합니다. 값을 반환하지 않습니다.let arr = [1, 2, 3]; arr.forEach(x => console.log(x)); // 1, 2, 3
3. Javascript IF문
중요 📌 ]
- if (비교식이나 논리식뿐 아니라 모든식 즉 모든값이 올 수 있다.)
- 자바에서는 true아니면 false를 판단할 수 있는
- 비교식이나 논리식이 와야 한다(산술식(x))
- 자바스크립트에서는 모든 식이 가능하다.
- 0이나 null 그리고 false 이외의 모든 값은 true로 판단하기 때문
💡 Java와 JavaScript의 if 문 차이
1. Java:
- 조건식에는 비교식(예: a > b, a == b)이나 논리식(예: a && b)만 사용 가능
- 산술식(예: a + b)이나 기타 값은 사용 불가
- 조건식은 반드시 true 또는 false로 평가2. JavaScript:
- if 문에 비교식이나 논리식뿐만 아니라 모든 값이 들어올 수 있다.
- JavaScript는 truthy와 falsy 개념을 사용하여 값의 진릿값을 평가
- Falsy 값: false, 0, NaN, ""(빈 문자열), null, undefined
- Truthy 값: 그 외의 모든 값은 true로 평가
예를 들어, 빈 배열 [], 빈 객체 {}, 숫자(0이 아닌 값) 등은 모두 true로 평가※ ❗요약:
- Java에서는 조건식에 반드시 비교식이나 논리식만 사용 가능
- Java에서는 산술식은 사용 불가
- JavaScript에서는 모든 값이 조건식으로 사용 가능
- JavaScript에서는 값이 false로 평가되는 경우는 0, null, false 등 falsy 값만 해당
- 그 외의 값은 truthy 값으로 평가되어 true로 판단
Javascript IF문 예제 📖 ]
console.log('[NaN 판별하기]'); var nan = parseInt('HELLO'); console.log(nan);//NaN은 number 타입 if(isNaN(nan))console.log("%s는 NaN이 아니다 즉 숫자다",nan); else console.log("%s는 NaN이 아니다 즉 숫자다",nan); console.log('[undefined 판별하기]');//변수===undefined 로 판단 var unvar;//undefined 타입 console.log(unvar); console.log(unvar == undefined); //문자열로 비교하면 무조건 false console.log(unvar == 'undefined'); console.log(unvar === 'undefined');
4. Javascript IF문 삼항 연산자
📌 정의 ]
삼항 연산자
: 자바와는 다르게 판단식(모든식)이 참이거나 거짓일때 결과값을 변수에 담지 않아도 됨.
삼항 연산자 방식1]
- JAVA 실행 시 에러 ❌
: 판단식 ? 참일때 출력문 : 거짓일때 출력문;
삼항 연산자 방식2]
: var 변수 =판단식 ? 참일때 값 : 거짓일때 값;
Javascript IF문 삼항 연산자 예제 📖]
//방식 1] 자바 X num1 > num2 ? console.log('num1이 num보다 크다') : console.log('num1이 num2보다 크지 않다'); //방식 2] 자바 O var result = num1 > num2 ? 'num1이 num보다 크다':'num1이 num보다 크지 않다'; console.log(result); //방식 3] 자바 O console.log(num1 > num2 ? 'num1이 num2보다 크다':'num1이 num2보다 크지 않다');
응용 예제 📖]
<fieldset> <legend>성적 출력</legend> 국어 <input type="text" id="kor" /> 영어 <input type="text" id="eng" /> 수학 <input type="text" id="math" /> <span id='span' style='color:red;font-weight:bold;'>여기에 출력</span> <button onclick="getGrade();">확인</button> </fieldset> <script> var korNode = document.querySelector('#kor'); var engNode = document.querySelector('#eng'); var mathNode = document.querySelector('#math'); var spanNode = document.querySelector('#span'); function getGrade(){ console.log('클릭 이벤트 발생'); } var kor = parseInt(korNode.Value); var eng = parseInt(engNode.Value); var math = parseInt(mathNode.Value); var avg = (kor+eng+math)/3; if(avg >= 90) spanNode.textContent='A학점'; else if(avg >= 80) spanNode.textContent='B학점'; else if(avg >= 70) spanNode.textContent='C학점'; else if(avg >= 60) spanNode.textContent='D학점'; else spanNode.textContent='F학점'; </script>
