자바스크립트 , 문자열 관련 배열 / for..of / forEach , ...사용 / 구조분해할당 / toString, delete, value 메서드

가볍게 알아보는 배열

'use strict';

let str = '@ Javascript &';

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

- 문자열에 대한 배열 인덱싱을 제공한다는 것을 알 수 있다.

console.log('@ Javascript &'[0]);            
console.log('@ Javascript &'[str.length - 1]);

-문자열 자체에 대한 배열 인덱싱도 가능하다.

 

* 배열 연산법  : 첫주소 + 인덱스 *타입크기
* 배열 접근 3요소 : 1. 첫주소 2. 인덱스 3.인덱스 종료값(배열 길이-1)

---

배열 리터럴 생성, 삭제의 특징

 

let ar1 = [];        
let ar2 = ar1;  

console.log(ar1.length);
console.log(ar1[0]);        
console.log(ar1);

배열을 생성.

복사저장.

arl 의 배열은 존재하나 길이의 값이 없고, 값은 찾을 수 없는 상태.

 

let ar2 = ar1;
ar1[0] = 1;  
ar1[1] = 2;  
console.log(ar1.length);
console.log(ar1);
console.log(ar2);

비어 있는 상태의 배열에서도 인덱스 번호를 통해 확장이 가능함.

 

let ar2 = ar1;
ar1[0] = 1;  
ar1[1] = 2; 
ar2[4] = 5;     

console.log(ar1.length);
console.log(ar1);

중간 인덱스 번호인 2와 3에 대해서 없더라도

4가 추가가 가능함을 알 수 있음.

하지만 사용은 지양하도록하자. "그럴거면 배열 왜쓰니..." 강사님 말씀.

 

 

let ar3 = [11, 22, 33, 44, 55];

console.log(ar3);

ar3[1] = 'a';      
ar3[2] = 'psy';
ar3[3] = 4.15;

console.log(ar3);

 

자바스크립트에서는 배열에 다른 타입도 넣을 수 있고, 함수식도 가능하다.

값을 수정하여 입력할수 있다.

 

 

delete ar3[4];      
console.log(ar3);   
console.log(ar3.length);

ar3[5] = 66;
console.log(ar3);

 

delete 메서드 : 요소의 값을 삭제할 수 있다.

요소의 값을 삭제했다고 해서 배열의 길이나 공간이 달라지는 것은 아니다.

 

let ar3 = [11, 22, 33, 44, 55];
ar3[1] = 'a';      
ar3[2] = 'psy';
ar3[3] = 4.15;
delete ar3[4]; 
ar3[5] = 66;
console.log(ar3.toString());                       

console.log([] + 5);           
console.log([1] + 5);          
console.log([1, 2] + 5);

 

배열을 + 연산자를 사용할 경우 산술 처리하나 toString 메서드를 호출한 후 연산처리됨.

toString 메서드 : 배열을 하나의 문자열로 만듬.

 

즉 , 문자열끼리의 결합이 이루어짐.

 

let ar3 = [11, 22, 33, 44, 55];
ar3[1] = 'a';      
ar3[2] = 'psy';
ar3[3] = 4.15;
delete ar3[4]; 
ar3[5] = 66;

ar3.value = 'add';
console.log(ar3.value);  
console.log(ar3);
console.log(ar3[ar3.length - 1]);   // 66
console.log();

 

value 메서드 :  배열에 value 값을 지정가능. 맨 마지막에 표현됨을 알 수 있음.

그러나 길이 조사에서는 빠지게 된다.

 

배열의 복사 , for ..of.. 와 forEach

 

for (const key of ar3) {
console.log(key);
}
console.log();

ar3.forEach((v, i, a) => {
console.log(v, i);
});
console.log();

for(변수 of 배열 ){변수값들로 실행가능}

 

• 특징 

 -> 배열 길이만큼 배열의 요소값들을 순회한다.

일반적인 for 문을 사용할땐, 배열의 길이조사가 필요했다면 , for of 는 알아서 배열의 크기만큼 진행된다.

-> 반복 가능한 객체에 대해 반복함 (Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)

->break 가 사용가능하다.

 

배열.forEach(요소값 변수 , 인덱스번호에해당하는 변수, 배열전체)(콜백함수형태)

 

• 특징

-> 콜백함수나 화살표로 축약된 함수를 사용할 수 있다.

->순서대로 요소값, 인덱스 , 배열 전체로 받을 수 있고, 원하는 값 부분만 사용할 수 있다.

-> 호출하는 배열을 변경할 수 있으나 , 값을 리턴할 수 없다.(리턴을 해야할경우 map을 사용한다.)

-> break 할 수 없다.

map 같은 경우 (현재 value, 현재 key, 현재 순회중인 map객체 자체 )

set 같은 경우 (현재 요소값, 현재 요소값, 현재 순회중인 set객체 자체)

배열 같은경우 (현재 요소값, 현재 인덱스, 현재 순회중인 배열객체 자체)

 

 

배열의 분할과 결합

 

• ... 의 사용

function spreadAr(...a) {
    for (let i = 0; i < a.length; i++) {
        console.log(a[i]);
    }
    console.log('===============================');
}

spreadAr(1, 2, 3);
spreadAr(1, 2, 3, 4, 5);
spreadAr('가', 11, '나', 12, '다', 13);

 

...을 이용하여 무한대의 배열이 표현가능하다. 길이에 관하여 무한대라는 표현.

 

배열의 주소를 참조하여 2차원 배열을 형성

let ar1 = [1, 2, 3];
let ar2 = [1, 2, 3];

let ar3 = [ar1, ar2];     

console.log(ar3);

 

배열끼리의 결합.

let a1 = [1, 2, 3];
let a2 = [1, 2, 3];
let a3 = [...a1, ...a2];

console.log(a3);

a2[2] = 4; 

console.log(a3);
console.log(a2);

... 을 이용하여 배열 안의 요소들을 카피하여 저장함.

a1 a2의 요소들을 카피하여

새로이 a3 에저장된것이지  a1,a2의 주소값을 참조하는 구조가 아니기 때문에,

추후에 a2의 변경이 이루어 졌다고 해서 a3의 값이 바뀌지 않음에 주의.

 

나중에 가면 참조변수의 개념과 변수의 개념이 헷갈리게 되기때문에

무엇을 어떻게 했는지 잘 볼것.

 

배열의 요소를 다른 곳에 재할당 (구조분해 할당이라는 말을 자주 쓰게 될것이다. 알아두자.)

let [element1, element2] = ['요소1', '요소2'];

console.log(element1);
console.log(element2);

 

배열요소를 재할당 할때는 

let [ 변수 , 변수] = [요소 , 요소] -> 양쪽 [ ]를 동일하게 사용해야함.

 

재할당 예시

let [e1, e2, e3, ...restElement] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

console.log(e1);
console.log(e2);
console.log(e3);
console.log(restElement);

첫번째 두번째 세번째를 할당받고 나머지는 ... 을 통해 받게됨.