자바스크립트 튜토리얼 7

서론

프로그래밍 튜토리얼을 진행하면서 변수, 자료형, 연산자는 각각 따로 챕터를 나누어서 다루는게 일반적인데 각각의 챕터를 빠르게 속독하는 것도 도움이 된다. 속독하면 서로간 관계에 대하여 알기 쉽다.

변수와 자료형을 이해할 수 있으면 어느 프로그래밍을 배우더라도 적응이 빠르다. 그런데 자바스크립트에서 이들에게 많은 시간을 투자해도 효과는 크게 보기 힘들다. 컴퓨터 구조와 원리를 알고 싶으면 C언어부터 배우는게 좋다.

많은 이들이 자신만의 커리큘럼, 기술트리를 가지고 있다. 닭이 먼저냐 달걀이 먼저냐의 문제처럼 자바스크립트를 먼저 배우는게 좋냐 C언어를 배우는게 좋냐의 문제가 있을 수 있는데, 적당한 고민은 도움이 되지만 그런 생각할 시간에 어느쪽이든 먼저 시작하는게 좋다.

컴퓨터 언어를 하나만 배울게 아니라면 자바스크립트를 배우다가 C나 자바언어를 접하게 될 것이고 반대 경우도 마찬가지 일 것이다. 개인취향으로는 어느 것이 먼저인지는 중요하지 않다고 본다. 요즘음 서울대 컴퓨터공학부의 1학년 교양에 해당하는 컴퓨터 구조 과목에 파이썬을 사용한다. 옛날 처럼 '컴퓨터 구조는 역시 C언어야' 라고 하는 사람도 줄어들고 있다. 공감대가 C언어가 아니라 4차산업에 포커스를 맞춰주고 있기 때문에 이제는 C언어 이야기 보다는 수학과 알고리즘 자체에 비중을 더 줘야 한다. 확실히 기술이 발전한 만큼 사람들은 더 어려운 지식을 배우고 지식의 사용법인 기술을 습득해야 한다.

자료형과 언어의 관계에 대하여 말하면... 저수준에 접근해야 한다면 C언어가 필요하고 그 보다 추상적인 설계 능력을 중요시 여기면 고수준인 자바스크립트가 필요하다. 당연히 때로는 둘을 같이 사용해야 할 때도 있다. 0과 1의 세계는 이분법으로 존재하지만 0과 1을 무수히 사용하다 보면 그 경계도 허물어져 버린다.

개인적인 비유지만 0과 1은 +와 - 두개 성질이 있는 흙이라고 생각한다. 컴퓨터는 이 흙으로 컴퓨터 세상의 모든 가상세계를 만들어 낸다. 마치 인간이 흙으로 지어졌다는 성경의 기록처럼 인간도 이 흙으로 메모리에 객체를 창조한다. 몇몇 객체들은 인간과 대화가 가능할 정도로 지능이 발달하여 우리는 그들을 AI (Artificial Intelligence 인공지능) 이라고 부른다.

실로 대단한 능력이다. C언어냐 자바스크립트냐 할 거 없이 모든 언어는 CPU에게 명령을 내리기 전에 기계어 코드로 변형이 된다. 0과 1이 규칙에 따라 배열된 흙 알갱이가 시동을 걸면 CPU가 잠에서 깨어난다. C와 자바스크립트의 차이점은 C가 기계어로 변하는 시간이 더 빠르다는 것이다. 그리고 프로그래머가 좀더 원본 그대로의 흙을 만질 수 있다는 점이다. 어쨋든 이것도 저것도 0과 1이다. 끓임없이 하는 이야기 컴퓨터는 0과1로 작동이 된다는 말. 그대로다.

변수

자바스크립트에서 다루는 0과1이나 C언어의 0과1이 같다는 점을 기억하고 시작해보자.

변수란 무엇인가?

변수는 변형할 때의 변과 숫자의 수로 이뤄진 한자어다.

즉 변수는 변하는 수이다. 영어로는 variable 의미는 various number (다양한 수) 이다.

한글이나 영어나 비슷하다.

프로그램에서 일을 하기 위해서는 계산을 한다. 계산을 하기 위해서는 수를 기억하는 공간이 필요하다. 이것을 변수라고 하며 그 공간에서 숫자가 변할 수 있다. 대수학의 x와 비슷하다. 어떤 수라도 될 수 있다는 가능성이다.

가장 쉽게는 컴퓨터 게임을 시작하면 체력, 또는 목숨의 수 등이 숫자로 표시된다. 게임의 진행에 따라 체력이 오르기도 내려가기도 한다. 이 숫자 값이 바뀌면서 유지되는 저장공간이 변수이다.

자바 스크립트에서는

var 변수이름
let 변수이름
const 변수이름

처럼 사용할 수 있다. 각자 역할이 다른데 변수를 사용한다면 그냥 var 부터 사용한다.

그 다음은 변수의 규칙이 있다.

문법적 규칙부터 보자.

변수이름의 첫글자는 문자, 밑줄 _ 달러기호 $ 만 사용할 수 있다. 이는 숫자나 다른 키보드의 특수문자는 사용할 수 없음을 말한다.

* 다음과 같은 것은 안된다.

var 1number
var #number

*다음과 같은 이름은 된다.

var number;
var num1ber;
var _number;
var $number;

변수의 이름을 짓는 것은 중요한 문제인데 실제 프로그래머들은 이름을 짓기 위해서 고심한다. 프로젝트가 커질 수록 같은 이름이 충돌하는 경우가 빈번하기 때문이다. 이것을 해결하기 위해 여러 방법이 나왔지만 그래도 쉽지가 않다.

우선은 기본에 충실하는 것이 좋다. 의미 중심의 변수 이름을 짓는 것이 기본에 충실하는 것이다.

예를 들어 우리집 우체통을 변수로 만든다고 하자.

var postbox;

이렇게 만들면 누구의 우체통인지 알 길이 없다. 그렇다면

var mypostbox;

마이 포스트박스 -> 내 우체통 이라는 이름이다. 예제를 연습하거나 완전히 개인용 프로젝트를 할 때는 이렇게 해도 상관없다. 다만 띄어쓰기가 없어서 단어 구분이 안되니까...

var myPostbox;

이렇게 첫글자는 소문자로 시작해서 다음 단어의 첫글자를 대문자로 바꿔주면 가독성이 향상된다. 이를 Camel Case 라고 한다. (낙타 등처럼 튀어나왔다는 뜻) 또는...

var my_postbox;

처럼 snake case (뱀처럼 기어간다는 뜻) 를 사용한다. 어느 쪽을 사용하건 프로그래머의 호불호에 달려있다. 파이썬은 이래야 한다 자바스크립트는 이래야 한다는 식의 의견은 있지만 문법적으로 강제하는 사항이 아니기 때문에 알아서 사용한다. 다만 두 가지 방식을 혼용하거나 하면 혼란스럽기 때문에 안된다. 이런 스타일이 있어서 코드도 누가 쓴 코드인지 대략 알 수 있다. 컴퓨터 코드라고 해서 다 일괄적으로 찍어내는게 아니다.

*우리집 우체통인 것은 알 수 있는데 만일 여러 사람이 이 프로그램을 작성한다면 이것만 가지고는 알 수 없다.

좀 더 자세한 정보를 준다면 어느 건물의 몇 호인지까지 써두면 좋을 것이다.

A 빌딩의 101호 우체통은 아래와 같이 쓸 수 있다. 변수를 표현하는데 너무 많은 글자를 사용하면 뜻이 통해서 좋은데 그렇다고 가독성이 좋아지는 것은 아니니까(타이핑 시간도 길어진다) 주석과 함께 적당한 길이를 유지하도록 한다.

var A_postbox_101;

변수에 수 저장하기

변수라는 것을 처음 알게 되었다면 이것은 꼭 알아야 한다. 변수는 수를 저장하는 곳이다. 일반 상수(0,1,2,3 같은 숫자 상수) 를 저장할 수 있고 표현식(계산식)의 값을 저장할 수 있다. 이제부터는 계산의 영역이다.

A_postbox_101 = 99;

이는 우체통에 숫자 99를 저장한다. 프로그래밍 소스코드에서 = 는 같다의 뜻이 아니라 대입(assignment)의 뜻이다.

이 문장이 실행되면 변수의 공간에는 99가 대입되고 이 식에 사용된 99는... 버려진다. 컴퓨터에서 숫자가 버려진다는 것은 그 숫자를 더 이상 사용할 수 없도록 포인터(가리키는 것)를 삭제하거나 또는 CPU의 레지스터를 덮어 씌운 다는 것을 의미한다. 약간 어려운 말인데 하나의 문장이 끝나면 보존되는 데이터가 있고 유실되는 데이터가 있는 것으로 알면 충분하다. 프로그래밍을 하면서 이 유의미한 데이터(변수)들을 계속 유의미하게 끌고 가는 능력이 요구된다.

변수는 선언과 동시에 값을 저장할 수 있다.

실습 [콘솔창 - 웹브라우저]

지금까지 읽은 내용들을 실습하는 것은 어렵지 않다. 크롬이나 엣지 브라우저에서 마우스 우클릭 검사를 누르면 위와 같은 창이 뜬다. Console 을 클릭하면 Dom 객체 환경에서 스크립트를 사용할 수 있다. 이것은 브라우저에 있는 개발자 지원 모드이다. 좀 복잡한데 탭메뉴에서 Console 을 찾아야 한다.

자바스크립트의 명령어들을 입력해보자. 변수도 선언해보고 값도 할당해 본다.

이번 튜토리얼은 여기서 마친다.

더 복잡한 문법이 있지만 처음은 문법보다 구조를 이해하는게 중요하다. 컴퓨터를 이해하면 문법을 터득하는 시간이 거의 안걸리니까 컴퓨터 구조에 대하여 틈틈히 공부해놓으면 좋다.