알고리즘 테스트를 마치며...

알고리즘 주차가 끝이 났다.

해당 주차는 프로그래밍 기초 주차였는데 알고리즘 문제만 가득해서 사실 처음에 와닿지는 않았다.

미리 풀어보고 오긴했는데 c언어로 풀고 갔다 알고보니 주특기에 맞는 언어로 푸는 것이 과제였다.

이번주는 자바스크립트의 다양한 문법과 그것을 응용한 알고리즘 풀이가 핵심과제였다.

시험 모의고사와 테스트로 나뉘어 진행되었고 시험때 코드만봐도 많이 변했다.

결과적으로 시험코드랑 원래같으면 어떻게 풀었을지 먼저 공유해보자.

실제풀이

function solution(n) {
    let result = (n + '').split('').reverse();
    let sum = result.reduce((a,b)=>Number(a)+Number(b),0)
    result = `"${result.join('+')}=${sum}"`;
    return result;
  }
  console.log(solution(718253))

값이 주어지면 숫자를 뒤집어 더하는 수식과 결과 값을 출력하는 문제였다.

12345 가 주어지면 "5+4+3+2+1=15" 이런식으로 출력을 만드는 문제였다.

풀이 설명

1. 숫자 n을 문자열로 바꾸어 split으로 배열로 정렬하고 reverse로 순서를 역순으로 한다.

2. 현재 문자배열인 result를 숫자로 변환해 각 자리의 합을 변수 sum에  reduce를 통한 누적된 값을 전달한다.

3. 문자배열인 result를 구분자 +로 만들어 합계를 출력하는 문자로 바꾼다.

 

수업 전을 가상한 풀이

function solution(n)
{
    var answer = "";
    var sum=0;
    var arr = [];
    while (!n%10==0 & !n/10 == 0){ //몫과 나머지를 확인하여 계산
        sum += Math.trunc(n%10);  //소수점 아래 날리는 함수
        arr.push(Math.trunc(n%10));
        n= n/10;
    if(n<1){
            break;
        }
    }
    for(let i=0; i<arr.length; i++){
        answer+= arr[i];
        if(i!=arr.length){
            answer+= '+'
        }else{
            answer+= '='
        }
    }
    answer += sum;
    return answer;
}

만약 이번주를 제대로 수강하지않았다면 이런식으로 각각의 자리수를 나머지를 구하는 공식을 통해 구하고

그것을 일일이 배열로 push한 뒤, 다시 반복문을 통해 문자열형식으로 더해지게 만든 뒤 결과를 출력하는

비효율적인 코드를 작성했을 것이다.

빅오나 오메가 둘다 시간복잡도 공간복잡도 비교해봐도 월등히 차이가 난다.

배운 내용을 간단히 정리를 해보려고 한다.

 

1. ES 문법

•  ES는 ECMA Script의 약자로 자바스크립트가 정식 채택되기 전 ECMA 를 통해 규격화된 스크립트내용이다.
• 자바스크립트의 발전 과정이라고 생각하면 쉬울 것이다.
• 지금도 버전이 계속 업데이트 되고 있다.
• 자바스크립트의 가장 많은 변화를 가져온 버전이 ES5, ES6 라고 한다.
• 각 문법에 따른 차이를 알아야 나중에 코드를 보고 유지보수 하며 최신문법과 적용하여 업데이트가 가능하기 때문

   ES5     vs      ES6

1) let, const 키워드

   - var의 경우 스코프가 지역스코프, 함수 레벨 스코프로 가지고 있다는 단점을 가지고 있었습니다.

     또한 var의 경우 var hoisting이라고 불리는 var 선언을 밑에 적어도 문법이 작동하는 오류도 있었습니다.

    - 코드 작성에 있어서 이러한 사소한 차이가 에러를 만들 수 있기 때문에 조심하고, 성질을 이해해야합니다.

    - let과 const는 블록 레벨 스코프를 가지며 재할당이 가능합니다.

 

2) Arrow function 추가

   기존의 함수 작성과 다른 함수를 간결하게 나타내는 표현식이 나왔습니다.

//ES5
function sum(a,b){
    return a+b;
}
//ES6
const sum (a,b) => { a+b }

   - 문법이 변하면서 작성이 편리해졌고, 가독성이 상당히 좋아졌습니다.

   - 파라미터가 1개일 경우에는 () 괄호 생략이 가능합니다. {}와 return 역시 생략이 가능합니다.

   - 함수에 할당되는 파라미터에 초기값을 설정할 수 있습니다.

 

3) 백틱을 이용한 문자열 관리

function solution(n) {
    let result = (n + '').split('').reverse();
    let sum = result.reduce((a,b)=>Number(a)+Number(b),0)
    result = `"${result.join('+')}=${sum}"`;
    return result;
  }
  console.log(solution(718253))

  위에서 코드 가져왔습니다.

result = `"${result.join('+')}=${sum}"`;

   - 백틱을 통해 문자열을 넣을 수 있습니다.

   - ${}를 통해 변수 값을 편하게 할당할 수 있습니다.

   - 기존에 공백을 따로 작성해야하는 불편함이 해소 됩니다.

   - 줄 바뀜 표시 표시 또한 기존의 \n을 통해 표현해주었어야 했는데 그 역시 백틱으로 관리가 가능합니다.

 

4) 클래스를 활용한 객체 지향적 프로그래밍

   - 기존에 함수로 자바스크립트의 객체를 대체했다면, 클래스가 추가 되었습니다.

   - 생성자 함수와 동일하게 동작하지 않으며, 엄격하게 호이스팅이 발생하지 않는 거처럼 동작하는 let, const처럼 동작함

 

5) 디스트럭처링 할당

   - 우항에 존재하는 자료구조를 파괴하여 좌항에 있는 변수들에 각각 할당하는 내용

   - 배열은 순서, 객체는 키 값의 중요도를 높여 좌항 우항 위치가 바뀌어도 값만 추출하여 동일하게 동작

 

2.  메서드 정리

1) 메서드 

  - push: 배열에 값을 집어 넣는 메서드

  - pop: 배열의 마지막 값을 빼는 메서드

  - shift: 배열의 첫번째 요소를 제거하는 메서드

  - join: 배열을 합치는 메서드

  - split: 배열로 나누는 메서드

  - reverse: 배열의 순서를 뒤집는 메서드

  - splice, slice: 원하는 순서에서 배열을 잘라내는 메서드 (splice : 배열 수정, slice: 원하는 부분만 추출)

  - find: 조건을 만족하는 첫 번째 요소를 반환

  - filter: 조건을 만족하는 요소를 반환

  - map: 새로운 배열, 디셔너리 생성

  - some: or에 해당하는 boolean값 출력

  - every: and에 해당하는 boolean 값 출력

  - reduce: 조건에 맞는 누적된 결과 값 출력

 

2) Math

몇개만 정리하겠습니다.

 - mean : 평균값

 - max : 최댓값

 - min : 최소값

 - abs : 절대값

 - pow : 거듭제곱 구하기

 - sqrt : 제곱근 구하기

 - floor : 소수점 버림

 - ceil : 소수점 올림

 - round : 소수점 반올림

 

3.  Promise

비동기를 간편히 처리해주는 object

 

1) (resolve, reject) => { }

 - resolve함수를 통해 해당되는 값

 - reject함수를 통해 에러 발생

 

2) then, catch, finally

 - then 을 통해서 resolve 대체

 - catch를 통해서 reject 대체

 - finally를 통해서 최종 결과 출력

 

3) async await

 -promise chaine을 간단히 만들어주는 내용

 - async를 적으면 promise를 적지않아도 동작

 - await를 적으면 promise가 끝날 때까지 기다리는 함수

 

 

자바스크립트 정보 참조 : https://hbsowo58.tistory.com/407

[JS] 자바스크립트 ES5 ES6 차이