자바스크립트 튜토리얼 - 1

이자용·2022년 7월 31일

바닐라JS

목록 보기

1/5

1.1 콘솔(Console)

크롬, 익스플로러 같은 브라우저는 개발자가 개발한 웹프로그램에 대한 디버깅 및 분석을 도와주는 개발자도구를 제공하고있다. 개발자도구는 정말 많이 사용하고, 개발자 도구가 없으면 개발이 불가능하다고 느낄만큼 많은 도움을 받게된다.
F12 키 혹은 ctrl+shift+i (윈도우), cmd+option+i를 눌러 개발자도구를 실행한다.
console.log()를 사용해서 콘솔 창에 출력하고 싶은 문자열, 숫자, 오브젝트, 배열 등을 출력하고 확인할 수 있다.
콘솔창에 출력하기 위한 함수는 console.log 외에도 console.info(), console.warn(), console.error(), console.table() 등과 같은 함수가 있다.

1.2 주석처리

주석의 사전적 의미를 보면 '낱말이나 문자의 뜻을 쉽게 풀이함'이라고 나와있다. 일반적으로 구현된 코드에대한 자세한 설명을 다는 용도로 사용되지만, 때로는 프로그램의 특정 코드에 대한 실행을 잠시 막기위해서 사용하기도 한다.

1.2.1 코드에 대한 설명

주석은 자신이 구현한 코드에 대한 설명 및 사용법을 작성하는 용도로 사용한다. 프로그램 코드를 작성한 당사자는 주석이 없어도 이해할수 있겠지만, 협업을 하는 다른 개발자는 어떤 기능을 위한 코드인지 이해하기위해 상당한 시간을 소비해야한다.

그래서 내가 구현하는 코드를 누가봐도 충분히 이해할수 있도록 코드에대한 설명을 주석을 통해 작성하며, 이는 개발자의 매우 중요한 업무중 하나이다. 경력이 많은 개발자일수록 주석작성을 소홀히 하기도한다. 그래서 배우는 단계에서 반드시 습관화 되어야한다.

나 자신을 위해서도 작성해야한다. 내가 작성한 코드라도 시간이 지나면 빠르게 이해하기가 힘들기 때문에 나중에 자신이 작성한 코드를 봤을떄 쉽게 이해할수 있도록 스스로를 위해 작성한다.

1.2.2 프로그램 실행 막기

실제 개발을 하다보면 작성하고있는 코드에 에러가 발생하는데, 이때 특정 코드를 주석처리 함으로써 코드에 대한 실행을 막을 수 있다.

 <!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <script>
      var x = 5; //x는 5입니다.
      /*
      여러문장을 하나의 주석으로 묶습니다.
      여러문장을 하나의 주석으로 묶습니다.
      */

      //코드가 실행이 되지 않도록 막아두는 역할도 합니다.
      //alert(x);
    </script>
  </body>
</html>

1.3 변수와 상수

변수는 데이터를 담는 그릇이라고 생각하면 된다. 자바스크립트에서는 변수에 데이터 뿐만 아니라 오브젝트 및 함수를 담을 수 있다.
우리가 데이터를 코드에서 이용하려면 데이터를 사용하겠다고 프로그램에 알려줘야하는데, 이렇게 데이터/오브젝트/함수 등을 사용하겠다고 선언하는 것을 변수를 선언한다고 한다.
상수는 변화하지 않는 값을 가지고 있는 변수를 뜻한다. 자바스크립트 변수는 var, let 키워드를, 상수는 const 키워드를 사용한다.

var   x    = "Hello world"
선언자 변수명 = 할당된값

일반적으로 변수명을 지을때는 특별한 제약이 없지만 다음과 같은 규칙이 있다

변수명은 문자(특수문자 제외), 숫자, _(언더스코어), $(달러기호)를 포함하여 만들 수 있다.
변수명은 숫자로 시작할수 없다
자바스크립트 예약어(자바스크립트에서 이미 문법적인 용도로 사용하고있는 변수 -> await, boolean, false, new, yield 등등)는 사용할수 없다.
변수명은 대소문자를 구분한다.

1.3.1 var 선언자

자바스크립트에서는 데이터 타입에 상관없이 변수를 저장할때 var선언자와 let 선언자를 사용할 수 있다. 실무에서는 오류를 최소화하기 위해 주로 let선언자를 사용한다. 하지만 이미 많은 개발된 스크립트가 var 선언자로 되어있기 때문에 var선언자에 대해서도 이해해야한다.

var로 선언하면 같은 자바스크립트 코드 안에서 동일한 변수명을 사용하는 것이다 가능하다.

<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <script>
      var x = 5; //변수명 x에 5을 저장
      var y = 6; //변수명 y에 6을 저장
      var z = x + y; //변수명 z에 변수x와 변수y를 더한 값을 저장. z에는 11이 저장됨.

      var x = 7; //변수를 새로 선언하고 변수명 x에 7을 저장
      z = x + y; //변수 z에 변수x와 변수y를 더한 값을 저장. 기존에 저장되었던 값은 사라지고 새로운 값으로 바뀌게 됨. z에는 13이 저장됨.
    </script>
  </body>
</html>

var선언자를 사용하면 동일한 변수명을 사용해도 에러가 나지 않기 때문에 골치 아프게 매번 새로운 변수명을 만들어서 사용하지 않아도 된다는 장점이 있다.
하지만 동일한 변수명으로 변수가 새로 선언되면, 기존 코드에서 동일한 이름으로 사용되던 변수에 할당값이 사라지므로, 해당 변수를 참조하고 있는 프로그램에 예기치 못한 에러가 발생할 수 있다.
es6이전까지는 변수 선언방법이 var선언자 밖에 없었기 때문에 외부 자바스크립트 라이브러리가 많을수록 동일한 변수명 사용으로 인한 예기치 못한 프로그램 에러가 빈번하게 발생하고 추척하기 어려웠다.
그래서 let과 const가 es6부터 추가되었다.

1.3.2 let 선언자

let 선언자는 es6에 추가된 선언자이다. let으로 변수를 선언하면 동일한 변수명을 갖는 변수를 재선언해서 사용할수 없다. 동일한 변수명으로 변수가 선언되면 에러가 발생한다.
let 선언자는 var 선언자의 변수명이 동일함으로써 생기는 프로그램 오류를 막을 수 있다.

<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <script>
      let x = 5; //변수 x에 5을 저장
      let y = 6; //변수 y에 6을 저장
      let z = x + y; //변수 z에 변수x와 변수y를 더한 값을 저장. z에는 11이 저장됨.

      x = 7; //변수 x에 7을 저장.
      let x = 7; //에러 발생. 동일한 변수명인 x로 재선언 불가능.
    </script>
  </body>
</html>

1.3.1 const 선언자

const선언자는 es6에 추가된 선언자이다. const는 변화하지 않는 변수를 선언할 때 사용한다. 이렇게 const로 선언한 변수를 상수(constant)라고 부른다.

const 선언자를 사용할 경우 선언 시점에 값을 할당한 후 같은 변수명으로 재선언 뿐만 아니라 이미 선언된 변수의 값도 변경할 수 없다. 즉 선언 시점에 할당한 값을 절대로 변경하지 않는 용도로 사용한다.

<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <script>
      const x = 5; //변수 x에 5을 저장
      const y = 6; //변수 y에 6을 저장
      const z = x + y; //변수 z에 변수x와 변수y를 더한 값을 저장. z에는 11이 저장됨.

      x = 7; //값 재할당시 에러 발생
      const x = 7; //동일한 변수명으로 선언시 에러 발생
    </script>
  </body>
</html>

const 선언자를 사용하면 좋은경우

프로젝트 내에서 각종 날짜를 보여줄때

2021.08.01
2021-08-01
2021/08/01

좋은 프로그램은 이런 사소한 날짜 포맷도 모두 동일한 포맷을 사용한다. 개발자에따라 다르게 사용되거나, 한명이 작업하더라도 서로다른 날짜 포맷을 사용하게 되면 좋은 UX를 제공 할 수 없다. 이런 경우 const선언자를 사용한다. 최초로 선언된 날짜 포맷값을 다른값으로 재선언이 불가능하기 때문에 const 선언자를 유용하게 사용 가능하다.

const DATE_FORMAT = 'yyyy.MM.dd';

혹은 기억하기 힘든 값을 변수에 할당하여 사용가능하다.

const COLOR_RED = '#ff0000'; //빨간색
const COLOR_BLUE = '#000ff'; //파란색
const COLOR_BLACK = '#000000'; //검정색
const COLOR_WHITE = '#ffffff'; //흰색

변수명을 지을때 일반적으로 소문자를 사용할때도 있고, 대문자를 사용하는 경우도 있다. 색상, 날짜포맷처럼 하드코딩된 값을 할당 할때는 일반적으로 변수명을 대문자로 사용한다.

이자용

다음 포스트