TIL 7일차 + 배열이란?

여러 값을 하나의 변수에 저장하는 자료 구조입니다.

동일한 변수명에 여러 개의 값을 담을 수 있으며 각 요소는 인덱스를 사용하여 접근할 수 있습니다.

 

배열의 생성은 배열[ ]안에 숫자, 문자를 넣어 배열을 생성할수 있습니다.

let weekday = ["월요일","화요일","수요일","목요일","금요일"];

 

배열의 값을 넣지 않고 크기만 지정하고 싶다면  배열을 생성한다는 new Array()안에 해당하는 크기만 넣어 생성할수 있습니다.

또한 빈 배열을 생성후 배열값을 입력할수도 있습니다.

let weekday = new Array(5);
let weekday = [,,,,];
weekday[0] = '월'
weekday[1] = '화'
weekday[2] = '수'
weekday[3] = '목'
weekday[4] = '금'

 

배열은 index로 접근하는데 컴퓨터는 인간이 새는 1부터 숫자를 카운팅 하는게 아니라 0부터 카운팅합니다.

그렇기 때문에 1로 접근을 하게 되면 "화요일"이 출력되고 0으로 접근하게 되면 "월요일"이 출력됩니다.

let weekday = ["월요일","화요일","수요일","목요일","금요일"];
console.log(weekday[1]); // 화요일
console.log(weekday[0]); // 월요일

 

 

배열에 값을 추가 하고싶을때는 새로운 공간을 만들어 값을 추가하거나 push() , unshift()메소드를 사용하면 됩니다.

 

push() - 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환하는 메서드입니다.

배열[배열.length] - 새로운 공간에 배열을 넣으면 자바 스크립트는 자동확장이 되어 값을 추가 할수가 있습니다.

 

unshift() - 배열의 맨앞에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환 합니다. 

let weekday = ["월요일","화요일","수요일","목요일","금요일"];
weekday[5] = "토요일";
weekday.push("일요일");
weekday.unshift("일주일");
console.log(weekday); //["일주일","월요일","화요일","수요일","목요일","금요일","토요일","일요일"]

 

배열에 값을 삭제 하기위해선 pop(), shift(), splice(), slice() 메소드를 사용합니다. 

 

pop() - 배열에서 마지막 요소를 제거하고 제거한 요소를 반환합니다. 배열의 길이는 하나 감소합니다.

 

shift() - 배열의 첫 번째 요소를 제거하고, 그 요소를 반환합니다 . 배열의 길이는 하나 감소합니다.

 

splice() - 배열의 특정 위치에서부터 지정된 개수의 요소를 제거하고 필요한 경우 새로운 요소를 추가합니다.

               • array.splice(startindex, deletecount, item1, item2...)

 

slice() - 배열의 일부분을 추출하여 새로운 배열을 반환합니다. 원본배열을 변경하지 않습니다.

let weekday = ["주말","월요일","화요일","수요일","목요일","금요일","토요일","일요일","일주일"];

let popweekday = weekday.pop();
console.log(popweekday); // 일주일
console.log(weekday); // "주말","월요일","화요일","수요일","목요일","금요일","토요일","일요일"

let shiftweekday = weekday.shift();
console.log(shiftweekday); // 주말
console.log(weekday); // "월요일","화요일","수요일","목요일","금요일","토요일","일요일"

let spliceweekday = weekday.splice(1,3, '사과', '배', '당근');
console.log(spliceweekday); // ,"화요일","수요일","목요일"
console.log(weekday); // "월요일","사과","배","당근","금요일","토요일","일요일"

let sliceweekend = weekday.slice(5,7);
console.log(sliceweekend); // "토요일","일요일"
console.log(weekday); // "월요일","사과","배","당근","금요일","토요일","일요일"

 

 

forEach()

반복문의 간결한 버전으로 각 요소에 대해 동일한 동작을 수행할 때 유용합니다.

forEach는 numbers배열의 각 요소를 매개변수 number로 받아와서 console에 순서대로 출력합니다.

let numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number) {
  console.log(number); // [1, 2, 3, 4, 5]
});

 

map()

배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과로 새로운 배열을 생성합니다. 

각 요소를 변형하여 새로운 배열을 만들 때 유용 합니다. 

numbers의 각 요소를 5 곱한 결과로 multipliedNumbers 생성하였습니다.

let numbers = [1, 2, 3, 4, 5];

let multipliedNumbers = numbers.map(function(number) {
  return number * 5;
});

console.log(multipliedNumbers);  // [5, 10, 15, 20, 25]

 

fileter()

주어진 함수의 반환값이 'true'인 배열의 요소들로 새로운 배열을 생성합니다.

주로 특정 조건을 만족하는 요소들을 걸러내고 싶을 때 사용됩니다.

let numbers = [1, 2, 3, 4, 5];

let evenNumbers = numbers.filter(function(number) {
  return number % 3 === 0;
});

console.log(evenNumbers);   // [3]

 

 

reduce()

배열의 각 요소에 대해 주어진 함수를 실행하여 하나의 결과값을 반환합니다. 

배열의 각 요소를 누적하여 하나의 값으로 만들 때 유용합니다.

각 요소를 처리하면서 누적값이 계속 업데이트 되기 때문에 배열을 단일한 값으로 축소할 때 사용합니다.

accumulator는 초기 값이 0으로 지정되어있고 currentValue로 요소가 하나씩 들어가면서 누적값을 구할 수 있습니다.

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10,];

let sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);

console.log(sum); // 55

 

 

find()

배열에서 주어진 조건을 만족하는 첫 번째 요소를 반환합니다.

조건을 만족하는 요소가 없으면 undefined를 반환합니다.

numbers에 각 요소가 주어진 함수를 호출하고 함수의 반환 값이 true되는 첫번째 요소 7을 반환합니다.

 

some()

주어진 조건을 만족하는 요소가 하나라도 있으면 true를 반환하고 만족하지 않으면 false를 반환합니다.

hasEven은 짝수가 없어서 false, hasEvenNumber는 3이 존재하므로 true를 반환합니다. 

 

every()

배열의 모든 요소가 주어진 조건을 만족하는지 여부를 검사합니다.

모든 요소가 조건을 만족하면 true를 반환하고 그렇지 않으면 false를 반환합니다.

allNumber는 모두 0보다 크므로 true를 반환합니다.

let numbers = [1, 3, 5, 7, 9];

let foundNumber = numbers.find(function(number) {
  return number > 5;
});

let hasEven = numbers.some(function(number) {
  return number % 2 === 0;
});

let hasEvenNumber = numbers.some(function(number) {
  return number === 3;
});

let allNumber = numbers.every(function(number) {
  return number > 0;
});

console.log(foundNumber);  // 7
console.log(hasEven); // false
console.log(hasEvenNumber); // true
console.log(allNumber); // true

 

sort()

배열의 요소를 정렬할 때 사용됩니다.

유니코드 코드포인트를 기반으로 정렬하기 때문에 숫자는 문자열로 변환되어 비교되므로 조심해야합니다.

그렇기 때문에 - 같은 숫자로 변환하는 연산식을써서 숫자로 변환해주어야합니다. 

a-b는 배열의 오름차순으로 정렬하는 것입니다.

주어진 값이 들어왔을때 a - b에서 나오는 수가 음수이면 a는 왼쪽으로 양수이면 오른쪽으로 0이면 그자리에 위치합니다.

그렇기 때문에 작은수부터 앞으로 오게 되어 오름차순으로 정렬이 됩니다.

let numbers = [7, 10, 5, 8, 21, 40, 6, 1, 2, 2, 4];

numbers.sort(function(a, b) {
  console.log(`비교: a=${a}, b=${b}`);
  return a - b;
});

console.log(numbers); // [1, 2, 2, 4, 5, 6, 7, 8, 10, 21, 40]
/*비교: a=10, b=7
  비교: a=5, b=10
  비교: a=5, b=10
  비교: a=5, b=7
  비교: a=8, b=7
  비교: a=8, b=10 ...*/

 

reverse()

배열의 순서를 거꾸로 뒤집는데 사용합니다.

기존의 배열을 수정하고 새로운 배열을 생성하지 않습니다. 

let fruits = ['사과', '바나나', '딸기', '포도'];

fruits.reverse();

console.log(fruits); // ['포도', '딸기', '바나나', '사과']

 

 

배열에 대해서 정리를 한번 해보았습니다.

 

 

 

 

배워나가는 코린이 입니다!!

부족한게 있다면 댓글로 지적해주세요!! 감사합니다!😊