자바스크립트의 변수와 함수

마크업 언어에 속하는 HTML, CSS와 달리, 자바스크립트는 프로그래밍 언어로 분류된다. 프로그래밍 언어는 컴퓨터에게 특정 작업을 수행하도록 지시하는 명령어 집합을 작성하는 데 사용되는 언어이다. 이를 위해선 알고리즘을 이용해 함수를 정의하고 이를 동작시켜야 한다.

단, 자바스크립트는 웹브라우저에서 작동하도록 설계된 언어이기 때문에, 웹브라우저 바깥에서 동작시키기 위해서는 Node.js 등의 환경을 설정해야 한다.

정의할 수 있는 것

자바스크립트에서 정의할 수 있는 것은 변수, 함수로 나눌 수 있다.

value type vs reference type

변수는 크게 value type과 reference type으로 나뉜다. value type은 해당 값을 직접 저장한다. value type을 복사할 땐 기존 값과 독립적인 새로운 값을 복사한다. 그러나 reference type은 참조를 저장하기에 복사를 할 때도 데이터 자체가 아닌 참조가 복사된다. 이 경우, 원본 데이터를 수정하면 참조된 복사본도 함께 수정된다.

자바스크립트에서 원시 타입(number, string, boolean 등)을 제외한 모든 것은 reference type이다. 때문에 const에 할당된 것을 조작하는 것도 가능하다.

// swift
let someArray: [Int] = [1, 2, 3] // define constant array
someArray.append(4) // <<< throws compiler error

// javascript
const someArray = [1, 2, 3] // define constant array
someArray.push(4) // <<< okay

변수 정의: const, let, var

자바스크립트에서 변수를 할당할 땐 세 방법이 있다. const는 변수에 데이터를 한 번만 할당할 때 사용한다. 내용물을 위의 예처럼 변경할 순 있지만, 새롭게 할당하는 건 불가능하다.

const someArray = [1, 2, 3] // `const` allows single assign(=)
someArray.push(4) // <<< okay
someArray = [5, 6, 7, 8] // <<< throws compiler error, cannot re-assign

let을 사용하면 재할당 하는 것도 가능해진다.

let someArray = [1, 2, 3] // `let` allows multiple assign(=)
someArray = [5, 6, 7, 8] // <<< okay

var은 let처럼 재할당을 가능케 한다. 단, var의 문제를 해결하려 let을 새로 만든 만큼, 최근 자바스크립트에서는 변수 정의를 할 때 var보다 let을 사용할 것이 권장된다.

함수의 정의와 호출

자바스크립트에서의 함수 정의는 아래의 형식을 따른다.

function 함수이름(안에들어가는것1, 안에들어가는것2) {
 	...
	return 리턴값
}

여기서 안에 들어가는 것을 "파라미터"라고 부른다. 함수 정의와 호출(사용)의 예를 보자.

funcion addTwoNumbers(num1, num2) {
  const result = num1 + num2
  return result
}

// 위 함수를 호출(사용, call)할 땐
const result = addTwoNumbers(5, 9)
console.log(result) // <<< it will prints `14`

구구단 함수 만들기

구구단 함수는 두 가지 기능을 수행해야 한다.
1. 몇 단인지를 확인한다.
2. 해당 단의 9가지 결과를 순서대로 출력한다.