0. java 와 js 배열 차이
1. 배열
<body>
<script>
// 배열
// 여러변수를 하나의 묶음으로 다루는 것
// 1. 배열의 선언
// ** 배열을 나타내는 괄호 : 대괄호[]
let member = [];
console.log(member);
// 2. 배열안에 데이터 넣어주기
// 배열 데이터 할당
member = ['임경남', '김민수', '이도연'];
console.log(member);
// 주의 ! undefind 로 배열을 선언하고 사용하지 말 것!
// ex) let array; --> XX
// 3. 선언 + 할당
let arr = [1,2,3];
// 4. 배열 내 데이터 접근 : 배열이름[인덱스]
console.log(member[2]);
// 5. 배열 내 값 변경
member[1] = '안현진';
console.log("변경된 배열 : ", member);
// 6. 배열 내 전체 데이터를 출력 : for문
// 배열의 길이 : 배열이름.length
console.log("현재 배열의 길이", member.length);
for(let i = 0; i < member.length; i++){
console.log(member[i]);
}
// 배열 함수 : 배열을 쉽게 사용할 수 있도록 제공하는 함수
// 1. pop() : 마지막 인덱스 데이터를 빼준다.
let popData = member.pop();
console.log("빠진데이터 : ", popData);
console.log("pop을 사용한 결과 : ", member);
// 2. push() : 마지막 인덱스에 데이터를 넣어준다.
member.push("김민수", "이주희");
console.log("push를 사용한 결과 : ", member);
// 3. 해당 데이터가 배열안에 포함되어 있는지 검사
console.log("임경남 있니?", member.includes("임경남"));
console.log("김진수 있니?", member.includes("김진수"));
// 4. indexOf() : 데이터의 인덱스 번호를 확인하는 함수
console.log("임경남이 어디있니? ", member.indexOf("임경남"));
// 5. 배열 내 데이터를 추출 vs 제거
// slice - 추출 vs splice - 제거
// 5-1. slice(유닛)
// 기존 배열을 건드리지 않고 새로운 배열을 복제해서 만든다.
// 배열이름.slice(시작 인덱스, 끝나느 인덱스 + 1)
let unit = member.slice(0,3);
console.log("slice : ", unit);
console.log("원본 배열 : ", member);
// 5-2. splice(탈퇴 & 재배치)
// 기존 배열에 접근해서 특정 값을 제거하고 대체
// 배열이름.splice(시작 인덱스, 제거할 개수, 대체할 값)
member.splice(1, 3, '김도원');
console.log("원본 배열 : ",member);
</script>
</body>1.1. 배열 실습
- 입력한 숫자만큼 과목 명을 적고 과목의 점수를 입력하여
총합과 평균을 계산하는 테이블을 만들어라
<body>
<script>
// 선생님이 푼 문제코드
let subject = [];
let score = [];
let sum = 0;
let avg = 0;
let num = prompt('과목 수를 입력하세요.');
for(let i = 0; i < num; i++){
let name = prompt('점수를 입력할 과목 명을 입력해주세요');
subject.push(name);
}
for(let i = 0; i < num; i++){
let subScor = prompt(subject[i]+"의 점수 입력 >> ");
score.push(subScor);
sum += parseInt(subScor);
}
avg = sum/num;
subject.push("총합");
subject.push("평균");
score.push(sum);
score.push(avg);
document.write("<table border='1'>");
document.write("<tr>");
for (let i = 0; i < subject.length; i++) {
document.write("<td>" + subject[i] + "</td>");
}
document.write("</tr>");
document.write("<tr>");
for (let i = 0; i < score.length; i++) {
document.write("<td>" + score[i] + "</td>");
}
document.write("</tr>");
document.write("</table>");
</script>
</body>2. 함수
<body>
<script>
// 함수 : 중복되는 코드를 최소화, 코드를 블럭화
/*
호이스팅(Hoisting) :
코드가 실행이되면 메모리에서
변수, 함수를 미리 저장해둔다.
출석체크 하듯이!
*/
// 1) 함수 선언문은 호이스팅이 일어난다.
console.log("가장 위쪽, 함수 선언문 >> ", addNum1(4,7));
// 2) var 키워드를 사용해서 변수를 선언하는 구간만 호이스팅이
// 일어난다 > 할당하는 것은 호이스팅 발생 xx
console.log("가장 위쪽, 함수 표현식 >> ", addNum2(4,7));
// 1. 함수 선언 방법(3가지)
// 1-1) 함수 선언문
function addNum1(num1, num2){
return num1 + num2;
}
// 1-2) 함수 표현식
var addNum2 = function (num1, num2){
return num1 + num2
}
// 1-3) ★★★ Arrow Function(화살표 함수) ★★★
let addnum3 = (num, num2) => {
return num+num2;
}
// 1) 매개변수가 하나일때는 소괄호 생략 가능
const fun1 = num1 =>{
return num1+num1;
}
// 2) 코드를 한줄로 작성 가능할때는 중괄호 or return 생략가능
const fun2 = num1 => num1+num1
console.log(fun2(4));
// 2. 함수 호출
console.log("함수 선언문 >> ", addNum1(10,4));
console.log("함수 표현식 >> ", addNum2(10,4));
console.log("화살표 함수 >> ", fun1(4));
// 3. 함수 특징
// 1) 데이터 타입을 검사하지 않는다.
// --> js 변수 선언 할때 데이터 타입 저장하지 않기 때문에
console.log(addNum1(3,7));
console.log(addNum1(3,"7"));
// 2) 매개변수의 개수가 같은지 확인하지 않는다.
// --> 함수를 선언한 순간 arguments 객체가 내부적으로 자동 생성된다.
console.log(addNum1(1,2,3,4,5));
// 3) 입력한 값의 개수가 매개변수의 개수보다 적은 경우
// --> 남은 매개변수 값을 undefined 형태로 설정됨.
// --> 연산의 결과가 내가 생각한 형식이 나오지 않게된 ! NaN
console.log(addNum1(1));
</script>
</body>2.1. 함수 실습
<body>
<script>
// 두 수를 입력 받아서 합을 구하는 addNumber() 함수 작성
// 1. 함수 선언
const addNumber = () => {
let num1 = prompt("첫 번째 정수 입력");
let num2 = prompt("두 번째 정수 입력");
alert("두 수의 합 >> " + (parseInt(num1)+parseInt(num2)) );
}
// 2. 함수 호출
addNumber();
</script>
</body>
제가 한 번 해보겠습니다.