[TIL] 210906

Lee Syong·2021년 9월 6일

JavaScript TIL 배열

TIL

목록 보기

19/204

📝 오늘 한 것

자료 구조 / 배열 선언 / index 위치 출력 / forEach() 메서드 / API 개념 / 삽입, 삭제, 복사, 검색(검사) APIs - 배열의 메서드
자바스크립트 강의 수강 (배열)

📖 학습 자료

드림코딩 유튜브 '자바스크립트' 강의 8편
사전 학습 가이드 STEP 2 (Array)
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만 반환한다

✨ 내일 할 것

사전 학습 가이드 STEP 2 Quiz, 드림코딩 퀴즈 풀기
드림코딩 유튜브 '자바스크립트' 강의 9편 듣기
javascript 복습
사전 학습 가이드 STEP 3 Algorithm 맛보기

Lee Syong

능동적으로 살자, 행복하게😁

이전 포스트

[TIL] 210905

다음 포스트

[TIL] 210906

TIL

📝 오늘 한 것

📖 학습 자료

📚 배운 것

배열

1. 자료 구조

2. 배열 선언

3. index 위치 출력

4. 배열과 반복문

📌 for 반복문

📌 for of 반복문

📌 forEach() 메서드

💡 여기서 잠깐 !

5. 삽입, 삭제, 복사 API

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

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

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

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

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

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

6. 검색(검사) API

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

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

7. 그 외 유용한 `array APIs`

❗ 변경자 메서드

❗ 접근자 메서드

❗ 순회 메서드

✨ 내일 할 것

[TIL] 210905

[TIL] 210907

0개의 댓글

[TIL] 210906

TIL

📝 오늘 한 것

📖 학습 자료

📚 배운 것

배열

1. 자료 구조

2. 배열 선언

3. index 위치 출력

4. 배열과 반복문

📌 for 반복문

📌 for of 반복문

📌 forEach() 메서드

💡 여기서 잠깐 !

5. 삽입, 삭제, 복사 API

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

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

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

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

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

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

6. 검색(검사) API

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

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

7. 그 외 유용한 array APIs

❗ 변경자 메서드

❗ 접근자 메서드

❗ 순회 메서드

✨ 내일 할 것

[TIL] 210905

[TIL] 210907

0개의 댓글

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

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

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

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

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

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

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

7. 그 외 유용한 `array APIs`