[C/F TIL] 11일차 - JavaScript 배열

Code States
Front-end boost camp
Today
I
Learned

🫠 아침 운동 다녀왔어야 했는데 그냥 냅다 자버린 4월 25일, 11일차 시작

---

🫠 배열

• 배열 : 순서가 있는 값(=요소, element)
  -- 순서 -> 인덱스(index)라고 부름
• [] : 대괄호를 이용해서 배열을 만듦
• , : 각각의 원소는 쉼표로 구분
• myNumber[3]; : 3번째 인덱스 값 조회 (0, 1, 2, 3번째)
• myNumber[3] = 200; : 3번째 인덱스 값을 '200'으로 변경
• 인덱스를 벗어나면? = undifined 출력
• 연습

let myNumber = [[13, 30], [73, 8], [44, 17]];

-- myNumber의 1번째 인덱스 값은? : [73, 8]
-- myNumber의 1번째 인덱스값의 0번째 인덱스 값은? : 73

• myNumber.length : 배열의 길이를 알아낼 수 있음
• 배열의 메서드 :
  -- myNumber.push() : 뒤에 배열 추가
  -- myNumber.pop() : 배열 마지막 값 삭제
  -- myNumber.shift() : 배열 맨 앞의 값 삭제
  -- myNumber.unshift() : 배열 맨 앞에 값 추가
• element가 array에 있는지 없는지 여부 알아보기
  -- words.indexOf('배열 내부에 있는 단어') : 요소의 인덱스
  -- words.indexOf('배열 내부에 없는 단어') : '-1' 출력됨
• Array.isArray() : 자바스크립트의 특정 값이 배열인지 아닌지 판별 -> boolean으로 반환
• hasElement(배열, 찾으려는엘리먼트) : boolean값으로 반환
• array.includes(엘리먼트) : boolean값으로 반환

🫠 배열의 반복

• 반복문을 이용해 배열의 요소를 한번씩 출력하려면? (console.log(myNum[n])
  -- 숫자는 n 부터 시작한다.
  -- 숫자를 배열의 길이보다 작을 때까지 반복한다.
  -- 숫자는 1씩 증가한다.

for (let n = 0; n < myNum.length; n++) {
  console.log(myNum[n]);
}

🫠 배열 문제풀기 (업데이트 중)

• 문제1) 임의의 값을 입력받아 타입을 리턴하시오.
  -- 인자1 : anything (임의의 값)
  -- 출력 : string 타입 리턴
  -- 자바스크립트에서 array, null 타입은 존재하지 않지만, 이 둘을 구분하여 출력

function getType(anything) {
  if (anything === null){
    return "null";
  } else if (anyting = Array.isArray(anything)) {
    return "array";
  } else {
    return typeof anything;
  }
}

-- 나는 Array.isArray() 를 활용하지 못해 계속 오류가 떴었다.

• 문제2) 배열을 입력받아 배열의 첫번째 요소를 리턴해야 한다.
  -- 인자 1 : arr (임의의 요소를 갖는 배열)
  -- 출력 : 배열의 요소를 리턴해야 합니다.
  -- 빈 배열을 입력받은 경우, undefined를 리턴

function getFirstElement(arr) {
  // 배열을 입력받는다.
  // 배열의 인덱스 1번째 값 받기
  // 빈 배열 입력받은 경우 undefined
  if (arr === null){
    return "undefined";
  }
  return arr[0];
}

• 문제3) 배열을 입력받아 배열의 마지막 요소를 리턴
  -- 인자1 : arr (임의의 요소를 갖는 배열)
  -- 출력 : 배열의 요소를 리턴해야함
  -- 빈 배열을 입력받은 경우, undefined 리턴

// 내가 푼 답변, 통과는 했는데 undefined 부분이 정의가 안되어있음.

function getLastElement(arr) {
  // 배열의 마지막 요소 리턴 arr.length - 1?
  // 빈 배열은 undefined
  return arr[arr.length - 1];
}

// 답안
function getLastElement(arr) {
  if (arr.length > 0) {
    return arr[arr.length - 1];
  }
  return undefined;
}

-- arr.length = [] === arr.length === 0

• 문제4) 배열과 수를 입력받아 수가 인덱스로 가르키는 배열의 요소를 리턴
  -- 인자1: arr(임의의 요소를 갖는 배열), 인자2: index(number 타입의 index, 0 이상의 정수)
  -- 배열의 요소를 리턴
  -- 빈 배열을 입력받은 경우 undefined 리턴
  -- 배열의 길이를 벗어나는 수를 입력받은 경우, 'out of index range'

function getNthElement(arr, index) {
  // arr[index]
  // 빈 배열은 undefined
  // 배열의 길이를 벗어나? 'out of index range'

  if (arr.length === 0) {
    return undefined;
  } else if (arr.length - 1 < index) {
    return 'out of index range';
  } else {
    return arr[index];
  }
}

• 문제5) 배열을 입력받아 배열의 모든 요소의 합을 리턴
  -- 인자1: arr(number 타입을 요소로 갖는 배열)
  -- 출력 : number타입 리턴
  -- 입력받은 배열이 빈 배열인 경우, 0을 리턴

function computeSumOfAllElements(arr) {
  // sum = sum + index[i]
  sum = 0

  for (let i = 0; i < arr.length; i++) {
    sum = sum + arr[i];
  }
  return sum; // 자리 헷갈리지 않게 ㅠㅠ
}

• 문제6) 문자열을 입력받아 문자열을 구성하는 각 단어를 요소로 갖는 배열 리턴
  -- 인자1: str (string)타입의 공백이 있는 문자열
  -- 출력 : 배열을 리턴
  -- 반복문 사용 금지/ 단어는 공백 한 칸으로 구분/ 연속된 공백은 없다고 가정

function getAllWords(str) {
  // TODO: 여기에 코드를 작성합니다.
  if (str === '') {
    return [];
  }

  return str.split(' ');
}

-- split() 을 알아야 풀 수 있음, ''와 ' '의 차이점 알기

• 문제7) 문자열을 입력받아 문자열을 구성하는 각 문자의 요소로 갖는 배열을 리턴
  -- 인자1: str(string) 타입의 공백이 없는 문자열
  -- 출력 : 배열을 리턴
  -- str.split 사용은 금지됨
  -- 빈 문자열을 입력받은 경우, 빈 배열 리턴

// 전 문제를 통해 split을 알게 돼서... 그냥 한번 써봄 (이 문제에선 오답)
function getAllLetters(str) {
  return str.split('');
}

// 정답
function getAllLetters(str) {
  let array = [];

  for (let i = 0; i < str.length; i++) {
    array.push(str[i]);
  }

  return array;
}

• 문제8) 배열을 입력받아 가장 큰 요소를 리턴해야 합니다.
  -- 입력 : 인자1 - arr (number 타입의 정수로 구성된 배열)
  -- 출력 : number 타입을 리턴해야 합니다.

function getLargestElement(arr) {
  let max = arr[0]

  for (let i = 1; i < arr.length; i++) {
    if (arr[i] > max) {
      max = arr[i];
    }
  }
  return max;
}

• 문제9) 문자열을 입력받아 문자열에서 가장 긴 단어를 리턴
  -- 입력 : 인자1 - str(string) 타입의 공백이 있는 알파벳 문자열
  -- 출력 : string 타입을 리턴
  -- 단어는 공백 한 칸으로 구분/ 가장 긴 단어가 2개 이상이면 첫번째로 등장하는 단어를 리턴

function getLongestWord(str) {
  let words = str.split(' '); // 공백을 기준으로 나눈 단어가 요소로 있는 배열
  let max = ''; // string 길이 젤 작은 단위 ''로 최대값 잡아줌

  for (let i = 0; i < words.length; i++) {
    if (words[i].length > max.length) {
      max = words[i];
    }
  }
  return max;
}

• 문제10) 수를 요소로 갖는 배열을 입력받아 작수만을 요소로 갖는 배열을 리턴
  -- 입력 : 인자1 - arr(number 타입을 요소로 갖는 배열)/ arr[i]는 양의 정수
  -- 출력 : 배열을 리턴해야 합니다.
  -- 주의사항 : 짝수가 없는 경우, 빈 배열을 리턴해야 합니다.

function getEvenNumbers(arr) {
  let result = [];

  for (let i = 0; i < arr.length; i++) {
    if (arr[i] % 2 === 0) {
      result.push(arr[i]);
    }
  }
  return result;
}

• 문제11) 배열과 요소를 입력받아 주어진 요소를 배열의 맨 앞에 추가하고 해당 배열을 리턴
  -- 입력 : 인자1 - arr(임의이 요소를 갖는 배열)/ 인자2 - el(임의의 타입)
  -- 출력 : 기존 배열에 주어진 요소가 추가된 형태의 배열을 리턴/ [el, arr[0], arr[1], ..., arr[n-1]]/ arr.length 는 n
  -- 반복문 사용 금지 / 새로운 배열을 선언/ 할당해서 리턴하지 않는다/ 기존 배열에 주어진 요소가 추가된 상태로 리턴

function addToFront(arr, el) {
  arr.unshift(el);
  return arr;
}

• 문제 12) addToback, 배열과 요소를 입력받아 주어진 요소를 배열의 맨 뒤에 추가하고 해당 배열을 리턴

function addToBack(arr, el) {
  arr.push(el);
  return arr;
}

• 문제 13) mergeArrays, 두 개의 배열을 입력받아 순서대로 합쳐진 배열 리턴

function mergeArrays(arr1, arr2) {
  return arr1.concat(arr2);
}

🫠 11일차 수업을 마치며...

오늘은 이론은 조금, 문제풀이가 많은 시간이었당. 아직 글로는 못옮겼지만 총 25가지 문제중, 다수의 문제가 slice 관련된 문제였다. 오늘 새로운 페어님도 너무 알잘딱깔센하게 설명해주셔서 도움 많이 받으며 문제를 풀었다. 주말에는 풀었던 문제 복습과 벨로그 정리 마무리를 할 것임.

문제는 많이 풀어봐야겠다.