자바스크립트를 위한 기초 지식

자바스크립트 시작하기

시작하기

프로그래밍을 가장 빨리 배울 수 있는 방법은 그냥 해보는 거야. 반드시 모든 것을 완벽하게 다 이해해야 할 필요는 없어. 프로그래밍에서 이런 관점은 특히 중요한데, 유명한 프로그래머들 중에는 단순한 흥미나 취미로 시작해서 코딩을 꾸준히 즐기다 보니 뛰어난 프로그래머가 된 경우가 많았다고 해.

특히 강좌같은 것을 보다보면 잘 이해가 되지 않거나 모르는 것을 완전히 이해하기 위해 계속해서 분석하고 이론을 찾아서 공부하는 경우가 많지? 하지만 이런 방식의 공부는 오래가지 못하고 재미도 없어. 그냥 간단한 걸 하나씩 만들어보면서 꾸준히 프로그래밍을 접해봐. 완전히 이해하는 것보다 꾸준한 연습으로 감각을 키우는 것이 더 중요해.

일단 무작정 시작해봐. 생각보다 별거 아니라는 것을 느낄 수 있을꺼야. 우선 모든 프로그래밍 언어를 공부할 때 반드시 해봐야 할 코드가 하나 있어. 바로 “Hello, World”를 출력하는 코드야.

자바스크립트에서는 “Hello, World”를 어떻게 출력할까? 우선 크롬 브라우저를 띄우고, 키보드의 F12 키를 누르면 개발자 도구가 열려. 개발자 도구가 열리면 하단에 콘솔창이라는 것이 보이는데, 이 창은 앞으로 자바스크립트를 공부하면서 자주 사용하게 될 창이니까 익숙해지길 바래.

크롬 개발자 도구의 콘솔창

만약 콘솔 창이 보이지 않는다면 우측 상단의 더보기 아이콘을 눌러 Show console drawer를 선택하거나 ESC를 눌러주면 돼. 그러면 화면의 하단에 콘솔창이 열리는데, 콘솔에 커서를 이동시키면 간단한 코드를 입력하고 실행해볼 수 있어.

console.log("Hello, World");
Hello, World

코드를 입력하고 Enter 키를 치면 실행 결과가 아래처럼 콘솔창에 출력될꺼야.

콘솔창 결과 출력

참고로 이 “Hello, World”를 출력하는 기본 예제는 대부분의 프로그래밍 언어 학습에서 가장 처음 배우게 되는 예제인데, 이 유명한 예제는 벨 연구소의 컴퓨터 과학자인 브라이언 커니핸이라는 사람이 1972년에 처음으로 사용했다고 해.

자바스크립트의 개발환경

자바스크립트는 현재 서버, 스크립트, 데스크톱, 브라우저 등 다양한 분야에서 활용되고 있지만, 사실 예전에는 웹에서만 사용되던 언어였어.

기본적인 자바스크립트 프로그래밍을 위해서는 몇몇 도구가 필요해. 우선 웹 브라우저가 필요하고, 그 다음에는 코딩 작업을 효율적으로 할 수 있는 텍스트 에디터가 필요해.

현재 크롬, 엣지, 파이어폭스, 오페라와 같은 최신 웹 브라우저들은 모두 ES6라는 자바스크립트 버전을 훌륭하게 지원해주고 있는데, 이는 어떤 브라우저를 사용하더라도 자바스크립트 코드를 테스트하고 확인 할 수 있다는 뜻이야.

텍스트 에디터는 매우 다양한 종류가 있고, 성능이나 기능이 뛰어난 제품들이 있어. 물론 자바스크립트는 어떤 텍스트 에디터를 사용해도 상관이 없는데, 심지어 메모장으로 코딩을 해도 잘 작동할 수 있어. 그렇다면 왜 굳이 텍스트 에디터를 사용해야 할까?

전문적인 텍스트 에디터는 코드 하이라이트나 코드 자동 완성과 같은 다양하고 편리한 기능을 제공해주기 때문이야. 이런 편리한 기능들이 있다면 보다 빠르고 효율적인 코딩을 할 수 있겠지? 그래서 가능하면 나와 잘 맞는 텍스트 에디터를 선택하여 사용하는 것이 좋아.

대표적인 텍스트 에디터로는 아톰, 서브라임 텍스트, 비주얼 스튜디오 코드, 노트패드++등이 있는데, 최근에는 비주얼 스튜디오 코드를 많이 사용하는 추세야.

자바스크립트 주석달기

주석은 코드를 작성하는 사람이나 함께 작업하는 다른 사람들을 위해 달아 놓는 일종의 설명 글이야.

주석은 코드를 실행할 때는 실행되지 않는 단순한 텍스트일 뿐이지만, 프로젝트의 규모가 커질 수록 해당 코드가 어떤 동작을 하는 것인지 파악하는 것이 어려울 수 있기 때문에 주석을 참고하여 작업 할 수 있도록 최대한 자세하게 주석을 달아 놓는 것이 좋아.

또 내가 직접 작성한 코드라도 시간이 지난 후에는 쉽게 이해가 되지 않는 경우도 많기 때문에 자세한 주석을 달아놓는 행동을 습관화시킬 필요가 있어.

자바스크립트에서는 두 가지 방법으로 주석을 달아 놓을 수 있는데, 하나는 두 개의 연속된 슬래시(//)를 사용하여 표시하는 인라인 주석이고 다른 하나는 /*로 시작해서 */로 끝나는 블록 주석이야.

/**
 * 이것은 블록 주석입니다.
 * 이렇게 여러 줄로도 작성할 수 있죠.
 * 자바스크립트는 인라인 주석과 블록 주석의 내용을 무시합니다.
 * 주석을 다는 것은 좋은 습관이예요.
 */
console.log("Hello, World"); // 이것은 인라인 주석입니다.
Hello, World

변수와 상수

컴퓨터는 모든 데이터를 01로 처리해. 하지만 컴퓨터가 아닌 인간이 직접 모든 데이터를 01로 처리하는 것은 불가능한 일이겠지? 그래서 우리는 데이터를 01이 아닌, 우리에게 익숙한 숫자, 날짜, 텍스트 등의 형태로 다루게 돼.

자바스크립트에서 숫자와 날짜, 텍스트 처럼 우리가 실제로 다루는 데이터의 형태를 데이터 타입이라고 하는데, 이런 데이터 타입을 처리하기 위해 변수상수 그리고 리터럴이라고 하는 데이터 메커니즘을 사용해.

변수상수는 데이터를 담는 일종의 그릇이라고 할 수 있는데, 변수는 언제든 값을 바꿀 수 있는 그릇이지만, 상수는 한번 담아놓으면 그 값을 바꿀 수 없는 그릇이라고 할 수 있어. 그래서 ES6에서는 변수상수를 각각 다른 키워드를 사용하여 선언을 하도록 되어 있어.

변수

ES6에서 변수는 let이라는 키워드를 사용하여 선언할 수 있는데, 변수의 선언과 동시에 초기값을 할당하거나, 변수만 선언해놓고 나중에 변수에 값을 담을 수 있어. 만약 초기값을 할당하지 않고 선언만 해놓은 상태라면 선언된 변수에는 undefined라는 특별한 데이터가 할당돼.

let berkshire; // undefined
console.log(berkshire);
berkshire = "버크셔 헤서웨이";
console.log(berkshire);
undefined
버크셔 헤서웨이

상수

상수는 const라는 키워드를 사용해. 상수를 정의할 때는 소문자를 사용해도 되지만, 한번 할당한 값을 다시 바꿀 수 없기 때문에 보통은 변수와 구분하기 위해 대문자를 사용하여 선언하는 경우가 많아.

const BERKSHIRE = "버크셔 헤서웨이";

사실 ES6 이전의 버전에서는 변수와 상수의 구분없이 var라는 키워드를 공통으로 사용했기 때문에 변수와 상수를 구분할 필요가 없었어. 하지만 ES6에서는 letconst라는 키워드가 생긴 만큼 데이터의 사용 목적에 따라 적합한 키워드를 사용하는 것이 좋겠지?

var라는 키워드는 글로벌 변수로만 지정이 되는 문제가 있었기 때문에 관리가 쉽지 않았지만, letconst는 사용 위치에 따라 지역 변수로 작동하기 때문에 변수와 메모리를 보다 효율적으로 관리할 수 있어.

식별자

변수와 상수처럼 절대적인 것은 아니지만 프로그래머들이 코드를 작성할 때 고려해야 할 몇 가지 규칙들이 있어. 규칙에 따라 작성된 코드는 더 쉽게 이해할 수 있기 때문에 향후에 유지보수가 쉽고 다른 사람들과 협업을 해야하는 경우에도 큰 도움이 되는데, 어느 정도 규모가 있는 프로젝트라면 미리 코드의 작성 규칙을 정하고 문서화하는 것이 중요한 과정이 되기도 해.

변수나 상수 또는 함수를 정의하는 키워드와 함께 조합하는 문자, 즉 변수, 상수, 함수의 이름을 ‘식별자’라고 하는데, ‘식별자’를 작성하는 경우에도 몇 가지 지켜야 할 간단한 규칙들이 있어.

앞에서 상수와 함수의 이름으로 사용했던 berkshireBERKSHIRE가 바로 식별자인데, 일반적으로 자바스크립트의 식별자에는 다음과 같은 규칙이 적용돼.

  • 식별자는 반드시 글자나 달러 기호$ 또는 밑줄_로 시작해야 한다.
  • 식별자에는 글자와 숫자, 달러 기호$, 밑줄_만 사용할 수 있다.
  • 키워드와 예약어는 식별자로 사용할 수 없다.

참고로 키워드와 예약어는 자바스크립트의 내장 함수 등에서 이미 사용하고 있거나 사용할 예정인 단어를 말해.

식별자 표기법

대부분의 프로그래밍 언어에서 식별자는 카멜 케이스나 스네이크 케이스라는 방식 중에 하나로 작성하는데, 두 가지 방식 모두 많이 사용되는 방식이기 때문에 어떤 표기법을 사용해도 상관은 없어.

하지만 한 프로젝트에서 하나의 방식을 사용하고 있다면, 해당 방식의 표기법을 계속 사용하는 것이 좋아. 특히 팀이나 프로젝트에 속해서 작업을 하는 경우라면 팀이나 프로젝트에서 사용하는 방식을 따르는 것이 좋겠지?

카멜 케이스
카멜 케이스는 camelCase, berkshireHathaway 처럼 각 단어와 단어 사이의 첫 번째 글자를 대문자로 작성하는 방식이다.
스네이크 케이스
스네이크 케이스는 snake_case, berkshire_hathaway 처럼 각 단어를 언더바_로 연결해주는 방식이다.

식별자의 이름을 정할 때는 일반적으로 따라야 하는 규칙이 있는데, 혼자서 코딩을 하는 경우라면 상관없겠지만 팀이나 프로젝트에 속해서 협업을 하는 경우라면 반드시 지켜주는 것이 좋아.

  • 식별자는 클래스를 제외하고 대문자로 시작하지 않는다.
  • _identifier, __identifier처럼 언더바_로 시작하는 식별자는 내부 변수와 같은 아주 특별한 경우에만 사용한다.
  • 자바스크립트의 라이브러리는 $와 같은 특수 기호를 사용하는 경우가 많기 때문에, 가급적 특수 기호로 시작되는 식별자는 사용하지 않는다.

리터럴

리터럴은 값을 프로그램 안에서 직접 지정한다는 의미로 변수 또는 상수에 할당하는 값을 말해.

let berkshire = "버크셔 헤서웨이";

위의 코드에서 berkshire는 변수를 가리키는 식별자이고 "버크셔 헤서웨이"문자열 리터럴이면서 동시에 berkshire이야.

리터럴은 반드시 데이터 타입이나 변수의 형태로 할당되어야 하는데, 만약 지정되지 않은 타입의 데이터가 할당되면 오류가 발생해.

let time = "12시 55분"; // 문자열 리터럴 할당
let currentTime = time; // currentTime에 변수 time을 할당
currentTime = 12시 55분; // 오류 발생

답글 남기기