[Fusetools]퓨즈 스터디를 원하다[Wonhada] – 06. 자바스크립트 01 (변수, 조건, 반복)

안녕하세요 원하다닷컴의 원강민입니다

이번 시간에는 자바스크립트에 대해서 알아보겠습니다 여기 보시는 것처럼 자바스크립트는 퓨즈의 비즈니스 로직을 구현하기 위해 사용하는 언어입니다 비즈니스 로직이란 텀즈와 위키백과에서 이렇게 정의하고 있습니다 비즈니스 로직에 대한 정의는 사람마다 다르고 또 플랫폼마다 다르기 때문에 이 내용을 가지고서 참고하시기 바랍니다 퓨즈의 경우 비즈니스 로직은 UI를 제외한 나머지라고 볼 수 있습니다

UI는 UX라고 불리는 XML을 이용하고 그 외의 부분은 자바스크립트로 처리합니다 현재 퓨즈는 ES6 즉, ECMAScript 6를 지원합니다 ES6는 ES2015라고도 불립니다 직접 코딩하면서 자바스크립트에 대해 알아보겠습니다 자바스크립트를 알아보기 위해서 JavaScript 태그를 만들겠습니다

자바스크립트는 UI가 아니기 때문에 콘솔창에서 확인할 것입니다 consolelog를 찍고서 이렇게 할 수 있습니다 저는 consolelog가 길기 때문에 log라는 변수에 console

log를 담아보겠습니다 이와 같이 하여도 동일하게 적용됩니다 우선 변수에 대해서 알아보겠습니다 자바스크립트의 변수는 var 라고 하는 키워드가 있습니다 그런데 ES6부터는 let이라는 키워드와 const라고 하는 키워드가 더 추가되었습니다

처음 하시는 분들은 그냥 var와 let과 const라는게 있다고 알아두시면 될 것 같습니다 차이점에 대해서 알아보겠습니다 var는 이렇게 하고 저장해 보겠습니다 22라고 나옵니다 즉, 11이라고 하는 숫자를 a라고 하는 변수에 넣고 다시 a에 22를 다시 넣어서 그 변수의 값을 바꿉니다

이렇듯이 어떤 데이터를 지칭하는 이름이라고 생각할 수 있습니다 그러면 let과 const는 어떻게 다른지 알아보겠습니다 우선 const를 해보겠습니다 저장하면 다음과 같이 에러가 나옵니다 그 이유는 const라고 된 것은 이 변수에 다른 값을 다시 넣지 못하는 것입니다

이 부분을 주석 처리해 보겠습니다 저장하면 수정되었다고, 고쳐졌다고 나옵니다 즉, const는 바꿀 수 없는 값입니다 그것을 상수라고 부릅니다 이번에는 let을 해보겠습니다

let도 동일하게 22가 나왔습니다 var와 let은 거의 같습니다 하지만 차이점이 하나 있습니다 예를 들어서, 동일하게 var라고 하는 변수를 넣었을 때 22가 나왔습니다 하지만 처음에 let으로 변수를 만들었다면

저장하면, 다음과 같이 에러가 나옵니다 그 이유는 이미 변수가 정의되어 있기 때문에 다시 정의할 수 없다는 것입니다 이와 같이 let은 좀 더 엄격합니다

그래서 실수하지 않기 위해서 let을 사용하는 것을 권장합니다 조금전에 알아봤던 const의 경우 이와 같이, 배열을 사용하게 되면 그 배열 자체를 바꿀 순 없습니다 즉, 이와 같이 사용하면 에러가 납니다 하지만, 배열의 요소에 접근하는건 가능합니다 요소를 변경해 봅니다

에러가 사라졌습니다 즉, 배열을 사용하는 경우에는 const로 정의하는 것이 안전합니다 기억할 것은, 변수는 var와 let과 const가 있다는 것입니다 이번에는 조건문에 대해서 알아보겠습니다 조건이라고 하는 것은 무언가를 할 때 혹은 하지 않을 때와 같은 우리가 흔히 얘기하는 조건과 같은 의미입니다

예제를 하나 만들어 보겠습니다 mathrandom을 이용해서 0 이상 1 미만의 임의의 수를 가져옵니다 거기에 10을 곱하고 mathfloor라고 하는 것으로 절삭해주면 0부터 9까지의 값이 나옵니다

이것을 이용해서 얻어진 결과가 짝수이면 짝수라고 출력하고 홀수이면 홀수라고 출력하는 조건문을 만들어 보겠습니다 i를 2로 나눈 나머지가 0이라면 짝수라고 출력합니다

그게 아니라면 홀수라고 표기합니다 자바스크립트에서는 같다는 표시를 이퀄 두 개를 쓸 수 있지만, 정확하게 하기 위해 세 개를 쓸 수도 있습니다 저장해 보면 홀수입니다 그 값을 알기 위해서 i를 찍어보겠습니다 3은 홀수입니다

한번 더 해보겠습니다 9도 홀수입니다 4는 짝수입니다 이와 같이 조건을 통해서 실행되는 코드를 달리할 수 있습니다 지금 이 코드는 조금 줄여쓴 것인데, 원래는

이와 같이 또 이와 같이 브레이스({ })를 이용해서 구간을 정해줄 수 있습니다 다만, 한 줄일 경우 이와 같이 줄여쓰기도 합니다 지금은 이 경우와 그렇지 않은 경우에 대해서만 출력했지만 다른 경우가 있을 수 있습니다

예를 들면 이와 같이 3 미만이라면 001, 또는 3 이상부터 6 미만이라면 002, 그 나머지 값들은 003을 찍도록 했습니다 실행해 보겠습니다 2는 짝수입니다 그리고 2는 3 미만이기 때문에 001 이라고 나왔습니다 다시, 0은 짝수고 001 입니다

5는 홀수고, 002 입니다 3 이상, 6 미만이기 때문입니다 이와 같이 여러개의 조건일 경우 else if 구문으로 사용할 수 있습니다 이번에는 반복문에 대하여 알아보겠습니다 반복이라는 말은 여러번을 한다는 뜻입니다

반복을 위해서는 for 구문을 사용합니다 이와 같이 i를 출력해 보겠습니다 2부터 9까지가 출력이 되었습니다 여기 안에다가 하나의 반복문을 더 넣어보겠습니다 이번에는 j라는 이름으로 넣겠습니다

이 값을 1부터 9까지로 만들고, 여기다가 넣어보겠습니다 이 내용은 지우고요 그러면 i, x 곱하기 입니다 j i 곱하기 j, 실행하면 뭐가 나올까요? 구구단 입니다 이와 같이 2단부터 9단까지, 2 곱하기 1부터 2 곱하기 9까지 이런식으로 쭉 출력할 수 있습니다

이렇게 숫자 혹은 어떤 조건을 계속해서 반복하는걸 반복문이라고 합니다 while 문에 대해서 알아보겠습니다 while 문은 어떤 조건일 때 계속해서 반복하는 것입니다 예를 들면, 이런 것입니다 카운트(cnt)라고 하는 변수에 1을 주고, while 문에 카운트가 10 미만인 경우에 카운트 값을 찍습니다

그리고 카운트를 1씩 증가시키면 저장해 보겠습니다 1부터 9까지 반복됩니다 즉, 처음에 들어온 값이 1이고, 10보다 작기 때문에 출력을 하고 하나 증가시킵니다 그런 방식으로 계속해서 돌다가 마지막에 10이 되고 10은 10 미만이 아니기 때문에 바깥으로 빠져 나갑니다 이곳에 이와 같이 로그를 찍으면 마지막에 10이 되어서 완료된 것을 볼 수 있습니다

while 문의 경우, 조건이 잘못되면 무한정 루핑되는 상황이 생길 수 있습니다 즉, 어떤 조건이 항상 true인데 이와 같이 그 true인 값을 while문에 넣게 되면 계속해서 출력되면서 멈추지 않는 현상이 발생합니다 이렇게 계속 돌게 되고, 프로그램은 정지가 된 것처럼 보입니다 더 이상 사용할 수 없게 되는거죠 이 부분을 조심해야 합니다

다음 시간에는 함수, 모듈, 옵저버블에 대해서 알아보겠습니다 감사합니다