자바스크립트 강의

자바스크립트 강의 1편 - 브라우저에서 바로 시작하기

나동빈

오늘부터는 자바스크립트(JavaScript) 강의를 시작하겠습니다. 기본적으로 자바스크립트는 별도의 설치 과정이 필요하지 않다는 점에서 매우 빠르게 시작하실 수 있습니다. 브라우저 자체가 이미 실행 환경을 가지고 있기 때문입니다.

개발자 도구 열기

먼저 크롬(Chrome) 브라우저를 열어서 F12 키를 눌러주시면 됩니다. 이후에 [Console] 탭으로 이동해주세요.

맥(Mac) 환경 단축키: Cmd + Option + J

console.log("안녕하세요");

위와 같이 입력한 이후에 엔터를 누르시면 바로 결과가 출력됩니다. 별도의 파일을 만들지 않아도 된다는 점에서 문법을 연습할 때 가장 빠른 방법입니다.

변수 선언하기

const name = "나동빈";   // 값이 바뀌지 않는 경우
let count = 0;           // 값이 바뀌는 경우

count = count + 1;
console.log(name, count);

원래 자바스크립트에는 var 라는 키워드도 존재하지만, 유효 범위(Scope) 규칙이 직관적이지 않다는 점에서 요즘에는 사용하지 않습니다. const 와 let 만 사용해주시면 됩니다.

저는 기본적으로 const 를 사용하고, 값을 바꿔야 하는 경우에만 let 으로 변경하는 방식을 추천드립니다. 이렇게 작성하면 "이 값은 바뀌지 않는다"는 사실이 소스코드에 그대로 드러난다는 장점이 있습니다.

자료형(Data Type)

종류예시
문자열"안녕", 'hello'
숫자30, 3.14
참·거짓true, false
없음null, undefined

여기에서 null 과 undefined 가 모두 존재한다는 점이 자바스크립트의 유명한 불편함 중 하나입니다.

간단하게 정리하자면 undefined 는 "아직 값이 없는 상태", null 은 "비어 있다고 명시적으로 정한 상태" 정도로 구분하시면 됩니다.

문자열 다루기

const name = "동빈";
const age = 30;

console.log("이름: " + name);               // 기존 방식
console.log(`이름: ${name}, 나이: ${age}`); // 템플릿 리터럴

백틱(` `)으로 감싸는 방식을 템플릿 리터럴(Template Literal)이라고 합니다. ${}` 안에 변수를 그대로 넣을 수 있다는 점에서 훨씬 읽기 편한 코드를 작성하실 수 있습니다.

== 대신 === 을 사용해야 하는 이유

console.log(1 == "1");    // true
console.log(1 === "1");   // false

== 연산자는 자료형을 알아서 맞추어 비교합니다. 편리해 보이지만 결과를 예측하기 어렵다는 점에서 문제가 됩니다.

console.log(0 == "");            // true
console.log(null == undefined);  // true
console.log([] == false);        // true

위와 같은 결과들은 외울 필요가 없습니다. 항상 === 를 사용해주시면 됩니다.

연습 문제

콘솔 창에서 직접 입력해보시면 됩니다.

  1. 이름과 나이를 변수에 담고 템플릿 리터럴로 한 문장 출력하기
  2. "10" + 5 와 "10" - 5 를 입력하여 결과 비교해보기
  3. typeof 를 붙여서 여러 값의 자료형 확인해보기

특히 2번의 결과를 보시면 자바스크립트가 자료형을 다루는 방식을 이해하실 수 있습니다.

다음 시간에는 함수(Function)와 배열(Array)을 다루겠습니다.

#javascript#웹#강의