[2주차] 자바스크립트 문법 종합반 : 배열, 배열메소드

자바스크립트 문법 종합반

-배열

(1) 배열 생성

(2) 배열 요소 접근

-배열 메소드

 

---

배열

1. 배열생성

// 배열
// 자바스크립트에서는 배열(Array)을 사용하여 여러 개의 값을 저장하고 관리할 수 있습니다.

// 1. 배열생성
// 1-1. 기본적인 배열 생성
let fruits = ["사과", "바나나", "오렌지"]; // 배열은 대괄호 []를 사용, 각 요소는 쉼표(,)로 구분한다

// 1-2. 배열의 크기 지정
// 크기를 지정해서 배열을 생성할 수도 있다.
let numbers = new Array(5); // 크기가 5인 = 5가지의 요소를 가지고 있는 배열을 만든다.
console.log(numbers); // [ <5 empty items> ]

console.log(fruits.length); // 3
console.log(numbers.length); // 5

 

 

2. 배열 요소 접근

// 2. 배열 요소 접근
// 배열의 요소에 접근할 때는 대괄호([]) 안에 인덱스 값을 넣습니다.
let fruits = ["사과", "바나나", "오렌지"];

console.log(fruits[0]);   // "사과"
console.log(fruits[1]);   // "바나나"
console.log(fruits[2]);   // "오렌지"

 

 

---

배열 메소드

// 3. 배열 메소드
// 3-1. push() 메소드
// 배열 끝에 밀어넣는다(=추가한다)
let fruits = ["사과", "바나나"];

fruits.push("오렌지");
console.log(fruits);   // ["사과", "바나나", "오렌지"]


// 3-2. pop() 메소드
// 배열 끝의 마지막 요소를 삭제하기
let fruits = ["사과", "바나나", "오렌지"];

fruits.pop();
console.log(fruits);   // ["사과", "바나나"]


// 3-3. shift() 메소드
// 배열 첫 요소를 삭제하기
let fruits = ["사과", "바나나", "오렌지"];

fruits.shift();
console.log(fruits);   // ["바나나", "오렌지"]


// 3-4. unshift() 메소드
// 배열 맨 앞에 요소 추가
let fruits = ["바나나", "오렌지"];

fruits.unshift("사과");
console.log(fruits);   // ["사과", "바나나", "오렌지"]



// 3-5. splice() 메소드
let fruits = ["사과", "바나나", "오렌지"];

fruits.splice(1, 1, "포도"); // (어디서부터 지울건지 start index number, 몇개 지운걸지 개수, 그 빈자리를 ""로 채워줘)
console.log(fruits);   // ["사과", "포도", "오렌지"]



// 3-6. slice() 메소드 *새배열정의필요
let fruits = ["사과", "바나나", "오렌지"];

let slicedFruits = fruits.slice(1, 2); // ( 잘라낼 배열의 시작 index와 , 잘라낼 배열의 종료 index *종료 index는 새로 뽑아내는 배열 요소에서 배제됨)
console.log(slicedFruits);   // ["바나나"]



// 3-7. forEach() 메소드
// 기본 문법은 배열에서부터 시작된다.
// 배열에 있는 전체 요소들을 하나하나 돌아가면서 값을 반환
let numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(item)) { //forEach() 괄호 속 매게변수에는 함수를 넣는다 // 매개변수 자리에 함수를 넣는 것: 콜백 함수 // function()안에 매개변수로는 i, e, item ... 다양한 것이 들어옴
  console.log(item); // 이 item 이라는 매개변수에는 numbers 배열에 각 요소가 하나하나 들어가면서 순회를 돈다.
  // 따로 return 키워드는 사용하지 않음
};
//1
//2
//3
//4
//5



// 3-8. map() 메소드 *새배열 정의 필요
// 기존에 있었던 배열을 가공해서 새로운 배열을 생산해 내는 역할
// map 메소드는 항상 원본 배열의 길이 만큼이 리턴된다
let numbers = [1, 2, 3, 4, 5];

let squaredNumbers = numbers.map(function(number) {
  return number * number; // map 함수에 들어가는 문에는 반드시 return 문이 들어가야함
});

console.log(squaredNumbers);   // [1, 4, 9, 16, 25]



// 3-9. filter() 메소드 *새배열정의필요
let numbers = [1, 2, 3, 4, 5];

let evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0; // return 필요 // 필터링 조건도 필요
});

console.log(evenNumbers);   // [2, 4] // 배열 요소중에서 필터링 된 값 반환




// 3-10. reduce() 메소드
// 배열을 순회하면서 각 요소에 대해 콜백 함수를 실행시키고, 콜백 함수의 반환 값을 accumulator에 계속해서 누적시킨다. 그리고 순회가 완료되면 accumulator의 최종 값을 반환한다.
let numbers = [1, 2, 3, 4, 5];

let sum = numbers.reduce(function(accumulator, currentValue) { // 새 배열 정의 sum 
  return accumulator + currentValue;
}, 0); // 여기서 0은 initial value로 시작하는 값이다. 0부터 시작한다는 의미. // 0 + 1 + 2 + 3 + 4 + 5

console.log(sum); // 15 




// 3-11. find() 메소드 *새배열정의필요
let numbers = [1, 2, 3, 4, 5];

let foundNumber = numbers.find(function(number) {
  return number > 3; // 필터링처럼 조건에 맞는 것만 들어오는데, 그 중 첫번째 요소만 뽑아낸다.
});

console.log(foundNumber);   // 4





// 3-12. some() 메소드
// 콜백함수를 거쳐 조건에 맞는 배열의 각 요소들이 하나라도 있으면 true 를 반환하고, 아니면 false를 반환한다
let numbers = [1, 2, 3, 4, 5];

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

console.log(hasEvenNumber);   // true





// 3-13. every() 메소드
// some 메소드와 비슷하지만, 배열 안에 있는 모든 값들이 조건에 맞는다면 true가 나옴
let numbers = [2, 4, 6, 8, 10];

let isAllEvenNumbers = numbers.every(function(number) {
  return number % 2 === 0;
});

console.log(isAllEvenNumbers);   // true





// 3-14. sort() 메소드
// 배열 numbers를 오름차순으로 정렬합니다. sort() 메소드는 배열의 요소를 정렬합니다.
// 배열 자체가 변경됨
// 인수로 정렬 로직을 담은 함수를 받음

const String=['b','c','a'];
String.sort(); // ['a', 'b', 'c'] // 문자열은 오름차순을 잘 정렬된다.

const Digit=[11,2,5,20,8];
Digit.sort(); // [1, 5, 8, 11, 20] 이 아닌 [11, 2, 5, 20, 8] 이 나온다. 왜?
// Sort()는 기본적으로 유니코드값으로 정렬하기 때문에 이러한 문제가 생긴다.
// 이 문제를 해결하기 위해선?
// 숫자 정렬을 위해선...

Digit.sort((previous, current) => previous-current); //오름차순
Digit.sort((previous, current) => current-previous); //내림차순


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

numbers.sort(function(a, b) { // 정렬을 하려면 두개의 요소를 비교해야 하기 떄문에 a, b가 콜뱀함수 매개변수로 들어가 있다. 3과 1, 1과 4, 4와 1...
  return a - b; // 만약에 return 값이 0보다 크면, a > b, 결국 b가 앞으로 정렬됨 // 만약에 return 값이 -값이 나오면 a < b, 결국 a가 앞으로 정렬됨
});

console.log(numbers);   // [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]





// 3-15. reverse() 메소드
// 배열 안에 있는 요소들의 순서를 거꾸로 정렬해준다.
let numbers = [1, 2, 3, 4, 5];

numbers.reverse();

console.log(numbers);   // [5, 4, 3, 2, 1]

+ sort() 함수 보충자료