[ 자바스크립트 ] 객체 - 다루기

1. Object.keys()
2. Object.values()
3. Object.entries()
4. 배열 추가 / 제거 : push,unshift,pop,shift
5. 배열 병합 : concat
6. 배열 고차함수 : map, reduce, filter
7. 배열 정렬 : sort
8. 배열 검색 : includes

---

1. Object.keys()

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

console.log(Object.keys(object1));
// expected output: Array ["a", "b", "c"]

객체의 속성들을 배열로 반환한다.

2. Object.values()

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

console.log(Object.values(object1));
// expected output: Array ["somestring", 42, false]

객체의 값들을 배열로 반환한다.

3. Object.entries()

const object1 = {
  a: 'somestring',
  b: 42
};

console.log(Object.entrie(obejct1)) 
// [ [ 'a', 'somestring' ], [ 'b', 42 ] ]

객체에서 각 키 : 값을 한쌍의 배열로 반환한다.
이 때 키는 string으로, 값은 자료형에 따라 반환된다.

4. 요소 추가/삭제/병합

# push, pop, unshift, shift

let arr = ['js', 'css', 'java', 'python'];


arr.push('Go');
console.log(arr); // ['js', 'css', 'java', 'python', 'Go']

arr.pop();
console.log(arr); // ['js', 'css', 'java', 'python']

arr.unshift('typeScript'); 
console.log(arr);
// ['typeScript', 'js', 'css', 'java', 'python']

arr.shift();
console.log(arr); // ['js', 'css', 'java', 'python']

위의 메소드는 요소를 추가 / 삭제 할 수 있지만 원본을 훼손하는 단점이 있다.

# concat

let arr = ['js', 'css', 'java', 'python'];

console.log(arr.concat('Go')); // ['js', 'css', 'java', 'python', 'Go']

console.log(arr); // ['js', 'css', 'java', 'python']

---

5. 고차 함수로 배열 다루기

# map

내가 가진 배열을 새롭게 조작해서 새로운 배열로 반환할 때 사용

let langs = ['js', 'css', 'java'];

const newLangs = langs.map(function(lang){
	return lang.toUpperCase() + ' 언어';
});

console.log(newLangs); // ['JS 언어', 'CSS 언어', 'JAVA 언어']

# filter

조건에 맞는 모든 요소를 배열로 반환

let langs = ['js', 'css', 'java', 1, 2];

const numbers = langs.filter(function(el){
	if(typeof el === 'number'){
    	return el;
    }
});

console.log(numbers); // [1,2]

# reduce

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

let numbers = [1, 3, 5, 7, 9];

const acc = numbers.reduce(function(accumulation, current){
	return accumulation + current;
},0); // 0 초기화 안하면 1부터 누적된 값으로 따짐

console.log(acc); // 25

---

6. 배열 검색

# find

배열에서 찾는 값 하나를 리턴해줌 (filter는 찾는 값 모두를 배열로 리턴) 찾는 값이 없으면 undefined

const members = ['도록', '읻도록', '제로', '베이스'];

const result = members.find(function(member){
	return member === '제로';
});
                            
console.log(result); // 제로 

// 없으면 undefined

# findIndex

배열에서 찾는 값의 인덱스를 반환, 없는 경우 -1을 반환한다

const members = ['도록', '읻도록', '제로', '베이스'];

const result = members.findIndex(function(member){
	return member === '제로';
});
                            
console.log(result); // 2

// 없으면 -1

# indexOf

찾는 요소만 인자로 넣어주면 해당 값의 인덱스를, 없는 경우 -1을 반환

const members = ['도록', '제로', '읻도록', '제로', '베이스'];

const result = members.indexOf('제로');
                          
console.log(result); // 1

• 만약 두번째로 존재하는 '제로'를 찾고 싶다면 찾기 시작하는 인덱스를 따로 지정해주면 된다.

const members = ['도록', '제로', '읻도록', '제로', '베이스'];

const result = members.indexOf('제로',2); // 인덱스 2부터 찾음
                          
console.log(result); // 3

# includes

배열에서 찾는 값이 존재하면 true, 없으면 false를 반환한다.

const members = ['도록', '제로', '읻도록', '제로', '베이스'];

const result = members.includes('제로');
                          
console.log(result); // true

• includes 메서드는 배열 내에 찾는 값이 있는지를 불리언으로 반환해준다.