01-20 일지

오늘은 드디어 날짜 바뀌기 전에 쓰는구만.

 

오전 : 코딩 테스트 팀원과 풀어보기

특이사항

어젯밤 팀원들끼리 각자 2문제씩 구해다 풀어보기로 결정했고, 아침에 다들 모여 문제를 풀어봤다. 겹치는 문제가 있어 사실상 6문제였지만 팀원들 중 절반이 이해하지 못하는 부분이 있는 것처럼 보였다. 어젯밤 이중배열 자체는 이해하는데 성공하셨지만 for문이 돌아가는 자세한 로직을 이해하지 못하신 것 같아 이를 중점적으로 설명했다.

 

코딩테스트 연습 - 머쓱이보다 키 큰 사람 | 프로그래머스 스쿨 (programmers.co.kr)

프로그래머스

for문을 돌리면서 배열의 값이 비교할 값보다 크면 결과값에 1씩 더하는 문제인데

for(let i = 0; i < array.length; i++)의 구조를 이해하기 힘들어하시는 것이 보였다.

우선 let i = 0; 부분은 회전을 돌릴 초기값을 선언하는 부분이고, i < array.length;는 해당 값이 참이면 아래 함수를 수행하고, 거짓이면 for문을 빠져나오는 비교 부분,  i++는 for문을 반복할 때 초기값을 어떻게 증감시킬건지 정하는 부분이다. 여기까지 설명하고 안에서 if문으로 비교해야할 값과 대조해야한다고하니 곧장 이해하신 것을 보았다.

내가 난색을 표한 문제는 

코딩테스트 연습 - 7의 개수 | 프로그래머스 스쿨 (programmers.co.kr)

프로그래머스

이었다. 숫자 배열을 for문으로 돌리면서 배열의 각 값을 문자열로 변환 후, 문자열에서 '7'의 갯수가 얼마인지를 따지는 것이었다. 여기서 match구문을 처음 사용해보았다.

function solution(array) {
    var answer = 0;
    //문제로 받은 배열을 전부 돌리는 for문
    for(let i = 0; i < array.length; i++){
        // 배열의 각 index를 문자열로 변환 후 match로 문자열에 있는 7을 불러옴.
        // '/@/ g'는 문자열 전체에 / / 안의 @를 찾아내는 전역 탐색 플래그.
        let a = array[i].toString().match(/7/g);
        
        //match가 어떤 식으로 작동하는지 눈으로 보기 위한 console.log
        console.log(a);
        
        // a(찾아낸 7의 숫자)가 0 이 아닌 경우에만 정답에 갯수를 추가
        if(a != null){
            answer += a.length;
        }
    }
    return answer;
}

match(/7/g);에서  / /g는 문자열을 전부 돌면서 / / 안에 있는 값과 정확히 일치하는 값을 반환하는 정규 플래그라고 한다. 신기한 것이 다 있구만....여기서 match가 어떻게 값을 반환시키는지 궁금해서 console에 찍어보니 배열로 만들어서 반환하는 것이었다. 그러면 이제 반환된 배열 a가 null이 아니면 길이를 구해서 결과값 answer에 더하면 되지.

 

키워드쓰는 것이 어려워서 그렇지 다들 로직을 어떻게 돌려야 문제가 해결되는지 얼추 감을 잡은 모양이다. 나를 포함해서 말이다.

 

오후 : 주교재 3일차 공부

특이사항

그래도 오늘은 해시 뭐시기보다는 훨씬 쉬웠다. 호이스팅과 스코프, 실행 컨텍스트 등을 설명하는 파트였다.

호이스팅

말을 어렵게 해서 그렇지, 자바스크립트의 동작방식을 알고 접근하면 쉽게 나오는 문제다. 자바스크립트는 동적인 언어로, 선 선언 후 호출 방식으로 진행된다. 위에서부터 아래로 진행되기 때문에 순서가 바뀌면 제대로 출력이 되질 않는 것이다. 하지만 초기화를 제외한 선언을 하면 호이스팅이 진행된다. 그러면 자바스크립트는 변수와 함수의 메모리 공간을 선언하기 전에 먼저 할당하는 것이다. 그러니까 코드를 순서대로 쫙~~읊기 전에 미리 호이스팅 대상만 찝어다 뽑아서 기억해두는 것이라 생각하면 될 것이다.

당장은....

 

스코프

우선 변수는 전역 변수와 지역 변수 두 가지로 나뉜다. 전역 변수는 어디에서든 불러와서 참조할 수 있는 glabal한 변수라면 지역 변수는 함수 안에서만 선언되서 사용되고 끝나는 local한 변수이다. 이를 구분하는 기본적인 방법은 선언 위치를 보는 것이다.

var x = 'global';
 
function foo () {
var x = 'function scope';
console.log(x);
}

만약 이런 스코프의 개념을 제대로 이해하지 못한다면, 코드를 이해하는데 있어 지대한 악영향을 끼칠 것이다. 어떤 변수가 어디서부터 어디까지 영향을 미치는지 판단이 안되는데 뭘 읽어도 돌아가는 모양새를 알 수 없기 때문이다.

 

 

저녁 :  주교재 3일차 공부

특이사항

실행 컨텍스트

var helloWorld = function helloWorld() {
  console.log('Hello World!');
}
 
var helloJavascript = function hellowJavascript() {
  console.log("Hello Javascript")
}
 
var helloWorldAndJavascript = function hellowWorldAndJavascript() {
  console.log('==== Hello World And JavaScript 시작합니다! ====');
  helloWorld();
  helloJavascript();
  console.log('==== Hello World And JavaScript 끝났습니다! ====');
}
 
var helloWorldAndHelloJavascriptTwice = function helloWorldAndHelloJavascriptTwice() {
  console.log('==== Hello World And JavaScript Twice 시작합니다! ====');
  helloWorld();
  helloJavascript();
  helloWorldAndJavascript();
  console.log('==== Hello World And JavaScript Twice 끝났습니다! ====');
}
 
 
helloWorldAndHelloJavascriptTwice();

위 코드의 예상되는 결과값은

 * ==== Hello World And JavaScript Twice 시작합니다! ====
 * Hello World!
 * Hello Javascript
 * ==== Hello World And JavaScript 시작합니다! ====
 * Hello World!
 * Hello Javascript
 * ==== Hello World And JavaScript 끝났습니다! ====
 * ==== Hello World And JavaScript Twice 끝났습니다! ====

이다. 

 

데이터 타입

자바스크립트는 동적 언어인지라, 자료형을 정하고 시작하는 것이 아니라 컴파일을 돌리면서 진행하기 때문에 대부분의 경우 let, const 따위로 선언해서 퉁치는 것이 가능하다. 하지만 C#같은 C 언어 기반의 정적 언어의 경우에는 변수를 생성할 때 타입을 정하고 진행해야 한다. string, bool, int, float 따위 말이다. 자바스크립트처럼 자료형을 정하지 않고 시작할 경우, 자동 형변환이 이루어지기 때문에 컴파일 과정에서 상당한 유연성을 보장받지만 러닝 타임 중 일어나는 예상 못한 에러가 정적 언어에 비해 더 빈번하고 크리티컬하다. 

정적 언어는 변수 타입을 미리 정하기 때문에 컴파일 과정에서 실행속도가 빠르며 형변환이 수동적으로 이루어지기 때문에 타입으로 인해 일어나는 에러를 보다 쉽고 정확하게 파악할 수 있다는 장점이 있다. 대신 매 코드 작성 시 타입을 정해줘야한다는 번거로움과 형변환이 필요할 경우 일일히 수동으로 진행해야 하는 것이다.

 

개인적인 평가로는, C#으로 시작했기 때문에 미리 딱딱 타입을 선언하고 진행하는 것이 훨씬 속 편한데 자바스크립트는 너무 가라로 처리하는 것이 아닌가 싶다.