Javascript 정리(4)

✅ Array

👉 배열을 사용하면 몇 천 개의 변수를 생성하지 않고, 하나의 변수에 모든 데이터를 갖고 있을 수 있다.
👉 배열은 대괄호([])로 감싸져 있다. 빈배열 또는 소(element)가 있는 배열이 있다.

let city = "서울"
let city = "대전"
let city = "대구"
let city = "부산"
let city = "광주"
.
.
.
let KOSPI = 2062.82
let KOSPI = 2053.2
let KOSPI = 2045.92
let KOSPI = 2058.82
let KOSPI = 2053.12
// 이렇게 수많은 변수를 만들어 내는 것이 비효율적이므로
// 변수 1개(cities)를 생성하여 배열(array)로 값을 한 번에 담아줄 수 있다.

let cities = ["서울", "대전", "대구", "부산", "광주", "제주도"];
let KOSPI = [2062.82, 2053.2, 2045.92, 2058.82, 2053.12, 2055.7]; 

⏩ 배열의 값, 하나 하나를 Element(요소)라고 부른다.
⏩ 요소와 요소 사이에는 쉼표로 구분한다.
⏩ 요소 자리에는 String, Number, Array 모두 가능

var anything = ["대전", 1987, ["하나", "둘", 3]];
console.log(anything[0]);  // "대전"
console.log(anything[1]);  // 1987
console.log(anything[2]);  // ["하나", "둘", 3]
// String형인 "대전"은 index가 0
// Number형인 1987은 index가 1
// Array형인 ["하나", "둘", 3]은 index가 2

👉 배열의 순서(Index)
index는 1이 아니라 0부터 시작한다.

/* 
`getElement` 함수안에 arr 변수를 선언했습니다.
arr 변수는 배열을 할당했고요, 배열에는 다양한 데이터 타입의 요소가 들어있네요!
배열이 담긴 arr 변수에 접근하여 `getElement` 함수가 `"array"` 라는 문자열을 return 할 수 있도록 해주세요.
*/

function getElement() {   //빈함수
   let arr = [3, [4, ["array", 9], 2+3], [0]];
           
   return arr[1][1][0];  // 'array'를 가리키는 순서
}
console.log(getElement());


/* 
`addFirstAndLast` 함수 안에 작성해주세요.
`addFirstAndLast` 함수에 주어진 인자 `myArray`는 숫자 값으로만 이루어진 array 입니다.
`addFirstAndLast` 함수에 주어진 인자 `myArray` 의 첫번째 element와 마지막 element의 값을 더한 값을 리턴해주세요.
만일 `myArray`에 한 개의 요소만 있다면 해당 요소의 값을 리턴해 주시고 요소가 없는 비어있는 array라면 0을 리턴해주세요.
*/

let addFirstAndLast = (myArray) => {
   if (myArray.length > 1) {      // elements 갯수는 최소 2개 이상(첫번째 element와 마지막 element의 값을 더한 값을 리턴해야 하기 때문에)
      return myArray[0] + myArray[myArray.length-1];
   }  
   //myArray의 0번째, myArray의 마지막번째(length-1) 기억하기!!
   if (myArray.length == 1) {      // 배열의 전체 길이가 1 이라면 myArray그대로 출력
      return myArray;
    }
   if (myArray.length == 0) {  // 배열 전체에 값이 없다면
      return 0;
    }
}
addFirstAndLast([1,2,4]);   // 5
addFirstAndLast([3]);       // 3
addFirstAndLast([])         // 0

---

✅ for문

👉 코드를 원하는 만큼 반복시킬 수 있는 반복문이다.

let count = 1;
for (let i = 0; i <= 5; i++) {    
  count = count + 1;
}
// i는 1씩 증가하면서 0, 1, 2, 3, 4, 5까지 증가, for문 내부의 코드 총 6번 실행
// i 가 5가 될때까지 for 문의 {} 안을 실행하다가, 6이 되면 i <= 5라는 식은 false 가 됨. (6 > 5)

for (var i = 2; i < 10; i = i + 2) 
// i 는 2부터 시작하여 10보다 작을때까지 2씩 증가시키면서 for문을 돌린다.
// i가 2,4,6,8 으로 2씩 증가하며 for문을 총 4번 반복.
// i 도 for문을 돌며 계속 변하는 값이다.
// for문 조건의 마지막에 `i = i + 2`는 원래의 i 에 2씩 더한다는 뜻이므로 for 문이 한 번 돌 때마다 i 는 2씩 증가하는 것.

for (var i = 10; i > 7; i--)
// i는 10부터 시작하여 7보다 클때까지 (7보다 클 동안만) - 1씩 감소하면서 for문 안의 코드를 실행시킨다.
// i가 10, 9, 8 으로 1씩 감소하며 for문을 총 3번 반복한다.

👉 반복문 내부의 조건문 실행 방법

const home = "대전";
let cities = ["서울", "대전", "대구", "부산", "광주", "제주도"];
// home이라는 변수 선언("대전" 요소 할당), cities라는 변수 선언(배열값 할당)

for (let i = 0; i <= cities.length; i++) {
   if (cities[i] === home) {    //cities의 배열값이 변수 home의 값과 같을 때,  
   console.log("네, " + cities[i] + " 사시는군요");   
   }   // '네, 대전 사시는군요' 출력 (cities[i] = home = '대전')
}

❗ for문을 작성할 때, 배열의 총 길이가 얼마나 되는지 모르는 경우도 있다. 이럴 경우에는 for문에서 i가 어디까지 돌아야 하는지 제한해주기 어려워진다. 따라서 배열의 총 길이를 확인하는 방법은 아래와 같다.

console.log(배열이름.length);

let cities = ["서울", "대전", "대구", "대전", "광주", "대전"];
console.log(cities.length);   // 6 
// cities 배열의 요소는 총 6개 이므로 6 이라는 숫자가 반환.

❗ 배열의 총 길이를 숫자가 아닌 배열이름.length을 사용하여 for문에 적용해주는 방법도 있다.
✨ 가운데 비교연산자를 주의!!!
<= 가 아닌 <를 사용하고 있다. 꼭 전체 길이(.length) 미만 이어야 한다.

for (var i = 0; i < cities.length; i++) {
   if (cities[i] === home) {
     alert("아, 여기 사시는군요");
   }
}

/* 
findSmallestElement 의 arr 인자는 숫자 값으로만 이루어진 array 입니다.
array 의 값들 중 가장 작은 값을 리턴해주세요.
만일 array가 비어있으면 0을 리턴해주세요.
예를 들어, 다음과 같은 array이 인자(input)으로 들어왔다면 1이 리턴되어야 합니다.
ex)  [20, 200, 23, 1, 3, 9]
*/

function findSmallestElement(arr) {
    if (arr.length === 0) {
    return 0; //빈 배열이면 0을 리턴
    } 
 
    else { 
      let min = arr[0];    // 변수 min에 배열의 아무 값(Index 0번째)을 임의로 설정. (가상의 최솟값)
      for (i = 0 ; i < arr.length; i++) {  // 0번째 임의값부터 시작해서 전체를 반복문으로 돌린다(하나씩 값을 비교해감)
          if (arr[i] < min ) {  // arr배열 값이 임의로 설정한 값(0번째 임의의 값)보다 작으면, 
              min = arr[i];  // 최솟값 갱신
          } 
       } return min;  
    }
}

findSmallestElement([200, 30, 5, 7, 200, 1, 9]);   // 1 출력
// 200(배열에서 0번째 값)과 순차적으로 비교해가면서 최솟값을 갱신해 나간다
/* 
200 > 30 ➡ 30 = min
30 > 5 ➡ 5 = min
5 > 7 ➡ 5 = min
5 > 200 ➡ 5 = min
5 > 1 ➡ 1 = min
*/



// 다른 풀이
function findSmallestElement(arr) {
  for(let i=0; i<arr.length; i++){
      if(arr.length >0) {
        let small = arr.sort();
        return small[0]
      }
      else if (arr.length = 0) {
        return 0
      }
    }
  }
    findSmallestElement([20, 200, 23, 1, 3, 9])

---

✅ 배열 조작하기

👉 빈 배열 선언 후, 요소를 추가할 수 있다.

index로 접근하여 수정이나 추가하는 방법

let cities = [];

cities[0] = "서울"; // ["서울"]
cities[1] = "대전"; // ["서울", "대전"]
cities[2] = "대구"; // ["서울", "대전", "대구"]
cities[5] = "제주도"; // ["서울", "대전", "대구", undefined, undefined, "제주도"]
// 요소를 할당하지 않았으면 undefined 라고 출력

console.log(cities[5]); // "제주도" 출력

👉 배열에 요소를 추가하는 또다른 방법

push, unshift함수로 추가하는 방법

⏩ push(): array의 마지막 부분, 즉 꼬리에 요소들을 추가
⏩ unshift(): array의 맨 앞 부분, 즉 머리에 요소들을 추가

let cities = [];

cities.push("경주", "전주");  // 8 출력, 기존 cities배열 요소들(6개)에서 뒤에 2개 추가해서 8.
cities.unshift("인천");  // 9 출력, cities배열이 총 8개가 되었는데 맨 앞에 1개 추가해서 9.

console.log(cities);  // ['인천', '서울', '대전', '대구', undefined, undefined, '제주도', '경주', '전주' ]

❗ cities라는 변수에 [ ] 배열을 할당하는 순간, cities라는 변수는 Array형이 된다.

let day = ['m', 's', 'w', 't'];
day[1] = 't';  // 2번째 요소 수정(변경 s ➡ t)
day[4] = 'f';  // 4번째 요소 추가
day[5] = 's';  
console.log(day); // ['m','t','w','t','f','s']

let month = [1, 2, 3, 4]
month.push(5); // 5 출력
console.log(month); // [1,2,3,4,5]

👉 배열에 요소를 제거하는 방법

pop shift함수로 제거하는 방법

⏩ pop(): array의 꼬리에 요소들을 제거, 즉 가장 마지막 요소가 제거되고, 마지막 요소 1개의 값을 반환
⏩ shift(): array의 맨 앞 부분, 즉 머리에 요소들을 제거

let cities = [];

cities.pop("경주", "전주");  // "전주" 출력, 기존 cities배열 요소들(9개)에서 뒤에서 가장 마지막 요소만  1개 제거해서 8개가 됨.
cities.shift("인천");  // '인천' 출력, cities배열이 총 8개가 되었는데 맨 앞에 1개 제거해서 7.

console.log(cities);  // ['서울', '대전', '대구', undefined, undefined, '제주도', '경주']

/* 
divideArrayInHalf 함수의 인자인 array는 숫자 값으로만 구성되어 있으며 정확히 총 5개의 요소(element)로 구성되어 있습니다.
array의 요소들 중 10과 같거나 작은 값의 element들은 result의 맨 앞으로, 
10보다 큰 값의 요소들은 result의 맨 뒤로 재구성된 배열을 리턴해주세요.
(중요사항) 이때, 순서는 array의 맨 뒤의 요소 부터 맨 앞의 요소까지 순차적으로 이루어저야 합니다.
예를 들어, 인자 array 값이 다음과 같을때
[1, 20, 10, 5, 100]
result 배열이 만들어 지는 순서는 다음과 같으며,
[100]
[5, 100]
[10, 5, 100]
[10, 5, 100, 20]
[1, 10, 5, 100, 20]
아래와 같은 result가 리턴 되어야 합니다.
[1, 10, 5, 100, 20]
*/

// (1) for문을 -로 구현한 방식
function divideArrayInHalf(array) {
  let result = [];  // 빈배열로 둔다. push와 unshift로 넣어줄 것이기 때문. 
                      // 이곳에 들어갈 값은 함수 호출할때 넣어준다.
                      // 함수로 배열값 지정 ➡ for문을 통해 순서 지정(정렬) ➡ result로 리턴
  for (let i = array.length; i>=0; i--){  // i는 배열의 전체 길이(아직 값을 넣고 호출하기 전이니깐), maximum이 없으므로 i--를 써서 0까지 값을 줄여나간다.
    if(array[i] <= 10) {   // 통 배열이 10보다 작거나 같을 때,
      result.unshift(array[i]);  // result 배열에 '맨 앞'부터 추가해라
    }
    if(array[i] > 10) {    // 통 배열이 10보다 클 때,
      result.push(array[i]);  // result 배열에 '맨 뒤'부터 추가해라
    }
  }
  return result;   // result 변수(값=배열) 리턴
}
//함수 호출할 때 값을 넣어준다 
divideArrayInHalf([1, 20, 10, 5, 100]);  

// (2) for문을 +로 구현한 방식(arrow 함수식)
let divideArrayInHalf = (arr) => {
  let result = [];
 
  for (i= 0; i < arr.length; i++){
    if (arr[i] <= 10) {
      result.unshift(arr[i]);
    }

    if (arr[i] > 10) {
      result.push(arr[i]);
    }
  } return result;
}
divideArrayInHalf([1,40,5,84,9])