Section 1 / Unit8 : [JavaScript] 배열

코드스테이츠 수업 11일차!

오늘은 JS 배열강의와 코플릿 푸는 시간이었다.

js 간단 내용 정리와

문제 풀이 중 모르는 문법?속성이 있어서 남겨둔다.

 

배열

• 순서가 있는 값
  ->순서는 인덱스라고 부르며, 1이 아닌 0부터 번호를 매김
  ->대괄호를 이용해서 배열을 만들고,
  ->각각의 원소는 쉼표로 구분
• .length 속성을 사용하여 배열의 길이를 알 수 있음

let myNumber = [7, 9, 6, 1, 5];
//myNumber[3] = 1   //myNumber 배열의 3번째 인덱스 값은 1
//string도 동일하게 적용

myNumber.length; //5

2차원 배열

let myNumber = [[13,30], [73,8], [44,17]];
//myNumber[1] = [73,8]   
myNumber[1][0];  //73
//myNumber 1번째 인덱스 값의 0번째 인덱스 값 73

push, pop, unshift, shift

• push( ) : 배열 끝에 요소 추가
• pop( ) : 배열 끝에 요소 삭제
• unshift( ) : 배열 앞에 요소 추가
• shift( ) : 배열 앞에 요소 삭제

let words = ['she', 'he', 'We'];
words.push('us');  //['she', 'he', 'We', 'us'];
words.pop();  //['she', 'he', 'We'];
words.unshift('us');  //['us', 'she', 'he', 'We'];
words.shift();  //['she', 'he', 'We'];

Array.isArray, indexOf, includes

• Array.isArray : 배열인지 아닌지 판별하는 메서드
• indexOf, includes : 특정 값이 배열에 포함되어 있는지 확인할 수 있는 메서드

let nums = [1, 2, 3]
Array.isArray(nums)  //true
Array.isArray([4,5,6])  //true
Array.isArray([])  //true
Array.isArray(123)  //false

let words = ['she', 'he', 'We'];
words.indexOf('he')  //1
words.indexOf('she')  //0
words.indexOf('they')  //-1
words.indexOf('We') !== -1  //true
words.indexOf('they') !== -1  //false
words.includes('We')  //true
words.includes('they')  //false

 

 

---

...전개 연산자

• 전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우)또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있습니다.
• 비슷하게로는 apply( )가 있다

function sum(x, y, z) {
  return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers));
// Expected output: 6
console.log(sum.apply(null, numbers));
// Expected output: 6

const arr = [1,2,3];
let test_arr = [4,5,6];
let test_arr2 = [4,5,6];

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

//ES6
test_arr2.push(...arr);
console.log(test_arr2); //[4, 5, 6, 1, 2, 3]

.reduce

• reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.
• 리듀서 함수는 네 개의 인자를 가집니다.
  
  1. 누산기 (acc)
  2. 현재 값 (cur)
  3. 현재 인덱스 (idx)
  4. 원본 배열 (src)
  
  리듀서 함수의 반환 값은 누산기에 할당되고, 누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 됩니다.
  

const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  initialValue
);

console.log(sumWithInitial);
// Expected output: 10

반복문 for of

• for ... of 명령문은 반복가능한 객체(Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성

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

for (const element of array1) {
  console.log(element);
}
// Expected output: "a"
// Expected output: "b"
// Expected output: "c"

const name = "yeeendy";

for (let i = 0; i < name.length; i++) {
  console.log(name[i]);
}
// 결과
// "y"
// "e"
// "e"
// "e"
// "n"
// "d"
// "y"

merge array(배열 합치기)

//예제
arr1 = ['a', 'b'];
arr2 = [1, 3];
//1번째 방법
return [...arr1, ...arr2];  //['a', 'b', 1, 3]
//2번째 방법
return arr1.concat(arr2);  //['a', 'b', 1, 3]

.array slice

• 인수로 전달된 범위의 요소들을 복사하여 배열로 반환
• 원본 배열은 변경X
• 이름이 유사한 splice 메서드는 원본 배열을 변경하므로 주의

const arr = [1, 2, 3];
arr.slice(0, 1);  // [1]
arr.slice(1, 2);  // [2]
console.log(arr);  //[1, 2, 3]
arr.slice(1);  //[2, 3]  //arr[1]부터 이후의 모든 요소를 복사하여 반환
arr.slice(-1);  //[3]  //배열의 끝에서부터 요소를 한 개 복사하여 반환
arr.slice(-2);  //[2, 3]  //배열의 끝에서부터 요소를 두 개 복사하여 반환

immutable

불변성(Immutability)란 말그대로 변하지 않는 것을 의미한다. 불변 데이터는 한번 생성되고나면 그 뒤에는 변할수 없다.

자바스크립트에는 원시 타입(primitive type)으로는

• Boolean,
• String
• Number
• Null
• undefined
• Symbol

이 있으며 이 원시 타입은 불변한다. 이 값은 메모리영역 안에서 변경이 불가능하며 변수에 할당할 때 완전히 새로운 값이 만들어져 재 할당된다.

Array.prototype.join( )

• join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// Expected output: "Fire,Air,Water"
console.log(elements.join(''));
// Expected output: "FireAirWater"
console.log(elements.join('-'));
// Expected output: "Fire-Air-Water"

var a = ['바람', '비', '불'];
var myVar1 = a.join();      // myVar1에 '바람,비,불'을 대입
var myVar2 = a.join(', ');  // myVar2에 '바람, 비, 불'을 대입
var myVar3 = a.join(' + '); // myVar3에 '바람 + 비 + 불'을 대입
var myVar4 = a.join('');    // myVar4에 '바람비불'을 대입