코드는 컴퓨터에게 쓰는 짧은 지시문

코드 한 줄은 하나의 지시문입니다

지난 장에서 우리는 브라우저 Console에 이런 코드를 입력했습니다.

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

이 한 줄은 컴퓨터에게 보내는 짧은 지시문입니다.

콘솔에 안녕하세요라는 글자를 보여 주세요.

사람에게 "문 좀 닫아 줘"라고 말하면, 상대는 상황을 보고 어느 문인지 짐작할 수 있습니다. 하지만 컴퓨터는 짐작하지 않습니다. 코드에 적힌 대로만 움직입니다. 그래서 코드에서는 작은 기호 하나도 의미가 있습니다.

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

이 코드를 나누어 읽으면 이렇습니다.

• console.log : 콘솔에 무언가를 보여 주는 기능

• ( ) : 보여 줄 내용을 넣는 자리

• "안녕하세요" : 보여 줄 글자

• ; : 이 지시문이 끝났다는 표시

처음부터 모든 문법 이름을 외울 필요는 없습니다. 지금 중요한 것은 "코드는 컴퓨터가 읽는 지시문이고, 컴퓨터는 적힌 순서와 모양을 그대로 따른다"는 감각입니다.

AI 생성 이미지

여러 줄은 업무 순서표처럼 실행됩니다

코드는 보통 위에서 아래로 차례대로 실행됩니다. 편의점에서 일하는 순서표를 떠올려 보겠습니다.

1. 손님에게 인사한다.

2. 상품 바코드를 찍는다.

3. 결제 금액을 말한다.

4. 영수증을 건넨다.

순서가 바뀌면 일이 어색해집니다. 결제 금액을 말하기 전에 바코드를 찍어야 하고, 영수증은 결제가 끝난 뒤에 건네야 합니다.

코드도 비슷합니다. Console에 아래 코드를 붙여 넣고 실행해 보세요.

console.log("1. 주문을 확인합니다.");
console.log("2. 커피를 만듭니다.");
console.log("3. 손님에게 전달합니다.");

결과는 적은 순서대로 나옵니다.

1. 주문을 확인합니다.
2. 커피를 만듭니다.
3. 손님에게 전달합니다.

이번에는 순서를 바꿔 보겠습니다.

console.log("1. 손님에게 전달합니다.");
console.log("2. 주문을 확인합니다.");
console.log("3. 커피를 만듭니다.");

컴퓨터는 "이 순서가 이상한데?"라고 고쳐 주지 않습니다. 적힌 그대로 실행합니다. 그래서 코드를 쓸 때는 한 줄 한 줄의 의미뿐 아니라 줄의 순서도 중요합니다.

문장은 짧게, 한 줄에 하나씩 쓰면 읽기 쉽습니다

코드에서도 사람이 읽기 쉬운 모양이 중요합니다. 컴퓨터만 실행하면 되는 것처럼 보이지만, 실제로 코드를 가장 많이 읽는 사람은 나중의 자신입니다.

아래 코드는 실행은 됩니다.

console.log("아침"); console.log("점심"); console.log("저녁");

하지만 처음 배우는 동안에는 이렇게 쓰는 편이 좋습니다.

console.log("아침");
console.log("점심");
console.log("저녁");

한 줄에 하나의 지시문을 쓰면 어디서 시작하고 어디서 끝나는지 보기 쉽습니다. 오류가 났을 때도 어느 줄을 확인해야 하는지 찾기 쉽습니다.

세미콜론 ;은 문장의 마침표처럼 생각하면 됩니다. 자바스크립트는 세미콜론이 없어도 동작하는 경우가 많습니다.

console.log("세미콜론이 없어도 실행될 수 있습니다")

하지만 초보자에게는 세미콜론을 붙이는 습관이 도움이 됩니다. "여기서 한 문장이 끝났다"는 표시가 눈에 보이기 때문입니다.

console.log("문장의 끝이 보입니다");

주석은 코드 옆에 남기는 메모입니다

주석은 컴퓨터가 실행하지 않는 메모입니다. 코드 안에 적지만, 실행 결과에는 영향을 주지 않습니다.

한 줄 주석은 //로 씁니다.

// 화면에 인사말을 출력합니다.
console.log("안녕하세요");

위 코드에서 컴퓨터가 실행하는 것은 두 번째 줄뿐입니다. 첫 번째 줄은 사람을 위한 설명입니다.

여러 줄 메모를 남기고 싶을 때는 /*와 */ 사이에 씁니다.

/*
이 코드는 연습용입니다.
아직 화면을 바꾸지는 않고,
콘솔에 글자만 출력합니다.
*/
console.log("연습을 시작합니다.");

주석은 "코드를 모르는 사람에게 설명하기 위한 글"이기도 하지만, 더 자주 "며칠 뒤의 나에게 남기는 메모"가 됩니다.

예를 들어 지금은 이 코드가 너무 당연해 보일 수 있습니다.

console.log("3000원 이상 구매하면 무료 배송입니다.");

하지만 코드가 길어지면 왜 이런 문구를 출력했는지 잊을 수 있습니다. 그럴 때 주석이 도움이 됩니다.

// 배송비 안내 문구를 먼저 보여 줍니다.
console.log("3000원 이상 구매하면 무료 배송입니다.");

좋은 주석은 코드를 다시 말하는 것이 아니라, 코드만 봐서는 바로 알기 어려운 이유를 알려 줍니다.

// 좋지 않은 주석: 콘솔에 글자를 출력한다.
console.log("환영합니다");

// 더 나은 주석: 첫 방문자에게 보여 줄 환영 문구입니다.
console.log("환영합니다");

첫 번째 주석은 console.log를 이미 설명하고 있어서 큰 도움이 되지 않습니다. 두 번째 주석은 "왜 이 문구를 보여 주는지"를 알려 줍니다.

작은 규칙을 틀리면 컴퓨터는 멈춥니다

자바스크립트는 작은 기호에 민감합니다. 이 점은 처음에 낯설 수 있습니다. 하지만 자주 틀리는 지점은 정해져 있습니다.

1. 대소문자를 구분합니다

자바스크립트에서 console과 Console은 다릅니다.

console.log("정상 실행");

아래처럼 쓰면 오류가 날 수 있습니다.

Console.log("오류가 날 수 있습니다");

사람 눈에는 비슷해 보이지만, 컴퓨터에게는 다른 이름입니다. 코드를 보고 따라 쓸 때는 대문자와 소문자를 같이 확인하세요.

2. 괄호는 열었으면 닫아야 합니다

console.log("괄호가 맞습니다");

아래 코드는 닫는 괄호 )가 없습니다.

console.log("괄호가 부족합니다";

이런 오류가 나면 먼저 괄호의 짝을 확인하면 됩니다.

• 여는 괄호 (가 있는가?

• 닫는 괄호 )가 있는가?

• 순서가 ( 다음 )로 되어 있는가?

3. 따옴표도 짝이 필요합니다

문자열은 따옴표로 감쌉니다.

console.log("오늘의 할 일");

아래 코드는 따옴표가 닫히지 않았습니다.

console.log("오늘의 할 일);

문자열 오류가 나면 따옴표를 먼저 확인하세요.

• "로 시작했으면 "로 끝났는가?

• '로 시작했으면 '로 끝났는가?

• 여는 따옴표와 닫는 따옴표가 서로 다른 모양은 아닌가?

아래처럼 시작과 끝의 따옴표가 다르면 읽기 어렵고 오류의 원인이 됩니다.

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

처음에는 큰따옴표 " 하나만 정해서 쓰는 편이 좋습니다.

4. 쉼표는 여러 값을 나눌 때 씁니다

console.log는 여러 값을 한 번에 출력할 수 있습니다. 이때 값과 값 사이를 쉼표로 나눕니다.

console.log("사과", "바나나", "딸기");

쉼표가 빠지면 컴퓨터가 값을 어디서 나누어 읽어야 할지 알기 어렵습니다.

console.log("사과" "바나나");

이 코드는 오류가 납니다. 두 문자열 사이에 쉼표가 필요합니다.

console.log("사과", "바나나");

이름은 짧은 것보다 의미가 보이는 것이 좋습니다

코드를 쓰다 보면 값이나 기능에 이름을 붙이게 됩니다. 자세한 내용은 다음 장에서 다루겠지만, 지금은 "좋은 이름이 코드를 읽기 쉽게 만든다"는 점만 먼저 익히겠습니다.

예를 들어 사람 이름을 담는 코드가 있다고 해 보겠습니다.

const n = "민지";
console.log(n);

이 코드는 실행됩니다. 하지만 n이 무엇을 뜻하는지 바로 알기 어렵습니다.

아래처럼 쓰면 의미가 더 잘 보입니다.

const userName = "민지";
console.log(userName);

userName은 "사용자 이름"이라는 뜻입니다. 코드가 조금 길어졌지만 읽기는 쉬워졌습니다.

상품 가격도 마찬가지입니다.

const p = 12000;
console.log(p);

처음 쓴 사람은 p가 price의 줄임말이라고 기억할 수 있습니다. 하지만 며칠 뒤에는 헷갈릴 수 있습니다. 다른 사람이 읽으면 더 어렵습니다.

const productPrice = 12000;
console.log(productPrice);

좋은 이름은 설명을 줄여 줍니다.

• a보다 age

• t보다 totalPrice

• msg보다 welcomeMessage

• btn보다 submitButton

짧은 이름이 항상 나쁜 것은 아닙니다. 하지만 처음 배울 때는 줄임말보다 의미가 보이는 이름을 쓰는 편이 좋습니다.

이름을 붙일 때 자주 쓰는 모양

자바스크립트에서는 여러 단어를 이어 붙일 때 보통 이런 모양을 많이 씁니다.

const userName = "민지";
const totalPrice = 15000;
const welcomeMessage = "어서 오세요";

첫 단어는 소문자로 시작하고, 두 번째 단어부터 첫 글자를 대문자로 씁니다. 이런 모양을 카멜 케이스라고 부릅니다. 낙타의 등처럼 중간에 대문자가 솟아 보인다고 해서 붙은 이름입니다.

지금 꼭 이름을 외울 필요는 없습니다. 다만 자바스크립트 코드에서 userName, totalPrice 같은 모양을 자주 보게 될 것입니다.

이름을 지을 때는 아래 기준을 기억하세요.

• 코드를 읽는 사람이 뜻을 짐작할 수 있는가?

• 너무 심한 줄임말을 쓰지 않았는가?

• 같은 의미에 같은 이름 방식을 쓰고 있는가?

예를 들어 아래 코드는 이름 방식이 섞여 있습니다.

const userName = "민지";
const user_age = 32;
const UserEmail = "[email protected]";

실행 자체보다 중요한 것은 읽기 흐름입니다. 처음에는 한 가지 모양을 정해 일관되게 쓰는 편이 좋습니다.

const userName = "민지";
const userAge = 32;
const userEmail = "[email protected]";

코드 쓰기 전 체크리스트

오류가 났을 때 "나는 코딩에 안 맞나 봐"라고 생각할 필요는 없습니다. 대부분은 작은 기호 하나에서 시작됩니다. 아래 순서대로 확인하면 많은 오류를 잡을 수 있습니다.

• console.log의 철자가 맞는가?

• 대문자와 소문자가 예제와 같은가?

• 여는 괄호 (와 닫는 괄호 )가 모두 있는가?

• 문자열의 따옴표가 양쪽에 있는가?

• 여러 값을 출력할 때 쉼표 ,를 넣었는가?

• 한 문장이 끝나는 곳에 세미콜론 ;을 붙였는가?

• 이름을 붙였다면 의미가 보이는 이름인가?

처음에는 이 체크리스트를 옆에 두고 코드를 써도 좋습니다. 익숙해지면 눈이 자연스럽게 이런 부분을 확인하게 됩니다.

작은 실습: 하루 일과를 코드로 적어 보기

Console에 아래 코드를 입력해 보세요.

// 오늘 아침 일과를 순서대로 출력합니다.
console.log("1. 알람을 끕니다.");
console.log("2. 물을 마십니다.");
console.log("3. 가방을 챙깁니다.");
console.log("4. 집을 나섭니다.");

이번에는 자신의 하루 일과로 바꿔 보세요.

// 나의 하루 일과
console.log("1. ");
console.log("2. ");
console.log("3. ");
console.log("4. ");

그리고 일부러 한 군데를 틀려 보세요.

console.log("1. 알람을 끕니다.");
console.log("2. 물을 마십니다.;
console.log("3. 가방을 챙깁니다.");

오류가 나면 따옴표부터 확인해 보세요. 두 번째 줄에서 "가 닫히지 않았습니다. 고치면 이렇게 됩니다.

console.log("1. 알람을 끕니다.");
console.log("2. 물을 마십니다.");
console.log("3. 가방을 챙깁니다.");

이 연습의 목적은 많은 문법을 외우는 것이 아닙니다. 코드를 한 줄씩 읽고, 순서를 보고, 작은 기호를 확인하는 감각을 만드는 것입니다.

코드는 길고 어려운 문장이 아닙니다. 짧은 지시문을 정확한 순서로 적어 둔 것입니다. 다음 장에서는 이 지시문 안에서 값을 담아 두는 방법, 즉 변수와 상수를 배웁니다.