[JS] 자료 다루기

이채현

💡 Javascript 자료 다루기

객체

Object.keys()

• 객체의 키들이다~~라는 느낌으로 객체의 키들이 배열로 반환된다.

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

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

Object.values()

• 객체의 값들이다~~라는 느낌으로 객체의 Value들이 배열로 반환된다.

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

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

Object.entries()

• 객체를 인자로 받아, key와 value를 쌍으로 가진 배열을 반환한다.
• for…in와 같은 순서로 주어진 객체 자체의 enumerable 속성을 가짐
  • 인덱스마다 배열을 가져서, 첫번째가 key, 두번째가 value이다.
    • 배열안에 배열

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

for (const [key, value] of Object.entries(object1)) {
  console.log(`${key}: ${value}`);
}

// expected output:
// "a: somestring"
// "b: 42"

배열

요소 추가와 제거

• unshift ⇒ 배열의 앞에 요소 추가

• push ⇒ 배열의 끝에 요소 추가

• shift ⇒ 배열의 앞에 요소 제거

• pop ⇒ 배열의 끝에 요소 제거

• splice ⇒ 배열의 인덱스를 기반으로 요소 추가 및 제거

  array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
  
  const months = ['Jan', 'March', 'April', 'June'];
  months.splice(1, 0, 'Feb');
  // inserts at index 1
  console.log(months);
  // expected output: Array ["Jan", "Feb", "March", "April", "June"]
  
  months.splice(4, 1, 'May');
  // replaces 1 element at index 4
  console.log(months);
  // expected output: Array ["Jan", "Feb", "March", "April", "May"]

요소 병합

• concat

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]

const alpha = ['a', 'b', 'c'];

alpha.concat(1, [2, 3]);
// 결과: ['a', 'b', 'c', 1, 2, 3]

--------

const newArr = [...array1, ...array2];
// ['a', 'b', 'c', 'd', 'e', 'f']

고차 함수로 조작 (내장 메서드)

• 대표적으로 map, filter, reduce

map

const langs = ['JS', 'HTML', 'CSS'];

const newLangs = langs.map(lang => lang + ' 언어');
console.log(newLangs);
// [ 'JS 언어', 'HTML 언어', 'CSS 언어' ]

filter

const langs = ['JS', 'HTML', 'CSS', 0, 1, 2, 3];

const numbers = langs.filter(lang => {
    if (typeof lang === 'number') {
        return true;
    }
});
console.log(numbers);
// [ 0, 1, 2, 3 ]

const strings = langs.filter(lang => {
    if (typeof lang === 'string') {
        return lang;
    }
})
console.log(strings)
// [ 'JS', 'HTML', 'CSS' ]
const isNumber = function (el) {
    if (typeof el === 'number') {
        return true;
    }
}
const numbers = langs.filter(isNumber);
console.log(numbers)

const isString = (el) => typeof el === 'string';
const strings = langs.filter(isString)
console.log(string)

// [ 0, 1, 2, 3 ]
// [ 'JS', 'HTML', 'CSS' ]

reduce

• 그전에 전형적인 명령어 프로그래밍 방식

// argument로 받거나
// 인자에 spread형식으로 받거나...

function sumTotal() {
    let temp = 0;
    for (let i = 0; i < arguments.length; i++) {
        temp = temp + arguments[i];
    }
    return temp;
}

console.log(sumTotal(1, 2, 3, 4, 5, 6, 7));
// 28
function sumTotal(...numbers) {
    let temp = 0;
		// reduce((누적값, 현재값){},초기값)
    return numbers.reduce((total, current) => total + current, 0);
		// 첫번째는 초기값(total(0))+ 인자(1)이 total로 들어가고
		// 그 다음 total(1)+인자(cur(2))
}

console.log(sumTotal(1, 2, 3, 4, 5, 6, 7));

요소 정렬

sort

const numbers = [4, 2, 5, 1, 3];

const orderNumbers = numbers.sort((a, b) => a - b)
console.log(orderNumbers);
// [ 1, 2, 3, 4, 5 ]

const strings = ['마', '가', '라', '나', '다'];
const orderStrings = strings.sort((a, b) => a.localeCompare(b));
console.log(orderStrings);
//[ '가', '나', '다', '라', '마' ]

값 검색

const strings = ['마', '가', '라', '나', '다'];

const result = strings.find((string) => string === '나');
console.log(result);
// 나  ///없으면 undefinded

const result = strings.findIndex((string) => string === '나');
console.log(result);
// 3

const result = strings.indexOf('나'); // 왼쪽부터,,, lastIndexOf()
console.log(result);
// 3

const result = strings.includes('나');
console.log(result);
// true