WIL#2 ) Nov. 1st Week

luneah·2021년 11월 1일
Nov1WILkeywords
0

Weekly I Learned

목록 보기
2/9
post-thumbnail

🚀 What I Learned

  1. 배열이 필요한 이유를 설명할 수 있다.
  2. 배열의 인덱스를 활용하여 원하는 요소에 접근할 수 있다.
  3. 다차원 배열에서 원하는 값에 접근할 수 있다.
  4. 자주 사용하는 배열 메서드의 종류를 알고 사용할 수 있다.
  5. 반복문과 배열을 활용해서 배열의 값을 조작할 수 있다.

11월 1주차 스터디 키워드

  • 배열이 필요한 이유와 선언하는 방법
  • 배열의 값을 추가, 수정, 삭제하는 방법
  • 반복문이 필요한 이유와 사용하는 방법
  • 배열과 반복문을 함께 자주 사용하는 이유
  • 배열의 메소드 5가지와 사용 방법

🔑 배열이 필요한 이유와 선언하는 방법

배열(Array)이란?

관련 있는 데이터를 하나의 변수에 할당하여 관리하기 위해 사용되는 데이터 타입

배열을 사용했을 때 장점

  • 하나의 배열내에 여러 자료형의 데이터를 담을 수 있다.
    *참고 : 배열은 최대 4,294,967,295개의 값을 가질 수 있다.
  • 하나의 변수에 여러 데이터를 관리할 수 있기 때문에, 코드의 가독성이 높아지고, 변수의 수를 줄여주고, 연산에 편리하다.
  • 관련성 있는 데이터를 함께 변수에 저장하므로 데이터를 찾는데 용이하다.

배열의 선언

배열을 선언할 경우 리터럴 방식과 배열 객체를 사용하는 방법이 있다. 일반적으로 대괄호를 사용한 리터럴 방식이 선언에 간편하고 편리하므로 많이 사용된다.

  • [대괄호]를 사용한 리터럴 방식
let myArray = [11,15,'start'];
  1. 리터럴 방식으로 배열값들을 변수 선언과 동시에 함께 선언하여 사용하는 방법 (가장 일반적임)
let myArray = newArray[11,15,'start'];
  1. 배열 객체를 사용한 방법으로 인자로 배열의 값을 넘겨주어 선언하는 방법
    아래는 선언된 배열의 일부의 값을 출력하기 위한 방법이다.
let word = myArray[2];

배열의 값은 그 순서에 의하여 저장되며 해당하는 위치의 index 번호를 사용하여 불러올 수 있다. 위의 경우는 배열의 2번째에 해당하는 값인 start를 불러오며 이 값이 word라는 변수에 저장될 것이다.

만약 이를 index 번호와 함께 표현하면 다음과 같다.

word[0] => 11
word[1] => 15
word[2] => start

--> 해당 위치에 해당하는 값을 가지고 있다.

📍 What is DIFFERENT?

배열이 저장된 모습 VS json 또는 객체 타입

json 또는 객체는 선언될 때 이름과 값으로 구분되어 저장될 수 있지만 배열은 이름 대신 해당하는 위치, index 넘버가 저장된다는 점이다. 물론 인덱스 넘버만으로도 검색에 유용하지만 json 데이터 타입의 경우 이름과 값으로 이루어져 검색하기가 더욱 용이할 것이다. 하지만 단순한 값들의 나열이라면 배열 타입이 충분히 용이할 것이다.

배열의 출력

인자로 배열의 값을 넘겨주어 선언하는 방법

let result = myArray[2];
// 해당하는 위치의 index번호를 사용하여 불러올 수 있다. 배열 2번째 값인 'start'가 변수에 저장된다.

배열의 속성

  • 모든 배열값에 사용될 수 있다.
  • .length 속성(문자열에 사용되는 length와 동일) : 배열이 가지고 있는 요소의 개수를 반환한다. 개수가 없다면 0을 반환, 5개라면 5를 반환한다.
   let myArray = [10,20,30,40,50,60];
   console.log(myArray.length);   // 6
  • 요소는 0부터 시작하므로 5이고 index번호는 배열의 length보다 -1적다.

📍 Array.prototype 사용하여 커스텀 속성, 메소드 만들기

prototype은 모든 array 객체에 속성 또는 메소드를 추가할 수 있도록 도와준다. 속성 및 메소드를 추가하는 경우 내장된 객체를 변경하기 때문에 주의해야한다. 일반적으로 내장 객체를 사용하여 커스텀 속성이나 메소드 생성보다는 다른 방법을 많이 사용한다.

📌 배열의 index번호란?

배열[11,15,'start']은 첫번째 시작하는 12가 0번이라는 index번호를 가진다. 즉, 배열에서 첫번째는 1번이 아니라 0번으로 시작한다.

    myArray[0] -> 11
    myArray[1] -> 15
    myArray[2] -> 'start'

🔑 배열의 값을 추가, 수정, 삭제하는 방법

요소 수정하기

[4, 15, 63, we, code,'파이팅']라는 배열에서 2번째 값을 '생일'이라고 수정해보자.

let myArray = [4, 15, 63, we, code,'파이팅'];
myArray[2] = '생일';      // 2번째 값을 '생일'로 할당
console.log(myArray);    // [4, 15, '생일', we, code,'파이팅']

요소 추가하기 : push, unshift

  • push : 배열의 맨 뒤에 새로운 값을 추가
let myArray = [12, 24, '크리스마스'];
myArray.push('이브');   // 배열 맨 끝에 '이브'라는 값 추가
console.log(myArray);  // [12, 24, '크리스마스', '이브']
  • unshift : 배열의 맨 앞에 새로운 값을 추가
let myArray = [31, '해피', '할로윈'];
myArray.unshift(10);     // 배열 맨 앞에 10이라는 값 추가
console.log(myArray);    // [10, 31, '해피', '할로윈']

요소 삭제하기 : pop, shift

  • pop : 배열의 맨 끝의 값을 제거하여 반환
let myArray = [12, 25, '크리스마스', '이브'];
myArray.pop();         // 배열 맨 끝의 값 삭제
console.log(myArray);  // [12, 25, '크리스마스']
  • shift : 배열의 맨 앞의 값을 제거하여 반환
let myArray = ['Nov', 10, 31, '할로윈'];
myArray.shift();         // 배열 맨 앞의 값 삭제
console.log(myArray);    // [10, 31, '할로윈']

🔑 반복문이 필요한 이유와 사용하는 방법

반복문은 프로그래밍에서 가장 중요한 요소 중의 하나이다. 반복문은 컴퓨터에게 반복적인 작업을 지시하는 방법으로 이를 사용하면 단순히 똑같은 코드를 반복하기도 하지만, 반복할 때마다 숫자를 1씩 더한다든지의 행동을 할 수도 있다.

반복문은 for과 while이 대표적이다.

for

for ([initialization]; [condition]; [final-expression])
...statement...

매개변수

  • initialization : 식(할당식 포함) 또는 변수 선언.
    주로 카운터 변수를 초기화할 때 사용한다. var 또는 let 키워드를 사용해 새로운 변수를 선언할 수도 있다. var 키워드로 선언한 변수는 반복문에 제한되지 않는다. 즉 for 문과 같은 범위에 위치한다. let 키워드로 선언한 변수는 반복문의 지역 변수가 된다. 식의 결과는 버려진다.
  • condition : 매 반복마다 평가할 식.
    평가 결과가 참이라면 statement를 실행한다. 이 식을 넣지 않았을 때 계산 결과는 언제나 참이 된다. 계산 결과가 거짓이라면 for 문의 바로 다음 식으로 건너뛴다.
  • final-expression : 매 반복 후 평가할 식.
    다음번 condition 평가 이전에 발생한다. 주로 카운터 변수를 증감하거나 바꿀 때 사용한다.
  • statement : 조건의 평가 결과가 참일 때 실행하는 문.
    여러 문을 반복 실행하려면 블럭문({ ... })으로 묶어야 한다. 아무것도 실행하지 않으려면 공백문 (;)을 사용한다.

while

while (condition)
...statement...

매개변수

  • condition
    반복이 시작되기 전에 조건문은 참,거짓을 판단받게 된다. 만약 조건문이 참이라면, while문 안의 문장들이 실행된다. 거짓이라면, 문장은 그냥 while 반복문 후로 넘어간다.
  • statement
    조건문이 참일 때만 while문 속의 문장들이 실행된다. 반복문 속에 여러개의 문장을 사용하고 싶다면 중괄호 { } 를 통해 문장들을 하나로 묶어야 한다.

🔑 배열과 반복문을 함께 자주 사용하는 이유

무언가를 반복적으로 시행할 때 빠르고 편한 방법으로 사용할 수 있기 때문이다.
같은 분류의 많은 양의 리스트가 있을 경우, 하나하나 바꾸기에는 너무 많은 비용이 소요되지만, 반복문을 사용하여 한번만 수정하면 되게 만들 수 있다.

  1. 코딩 시간 단축
  2. 코드의 간소화
  3. 개발자의 편리함

🔑 배열의 메소드 5가지와 사용 방법

*TIL에 작성하지 않은 내용들로 5가지 작성

  1. join() : 배열이 가진 모든 값을 하나의 문자로 변환하여 반환하는 방법, 즉 여러 배열 값을 연결하는 함수이다.

    arr.join([separator]);

    매개변수

    ⦁ separator (optional) : 배열의 각 요소를 구분할 문자열을 지정한다.
    이 구분자는 필요한 경우 문자열로 변환된다. 생략하면 배열의 요소들이 쉼표로 구분된다. separator가 빈 문자열이면 모든 요소들이 사이에 아무 문자도 없이 연결된다.

   let test = ["abc, "def", "ghi"];test. join("-");

   console.log(test);   // "abc-def-ghi"
   
--> 실행 결과 여러 배열이 - 구분자를 가지며 하나의 긴 문자열로 변환되었다.
  1. reduce() : 계속해서 배열 내의 두 개의 값을 사용해 줄여나가 하나의 값을 만들어 반환한다.

    arr.reduce(callback[, initialValue]);

    매개변수

    ⦁ callback : 배열의 각 요소에 대해 실행할 함수.
    ⦁ accumulator : 누산기는 콜백의 반환값을 누적한다. 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값이다.
    ⦁ currentValue : 처리할 현재 요소.
    ⦁ currentIndex (optional) : 처리할 현재 요소의 인덱스. initialValue를 제공한 경우 0, 아니면 1부터 시작한다.
    ⦁ array (optional) : reduce()를 호출한 배열.
    ⦁ initialValue (optional) : callback의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용한다. 빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생한다.

   // 1부터 5까지 더하는 함수
   let test = [1, 2, 3, 4, 5];
   test.reduce(function(x, y) {
      return x + y;
   })

   console.log(test);   // 15

자바스크립트의 reduce()는 가진 배열값을 사용하여 반복하므로 for문처럼 배열의 루프를 구현하는데도 사용된다. reduce()는 매우 중요한 배열 함수 중 하나로 자세히 알아둘 필요가 있다!

  1. reverse() : 배열이 가진 값을 역순으로 재배치한 후 반환한다.

    array.reverse();

   let test = [1, 2, 3, 4];
   test.reverse();      // [4, 3, 2, 1] 을 반환함
  1. find() : filter와 비슷하지만 단 하나의 요소만 리턴한다.

    arr.find(callback[, thisArg]);

    매개변수

    ⦁ callback : 배열의 각 값에 대해 실행할 함수. 아래의 세 인자를 받습니다.
    ⦁ element : 콜백함수에서 처리할 현재 요소.
    ⦁ index (optional) : 콜백함수에서 처리할 현재 요소의 인덱스.
    ⦁ array (optional) : find 함수를 호출한 배열.
    ⦁ thisArg : 선택 항목. 콜백이 호출될 때 this로 사용할 객체.

   // 정수 배열에서 5의 배수인 정수 '하나' 찾기
   let arr = [4, 15, 377, 395, 400, 1024, 3000];
   let arr2 = arr.find(function (n) {
       return n % 5 == 0;
   });
   console.log(arr2); // 15

콜백 함수는 몇 번 호출 될까?

// 정수 배열에서 5의 배수인 정수만 모으기
let arr = [4, 15, 377, 395, 400, 1024, 3000];
var count = 0;
var arr2 = arr.find(function (n) {
    count++;
    return n % 5 == 0;
});
console.log(count); // 2

정답은 2번. 첫 번째는 4에 대해서, 두 번째는 15에 대해서 호출.

즉, find는 콜백 함수의 리턴이 true인 요소를 찾을 때 까지 순회하다가 찾으면 거기서 끝난다. 만약 발견하지 못하면 undefined가 반환된다.

// 정수 배열에서 5의 배수인 정수만 모으기
var arr = [4,  377, 1024];
var arr2 = arr.find(function (n) {
    return n % 5 == 0;
});
console.log(arr2); // undefined

💡 Why?
filter는 찾지 못하면 빈 배열을 반환하는데 find는 undefined? 그러면 함수를 연결하여 사용할 수 없는 거 아닌가?

A. find는 빈 배열을 반환할 필요가 없다. 정상적으로 반환하더라도 이미 배열이 아니기 때문이다. 따라서 find의 반환은 항상 배열이 아니기 때문에 어차피 다른 Array 메소드와 연결하여 사용할 일이 없다.

출처: https://bblog.tistory.com/300

  1. sort() : 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환한다.
  • 정렬은 stable sort가 아닐 수 있다.
  • 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따른다.
  • 정렬 속도와 복잡도는 각 구현방식에 따라 다를 수 있다.

arr.sort([compareFunction]);

매개변수

  • compareFunction (optional) : 정렬 순서를 정의하는 함수.
    생략하면 배열은 각 요소의 문자열 변환에 따라 각 문자의 유니 코드 코드 포인트 값에 따라 정렬된다.
let numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
  return a - b;
});
console.log(numbers);   // [1, 2, 3, 4, 5]

📍 배열 메소드와 ‘thisArg’

함수를 호출하는 대부분의 배열 메서드(find, filter, map 등. sort는 제외)는 thisArg라는 매개변수를 옵션으로 받을 수 있다.

arr.find(func, thisArg);
arr.filter(func, thisArg);
arr.map(func, thisArg);
// ...
// thisArg는 선택적으로 사용할 수 있는 마지막 인수입니다.

thisArg는 func의 this가 됩니다.

아래 예시에서 객체 army의 메서드를 filter의 인자로 넘겨주고 있는데, 이때 thisArg는 canJoin의 컨텍스트 정보를 넘겨준다.

let army = {
  minAge: 18,
  maxAge: 27,
  canJoin(user) {
    return user.age >= this.minAge && user.age < this.maxAge;
  }
};

let users = [
  {age: 16},
  {age: 20},
  {age: 23},
  {age: 30}
];

// army.canJoin 호출시 참을 반환해주는 user를 찾음
let soldiers = users.filter(army.canJoin, army);

alert(soldiers.length); // 2
alert(soldiers[0].age); // 20
alert(soldiers[1].age); // 23

thisArgs에 army를 지정하지 않고 단순히 users.filter(army.canJoin)를 사용했다면 army.canJoin은 단독 함수처럼 취급되고, 함수 본문 내 this는 undefined가 되어 에러가 발생했을 것이다.

users.filter(user => army.canJoin(user))를 사용하면 users.filter(army.canJoin, army)를 대체할 수 있긴 하나 thisArg를 사용하는 방식이 좀 더 이해하기 쉬우므로 더 자주 사용된다.

배열 메소드 요약

1. 요소를 더하거나 지우기

  • push(...items) : 맨 끝에 요소 추가하기
  • pop() : 맨 끝 요소 추출하기
  • shift() : 첫 요소 추출하기
  • unshift(...items) : 맨 앞에 요소 추가하기
  • splice(pos, deleteCount, ...items) : pos부터 deleteCount개의 요소를 지우고, items 추가하기
  • slice(start, end) : start부터 end 바로 앞까지의 요소를 복사해 새로운 배열을 만듦.
  • concat(...items) : 배열의 모든 요소를 복사하고 items를 추가해 새로운 배열을 만든 후 이를 반환함. items가 배열이면 이 배열의 인수를 기존 배열에 더해줌.

2. 원하는 요소 찾기

  • indexOf/lastIndexOf(item, pos) : pos부터 원하는 item을 찾음. 찾게 되면 해당 요소의 인덱스를, 아니면 -1을 반환함.
  • includes(value) : 배열에 value가 있으면 true를, 그렇지 않으면 false를 반환함.
  • find/filter(func) : func의 반환 값을 true로 만드는 첫 번째/전체 요소를 반환함.
  • findIndex는 find와 유사함. 다만 요소 대신 인덱스를 반환함.

3. 배열 전체 순회하기

  • forEach(func) : 모든 요소에 func을 호출함. 결과는 반환되지 않음.

4. 배열 변형하기

  • map(func) : 모든 요소에 func을 호출하고, 반환된 결과를 가지고 새로운 배열을 만듦.
  • sort(func) : 배열을 정렬하고 정렬된 배열을 반환함.
  • reverse() : 배열을 뒤집어 반환함.
  • split/join() : 문자열을 배열로, 배열을 문자열로 변환함.
  • reduce(func, initial) : 요소를 차례로 돌면서 func을 호출함. 반환값은 다음 함수 호출에 전달함. 최종적으로 하나의 값이 도출됨.

5. 기타

  • Array.isArray(arr) : arr이 배열인지 여부를 판단함.

❗️sort, reverse, splice는 기존 배열을 변형시킨다는 점에 주의할 것

profile
luneah
하늘이의 개발 일기
이전 포스트

WIL#1 ) Oct. 5th Week

다음 포스트

WIL#3 ) Nov. 2nd Week (1)

0개의 댓글