weekend studies : 배열1/2

Seri Park·2021년 4월 17일
0
post-thumbnail

자바스크립트 그리고 자바스크립트 문법과 유사한 리액트에서 가장 많이 쓰이는 배열의 개념을 정리하고자 한다.

배열이란:

값을 순차적으로 나열하여 인덱스값으로 접근할 수 있는 자료구조이다.
배열을 다루기위한 수많은 메서드가 존재하는데 이를 자유자재로 다루면 자료구조를 잘 다룰 수있는 것을 의미하기에 유리하다.
fact:
1.배열은 사실 객체이다
2.하지만 일반객체와는 다르게 순서가 자동으로 찍혀서나오는 index라는 것과
length라는 프로퍼티를 가지고 있다.
3.희소배열을 주의하자 (성능적으로 좋지않음)

순서를 가진 배열이라는 시스템을 모방한 객체라서
메모리가 연속적으로 이어있지 않을수있다. 이때 비워져있는 배열을 희소배열이라고 한다
만약 farm라는 배열에 4가지 동물이 존재하고 토끼라는 동물을 [5]인덱스에 추가한 경우 [4]인덱스에는 undefined라는 값이 표시된다. length는 비어있는 요소까지 포함하여 0부터5를 count한 6이라는 length를 보여준다.희소배열의 length값이 요소의 개수와 일치하지 않는 것이다 하지만 [4]인덱스에는 있는 요소는 실질적으로 없는 요소라 이때 배열요소가 있는지 없는지 확인하는 메서드로서 hasOwnProperty를 사용한다

비구조화 할당

ecmascript 6에 새로 추가된 기능으로서 비구조화 할당은 배열,객체,반복 가능 객체에서 값을 꺼내어 그 값을 별도의 변수에 대입하는 문장이다.

배열 의 비구조화 할당:
var[a,b]=[1,2]는 var a=1, b=2와 같다.
[a,b]=[2a,3b]는 a=2a, b=3b와 같다.
이미 선언된 변수 a,b를 비구조화 할당한 것이다.

객체 의 비구조화 할당:
객체에서 프로퍼티 이름이 변수의 이름이 되어 변수 이름만 쉼표로 구분해서 작성할 수 있다.
{a,b}={a:1, b:2}; 식은 {a:a,b:b}={a:1,b:2}와 같다

배열의 비구조화 할당의 예시

객체의 비구조화 할당의 예시

배열을 다루는 메서드s

메서드는 수정하는 메서드와 접근하는 메서드 그리고 반복하는 수많은 빌트인 메서드가 존재하고, 직접 원본배열을 변경하는 메서드 방법과 원본의 변경없이 새로운 배열이 생성되서 return되는 메서드 방법이 존재한다.

수정되는 메서드 중 가장 많이 쓰이는 것은
? 정리해보자.

push/pop(배열 뒤에 추가/제거) unshift/shift(배열 앞에 추가/제거)

너무쉬우니까 설명은 생략함.

splice (배열 갈아끼우기) / slice(잘라서 잘라낸 부분만 보여주기)

splice는 갈아끼우기라는 말 그대로 a,b,c,d 라는 배열요소가 존재했다면 b랑 c가 있던 자리에 boy랑 cat으로 갈아끼울수 있는 것이다. 첫번째 수정을 시작할 인덱스위치를 선정하고 두번째 제거해버릴 요소 개수를 쓴다음 마지막으로 추가할 요소를 comma(,)를 찍어가며 쭉 넣으면 되는 것이다.

예시=>

var a =['a','b','c','d']
a.splice(1,0,'wont','delete','새치기');
console.log(a);//['a','wont','delete','새치기','b','c','d']

splice메서드는 갈아끼우며 원본을 건드려서 변화시켜버리며 버리게되는 부분을 변수에 넣어 사용할 수도 있다.

slice는 잘라낸 부분을 보여준다.여기서 주목할 점은 slice는 배열의 원본을 변화시키지 않고 새로운 배열을 생성하여 잘라버린 부분을 사용할수있다는 점이다.

sort (정렬된 배열을 반환)

문자열을 정렬하는 것과 숫자를 정렬하는데에 차이가 있다.
문자열은 ㄱ에서 ㅎ라는 순서 A부터 Z라는 순서대로 정렬해주지만 숫자는 유니코드 포인터 순서를 기준으로 정렬하기에 숫자 요소를 정렬할땐 정렬 순서를 정해주는 비교함수를 만들어야한다.
let arr=[21,45,9,10,15,3];
다음과 같은 배열이 있다.그리고

function sorting(a,b){
  return a-b;
}
arr.sort(sorting);

위와같이 sorting이라는 비교함수를 지정한다.
이 함수의 인자는 a와 b두개가 들어오는데, a와 b는 비교 대상인 배열의 원소들이다.
sort메서드는 비교함수의 리턴값이 양수, 음수, 0일 때의 값이 모두 달라진다.
만약 위의 비교함수에 인자로 arr의 원소 21과 45가 들어왔다고 가정해보면
a는 21, b는 45가 되어 a-b를 하면 -24라는 음수 값이 나온다.
리턴값이 음수가 되면, 비교 대상인 a, b의 순서는 변하지 않고 배열을 그대로 둔채
첫 번째 원소인 21과 세 번째 원소인 9가 비교함수의 인자로 들어가서 21에서 9를 뺀 12라는 리턴값이 양수로 나오면 두 비교대상인 원소의 위치가 서로 바뀌게 된다.
arr = [9, 45, 21, 10, 15, 3]

이 과정을 반복해 결국 arr는 [3, 9, 10, 15, 21, 45] 로 최종 정렬이 된다.

작은숫자부터 커지는 오름차순이 아닌 내림차순을 원하는 경우 (b-a)를 하면 된다.

접근하는 메세드 중 많이 쓰이는 것은?

join (모든 요소값을 문자열로 바꾸고 연결해서 반환)

...arr와 ... arr2는 배열로 묶이지 않은 요소로 빼내서 합치려는 의도로 사용한다. (아래그림 참고)

concat (갖다붙이고나서 새로운 배열을 생성)


concat은 concatenate의 줄임말으로서 연결하다는 의미를 가지고 있다.
받은 인수가 배열일 때, 펼친 후에 배열에 추가하고 새로운 배열을 생성하기 때문에 기존 배열을 수정하지 않는다. 아래와 같이 배열을 한번만 펼쳐서 추가한다. 따라서 'o'라는 배열속의 배열은 펼쳐지지 않은 채 그대로 배열로서 나온다

indexOf (앞에서 부터 검색할 값을 찾기 시작) / lastIndexOf (끝에서부터 검색할 값을 찾기 시작)

indexOf는 시작 위치가 생략될 경우, 처음부터 시작해서 쭉 훑고 인수로 들어오는 값과 일치하는 인덱스값을 반환한다. 결과값이 없는 경우엔 -1을 반환한다.
lastIndexOf는 시작 위치가 생략될 경우 맨 끝에서 시작해서 결과 값이 없을 경우 -1을 반환한다.

str.indexOf("3") : indexOf 는 처음부터 검색을 시작하기 때문에 처음 발견된 3의 위치를
Return한다.

str.indexOf("3",10) : 시작위치가 10이기 때문에 "원" 다음부터 오른쪽으로 검색을 시작해서 처음 3을 건너 뛰고 두번째 발견된 3의 위치를 Return한다.

str.lastIndexOf("3") : lastIndexOf는 끝에서부터 검색을 시작하기 때문에 처음 발견된 3의 위치를 Return한다.

str.lastIndexOf("3",10) : 시작위치가 10이기 때문에 "이" 다음부터 왼쪽으로 검색을 시작해서 처음 3을 건너 뛰고 두번째 발견된 3의 위치를 Return한다.

str.lastIndexOf("5") : 일치하는 문자가 없기 때문에 -1을 Return한다

findIndex (인덱스만 반환) /find (함수조건에 맞는) /filter

ToString (문자열로 반환) / toLocaleString (지역에 맞는 표기법에 따라 반환)

toString은 요소를 쉼표로 연결한 문자열을 반환하고 toLocaleString은 해당 지역에 맞는 언어와 표기법으로 번역한 문자열을 반환한다.

반복 메서드에서 많이 쓰이는 것은?

forEach (인수로 받은 함수를 배열의 요소별로 한번씩 실행) /
map (forEach와 같이 요소별로 함수를 실행하지만 결과값을 반환하여 새로운 배열 생성)


배열속에 있는 요소에 각각 함수를 실행시켜서 위 그림과 같이 요소 하나하나씩 새로운 배열에 push한다거나 원하는 방식으로 결과를 나타나게끔 한다.

여기선 1부터 6까지 배열에 있는 모든 수를 더하는 로직을 처리한다.
여기선 forEach 메서드로 배열속 요소를 전부다 iterate 하면서 push하는 로직과 unshift하는 두 로직을 통해 이해를 돕고자 했다.
그런데 forEach는 map과 달리 결과값을 반환하지 않는데 우리는 언제 forEach를 쓰는 것일까?
이는 효율성 때문이다. 예를들어 배열에 어떠한 콜백함수를 적용한 그 결과값이 궁금하지 않는데 map을 사용하여 메모리를 낭비할 필요는 없다. 리턴값을 받지 않아도 충분히 코드가 작동한다면 map을 쓰지않고 그저 반복문처럼 iterate하는 기능을 가진 forEach를 사용하면 된다.

map 메서드는 위와 같은 방식으로 로직을 처리하지만 언급했듯이 리턴값이 존재하기에 활용도가 높다는 것만 기억하면 된다.
인수로 넘긴 함수에는 value,index,array라는 세 인수가 전달된다. 배열요소를 각각 두번 곱하는 로직의 map함수다

profile
front-end developer. key= "consistency"

0개의 댓글