[JavaScript]자료구조, 연산자와 문자열

Array destructuting

Array destructing 이란 배열이나 개체의 값을 개별 변수로 분해하는 것입니다.

const arr = [2,3,4];
const [x,y,z] = arr;

 

위와 같이 표기할 경우 x,y,z가 각각 2,3,4가 되는 것을 확인할 수 있습니다.

이때 기존의 배열인 arr은 아무 영향을 받지 않습니다.

배열에서 개별 변수로 분해할 때 꼭 모든 변수를 다 쓸 필요는 없습니다.

const [first, , second] = arr;

 

위와 같은 방법으로 2와 4만을 추출할 수도 있습니다.

 

배열 내의 원소를 바꾸기 위해 임시 변수를 사용할 수도 있습니다.

또 배열 내의 원소의 위치를 바꾸기 위해서도 이 방법을 사용할 수 있습니다.

 

중첩된 배열에 대해서도 형태를 같게 써주면 변수를 분해할 수 있습니다.

const nested = [2, 4, [5, 6]];
const [i, , [j, k]] = nested;

 

Object destructuring

개체에서는 순서는 상관 없고 같은 키를 사용하는 것이 중요합니다.

키 이름을 바꾸고자 할 때는 콜론을 사용하여 표현합니다.

const { menu = [], starterMenu: starters = [] } = restaurant

 

만약 중괄호로 변수를 묶어서 표현할 때는 오류가 생길 수 있어 소괄호로 양 끝을 묶어주어야 합니다.

({a, b} = obj);

 

 

Spread operator (...)

spread operator는 배열에서 모든 값을 개별적으로 가져오는 기능을 합니다.

이 연산자는 새로운 배열을 생성하지는 않습니다.

반복은 배열, 문자열, 맵, 집합에는 가능하지만 개체에는 가능하지 않습니다.

const arr = [2, 3, 4]
console.log(...arr)

 

 

위 코드를 실행하면 2, 3, 4 따로따로 출력됩니다.

 

Rest Pattern and Parameters

스프레드 연산자의 반대입니다. 즉, 요소들을 배열에다가 넣는 것을 의미합니다.

const [a, b, ...others] = [1, 2, 3, 4, 5]

 

위 코드를 실행하면 others에 나머지 요소인 3,4,5가 모두 들어갑니다.

스프레드연산자와 쓰는 방법은 점 세개로 같지만 역할은 전혀 반대입니다.

단 rest 요소는 가장 마지막에 나와야 합니다. 중간에 나올 수는 없습니다.

 

함수에도 rest를 적용하여 매개변수를 설정할 수 있습니다.

이 경우 함수에 매개변수가 몇 개든 들어갈 수 있습니다.

 

And Or 연산자(&&, ||)

어떤 데이터 타입도 사용할 수 있고 어떤 데이터 타입도 반환할 수 있으며 short-circuiting을 합니다.

만약 or 연산자에 대해 첫번째 값이 true라면 바로 true를 반환한다는 것이 short-circuiting입니다.

두번째 값을 평가하지 않고 바로 결과를 반환합니다.

어떤 데이터 타입도 사용할 수 있어서 true false가 아니더라도 다른 값을 반환할 수 있습니다.

and 연산자는 반대로 첫번째 값이 false라면 바로 그 값을 반환합니다.

만약 첫번째 값이 true라면 그 다음에 있는 false 값을 찾아 반환합니다.

 

Nullish Coalescing Operator (??)

ES2020에 등장한 개념으로 '무'이고 정의되지 않은 것을 의미하는 연산자입니다.

정의되지 않은 값이 있을 때 연산자 뒤에 있는 값을 반환합니다.

 

Logical Assignment Operator

ES2021에 등장한 논리 할당 연산자입니다.

a.num = a.num || 10;
a.num ||= 10;

 

이 연산자는 첫 줄에 있는 코드를 둘째 줄에 있는 코드처럼 간결하게 쓸 수 있도록 해줍니다.

 

배열 반복문(for of loop)

ES6에서 등장한 개념입니다.

for (const item of menu) console.log(item);

 

전체 배열에 대한 루프가 적용되어 전체 배열의 원소를 반복하게 해줍니다.

 

Optional Chaining (?.)

만약 속성이나 메소드, 배열이 존재하지 않더라도 오류가 생기지 않고 undefined로 출력되도록 해줍니다.

console.log(arr.notexist(0, 1) ?? 'Not exists')

 

위 코드에서 배열의 notexist 메소드를 찾을 수 없을 때 undefined가 되어 ?? 뒤의 값을 출력합니다.

 

Set

집합은 고유한 값의 모임입니다. 즉, 어떠한 중복도 없습니다.

const aSet = net Set([1, 1, 1, 2, 3, 3])

 

위와 같이 집합을 만들 경우 중복되는 값이 사라지고 1, 2, 3만이 집합 안에 남습니다.

집합의 크기를 알아볼 때는 aSet.size 와 같이 사용할 수 있습니다.

원소를 추가할 때는 add, 제거할 때는 delete를 사용할 수 있습니다.

집합은 순서가 없기 때문에 [0]과 같은 인덱스를 사용할 수 없습니다.

즉, 집합에서는 값을 얻을 수 없습니다. 각각의 값이 고유하고 순서가 중요하지 않기 때문입니다.

집합에 값이 존재하는지 확인하기 위해서는 has를 사용할 수 있습니다.

 

Maps

const rest = new Map();
rest.set('name', 'Italiano');
rest.set(1, 'Firenze, Italy')

 

맵에서는 set을 통해 add와 같은 효과를 낼 수 있습니다.

맵에 값을 추가하면 {"name" => "Italiano", 1 => "Firenze, Italy"} 와 같은 형태가 됩니다.

get 메소드를 이용하여 값을 읽을 수 있습니다.

맵의 크기도 set과 동일하게 size을 이용하여 확인할 수 있습니다.

 

맵을 활용하면 좋은 점은 DOM의 querySelector로 요소를 선택할 수 있다는 것입니다.

 

 

String

문자열에서는 인덱스를 사용할 수 있습니다.

console.log(str.indexOf('s'));
console.log(str.lastIndexOf('s'));

 

우리는 인덱스를 사용하여 문자열 슬라이스를 할 수 있습니다.

console.log(str.slice(1))

 

이렇게 슬라이스를 할 경우 원래의 문자열이 바뀌지는 않으나

부분을 잘라서 새 문자열을 표현할 수 있습니다.

만약 slie(1, 3)으로 표현할 경우 새 문자열의 길이는 3-1=2 입니다.

가장 마지막 문자를 슬라이스할 경우 -1을 쓰면 됩니다.

 

console.log(str.toLowerCase());
console.log('hello'.toUpperCase());

 

문자열의 대소문자를 바꿀 때는 위와 같은 메소드를 사용할 수 있습니다.

 

문자열의 일부를 대체할 때는 replace를 사용할 수 있습니다.

str.replace('a', 'b')

 

문자열을 포함하고 있는지 확인할 때는 includes를 사용할 수 있습니다.

어떤 문자열로 시작하는지, 끝나는지 확인할 떄는 startsWith, endsWith를 사용할 수 있습니다.

 

문자열을 어떤 문자를 기준으로 나누려고 한다면 split를 사용할 수 있습니다.

반대로 합칠 때는 join을 사용할 수 잇습니다.

console.log('a+very+nice+string').split('+'));
console.log['hello', 'world'].join(' ');

 

padding을 사용하여 문자열의 길이를 원하는 만큼 맞추고 싶을 때 padStart, padEnd 메소드를 사용할 수 있습니다.

만약 20글자로 맞추고 싶다면 padStart(20, 'a')와 같이 쓸 수 있습니다.