[JS] 자료 다루기(객체, 배열)

⚡객체

📚객체 순회에 필요한 메서드 

Object.keys(data), Object.values(data), Object.entries(data)

 

이 메서드들은 포괄적인 용도로 만들어짐 -> 메서드를 적용할 자료구조는 일련의 합의를 준수해야함.

커스텀 자료구조를 대상으로 순회를 하기 위해 이 메서드들 사용 못함 

 

keys(), values(), entries()를 사용할 수 있는 자료구조는 다음과 같습니다. -> map.keys(), map.values(), map.entries()

• Map
• Set
• Array

일반 객체에도 순회 관련 메서드가 있긴 한데, keys(), values(), entries()와는 문법에 차이가 있습니다.

Object.keys, values, entries

일반 객체엔 다음과 같은 메서드를 사용할 수 있습니다.

• Object.keys(obj) – 객체의 키만 담은 배열을 반환합니다.
• Object.values(obj) – 객체의 값만 담은 배열을 반환합니다.
• Object.entries(obj) – [키, 값] 쌍을 담은 배열을 반환합니다.

특징

Object.keys, values, entries는 심볼형 프로퍼티를 무시함.

Map, Set, Array 전용 메서드와 일반 객체용 메서드의 차이를 (맵을 기준으로) 비교

	map, set, array	일반 객체
호출 문법	map.keys()	Object.keys(obj)(obj.keys() 아님)
반환 값	iterable 객체 (배열을 일반화한 객체)	'진짜' 배열

 

차이 (일반 객체 기준)

1.  obj.keys()가 아닌 Object.keys(obj)를 호출

Object.keys() 메서드는 객체가 가지고 있는 메서드를 사용하는 것이 아니라, Object라는 내장 객체의 메서드로 사용하고, 파라미터로 우리가 만든 객체를 집어넣어줘야 하기 때문에 obj.keys()처럼 사용하지 않도록 주의해야 한다.

 

2. 메서드 Object.*를 호출하면 iterable 객체가 아닌 객체의 한 종류인 배열을 반환

‘진짜’ 배열을 반환하는 이유는 하위 호환성 때문입니다

 

예시

let me = {
  name: "나",
  age: 90
};

Object.keys(me) => ["name", "age"]
Object.values(me) => ["나", 90]
Object.entries(me) => [ ["name","나"], ["age",90] ]

 

 

⚡배열

📚요소 추가와 제거 메서드

아래와 같은 메서드는 원본 배열을 훼손함

arr.unshift()	맨 앞 요소 추가
arr.push()	맨 끝에 요소 추가
arr.shift()	맨 앞 요소 제거
arr.pop()	맨 끝 요소 제거
arr.splice()	요소 추가 및 삭제, 교체 변경

 

arr.splice

첫 번째 매개변수는 조작을 가할 첫 번째 요소를 가리키는 인덱스(index)입니다.

두 번째 매개변수는 deleteCount로, 제거하고자 하는 요소의 개수를 나타냅니다.

 elem1, ..., elemN은 배열에 추가할 요소를 나타냅니다

arr.splice(index[, deleteCount, elem1, ..., elemN])

예시

//음수 인덱스도 사용가능
let arr = [1, 2, 5];

// 인덱스 -1부터 (배열 끝에서부터 첫 번째 요소)
// 0개의 요소를 삭제하고
// 3과 4를 추가합니다.
arr.splice(-1, 0, 3, 4);

alert( arr ); // 1,2,3,4,5

 

arr.slice

기존 배열을 건드리지 않고 기존 배열의 복사본을 만듦

"start" 인덱스부터 ("end"를 제외한) "end"인덱스까지의 요소를 복사한 새로운 배열을 반환

arr.slice([start], [end])

예시

let arr = ["t", "e", "s", "t"];

alert( arr.slice(1, 3) ); // e,s (인덱스가 1인 요소부터 인덱스가 3인 요소까지를 복사(인덱스가 3인 요소는 제외))

alert( arr.slice(-2) ); // s,t (인덱스가 -2인 요소부터 제일 끝 요소까지를 복사)

 

📚요소 병합

arr.concat(arg1, arg2...)

기존 배열의 요소를 사용해 새로운 배열을 만들거나 기존 배열에 요소를 추가하고자 할 때 사용

특징

인수엔 배열이나 값이 올 수 있는데, 인수 개수엔 제한이 없습니다.

객체가 인자로 넘어오면 (배열처럼 보이는 유사 배열 객체이더라도) 객체는 분해되지 않고 통으로 복사되어 더해집니다

 

예시

let arr = [1, 2];

// arr의 요소 모두와 [3,4]의 요소 모두를 한데 모은 새로운 배열이 만들어집니다.
alert( arr.concat([3, 4]) ); // 1,2,3,4

// arr의 요소 모두와 [3,4]의 요소 모두, [5,6]의 요소 모두를 모은 새로운 배열이 만들어집니다.
alert( arr.concat([3, 4], [5, 6]) ); // 1,2,3,4,5,6

// arr의 요소 모두와 [3,4]의 요소 모두, 5와 6을 한데 모은 새로운 배열이 만들어집니다.
alert( arr.concat([3, 4], 5, 6) ); // 1,2,3,4,5,6

let arr = [1, 2];

let arrayLike = {
  0: "something",
  length: 1
};

alert( arr.concat(arrayLike) ); // 1,2,[object Object]

그런데 인자로 받은 유사 배열 객체에 특수한 프로퍼티 Symbol.isConcatSpreadable이 있으면 concat은 이 객체를 배열처럼 취급합니다. 따라서 객체 전체가 아닌 객체 프로퍼티의 값이 더해집니다.

let arr = [1, 2];

let arrayLike = {
  0: "something",
  1: "else",
  [Symbol.isConcatSpreadable]: true,
  length: 2
};

alert( arr.concat(arrayLike) ); // 1,2,something,else

 

📚배열 탐색

arr.indexOf(item, from)	인덱스 from부터 시작해 item(요소)을 찾습니다. 요소를 발견하면 해당 요소의 인덱스를 반환하고, 발견하지 못했으면 -1을 반환
arr.lastIndexOf(item, from)	위 메서드와 동일한 기능을 하는데, 검색을 끝에서부터 시작한다는 점만 다릅니다.
arr.includes(item, from)	인덱스 from부터 시작해 item이 있는지를 검색하는데, 해당하는 요소를 발견하면 true를 반환

특징

요소를 찾을 때 완전 항등 연산자 === 을 사용한다.

ex. false를 검색하면 정확히 false만을 검색하지, 0을 검색하진 않습니다.

 

includes는 NaN도 제대로 처리한다는 점에서 indexOf/lastIndexOf와 약간의 차이가 있음.

 

예시

let arr = [1, 0, false];

alert( arr.indexOf(0) ); // 1
alert( arr.indexOf(false) ); // 2
alert( arr.indexOf(null) ); // -1

alert( arr.includes(1) ); // true

const arr = [NaN];
alert( arr.indexOf(NaN) ); // -1 (완전 항등 비교 === 는 NaN엔 동작하지 않으므로 0이 출력되지 않습니다.)
alert( arr.includes(NaN) );// true (NaN의 여부를 확인하였습니다.)

 

 

arr.find()	판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefined를 반환
arr.findIndex()	주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니다. 만족하는 요소가 없으면 -1을 반환

예시

 

//find
let users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"}
];

let user = users.find(item => item.id == 1);

alert(user.name); // John

//findIndex
const array1 = [5, 12, 8, 130, 44];

const isLargeNumber = (element) => element > 13;

console.log(array1.findIndex(isLargeNumber)); // 3

 

arr.filter()

주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환

특징

filter는 find와 문법이 유사하지만, 조건에 맞는 요소 전체를 담은 배열을 반환한다는 점에서 차이가 있음

 

예시

let users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"}
];

// 앞쪽 사용자 두 명을 반환합니다.
let someUsers = users.filter(item => item.id < 3);

alert(someUsers.length); // 2

 

 

📚배열 변형

arr.map()

배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환

예시

let lengths = ["Bilbo", "Gandalf", "Nazgul"].map(item => item.length);
alert(lengths); // 5,7,6

 

arr.sort()

배열의 요소를 정렬, 배열 자체가 변경

특징

요소는 문자열로 취급되어 재 정렬됨

 

예시

let arr = [ 1, 2, 15 ];

// arr 내부가 재 정렬됩니다.
arr.sort();

alert( arr );  // 1, 15, 2

let arr = [ 1, 2, 15 ];

arr.sort((x,y) => x -y);

alert( arr );  // 1, 2, 15

//유니코드 정렬
let countries = ['Österreich', 'Andorra', 'Vietnam'];

// Andorra, Vietnam, Österreich (제대로 정렬이 되지 않았습니다.)
alert( countries.sort( (a, b) => a > b ? 1 : -1) ); 

// Andorra,Österreich,Vietnam (제대로 정렬되었네요!)
alert( countries.sort( (a, b) => a.localeCompare(b) ) );

 

arr.reverse()

요소를 역순으로 정렬

예시

let arr = [1, 2, 3, 4, 5];
arr.reverse();

alert( arr ); // 5,4,3,2,1

 

string.split()	String 객체를 지정한 구분자를 이용하여 여러 개의 문자열로 나눔
arr.join()	배열의 모든 요소를 연결해 하나의 문자열로 만듦

특징

split 메서드 : 두 번째 인수로 숫자를 받을 수 있습니다. 이 숫자는 배열의 길이를 제한해주므로 길이를 넘어서는 요소를 무시할 수 있습니다.

 

예시

let arr = 'Bilbo, Gandalf, Nazgul, Saruman'.split(', ', 2);

alert(arr); // Bilbo, Gandalf

//join
let arr = ['Bilbo', 'Gandalf', 'Nazgul'];

let str = arr.join(';'); // 배열 요소 모두를 ;를 사용해 하나의 문자열로 합칩니다.

alert( str ); // Bilbo;Gandalf;Nazgul

 

arr.reduce()

배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환

특징

(forEach, for, for...of) + map 

 

구문

//구문
let value = arr.reduce(function(accumulator, item, index, array) {
  // ...
}, [initial]);

• accumulator – 이전 함수 호출의 결과. initial은 함수 최초 호출 시 사용되는 초깃값을 나타냄(옵션)
• item – 현재 배열 요소
• index – 요소의 위치
• array – 배열

예시

let arr = [1, 2, 3, 4, 5];

let result = arr.reduce((sum, current) => sum + current, 0);

alert(result); // 15

1. 함수 최초 호출 시, reduce의 마지막 인수인 0(초깃값)이 sum에 할당됩니다. current엔 배열의 첫 번째 요소인 1이 할당됩니다. 따라서 함수의 결과는 1이 됩니다.
2. 두 번째 호출 시, sum = 1 이고 여기에 배열의 두 번째 요소(2)가 더해지므로 결과는 3이 됩니다.
3. 세 번째 호출 시, sum = 3 이고 여기에 배열의 다음 요소가 더해집니다. 이런 과정이 계속 이어집니다.

 

	sum	current(배열요소)	result
첫 번째 호출	0	1	1
두 번째 호출	1	2	3
세 번째 호출	3	3	6
네 번째 호출	6	4	10
다섯번째 호출	10	5	15

 

📝총 메서드 요약

요소를 더하거나 지우기

• push(...items) – 맨 끝에 요소 추가하기
• pop() – 맨 끝 요소 추출하기
• shift() – 첫 요소 추출하기
• unshift(...items) – 맨 앞에 요소 추가하기
• splice(pos, deleteCount, ...items) – pos부터 deleteCount개의 요소를 지우고, items 추가하기
• slice(start, end) – start부터 end 바로 앞까지의 요소를 복사해 새로운 배열을 만듦
• concat(...items) – 배열의 모든 요소를 복사하고 items를 추가해 새로운 배열을 만든 후 이를 반환함. items가 배열이면 이 배열의 인수를 기존 배열에 더해줌

원하는 요소 찾기

• indexOf/lastIndexOf(item, pos) – pos부터 원하는 item을 찾음. 찾게 되면 해당 요소의 인덱스를, 아니면 -1을 반환함
• includes(value) – 배열에 value가 있으면 true를, 그렇지 않으면 false를 반환함
• find/filter(func) – func의 반환 값을 true로 만드는 첫 번째/전체 요소를 반환함

배열 변형하기

• map(func) – 모든 요소에 func을 호출하고, 반환된 결과를 가지고 새로운 배열을 만듦
• sort(func) – 배열을 정렬하고 정렬된 배열을 반환함
• reverse() – 배열을 뒤집어 반환함
• split/join – 문자열을 배열로, 배열을 문자열로 변환함
• reduce(func, initial) – 요소를 차례로 돌면서 func을 호출함. 반환값은 다음 함수 호출에 전달함. 최종적으로 하나의 값이 도출됨