웹 개발 배우기 1편 - 자바스크립트 첫걸음, 숫자와 변수 그리고 함수 완전 정복

이번 포스팅은 ‘웹 개발 배우기’ 시리즈의 일부인데요.

프로그래밍 경험이 전혀 없는 분들을 위해 자바스크립트(JavaScript)로 웹 앱을 만드는 방법을 알려드리는 시리즈입니다.

이번 챕터에서는 자바스크립트의 가장 첫걸음을 떼면서 숫자, 변수, 그리고 함수에 대해 알아볼 거거든요.

다음 챕터부터는 실제로 유용한 앱을 만들면서 배우겠지만, 이번에는 간단한 상호작용을 통해 워밍업을 하는 시간이라고 생각하시면 됩니다.

브라우저 콘솔

다행히도 모든 웹 브라우저에는 이 엔진이 내장되어 있습니다.

우리가 이 엔진과 소통하는 여러 방법 중 하나가 바로 브라우저의 ‘콘솔’이거든요.

이 콘솔이 어떻게 작동하는지는 곧 확인하게 될 겁니다.

우선 지금 사용하고 계신 웹 브라우저의 콘솔을 여는 방법을 먼저 찾아보시는 게 첫 번째 단계인데요.

보통 ‘크롬 개발자 도구’나 ‘파이어폭스 콘솔’처럼 검색하면 금방 찾으실 수 있습니다.

참고로 앞으로 종종 이런 식으로 웹 검색을 통해 직접 무언가를 찾아보시라고 말씀드릴 때가 있을 텐데요.

이건 웹 개발자에게 정말 중요한 역량입니다.

항상 누군가 옆에서 하나하나 설명해 줄 수는 없거든요.

스스로 자료를 찾고 실험하는 과정에 익숙해져야 합니다.

콘솔은 어떻게 작동할까요

우리가 자바스크립트 코드를 ‘입력’하면, 웹 브라우저는 그에 대한 ‘출력’으로 결과를 보여주는 방식입니다.

그럼 이제 직접 콘솔을 한번 사용해 볼까요.

숫자 자바스크립트를 계산기처럼 써보기

쉽게 말해 숫자가 포함된 ‘계산식’이라고 생각하시면 됩니다.

예를 들어, 자바스크립트는 이렇게 숫자를 더할 수 있거든요.

// 우리가 입력한 내용
3 + 2;
// 브라우저가 보여주는 결과
5;

여러분도 직접 브라우저 콘솔에 따라 입력해보면서 여기에 나오는 결과와 똑같이 나오는지 확인해보세요.

이제부터 콘솔 상호작용은 아래와 같은 방식으로 표시할 건데요.

> 3 + 2
5

첫 줄 시작 부분의 > (부등호)는 우리의 ‘입력’을 의미합니다.

이건 브라우저가 표시해주는 기호이지 우리가 직접 입력하는 건 아니거든요.

우리는 그 뒤에 오는 코드만 입력하면 되고, 다음 줄에 나오는 것이 바로 브라우저의 ‘출력’ 결과입니다.

연산자와 피연산자

이때 연산자의 왼쪽과 오른쪽에 있는 값들을 ‘피연산자’라고 부릅니다.

예를 들어 3 + 2에서 +는 연산자이고 3과 2는 피연산자인 것이죠.

더 다양한 숫자 연산자

몇 가지 예를 보여드리겠습니다.

뺄셈 연산자 - (하이픈)를 사용하면 숫자를 뺄 수 있거든요.

> 3 - 2
1

곱셈 연산자 * (별표)는 숫자를 곱하는 데 사용됩니다.

> 3 * 2
6

나눗셈 연산자 / (슬래시)를 쓰면 숫자를 나눌 수 있는데요.

> 3 / 2
1.5

여기서 우리는 두 종류의 숫자를 보게 됩니다.

하나는 5와 같은 ‘정수’이고, 다른 하나는 1.5와 같은 ‘부동 소수점’ 숫자인데요.

‘부동 소수점 숫자’라는 건 간단히 말해 소수점을 가진 숫자라고 생각하시면 됩니다.

사실 내부적으로 자바스크립트는 정수 5와 부동 소수점 숫자 5.0을 구분하지 않고 둘 다 그냥 ‘숫자’로 취급하거든요.

궁금하시다면 위키피디아에서 더 많은 정보를 찾아볼 수 있습니다.

더 긴 숫자 표현식

> 1 + 2 * 3
7

하지만 이렇게 여러 연산자가 함께 쓰이면 어떤 순서로 계산될지 바로 명확하게 보이지 않을 수 있습니다.

그래서 저는 이런 경우 괄호를 사용해 계산 순서를 명확히 해주는 걸 선호하거든요.

2 곱하기 3에 1을 더하는 경우입니다.

> 1 + (2 * 3)
7

1 더하기 2에 3을 곱하는 경우인데요.

> (1 + 2) * 3
9

자바스크립트는 첫 번째 방식, 즉 덧셈(과 뺄셈)보다 곱셈(과 나눗셈)을 먼저 계산하는 수학적 규칙을 따릅니다.

자바스크립트 코드는 어떻게 실행될까요

우리는 엔진에 자바스크립트 ‘소스 코드’를 제공합니다.

소스 코드는 항상 텍스트 형태이며, 엔진에게 무엇을 해야 할지 알려주는 명령어들을 담고 있거든요.

엔진은 이 명령어들을 따라 내부적으로 작업을 수행하게 됩니다.

보통 자바스크립트 엔진은 ‘블랙박스’와 같아서 우리는 그 안에서 무슨 일이 일어나는지 볼 수 없는데요.

하지만 브라우저 콘솔처럼 명령어 실행 후 결과를 추출해서 보여주는 예외도 있습니다.

자바스크립트 실행과 관련해서 알아두면 유용한 두 가지 용어가 있거든요.

‘구문(Syntax)‘은 올바른 자바스크립트 프로그램을 작성하기 위한 규칙을 말합니다.

‘런타임(Runtime)‘은 엔진이 자바스크립트 코드를 실행하고 있는 동안의 시간을 의미하는데요.

이 두 가지는 앞으로 계속 듣게 될 용어입니다.

변수

변수란 값을 담을 수 있는 ‘이름이 붙은 상자’라고 생각하시면 됩니다.

> let myNumber = 8;
undefined
> myNumber * 2
16

첫 번째 줄에서 myNumber라는 변수를 만들었습니다.

let은 변수를 만드는 명령어 중 하나인데요.

myNumber는 우리가 만든 변수의 이름입니다.

등호 =는 변수에 초기값을 지정하겠다는 의미거든요.

여기서 8이 바로 그 초기값이고, 우리는 myNumber를 8로 ‘초기화’한 것입니다.

세 번째 줄에서는 이 변수를 사용했는데요.

이제 myNumber는 자신이 담고 있는 값 8을 대신하는 이름이 된 셈입니다.

그런데 첫 번째 줄의 실행 결과로 나온 undefined는 무슨 의미일까요?

이건 ‘실제 결과값이 없음’을 의미하는 일종의 가짜 값인데요.

값을 만들어내는 표현식과 달리, 무언가를 실행하는 ‘문장’은 종종 별도의 결과값을 갖지 않습니다.

변수 이름 규칙

그다음 글자부터는 첫 글자에 허용된 모든 문자와 함께 숫자(3, 0 등)도 사용할 수 있습니다.

대부분의 변수 이름은 소문자로 시작하고, 단어가 바뀔 때 대문자를 사용하는 ‘카멜 케이스(camel case)’ 방식을 따르거든요.

예를 들면 numberOfPeople 이나 value3 같은 식입니다.

반면 값이 절대 변하지 않는 변수의 이름은 가끔 모든 글자를 대문자로, 단어 사이는 밑줄로 구분해서 짓기도 하는데요.

NUMBER_OF_PEOPLE 처럼 말이죠.

문장의 결과는 거의 중요하지 않아요

그래서 앞으로는 세미콜론으로 끝나는 콘솔 입력의 결과값(undefined)은 생략하고 보여드리겠습니다.

> let myNumber = 8;
> myNumber * 2
16

구문 오류

예를 들어 숫자로 시작하는 잘못된 변수 이름을 사용해 보겠습니다.

> let 1number = 7;
SyntaxError: Invalid or unexpected token

정확한 메시지는 자바스크립트 엔진마다 조금씩 다를 수 있지만, 오류의 이름은 항상 SyntaxError입니다.

변수에 값 할당하기

> let value = 0;
> value
0
> value = 3;
> value
3

처음에는 value라는 변수를 0으로 초기화했지만, 나중에 그 값을 3으로 변경했습니다.

이때 let 없이 할당 연산자 =를 사용했거든요.

할당 연산자의 오른쪽에는 어떤 표현식이든 올 수 있습니다.

> value = 1 + 1 + 1;
> value
3

이 때문에 수학적으로는 이상해 보이는 이런 문장도 가능한데요.

> let myVar = 0;
> myVar = myVar + 1;
> myVar
1

myVar = myVar + 1; 이 문장은 myVar의 현재 값을 가져와서 1을 더한 다음, 그 결과를 다시 myVar에 저장하라는 의미입니다.

즉, 할당 연산자는 수학의 등호와는 다르다고 생각해야 합니다.

상수 (변경 불가능한 변수)

이렇게 하면 실수로 값을 바꾸려고 할 때 자바스크립트가 경고를 해줍니다.

> const TWO = 2;
> TWO + TWO
4
> TWO = 3;
TypeError: Assignment to constant variable.

const는 ‘이 변수는 절대 바뀌지 않을 것’이라는 개발자를 위한 힌트로 사용하는 것이 더 유용한데요.

이렇게 선언된 변수는 ‘상수’라고 부릅니다.

함수

이제 ‘함수’라는 또 다른 종류의 값을 살펴볼 차례입니다.

함수란 변수 안에 저장해두고 사용하는 ‘작은 프로그램’과 같거든요.

우리는 함수를 ‘호출’해서 실행시킬 수 있습니다.

함수는 0개 이상의 입력값을 받아서 하나의 결과값을 만들어내는데요.

아래 예제에서 timesThree라는 변수가 바로 함수입니다.

> const timesThree = (x) => { return x * 3; };
> timesThree(2)
6
> timesThree(0.5)
1.5

첫 번째 줄에서 timesThree라는 함수를 만들었고, 두 번째 줄에서는 2라는 값을 넣어 함수를 호출했습니다.

그러자 6이라는 결과가 반환되었죠.

(x): 함수의 ‘입력값’이 x라는 변수에 저장되는데요.

이 변수를 함수의 ‘매개변수(parameter)‘라고 부릅니다.

=> { return x * 3; }: 화살표 뒤 중괄호 안에는 함수의 실제 코드가 들어가는데요.

return 문은 함수 호출의 결과를 지정하는 역할을 합니다.

이렇게 함수를 만드는 문법을 ‘화살표 함수’라고 부릅니다.

매개변수 vs 인자

자바스크립트는 대부분 줄 바꿈을 무시하기 때문에, 사람이 읽기 쉽게 코드를 여러 줄로 나눠 쓸 수 있습니다.

const add = (x, y) => {
  // (A)
  return x + y;
};
const result = add(2, 3); // (B)
// `result`는 5가 됩니다.

사실 ‘매개변수(parameter)‘와 ‘인자(argument)‘라는 용어는 종종 혼용되기도 하는데요.

하지만 명확하게 구분해서 알아두는 것이 좋습니다.

위 예시에서 x와 y는 add 함수의 ‘매개변수’이구요.

함수를 호출할 때 전달한 2와 3이 바로 ‘인자’입니다.

예제 섭씨를 화씨로 변환하기

const celsiusToFahrenheit = c => {
  const f = c * (9 / 5) + 32;
  return f;
};

매개변수 c는 섭씨 온도를 나타내는 숫자 입력값입니다.

우리는 그 값을 화씨로 변환해서 상수 f에 저장하고, 최종적으로 f를 함수의 결과로 반환합니다.

이 코드를 콘솔에 붙여넣고 함수를 호출해 볼 수 있거든요.

> celsiusToFahrenheit(0)
32
> celsiusToFahrenheit(40)
104

이 함수는 나중에 다른 프로젝트에서 다시 보게 될 겁니다.