자바스크립트 코테 꿀팁

 

하나씩 모아가는 꿀팁 리스트...

 

 

1. 문자열 슬라이싱 - slice는 음수를 허용하기 때문에 substr보다 좋다.

// 구문 
str.slice(beginIndex[, endIndex])

// 파이썬과 비교
str.slice(n) = str[n:]
str.slice(n, m) = str[n:m]
str.slice(-n) = str[-n:]
str.slice(-n, -m) = str[-n:-m]

인덱스 초과시 빈 문자열 반환

 

 

2. min, max

// 배열 최대값
Math.max(...[1,2,3,4,5])

// 최소값
Math.min(4, 5)

 

 

3. 객체 순회

const obj = {
    'a': 1,
    'b': 2,
    'c': 3
}

// 1. 객체를 배열로 변환
Object.entries(obj)
//[ [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ] ]

// 2. 객체의 key만 조회
Object.keys(obj)
// ['a', 'b', 'c']

// 3. 객체의 value만 조회
Object.values(obj)
// [ 1, 2, 3 ]

 

특히 Object.entries 는 아래와 같이 쓰면 유용하다.

Object.entries(obj).forEach(([key, value]) => {
	console.log(key, value);
})

 

객체의 속성을 제거하려면 delete를 쓰면 된다. 

const Employee = {
  firstname: 'John',
  lastname: 'Doe'
};

console.log(Employee.firstname);
// expected output: "John"

delete Employee.firstname;

console.log(Employee.firstname);
// expected output: undefined

 

 

4. 배열 순회 메서드

const ary = ['dog', 'cat', 'pig'];

ary.forEach((value, index, array) => {
    console.log(`${value} ${index} ${array}`);
})

/*
dog 0 dog,cat,pig
cat 1 dog,cat,pig
pig 2 dog,cat,pig
*/

 

 

5. 조합

여기 참고

 

 

6. Array.from

유사 배열에 Array 메서드 적용하고 싶으면 Array.from을 쓰면 된다

const str = 'abcd'
Array.from(str).forEach(~)

 

 

7. 빈 배열 생성

// 크기가 4이고, 0으로 채워진 배열 생성
Array(4).fill(0)


// 1~10 배열 생성
[...Array(10)].map((_, i) => i + 1); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]


// 4행 5열짜리 빈 배열 생성
Array.from({length: 4}, () => Array(5).fill(0));


// fill 구문
// [start, end) 까지를 value로 채운다.
//start default = 0
//end default = arr.length
arr.fill(value[, start[, end]])

[1, 2, 3].fill(4, 1, 2);   // [1, 4, 3]

 

 

8. includes, indexOf, splice, find 메서드

// includes - 포함 여부 boolean 반환
ary.includes(elem) = true or false


// indexOf - 탐색값의 첫 번째 인덱스를 반환, 존재하지 않으면 -1을 반환
const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
console.log(beasts.indexOf('bison')); // 1
console.log(beasts.indexOf('giraffe')); // -1


// find - 찾는 원소 반환
let found = ary.find((e) => e === find_elem)

 

splice - 음수 인덱스 허용, 원본 배열에 적용됨

// splice - 음수 인덱스 허용, 원본 배열에 적용됨
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];

myFish.splice(2, 0, 'drum'); // // 2번 인덱스에 'drum' 추가
myFish.splice(2, 0, 'drum', 'guitar'); // 2번 인덱스에 'drum', 'guitar' 추가
myFish.splice(3, 1); // 3번 인덱스에서 한 개 요소 제거
myFish.splice(2, 1, 'trumpet'); // 2번 인덱스에서 요소 하나 제거후 'trumpet'추가
myFish.splice(-2, 1); // -2번 인덱스에서 요소 하나 제거
myFish.splice(2); // 2번 인덱스를 포함 이후 모든 요소 제거

 

includes, indexOf, splice, slice를 활용한 예제

[ '100' , '-', '200', '*', '300', '-', '500', '+', '20'] 에서 '-' 만 계산 하는 예제

 

const exp = 	[
  '100', '-',   '200',
  '*',   '300', '-',
  '500', '+',   '20'
];

const oper = '-';

while(exp.includes(oper)) {
    const idx = exp.indexOf(oper);
    exp.splice(idx - 1, 3, eval(exp.slice(idx - 1, idx + 2).join(''));
}

 

관련 문제 바로가기

 

(추가) indexOf 와 findIndex 차이점

둘 다 인덱스를 반환하지만, 파라미터에 차이가 있다!

// indexOf의 파라미터는 원시값
arr.indexof('a'); 

// findIndex의 파라미터는 콜백함수
arr.findIndex(e => e >= 1)

 

 

9. eval

문자로 표현된 수식을 계산해준다.

console.log(eval('2 * 4 - (-2)'));
// expected output: 10

주의: 공식문서에는 쓰지 않는 것을 권하고 있다. 따라서 오직 코테용!

 

 

10. 배열을 unique 배열로 변환, 고유한 요소 찾기

const arr = [1, 1, 2, 3, 3, 4];
const unique_ary = [...new Set(arr)]


// 고유한 요소를 찾는 방법
const unique = arr.filter((e, i, origin) => origin.filter(v => v === e).length === 1);

 

 

11. 합집합, 교집합, 차집합, 여집합

let arr1 = [1, 4, 3, 2];
let arr2 = [5, 2, 6, 7, 1];

// 합집합
[...new Set([...arr1, ...arr2])]; 

// 교집합
arr1.filter(x => arr2.includes(x))

// 차집합 (arr1 - arr2)
arr1.filter(x => !arr2.includes(x))

// 여집합
arr1.filter(x => !arr2.includes(x))
    .concat(arr2.filter(x => !arr1.includes(x)));

 

 

12. Number 메서드

// 1. 10진수를 k진수로 변환
number.toString(k)

let num_10 = 1001;

num_10.toString(2); // 2진수
num_10.toString(5); // 5진수


// 2. 중첩 배열 평탄화
const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]


// 3. 정수, NaN 판별
Number.isInteger(숫자)
Number.isNaN(숫자)


// 4. 안전한 최소/최대 정수
Number.MAX_SAFE_INTEGER
Number.MIN_SAFE_INTEGER

toString 직접 구현

// n을 k진법으로 변환
let n = 437674;
let k = 3;

let str = [];
while (n > k) {
    str.push(n % k);
    n = Math.floor(n / k);
    console.log(n)
}
str.push(n);
let result = str.reverse().join('');
console.log(result)

 

// n진수에서 10진수로 변환 - parseInt
let binary = "1111111111";
let decimal = parseInt(binary, 2);	// 2진수에서 10진수로

let octal = "1777";
let decimal = parseInt(octal, 8);	// 8진수에서 10진수로

let hex = "3ff";
let decimal = parseInt(hex, 16);	// 16진수에서 10진수로

 

 

13. string ~ 아스키코드 변환

String.fromCharCode(num) // num을 아스키코드로 변환

String.prototype.charCodeAt(index) // index위치의 문자를 아스키코드로 변환

 

 

14. Set

const set = new Set();

Set.prototype.size
Set.prototype.add(value)
Set.prototype.clear() // 전체삭제
Set.prototype.delete(value)
Set.prototype.has(value)

 

 

15. Map

// key: value 값 저장. 동일 key에 대해서는 마지막에 등록한 value가 저장된다.
// 삽입 순서대로 정렬되는 특지잉 있다
const map = new Map();

Map.prototype.size;
Map.prototype.clear();
Map.prototype.delete(key);
Map.prototype.get(key);
Map.prototype.has(key);
Map.prototype.set(key, value);

// iterating
for (const [key, value] of map);
for (const value of map.values);
for (const key of map.keys);

// next로 순회 가능
const myMap = new Map();
myMap.set('0', 'foo');
myMap.set(1, 'bar');
myMap.set({}, 'baz');

const mapIter = myMap.entries();

console.log(mapIter.next().value); // ["0", "foo"]
console.log(mapIter.next().value); // [1, "bar"]
console.log(mapIter.next().value); // [Object, "baz"]

 

 

16. lower_bound, upper_bound

// 1. lowerBound - 이분탐색에서 right 부분만 수정해주면 됨

const lowerBound = (arr, value) => {
  let left = 0;
  let right = arr.length;

  while (left < right) {
    let mid = Math.floor((left + right) / 2)
    if (value <= arr[mid]) {
      right = mid;
    }
    else if (value > arr[mid]) {
      left = mid + 1;
    }
  }

  return right
}


// 2. upperBound - lowerBound에서 부등호만 수정해주면 됨

const upperBound = (arr, value) => {
  let left = 0;
  let right = arr.length;

  while (left < right) {
    let mid = Math.floor((left + right) / 2)
    if (value < arr[mid]) {
      right = mid;
    }
    else if (value >= arr[mid]) {
      left = mid + 1;
    }
  }

  return right
}