[javascript] javascript Array, Object 관련 유용한 메소드

javascript Array, Object 관련 유용한 메소드

 

.filter()

배열 항목이 특정 조건을 통과하는지 여부에 따라 새 배열을 생성

const studentsAge = [17, 16, 18, 19, 21, 17];
const ableToDrink = studentsAge.filter( age => age > 18 );
// ableToDrink 의 값은 [19, 21]

---

.map()

다른 배열의 값을 조작하여 새 배열을 생성. 데이터 조작에 좋으며, 변하지 않기 때문에  리액트(React)에 자주 사용

const numbers = [2, 3, 4, 5];
const dollars = numbers.map( number => '$' + number);
// dollars의 값은 ['$2', '$3', '$4', '$5']

---

.reduce()

합계를 계산할때 사용하면 좋다. 반환된 값은 모든 유형이 될 수 있다. (객체, 배열, 문자열, 정수)

const n = [5, 10, 15];
const total = n.reduce( (a, c) => a + c);
// total의 값은 5, 10,15의 합인 30 과 동일

---

.forEach()

배열의 각 항목에 함수를 적용하여 어떤 작업을 수행할때 유용하다.

예제에서는 콘솔에 값을 찍고 있지만, 계산을 한다거나 다른 함수를 호출하여 결과값을 받을때 유용하다.

const emotions = ['happy', 'sad', 'angry'];
emotions.forEach( emotion => console.log(emotion) );
// 콘솔에 아래와 같이 찍힌다.
// 'happy'
// 'sad'
// 'angry'

 

---

.some()

배열 요소중에 하나라도 특정 조건을 만족하는지 체크할 경우 유용한 함수

const userPrivileges = ['user', 'user', 'user', 'admin'];
const containsAdmin = userPrivileges.some( element => element === 'admin');
// containsAdmin 은 true

---

.every()

.some()와 유사하지만, 배열의 모든 조건이 만족할 경우를 체크.

const ratings = [3, 5, 4, 3, 5];
const goodOverallRating = ratings.every( rating => rating >= 3 );
// goodOverallRating 모든 값이 3보다 크거나 같으므로, true를 리턴함.
// 만약 rating >= 2 일 경우 false를 리턴.

---

.includes()

배열에 하나라도 특정 조건을 만족하는지 체크, .some()과 유사하나, 통과할 조건을 찾는 대신 배열의 특정 값이 포함되어 있는지 확인.

const names = ['sophie', 'george', 'waldo', 'stephen', 'henry'];
const includesWaldo = names.includes('waldo');
// includesWaldo 의 값은 true

---

Array.from()

다른 배열이나 문자열을 기반으로 배열을 생성하는 정적 방법.

const newArray = Array.from('hello');
// newArray 의 값은 ['h', 'e', 'l', 'l', 'o']

생성하면서 함수를 지정하여 연산할 수도 있다.

const doubledValues = Array.from([2, 4, 6], number => number * 2);
// doubleValues 의 값은 기존값에 *2 되어 생성된다. [4, 8, 12]

---

Object.values()

객체의 값을 배열로 리턴

const icecreamColors = {
    chocolate: 'brown',
    vanilla: 'white',
    strawberry: 'red',
}

const colors = Object.values(icecreamColors);
// colors 객체의 값에 해당하는 ["brown", "white", "red"]

---

Object.keys()

객체의 key를 배열로 리턴

const icecreamColors = {
  chocolate: 'brown',
  vanilla: 'white',
  strawberry: 'red',
}

const types = Object.keys(icecreamColors);
// types 객체의 key값을 리턴 ["chocolate", "vanilla", "strawberry"]

---

Object.entries()

객체의 key와 값이 쌍으로 배열로 리턴

const weather = {
  rain: 0,
  temperature: 24,
  humidity: 33,
}

const entries = Object.entries(weather);
// 객체의 key와 값이 배열로 리턴됨.
// [['rain', 0], ['temperature', 24], ['humidity', 33]]

---

Array spread (...)

배열 앞에 ...을 붙임으로써, 배열의 엘리먼트를 함수의 인자로 사용할 경우 Array.apply() 를 대체 해서 사용이 가능함.

예제를 보면 보다 이해하기 쉽다.

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers));
// output : 6

console.log(sum(1,2,3));
// output : 6

console.log(sum.apply(null, numbers));
// output: 6

또 다른 예시를 들어보면

const aa = [1, 2, 3, 4];
const bb = [5, 6, 7, 8];

const aabb = [...aa, ...bb];
// aabb의 값은 [1, 2, 3, 4, 5, 6, 7, 8]

---

Object spread

...은 오브젝트에도 사용할 수 있다.

const spreadableObject = {
  name: 'Robert',
  phone: 'iPhone'
};

const newObject = {
  ...spreadableObject,
  carModel: 'Volkswagen'
}
// newObject will be equal to
// { carModel: 'Volkswagen', name: 'Robert', phone: 'iPhone' }

---

Function Rest

함수의 인자에도 ...을 사용할 수 있다.

function displayArgumentsArray(...theArguments) {
  console.log(theArguments);
}

displayArgumentsArray('hi', 'there', 'bud');
// Will print ['hi', 'there', 'bud']

---

Object.freeze()

기존 개체 속성을 수정하거나 개체에 새 속성 및 값을 추가하는 것을 방지.

const frozenObject = {
  name: 'Robert'
}

Object.freeze(frozenObject);

frozenObject.name = 'Henry';
// frozenObject Henry로 값을 지정했음에도 변경되지 않고, Robert가 표시된다.  { name: 'Robert' }

---

Object.seal()

개체에 새로운 속성은 추가 할 수 없지만, 기존 속성은 변경할 수 있는 seal()

const sealedObject = {
  name: 'Robert'
}

Object.seal(sealedObject);

sealedObject.name = 'Bob';
sealedObject.wearsWatch = true;
// sealedObject 기존 속성인 name이 Bob로 변경되었다. 하지만 추가한 wearWatch는 추가되지 않았다. { name: 'Bob' }

---

Object.assign()

모든 자체 속성의 값을 하나 이상의 소스 개체에서 대상 개체로 복사하는 데 사용

const firstObject = {
  firstName: 'Park'
}

const secondObject = {
  lastName: 'JH'
}

const combinedObject = Object.assign(firstObject, secondObject);
// combinedObject 의 값은 { firstName: 'Park', lastName: 'JH' }

---