[새싹 프론트엔드] 3주차 - 3
배열
• 데이터 값을 하나의 목록으로 생성
• 여러 개의 원소들을 연속적으로 저장하고, 전체를 하나의 단위로 다루는 데이터 구조
예) 가장 좋아하는 과일 3가지 목록
| var 과일TOP3 = [“딸기”, “사과”, “바나나”] |
▶ 변수 3개를 작성하지 않고, 과일TOP3라는 배열 하나만 생성
배열을 배워야 하는 이유
배열을 이용하면 변수를 이렇게 만들지 않아도 가능
배열 생성
✔️ 대괄호([ ]) 사용
✔️ 대괄호 안에 값을 입력. 여러 개일 경우 쉼표(콤마)로 구분
예시 1)
배열 원소 접근
• 원하는 원소 색인(index)에 대괄호 사용
• 배열의 첫 번째 원소가 0번, 두 번째 원소가 1번
딸기라는 값만 보고싶으면 딸기[0]
대괄호 안의 색인을 변경
배열의 원소를 설정 및 변경, 추가 가능
배열에 새로운 원소 추가
미리선언하고 나중에 변수 넣기
• 빈 배열 생성 var 과일 = []
• 0~8번 색인에 각각 과일 이름 삽입
• 원소는 어떤 색인이든 추가가 가능하다.
• 33번 색인에 과일 추가
(일반적으로 중간에 빈값을 넣고 하지는 않음 보통은 앞에서부터 데이터를 차곡차곡 넣음)
한 배열에서 여러 자료형 사용
서로 다른 자료형을 원소로 가진 배열 생성
• (숫자, 문자열, 배열) *모든 타입 다 넣을 수 있음
대괄호를 사용하여 배열 속의 배열의 원소에 접근
내부 배열 원소에 접근
배열 다루기
배열은 프로퍼티와 메서드로 다룬다.
• 프로퍼티 : 배열에 대한 정보 (객체에적용할 수 있는 속성들)
• 메서드 : 배열을 변경하거나 새로운 배열을 반환
배열의 길이
배열 내 원소의 개수를 확인
• length 프로퍼티
• 배열이름.length
* 주로 length를 이용하여 for문의 범위를 지정
메서드 호출이란?
• 컴퓨터 언어로 어떤 동작을 실행하는 행위
배열에 원소 추가 - push & unshift
• 배열 끝 (맨 뒷칸)에 새로운 원소를 추가
• push 메서드 호출
• 배열이름.push(추가할_원소_이름)
1. 괄호의 한 원소가 배열에 추가
2. 배열의 길이가 반환
• 배열 시작 (맨 앞칸)에 새로운 원소를 추가
• unshift 메서드 호출
• 배열이름.unshift(추가할_원소_이름)
배열의 원소 제거 pop & shift
• 배열의 마지막 원소를 제거
• pop 메서드 호출
• 배열이름.pop()
• 마지막 원소를 제거한 후 제거된 원소를 값으로 반환
• 배열의 첫 번째 원소를 제거
• shift 메서드 호출
• 배열이름.shift()
• 첫 번째 원소를 제거한 후 제거된 원소를 값으로 반환
배열 결합하기 concat
• 배열 두 개를 결합해서 하나의 배열로 생성
• 첫번째 배열.concat(두번째배열)
* 두 배열의 결합되었다고 해서, 원본 배열이 변하지는 않음
여러 배열 결합하기 쉼표
• 두 개 이상의 배열을 결합해서 하나의 배열로 생성
• 결합하려는 배열을 차례로 괄호 안에 넣고 쉼표로 구분
배열 원소 색인 찾기
• 원하는 배열 원소의 색인을 찾는다.
• 배열이름.indexOf(원소)
배열을 문자열로 만들기
• 배열에 포함된 모든 원소를 하나의 문자열로 생성
• 배열이름.join()
• 모든 원소를 쉼표로 구분해 넣은 문자열 반환
※ 쉼표를 구분자로 사용하고 싶지 않다면?
• 배열이름.join(separator)
배열을 문자열로 만들기
• 문자열로 바꾸고 싶은 배열이 있을 때 유용
만약, join을 모른다면 다음과 같이 코드를 작성해야 함
주소가 더 길다면 더 많은 코드가 필요
스택(stack)
• 맨 처음에 추가한 원소가 맨 마지막에 제거 (like 회전초밥)
• LIFO(Last In First Out)
큐(queue)
• 데이터를 차례대로 입력하고, 입력된 순서대로 하나씩 꺼내서 처리하기 위해 사용 (like 프린터기)
• 맨 처음에 추가된 원소를 가장 먼저 제거
• FIFO(First In First Out)
Math.random()
• 0과 1 사이의 숫자 하나를 무작위로 선택해서 반환
• 1 미만의 숫자만 반환
• 더 큰 숫자를 원하면 Math.random()이 반환한 값에 곱셈
Math.floor()
• 소수점 이하의 숫자를 버리고 정수를 생성
Math.random()과 Math.floor() 활용
• Math.random()을 통해 나온 값에 배열의 길이를 곱한 후,
• Math.floor()를 호출
• 0, 1, 2, 3 중 하나의 숫자가 무작위로 반환
예시-1)
배열의 원소를 랜덤으로 선택
예시-2)
인디언 이름 제조기 만들기
var 색상 = ["푸른", "붉은", "검은", "하얀"];
var 자연 = ["늑대", "태양", "독수리", "바람"];
var 단어 = ["눈물", "환상", "기상", "일격", "유랑"];
document.write("<br/>");
var 인디언이름 = Math.floor(Math.random() * 4);
document.write(색상[인디언이름] + 자연[인디언이름] + 단어[인디언이름]);
예시-3)
for문을 이용하여 배열의 합 구하기
var sum = 0;
var n = [4, 5, -2, 28, 33];
for(var i = 0; i < 5; i++)
{
sum = sum + n[i];
}
document.write(“합은 ” + sum);
결과)
[실습회고]
for문과 배열을 합쳐서 사용하는 것이 익숙치 않아서 뭔가 어떤 것을 사용해야겠구나는 감이 오는데 그거를 완벽하게 계산이 돌아가기 까지 만드는 것이 아직은 어려운 것 같다,,, 이번 주는 다행히도 복습하는 시간이 이틀 주어져서 연습을 많이 하기는 했지만 여전히 못 푸는 문제들이 있어서 많은 연습을 해야할 것 같다.
이 문제는 if문을 사용하여 풀긴 했는데 보다 더 깔끔하게 코드를 짤 수도 분명히 있을 것,,,
클린코드와 비교하기 위해 올림
<script>
var 계약금액 = parseInt(prompt("통신요금을 입력해보삼"));
var 사용개월수 = parseInt(prompt("사용개월 수를 입력해보삼"));
var 카드코드 = parseInt(
prompt("신용카드코드를 입력해보삼(11,12,13 중 하나)")
);
document.write(`계약 금액 : ${계약금액}`);
document.write("<br>");
document.write(`사용 개월 수 : ${사용개월수}`);
document.write("<br>");
document.write(`카드코드 : ${카드코드}`);
document.write("<br>");
if (사용개월수 <= 6) {
if (카드코드 == 11) {
document.write(`최종요금 : ${계약금액 * 0.95}원`);
} else if (카드코드 == 12) {
document.write(`최종요금 : ${계약금액 * 0.92}원`);
} else {
document.write(`최종요금 : ${계약금액 * 0.88}원`);
}
} else if (사용개월수 > 6 && 사용개월수 <= 12) {
계약금액 *= 0.9;
if (카드코드 == 11) {
document.write(`최종요금 : ${계약금액 * 0.95}원`);
} else if (카드코드 == 12) {
document.write(`최종요금 : ${계약금액 * 0.92}원`);
} else {
document.write(`최종요금 : ${계약금액 * 0.88}원`);
}
} else {
계약금액 *= 0.8;
if (카드코드 == 11) {
document.write(`최종요금 : ${계약금액 * 0.95}원`);
} else if (카드코드 == 12) {
document.write(`최종요금 : ${계약금액 * 0.92}원`);
} else {
document.write(`최종요금 : ${계약금액 * 0.88}원`);
}
}
</script>
이거는 진짜 가위바위보 자체를 어떻게 비교해야할 지 고민하다가 위에 문제와 마찬가지로 if문으로 그냥 ,, 드럽게,, 모든 경우의 수를 욱여넣어서 만듬,,, ㅋㅋㅋ ㅜㅜ 원래는 더 길고 중간에 막 컴퓨터가 이겨도 진걸로나오고 이래서 골머리 싸매다가 귤님이 또 비긴 거는 따로 빼서 위에 한줄로 정리하라고 조언 주셔서 또 넙죽 받아먹고 해결 완. 깔끔하게 코드 짜고싶어 낟오,,,
<script>
var input = prompt("가위바위보 게임 (가위바위보 중 하나 입력ㄱ) ");
var 가위바위보 = ["가위", "바위", "보"];
var 컴퓨터 = 0;
var 컴퓨터 = 가위바위보[Math.floor(Math.random() * 가위바위보.length)];
document.write(`컴퓨터는 ${컴퓨터}를 냈습니다`);
document.write("<br>");
if (컴퓨터 == input) {
document.write("비겼습니다");
} else if (컴퓨터 == "가위") {
if (input == "바위") {
document.write("컴퓨터가 졌습니다");
} else {
document.write("컴퓨터가 이겼습니다");
}
} else if (컴퓨터 == "바위") {
if (input == "보") {
document.write("컴퓨터가 졌습니다");
} else {
document.write("컴퓨터가 이겼습니다");
}
} else {
if (input == "가위") {
document.write("컴퓨터가 졌습니다");
} else {
document.write("컴퓨터가 이겼습니다");
}
}
<script>
var 돈 = 0;
var count = 10;
for (i = 0; i < 10; --i) {
돈 = parseInt(prompt(`돈을 넣어주세요(남은커피 : ${(count)})`));
if (돈 > 300) {
alert(`거스름돈 ${돈 - 300}원과 커피를 줍니다.(남은커피: ${count-=1})`);
} else if (돈 < 300) {
alert("돈이 부족합니다");
} else {
count-=1;
alert("커피를 줍니다");
}
}
</script>분명 for문 이용해서 쉽게 짰는데 ,, 자꾸 돈 모자르게 넣어도 커피 주는 호구커피자판기가 되벌인 것,,, 그래서 이리저리 또 고쳐보다가 var i 자체를 커피갯수로 했었는데 다시 카운트하는 변수를 따로 만들어서 커피 줄 때 변수에 적립하게 하고 남은 커피에 count-=1이라고 지정해줌 돈을 넣을 때 남은 커피는 count로 지정하면 깔꼼하게 되었다 ㅎㅎ
솔직히 이 두 문제 나에게 너무나도 어려웠던 문제,,,, 일단 중복을 제거하는 방법부터 생각 x,,,,, 그리고 두 값을 제외한 나머지의 합과 평균 ,, ? 진심 어케해야 제외됨 ,,, 그래서 혼자 이리저리 코드 짜봐도 랜덤한 숫자 나오게 하는 거까지가 한계인 것이다 ㅋㅋㅋㅋㅋ ㅜㅜ 그래서 물어물어 풀게 됨,,, 근데 ,, 이거 아직 이해를 잘 못해서 다시 복습해야함 이해 완벽히 하면 코드 올려야쥐 ,, 흑흑 난 너무 머리가 나빠,, 요즘 맨날 문제 풀면서 머릿속에서 재생되는 노래 ss501 - 내머리가 나빠서
새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 3주차 블로그 포스팅