자바스크립트 익숙해지기 #1

나는 이제까지 파이썬 이외의 다른 프로그래밍 언어를 사용해 본 적이 없다. 그래서 Node.js를 학습하기 위한 사전 준비로 자바스크립트에 대한 기초적은 개념에 대해 이해하고 정리하고자 한다.

 

모든 기초적인 개념에 대해 정리하기보다는 기존에 내게 익숙한 파이썬과 차이점을 보이는 부분들에 대해 집중적으로 학습하도록 하겠다. 다행히도 두 언어는 공통점이 많아서 익히는 데 큰 어려움은 없을 것 같다.

변수와 상수의 선언

자바스크립트는 기본적으로 선언된 값을 변경할 수 있는 변수와 변경하지 못하는 상수가 존재한다. 이 둘을 선언하는 법은 아래와 같다.

// 변수와 상수선언

var name1 = "lee"
let name2 = "donggyu";
const age = 31;

name1 = "lee" // 재할당 가능
name2 = "kim"; // 재할당 가능
age = 32; // 재할당 불가능

// 중복선언

var의 경우 중복선언이 가능하다.

var name1 = "lee"

var name1 = "kim" // 가능

변수는 선언한 뒤에 위와 같이 값을 변경 가능하지만 상수는 변경하려 할 경우 오류가 발생한다. 만약 변경하려면 다시 선언해야 한다.

 

그리고 알아 두어야 할 점은 자바스크립트에서는 특정 표현식의 끝에 세미콜론(;)을 붙여준다. 이는 필수적인 것은 아니다. 세미콜론을 안 붙인다고 해서 오류가 발생하지는 않으며, 사람에 따라 붙이는 사람이 있고 붙이지 않는 사람도 있다.

네이밍 규칙

변수 혹은 상수의 경우 네이밍을 할 때 아래와 같이 허용 또는 허용되지 않거나 추천하지 않는 경우가 있다.

• 허용되는 경우
  • CamelCase를 따른다. (소문자로 시작하며 단어의 구분은 대문자로 시작하여 구분한다.)
  • 이름은 문자와 숫자만 허용된다.
  • 특수문자 '$'또는 '_'로 이름을 시작하는 것은 허용된다.
• 허용되지 않거나 추천하지 않는 경우
  • SnakeCase를 사용하지 않도록 한다. ('_'를 이용해서 단어 구분을 하지 않는다.)
  • 이름의 시작을 숫자로 하는 것은 허용되지 않는다.
  • '$', '_'외의 특수문자는 이름의 어떤 위치에서든 사용하지 않는다.
  • let 또는 const와 같이 이미 자바스크립트에 내장된 이름을 사용하지 않는다.

자료형의 종류

• Numbers: 모든 숫자 자료형을 말한다. 2, -3, 22.956과 같이 정수 혹은 실수 등 숫자 자료형을 뜻한다.
• Strings(Text): 문자 자료형을 말한다. 큰 따옴표, 작은따옴표 그리고 백 틱으로 감싸져 있는 문자들이다. 자바스크립트에서 백 틱의 경우 좀 더 특별한 기능을 하는데 이는 이후 알아보도록 하자.
• Booleans: True와 False의 자료형이다.
• Objects: 키:값 형태로 된 자료형을 말한다. 파이썬에서 딕셔너리와 같은 자료형이다.
• Arrays: 일반적인 배열 자료형이다.

함수 선언

자바스크립트에서 함수의 선언은 아래와 같다.

function addNumbers(num1, num2) {
  return num1 + num2
}

함수를 뜻하는 function을 넣고, addNumbers라는 함수를 이름을 정의하였다. num1과 num2라는 필요한 매개변수를 만들어 주고, 중괄호 안에 함수에서 수행할 로직을 정의한다.

 

여기서 주의할 점이 한 가지 있는데, 특정 표현식이 끝날 때 자바스크립트에서는 끝에 세미콜론을 붙인다고 했으나 함수가 끝날 때 중괄호 끝에는 세미콜론을 넣지 않는다.

 

그리고 자바스크립트의 경우 가독성을 위한 들여 쓰기를 2칸 혹은 4칸을 권장한다. 탭키의 경우 권장되지 않으니 참고하도록 하자.

 

자바스크립트의 경우 함수의 선언을 어디서 하든 상관없다. 자바스크립트 또한 인터프리터 언어이기에 함수 선언 코드가 호출 코드의 앞에 위치해야 한다고 생각했지만, 그렇지 않았던 것이다. 자바스크립트는 특별한 행동방식을 가지고 있어 스크립트 내에 모든 함수를 모두 등록한 이후 언어를 위부터 아래로 실행해 나간다고 한다.

 

그렇다고 해도 함수를 아무곳에나 선언해 놓으면 가독성이 떨어질 수 있으므로 보통 스크립트 최상단 부에 모두 선언해 두는 것을 권장한다고 한다.

함수의 '직접적' vs '간접적' 실행

자바스크립트에서 함수를 실행하는데는 직접적, 간접적 두 가지 방식이 있다. 직접적 실행의 경우 스크립트가 실행될 때 자동으로 실행되도록 하는 것이고, 간접적 실행의 경우 특정 이벤트가 발생할 때 함수가 실행되도록 하는 것이다. 아래 예제를 살펴보자.

// 직접적 실행의 예시

function add(num1, num2) {
  something = num1 + num2;
}

add(1, 2); // 결과는 something에 3이 저장됨

// 간접적 실행의 예시

function add() {
  something = someNum + someOtherNum;
}

someButton.addEventListener('click', add); // 이 함수가 실행될 때 내부에서 add함수 실행 및 저장

위의 경우에서 add()는 스크립트가 실행될 때 add함수가 실행될 것이고, add는 버튼을 클릭했을 때 add함수가 실행되도록 한 것이다. 만약 "someButton.addEventListener('click', add());"였을 경우 오류가 발생했을 것이다.

문자열 접합

자바스크립트는 '+' 연산자를 통해 문자열 접합을 지원한다.

const num1 = 1
const num2 = '1'

num1 + num2 // 결과는 '11'

위와 같이 숫자 1과 문자열로된 '1'을 더해주면 '11'로 문자열로 합쳐지는 모습을 볼 수 있다. 하지만 이러한 문자열의 접합은 다른 연산자는 지원하지 않는다.

const string1 = 'hi'
const string2 = 'hello'

string1 - string2 // 결과는 NaN

const num1 = 2
const num2 = '2'

num1 * num2 // 결과는 4

위의 예시에서 문자열 2개를 '-' 연산자로 빼주면 NaN(Not a Number)라는 일종의 오류를 반환한다.

 

그리고 하나 더 알아야 할 점이 자바스크립트는 숫자와 문자를 '+' 외의 다른 연산자로 연산하면 문자열을 자동으로 숫자로 바꾸어 연산한다. 위에서는 곱셈으로 보여주었는데, 뺄셈, 나눗셈에도 똑같이 작동한다.

주석

자바스크립트에서 주석을 달고자 하면 아래와 같이 작성할 수 있다.

// 한 줄 주석을 작성할 수 있다.

/* 여러 줄로 된
주석을 작성할 수 있다.*/

전위 연산자와 후위 연산자

자바스크립트에서 특정 변수에 대해 값을 1씩 더해주거나 뺄 때 '++' 혹은 '--' 연산자를 사용할 수 있다. 이 연산자들을 변수의 앞에 붙이는가, 뒤에 붙이는가에 따라 차이점을 가지게 된다.

// 전위 연산자

let x = 3;
const y = ++x;

console.log(`x:${x}, y:${y}`); // x:4, y:4

// 후위 연산자

let x = 3;
const y = x++;

console.log(`x:${x}, y:${y}`); // x:4, y:3

전위 연산자의 경우 변수 x의 3에 1을 먼저 더한 후 변수 y에 할당되게 되고, 후위 연산자의 경우 변수 x가 먼저 변수 y에 할당된 이후 x에 1이 더해지게 된다. 이러한 차이가 있음을 인지하도록 하자.