자료구조와 알고리즘을 공부해야 하는 이유? 자바스크립트 똑똑하게 쓰기!

💡 알고리즘을 공부하고 문제를 풀 때 마음가짐
1. 항상 여러가지 풀이 방법이 있을 수 있다.
2. 항상 예외가 있을 수 있다
3. 내가 이미 푼 답을 최적화하는 방법을 항상 고민해야 한다.
4. 풀지 못했던 코드 또한 남겨두는 것이 좋다.
5. 다른 사람의 코드를 많이 봐야, 나의 생각에서 벗어나 새로운 사고를 할 수 있다.
6. 문제를 쉽게 포기하지 말고, 도저히 모르겠다면 답을 보고 시간이 지난 후 다시 풀어보는 것이 좋다.
7. 알고리즘 마스터가 될 필요는 없지만, 익숙해져야 한다.
  - 회사는 업무를 수행 할 수 있는 기초 능력을 확인하고 싶은 것이기 때문에 문제 해결 능력을 기르는 것이 좋다.
  - 예외적으로 알고리즘이 중요한 회사(게임, 인공지능 등의 분야)인 경우에는 중요하기 때문에 알고리즘/자료구조에 대해 많이 공부하는 것이 좋다.
8. 변수나 함수의 이름을 잘 정해야하며 중복 코드를 제거한다.
9. 자바스크립트 문법(구조분해 할당, spread 연산자 등)을 잘 활용한다.
10. 코드의 일관성을 유지한다.

자료구조는 메모리를 효율적으로 사용하며 빠르고 안정적으로 데이터를 처리하는 것이 궁극적인 목표로, 상황에 따라 유용하게 사용될 수 있도록 특정 구조를 이루고 있습니다. 자료 구조에는 스택, 큐, 그래프, 트리 등이 있습니다.

알고리즘은 특정 문제를 효율적이고 빠르게 해결하는 것이 궁극적인 목표로 정해진 일련의 절차나 방법을 공식화한 형태로 표현한 것을 말합니다. 즉, 수학적으로 표현할 수 있으며 자료구조와 마찬가지로 상황에 따라 유용하게 사용할 수 있습니다. 이진탐색, 최단거리탐색 등 여러가지 알고리즘이 존재합니다.

실무에서 중요하게 생각하는 요소는 기초 코딩 능력, 전문 분야 지식, 기본 CS 지식이 있습니다. 이 세가지 중 기초 코딩 능력은 자료구조와 알고리즘을 공부해서 능력을 키울 수 있습니다. 즉, 문제 해결 능력을 키울 수 있게 됩니다.

문제 해결 능력은 논리적 사고, 전산화 능력, 엣지 케이스 탐색 능력으로 구성됩니다. 즉, 누가 봐도 이해할 수 있는 해결 방법으로 사고 할 수 있으며 그 사고를 컴퓨터가 이해할 수 있는 언어로 전산화 할 수 있어야 하며, 그 중에서도 예기치 못한 예외 케이스들을 알 수 있어야 한다는 것입니다.

자료 구조와 알고리즘은 변하지 않기 떄문에 알아두면 두고두고 사용하실 수 있으니 공부해두시는 것이 좋습니다.

자바스크립트의 9가지 코드 트릭

구조 분해 할당을 이용한 변수 swap

ES6의 구조 분해 할당 문법을 사용하여 두 변수를 swap 할 수 있습니다.

let a = 5, b = 10;
[a, b] = [b, a];
console.log(a, b); *// 10 5*

배열 생성으로 루프 제거하기

보통 단순히 범위 루프를 돌고 싶다면 다음과 같이 코드를 작성합니다.

let sum = 0;
for (let i = 5; i < 10; i += 1) {
    sum += i;
}

만약 범위 루프를 함수형 프로그래밍 방식으로 사용하고 싶다면 배열을 생성해서 사용할 수 있습니다.

const sum = Array
    .from(new Array(5), (_, k) => k + 5)
    .reduce((acc, cur) => acc + cur, 0);

배열 내 같은 요소 제거하기

Set을 이용할 수 있습니다.

const names = ['Lee', 'Kim', 'Park', 'Lee', 'Kim'];
const uniqueNamesWithArrayFrom = Array.from(new Set(names));
const uniqueNamesWithSpread = [...new Set(names)];

Spread 연산자를 이용한 객체 병합

두 객체를 별도 변수에 합쳐줄 수 있습니다.

const person = {
    name: 'Lee Sun-Hyoup',
    familyName: 'Lee',
    givenName: 'Sun-Hyoup'
};

const company = {
    name: 'Cobalt. Inc.',
    address: 'Seoul'
};

const leeSunHyoup = { ...person, ...company };
console.log(leeSunHyoup);
*// {
//   address: “Seoul”
//     familyName: “Lee”
//   givenName: “Sun-Hyoup”
//   name: "Cobalt. Inc." 
// 같은 키는 마지막에 대입된 값으로 정해진다.
// }*

&&와 || 활용

&&와 ||는 조건문 외에서도 활용될 수 있습니다.

*/// ||
// 기본값을 넣어주고 싶을 때 사용할 수 있습니다.
// participantName이 0, undefined, 빈 문자열, null일 경우 'Guest'로 할당됩니다.*
const name = participantName || 'Guest';

*/// &&
// flag가 true일 경우에만 실행됩니다.*
flag && func();

*// 객체 병합에도 이용할 수 있습니다.*
const makeCompany = (showAddress) => {
  return {
    name: 'Cobalt. Inc.',
    ...showAddress && { address: 'Seoul' }
  }
};
console.log(makeCompany(false));
*// { name: 'Cobalt. Inc.' }*console.log(makeCompany(true));
*// { name: 'Cobalt. Inc.', address: 'Seoul' }*

구조 분해 할당 사용하기

객체에서 필요한 것만 꺼내 쓰는 것이 좋습니다.

const person = {
    name: 'Lee Sun-Hyoup',
    familyName: 'Lee',
    givenName: 'Sun-Hyoup'
    company: 'Cobalt. Inc.',
    address: 'Seoul',
}

const { familyName, givenName } = person;

객체 생성시 키 생략하기

객체를 생성할 때 프로퍼티 키를 변수 이름으로 생략할 수 있습니다.

const name = 'Lee Sun-Hyoup';
const company = 'Cobalt';
const person = {
  name,
  company
}
console.log(person);
*// {
//   name: 'Lee Sun-Hyoup'
//   company: 'Cobalt',
// }*

비구조화 할당 사용하기

함수에 객체를 넘길 경우 필요한 것만 꺼내 쓸 수 있습니다.

const makeCompany = ({ name, address, serviceName }) => {
  return {
    name,
    address,
    serviceName
  }
};
const cobalt = makeCompany({ name: 'Cobalt. Inc.', address: 'Seoul', serviceName: 'Present' });

동적 속성 이름

ES6에 추가된 기능으로 객체의 키를 동적으로 생성 할 수 있습니다.

const nameKey = 'name';
const emailKey = 'email';
const person = {
  [nameKey]: 'Lee Sun-Hyoup',
  [emailKey]: 'kciter@naver.com'
};
console.log(person);
*// {
//   name: 'Lee Sun-Hyoup',
//   email: 'kciter@naver.com'
// }*

!! 연산자를 사용하여 Boolean 값으로 바꾸기

!! 연산자를 이용하여 0, null, 빈 문자열, undefined, NaN을 false로 그 외에는 true로 변경할 수 있습니다.

function check(variable) {
  if (!!variable) {
    console.log(variable);
  } else {
    console.log('잘못된 값');
  }
}
check(null); *// 잘못된 값*
check(3.14); *// 3.14*
check(undefined); *// 잘못된 값*
check(0); *// 잘못된 값*
check('Good'); *// Good*
check(''); *// 잘못된 값*
check(NaN); *// 잘못된 값*
check(5); *// 5*