[새싹(SeSAC) 프론트엔드] day13 221102 수업 복습

[실습 문제 풀이 피드백]

*내 코드 

  case "월":
    document.write(day + "은(는) 출근");
    break;
  case "화":
    document.write(day + "은(는) 출근");
    break;
  case "수":
    document.write(day + "은(는) 출근");
    break;
  case "목":
    document.write(day + "은(는) 출근");
    break;

 

*리팩토링

case 월, 화, 수, 목을 합쳐서 한번만 작성할 수 있음 

case "월":
case "화":
case "수": case "목":
document.write(day + "은(는) 출근");

 

* 코드 중복이 너무 많았음 ➡️ 빨리 하려고 하지말고 제대로 하려고 노력하자. 

 

 

** 1 : true ; 0 : false 

[내가 작성한 코드]

var result = input % 2 == 0 ? "짝수" : "홀수";

 

[true / false 특징 활용 시]

var result = input %2 ? “짝수” : “홀수”;

 

 

** 문제 제대로 보기 

- 양의 정수를 입력하지 않은 경우도 고려해줬어야 했음

- 문제를 천천히 꼼꼼하게 제대로 풀자 

➡️ 모든 문제 조건을 일단 먼저 작성하기. 천천히 리팩토링 적어도 꼭 한번은 하기 

 

---

 

 

 

배열

- 데이터 값을 하나의 목록으로 생성 : 공통된 특성의 항목(원소)을 하나의 변수로 작성가능

- 여러 개의 원소들을 연속적으로 저장하고, 전체를 하나의 단위로 다루는 데이터 구조 

 

생성 

- 대괄호 [] 사용 

- 대괄호 안에 값을 입력. 여러 개일 경우 쉼표 , 로 구분

 

 

 

 

접근 

- 원하는 원소 색인(index)에 대괄호 사용

- 배열의 첫 번째 원소가 0번, 두 번째 원소가 1번

 

설정 및 변경

- 특정 원소의 인덱스를 작성하고, 새로운/원하는 값 대입해주기 

 

 

 

(*) 실습

[코드]

// 3과 4의 배수가 아닌 수의 합 

var sum = 0;

for (var i = 1 ; i <=100; i++){
  // 두 조건이 모두 
  if(i%3!=0 && i%4!=0){
    sum += i;
  }
}
document.write("1~100까지의 수 중에서 3과 4의 배수가 아닌 수의 합은 : " + sum);

[결과]

 

 

새로운 원소 추가 

: 색인을 입력하여 원소 추가 가능 

 

(*)실습

[코드]

var fruit = [];
fruit[0] = "딸기";
fruit[1] = "사과";
fruit[2] = "바나나";
fruit[3] = "포도";
fruit[4] = "수박";
fruit[5] = "참외";
fruit[6] = "키위";
fruit[7] = "망고";
fruit[8] = "체리";

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

fruit[33] = "메론";
console.log(fruit);

[결과]

 

 

- 서로 다른 자료형을 원소로 가진 배열을 생성할 수 있다. 

➡️ 숫자, 문자열뿐만 아니라 '배열' 도 추가할 수 있음 

 

property : 배열에 대한 정보

 

1️⃣ length : 배열의 길이 - 원소의 개수를 확인

 배열이름.length

 

(*)실습

[코드]

var man = ["울버린", "미스틱", "비스트"];

document.write("배열을 모두 출력 :: ");
for (var i = 0; i < man.length; i++) {
  document.write(man[i] + " ");
}

 

[출력]

 

 

method : 배열을 변경하거나 새로운 배열을 반환

 

 

1️⃣ push

: 배열 끝에 새로운 원소를 추가 

- 원소를 추가한 후 총 배열의 길이가 얼마인지 알려줌 

 

(*) 실습

[코드]

var animal = [];
animal.push("cat");
document.write(`첫번째 배열 추가 : ${animal} `);
document.write("<br>");
document.write(`추가하면서 출력하면 배열의 크기 반환 : ${animal.push("dog")}`);

 

[결과]

2️⃣ unshift 

: 배열 '맨 앞'에 원소 추가

배열이름.unshit(element).

(*) 실습

[코드]

var animal = ["cat", "dog", "snake"];

document.write(`배열 추가 전 : ${animal}  `);
document.write("<br>");
animal.unshift("bear");
document.write(`배열 추가 후 : ${animal}  `);
document.write("<br>");
document.write(`원소 추가하면서 출력 : ${animal.unshift("duck")}  `);
document.write("<br>");
document.write(`최종 배열 : ${animal}  `);

 

[결과]

 

 

3️⃣ pop

: 배열의 맨 '마지막' 원소를 제거 

배열이름.pop()

 

(*) 실습

[코드]

var animal = ["cat", "dog", "snake", "pig"];

document.write(`초기 배열 : ${animal} <br>  `);

var lastAnimal = animal.pop();
document.write(`순서가 마지막이라 제거된 동물은 ${lastAnimal} <br>`);

document.write(`제거된 후 전체 배열은 : ${animal} <br> `);
document.write(`제거된 후 배열의 길이는 ${animal.length}  `);

 

[결과]

 

4️⃣ shift 

: 배열의 맨 '앞' 원소를 제거

배열이름.shift()

 

(*)실습

[코드]

var animal = ["cat", "dog", "pig", "bear"];
document.write(`초기 배열 : ${animal} <br> `);

var firstAnimal = animal.shift();

document.write(`삭제 된 후 배열 : ${animal} <br> `);

 

[결과]

 

 

5️⃣ concat 

: 배열 두 개를 결합해서 하나의 배열로 생성

- 두 배열이 결합되어도 원래 배열은 바뀌지 않음 ➡️ 새로운 배열 값으로 저장해주어야 함 

- 두 개 이상의 배열을 결합하고 싶다면 쉼표를 넣어서 구분

 

첫번째배열.concat(두번째배열)

 

 

(*) 실습

[코드]

var animal = ["cat", "dog","pig"];

var fruit = ["apple", "orange", "melon"];

var color = ["white", "red", "blue"]

var sumArray = animal.concat(fruit);

document.write(`animal 배열 : ${animal}<br>  `);
document.write(`fruite 배열 : ${fruit} <br>  `);
document.write(`합쳐진 배열 : ${sumArray} <br> `);

document.write(`배열 3개 합치기 : ${animal.concat(fruit, color)}  `);

 

[결과]

 

 

 

6️⃣ indexOf 

: 원하는 배열 원소의 색인 찾기 

배열이름.indexOf(원소) 

 

: 배열에 없는 값을 찾는다면 -1 반환

 

(*) 실습

[코드]

var color = ["white", "red", "blue"];

document.write(`전체 배열 출력 ${color}  `);
document.write(
  `color배열에서 blue는 몇 번째에 있는가 : ${color.indexOf("blue")} <br> `
);

 

[결과]

 

7️⃣ join

: 배열에 포함된 모든 원소를 하나의 문자열로 생성

배열이름.join(separator) //괄호안에 구분자를 넣지 않으면 쉼표로 구분해 넣은 문자열로 반환

 

(*) 실습

[코드]

var color = ["red", "white", "blue"];

document.write(`배열 출력 : ${color} <br>`);
document.write(`join을 사용하여 출력 : ${color.join()}  <br>`);
document.write(`join에 구분자 추가 ${color.join("*")}`);

[결과]

 

스택 (stack) 

: LIFO (Last In First Out) 

➡️ 회전초밥 

 

큐(queue)

: FIFO (First In First Out) 

➡️ 번호표, 프린터기 

 

 

---

 

⏹️ Math.random() 

: 0와 1 사이의 숫자 하나를 무작위로 선택해서 반환

- 1 미만의 숫자만 반환

➡️ 0~1사이의 값이 나오기 때문에 곱셈을 해주지 않으면 다 0.xxxx의 값

  따라서,  더 큰 숫자를 원하면 Math.random()이 반환한 값에 원하는 만큼 10*n을 곱셈

 

⏹️ Math.floor()

: 소수점 이하의 숫자를 버리고 정수를 생성

 

(*)실습

[코드]

var word = ["book", "pen", "cup", "note"];

var randomNum = Math.floor(Math.random() * 4);
document.write(`배열 중 무작위 값 한 개 출력 : ${word[randomNum]}`);

 

[결과]

 

(*) 실습 - 2 

[코드]

var answer = [
  "좋은 생각이에요",
  "네, 꼭 해보세요",
  "별로 좋은 생각 같지 않아요",
  "오늘은 안 해도 되지 않을까요",
  "컴퓨터는 하지 말라고 하네요",
];

var question = alert("숙제를 해야 할까요?");

var answerNum = Math.floor(Math.random() * 5);

document.write(`대답 : ${answer[answerNum]}`);

[결과]

 

 

(*) 실습 -3 

[코드]

var color = ["푸른", "붉은", "검은", "하얀"];

var nature = ["늑대", "태양", "독수리", "바람"];

var word = ["눈물", "환생", "기상", "일격", "유령"];

var ranWord = Math.floor(Math.random()*(color.length+nature.length+word.length));

var nameGroup = color.concat(nature, word);

document.write(`전체중에 하나 배출 : ${nameGroup[ranWord]}`);

[결과]

 

 

(*) 실습 - 4

[코드]

var num = 0;
var sum = 0;

var n = [4, 5, -2, 28, 33];

for (var i = 0; i < n.length; i++) {
  sum += n[i];
}

document.write("합은 " + sum);

 

[결과]

 

 

(***) 정리 

	앞	뒤
추가	unshift	push
삭제	shift	pop

Join : 배열에 포함된 모든 원소를 하나의 문자열로 생성 

Concat : 배열 두 개를 결합해서 하나의 배열로 생성

indexOf : 원하는 배열 원소의 색인 찾기 

length : 배열의 길이 찾기

 

 

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 3주차 블로그 포스팅(수)