📝 오늘 한 것

1. 자료 구조 / 배열 선언 / index 위치 출력 / forEach() 메서드 / API 개념 / 삽입, 삭제, 복사, 검색(검사) APIs - 배열의 메서드

2. 자바스크립트 강의 수강 (배열)

📖 학습 자료

1. 드림코딩 유튜브 '자바스크립트' 강의 8편

2. 사전 학습 가이드 STEP 2 (Array)

3. Array MDN 사이트

📚 배운 것

배열

1. 자료 구조

• 비슷한 종류의 오브젝트들을 한데 묶어 담아 놓은 것

  • 객체 : 서로 연관된 속성과 행동들을 묶어 놓은 것
  • 배열 : 비슷한 타입의 객체들을 한데 묶어 담아 놓은 것

• 삽입, 삭제, 검색, 정렬을 어떻게 효율적으로 할 수 있는지가 핵심 포인트 !

2. 배열 선언

ex. 0번째 인덱스에는 숫자 1이, 1번째 인덱스에는 숫자 2가 담겨 있는 배열 생성

1) new 키워드 이용

const arr1 = new Array(1, 2); // [1, 2]

✔ 단, ( ) 안에 숫자를 하나만 넣으면 그 숫자는 배열의 요소가 아니라 배열의 길이를 의미하게 된다. 예를 들어, 3을 넣으면 값이 비어 있는 세 자리 배열이 만들어진다.

2) 대괄호 이용

const arr2 = [1, 2]; // [1, 2]

3. index 위치 출력

배열에서는 index를 기준으로 데이터가 저장된다

index를 활용해 데이터에 접근하기

const fruits = ['🍉', '🍓']
console.log(fruits); // ['🍉', '🍓']
console.log(fruits.length); // 2 → 배열의 길이
console.log(fruits[0]); // 🍉 → 배열의 처음 요소
console.log(fruits[fruits.length - 1]); // 🍓 → 배열의 마지막 요소

index 위치에 있는 데이터 수정하기

fruits[1] = '🥥';
console.log(fruits); // ['🍉', '🥥']

4. 배열과 반복문

반복문을 이용해 배열 안에 들어 있는 데이터들을 looping하면서 출력할 수 있다

📌 for 반복문

for (var i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

📌 for of 반복문

for (let fruit of fruits) {
  console.log(fruit);
}

📌 forEach() 메서드

• 배열의 각 value마다 정의된 콜백 함수를 호출한다
  cf. 콜백 함수 : 다른 함수에 매개변수로 들어가는 함수

배열 이름.forEach(콜백 함수);

• 콜백 함수는 총 3개의 매개변수를 가질 수 있다
  • value : 배열에 있는 값(value)
  • index : 그 값이 들어 있는 자리
  • array : 전체적인 배열

fruits.forEach(function (fruit, index, array) {
  console.log(fruit, index, array);
});

이를 배열의 값(value)만 구하는 화살표 함수로 바꾸면,

fruits.forEach((fruit) => console.log(fruit));

💡 여기서 잠깐 !

Web API

웹 애플리케이션 개발에서 다른 서비스에 요청을 보내고 응답을 받기 위해 정의된 명세

자바스크립트 API

• 자바스크립트 자체 API
  • 어떤 호스트 환경에서도 사용 가능

• 자바스크립트가 동작하는 호스트 환경의 API
  • 각각의 호스트 환경 에서만 동작 가능
  • 웹 브라우저 API / Node.js API / Google Apps Script API

5. 삽입, 삭제, 복사 API

1) 배열의 맨 끝에 요소 삽입 - push()

var fruits = [];
var push = fruits.push(`🍍`,`🍊`);
console.log(push); // 2 → 배열의 새로운 길이 반환
console.log(fruits); // [`🍍`,`🍊`]

2) 배열의 맨 끝에서부터 요소 삭제 - pop()

fruits.pop(); // 끝에서 첫 번째 요소 삭제
fruits.pop(); // 그 다음 요소 삭제
console.log(fruits.pop()); // 그 다음 요소 삭제시키고, 그 삭제된 요소를 출력
console.log(fruits);

3) 배열의 맨 앞에 요소 삽입 - unshift()

fruits.unshift('🍎', '🍌');
console.log(fruits);

4) 배열의 맨 앞에서부터 요소 삭제 - shift()

fruits.shift(); // 앞에서 첫 번째 요소 삭제
fruits.shift(); // 그 다음 요소 삭제
console.log(fruits.shift()); // 그 다음 요소 삭제시키고, 그 삭제된 요소를 출력
console.log(fruits);

💡 여기서 잠깐 !

shift와 unshift는 pop과 push에 비해 매우 느리다.
shift와 unshift 사용 시에는 '기존 요소들의 이동'이 일어나기 때문이다.

배열의 길이가 길어지면 길어질수록 더 느려진다.

한편, 중간에 요소를 추가하는 것은 index를 활용하기 때문에 빠르다.

5) index 위치에 있는 요소 삭제 및 다른 요소 삽입 - splice()

배열 이름.`splice`(삭제를 시작할 index, 삭제할 개수?, 그 자리에 추가할 요소들...?)

• VS code에서 'ctrl+클릭'을 통해 확인한 메서드의 매개변수 끝에 ?가 붙어 있으면, 적어줘도 되고 적어주지 않아도 됨을 의미한다. 안 적으면 끝까지 삭제된다.
• 삭제할 개수에는 0을 적을 수도 있다. 이 경우에는 요소는 삭제되지 않고, 뒤에 적힌 새로운 요소들이 추가될 뿐이다.

fruits.splice(1, 1, '🍒',  '🍅'); // 이것 자체는 삭제된 값이 return 됨
console.log(fruits);

6) 배열 복사 (2개 이상의 배열 합치기) - concat()

const fruits2 = ['🥝', '🍇'];
const fruit1and2 = fruits.concat(fruits2);
console.log(fruit1and2);

6. 검색(검사) API

1) 배열에서 해당 값이 들어 있는 인덱스 검색

• 제일 앞의 인덱스 검색 - indexOf()

fruits.push('🍒');
console.log(fruits); // ['🍉', '🍒',  '🍅', '🍒']
console.log(fruits.indexOf('🍒')); // 1

• 제일 뒤의 인덱스 검색 - lastIndexOf()

console.log(fruits.lastIndexOf('🍒')); // 3

• 배열 안에 없는 값을 검색하면, -1이 출력됨

console.log(fruits.indexOf('🍕')); // -1

2) 배열에 해당 값이 있는지 없는지 검색 - includes()

console.log(fruits.includes('🍔')); // false

7. 그 외 유용한 array APIs

Array MDN 사이트 참고

❗ 변경자 메서드

• copyWithin(덮어씌워질 index, 복사할 index, 0 기반 복사 끝낼 위치)

  배열의 일부를 얕게 복사한 뒤, 동일한 배열의 다른 위치에 덮어쓰고 그 배열을 반환한다
  복사 끝낼 위치가 가리키는 요소는 '제외'한다

• fill(채울 값, 채우기 시작할 index, 끝 index)

  배열의 시작 인덱스부터 끝 인덱스 '이전'까지의 요소값을 정적인 값 하나로 채운다

• reverse()

  배열의 순서를 반전시킨다

• sort(콜백 함수)

  매개변수에 아무것도 안 써주면, 배열의 요소를 각 문자의 유니 코드 코드 포인트 값에 따라 정렬한 후 그 배열을 반환한다

  a - b → 오름차순 정렬
  b - a → 내림차순 정렬

❗ 접근자 메서드

• filter(콜백 함수)

  주어진 함수의 테스트를 통과하는(결과가 참인 경우의) 모든 요소를 모아 새로운 배열로 반환한다
  ✔ filter() 메서드의 인수가 되는, 콜백 함수의 매개변수는, filter() 메서드를 호출한, 배열의 요소이다

• slice(추출 시작할 index, 끝 index)

  배열의 시작 인덱스부터 끝 인덱스 '이전'까지의 요소값을 새로운 배열로 반환한다
  음수 인덱스는 배열의 끝에서부터의 길이를 나타낸다

• join(separator)

  배열의 모든 요소를 연결한 문자열 하나를 반환한다

💡 separator : 배열의 각 요소를 구분할 문자열

array.join(); // 'one,two,three'
array.join(''); // 'onetwothree'
array.join(' '); // 'one two three'
arry.join(', ') // 'one, two, three'

• toString()

  배열을 합쳐(join) 각 배열 요소들을 쉼표로 구분해놓은 문자열 하나를 반환한다

array.toString(); // 'one,two,three'

❗ 순회 메서드

<목차>

every / some
map
find / findIndex
reduce / reduceRight
entries / keys / values
@@iterator

• every(콜백 함수)

  주어진 콜백 함수를, 배열 안의 모든 요소가 통과하면 true, 하나의 요소라도 통과하지 못하면 false를 반환한다

const face = ['eyes', 'nose', 'mouth', 'ears'];

const faceLength = (faceElement) => faceElement.length < 6;
// 콜백 함수 정의

console.log(face.every(faceLength));
// every() 메서드의 매개변수에 '콜백 함수를 할당한 변수' 넣기

every() 메서드의 매개변수 자리에 '인라인 콜백 함수'나 '화살표 함수'를 넣어도 된다

• some(콜백 함수)

  주어진 콜백 함수를, 배열 안의 하나의 요소라도 통과하면 true, 모든 요소가 통과하지 못하면 false를 반환한다

• map(콜백 함수)

  배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다

• find(콜백 함수)

  요소들 중 처음으로 주어진 콜백 함수가 true가 되는 요소의 값을 반환한다
  콜백 함수가 true가 되는 요소가 없으면 undefined를 반환한다

• findIndex(콜백 함수)

  처음으로 주어진 콜백 함수가 true가 되는 요소의 index를 반환한다
  콜백 함수가 true가 되는 요소가 없으면 -1을 반환한다

• reduce(콜백 함수, 초기값)

  배열의 각 요소에 대해 주어진 콜백 함수를 실행하고, 하나의 결과값을 반환한다
  이때 콜백 함수를 'reducer 함수'라고 한다
  배열에 있는 요소들의 값을 누적하거나 모아 놓고자 할 때 사용한다

💡 reducer 함수의 매개변수

• previousValue : 이전에 콜백 함수에서 return 된 값
• currentValue : 배열의 아이템

const original = [1, 3, 5, 7];

const reduce = original.reduce(function (prev, curr) {
  return prev + curr;
}
,5);

console.log(reduce); // 21 → 5(초기값)+1+3+5+7

• reduceRight(콜백 함수, 초기값)

  배열의 각 요소에 대해 주어진 콜백 함수를 '오른쪽에서 왼쪽으로' 실행하고, 하나의 결과값을 반환한다

이중 배열 전개하기

const pro = [[1, 2], [3, 4], [5, 6]];

const pro2 = pro.reduceRight((a, b) => {return a.concat(b)}, [3, 2]);

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

// reduce()였다면 [1, 2, 3, 4, 5, 6, 3, 2]가 출력됐을 것이다

• entries()

  배열의 각 index와 그 index에 대응하는 요소를 값으로 가지는 새로운 객체, 즉 Array Iterator를 반환한다
  cf. Array Iterator : 배열 내부 요소를 순회하는 객체

+) for of 반복문 활용

const array = ['a', 'b', 'c'];

var iterator = array.entries();

for (var keyAndValue of iterator) {
  console.log(keyAndValue);
}
// [0, 'a']
// [1, 'b']
// [2, 'c']

• keys()

  배열의 각 index를 값으로 가지는 새로운 객체를 반환한다

+) for of 반복문 활용

const array = ['a', 'b', 'c'];

const iterator = array.keys();

for (var key of iterator) {
  console.log(key);
}
// 0
// 1
// 2

• values()

  배열의 각 index에 대응하는 요소를 값으로 가지는 새로운 Array Iterator 객체를 반환한다

+) for of 반복문 활용하기

const array = ['a', 'b', 'c'];

const iterator = array.values();

for (var value of iterator) {
  console.log(value);
}
// a
// b
// c

• @@iterator

  기본값은 values()이다

구문

arr[Symbol.iterator]()

+) for of 반복문 활용

const array = ['a', 'b', 'c'];

const iterator = array.[Symbol.iterator]();

for (var letter of iterator) {
  console.log(letter);
}
// a
// b
// c

📌 next()

• entries(), keys(), values(), @@iterator 반환값을 구할 때 활용할 수 있다
• 실행하면 다음 값으로 이동한다

예시는 entries()의 경우

const strings = ['a', 'b', 'c'];

const stringEntry = strings.entries();

console.log(stringEntry.next()); // value: [0, 'a'], done: false
console.log(stringEntry.next()); // value: [1, 'b'], done: false
console.log(stringEntry.next()); // value: [2, 'c'], done: false
console.log(stringEntry.next()); // value: undefined, done: true

이때 next()뒤에 .value를 붙이면 done은 생략되고 value만 반환한다

✨ 내일 할 것

1. 사전 학습 가이드 STEP 2 Quiz, 드림코딩 퀴즈 풀기

2. 드림코딩 유튜브 '자바스크립트' 강의 9편 듣기

3. javascript 복습

4. 사전 학습 가이드 STEP 3 Algorithm 맛보기