[JavaScript] 변수(Variable)

프로그래밍을 하다 보면 특정 값들을 반복적으로 사용할 때가 많다. 예를 들어, 햄버거 가게에서 각 메뉴별로 가격을 관리하고, 그 값을 사용하여 주문의 총 가격을 계산해야 하는 경우를 생각해 보자.

치즈버거는 5,500원, 감자튀김은 2,500원, 콜라는 1,800원에 판매되고 있다고 가정하자. 첫 번째 주문은 치즈버거 3개였다.

console.log(5500 * 3); // 16500

코드를 실행하면 16,500원이 잘 출력된다. 하지만 두 번째 주문에서 메뉴가 다양해지면 코드가 점점 복잡해진다. 예를 들어, 치즈버거 3개, 감자튀김 1개, 콜라 2개를 주문했다고 가정해보자.

console.log(5500 * 3 + 2500 * 1 + 1800 * 2); // 치즈버거 3개, 감자튀김 1개, 콜라 2개

이 코드는 잘 작동하지만, 여기서 몇 가지 문제가 발생할 수 있다.

1. 숫자의 의미 파악하기 어려움

각 숫자가 무엇을 의미하는지 명확하지 않다. 5500이 치즈버거 가격인지, 2500이 감자튀김 가격인지, 1800이 콜라 가격인지 설명하지 않으면 다른 사람이 바로 이해하기 어렵다. 오타를 낼 위험도 높아진다.

2. 코드 유지 보수의 어려움

만약 나중에 메뉴의 가격이 바뀐다면, 코드를 일일이 수정해야 한다. 예를 들어, 치즈버거 가격이 5,800원으로 변경되었다고 하자. 이 경우, 코드의 모든 5500을 찾아서 5800으로 바꿔야 한다. 코드가 5줄이 아니라 50줄, 500줄로 길어진다면, 이 작업은 매우 비효율적이고 오류가 발생할 가능성이 크다.

이처럼 코드를 읽고 실행하는 것은 컴퓨터가 정확하게 처리해 주지만, 코드를 작성하는 일은 사람이 하기 때문에 실수를 하거나, 지나치게 주관적인 코드를 작성할 위험이 있다.

추상화를 통한 문제 해결

이런 경우에는 추상화를 통해 문제를 해결할 수 있다.
목적을 명확히하고, 불필요한 것들은 숨기며, 핵심만 드러내는 방식으로 코드를 단순화하는 것이 중요하다.

요약하자면, 반복해서 입력하는 구체적인 숫자는 오타를 만들기 쉽고, 다른 사람에게 그 숫자의 의미를 전달하기가 어렵다.

반복적으로 표현되는 공통된 숫자에 의미 있는 이름을 부여하면, 구체적인 숫자를 숨기면서도 그 숫자의 핵심적인 의미를 부여할 수 있다.

변수(variable)의 개념

프로그래밍에서 값에 이름을 부여하기 위해 변수(variable)라는 개념을 활용한다. 변수는 어떤 값을 담기 위한 이름이 붙은 상자라고 생각하면 된다. 이를 통해, 숫자 대신 의미 있는 이름을 사용해 코드를 더 읽기 쉽게 만들고, 나중에 수정할 때도 한 곳에서만 수정하면 된다.

변수 선언과 할당

JavaScript에서 변수를 사용할 때는 먼저 변수를 선언해야 한다. 변수를 선언할 때는 let이라는 키워드를 사용하고, 한 칸 띄운 후 변수 이름을 작성하면 된다.

// 변수 선언
let cheeseBurgerPrice;

위와 같이 변수를 선언한 후에는, 값을 할당할 수 있다. 이때 사용하는 기호가 바로 =이다. 하지만 중요한 점은, 프로그래밍에서의 =는 수학에서의 '같다'라는 의미와 다르다는 것이다. 프로그래밍에서의 =는 오른쪽의 값을 왼쪽 변수에 저장하는 것을 의미한다. 이를 할당 연산자라고 한다.

// 변수 선언
let cheeseBurgerPrice;
// 선언된 변수 할당
cheeseBurgerPrice = 5500;

이제 cheeseBurgerPrice라는 변수는 5,500이라는 값을 가지게 된다. 이 변수는 언제든지 값을 사용할 수 있고, 변수를 통해 코드를 더 간결하고 명확하게 만들 수 있다.

변수 선언과 할당을 동시에

변수는 선언과 동시에 값을 할당할 수도 있다. 예를 들어, 감자튀김과 콜라의 가격을 변수로 선언하고 값을 할당해보자.

// 변수 선언과 할당 동시에
let cheeseBurgerPrice = 5500;
let friesPrice = 2500;
let colaPrice = 1800;

이제 각 주문의 총 가격을 계산할 때, 숫자를 직접 입력하는 대신 변수를 사용할 수 있다. 코드는 이렇게 간결해진다.

console.log(cheeseBurgerPrice * 3); // 치즈버거 3개
console.log(cheeseBurgerPrice * 3 + friesPrice * 1 + colaPrice * 2); // 치즈버거 3개, 감자튀김 1개, 콜라 2개
console.log(friesPrice * 2 + colaPrice * 1); // 감자튀김 2개, 콜라 1개
console.log(cheeseBurgerPrice + friesPrice * 4 + colaPrice * 2); // 치즈버거 1개, 감자튀김 4개, 콜라 2개
console.log(friesPrice * 3); // 감자튀김 3개

이제 코드를 읽는 사람이 각 가격이 어떤 메뉴에 해당하는지 더 쉽게 이해할 수 있다. 또한, 나중에 가격이 바뀌더라도 한 곳에서만 변수 값을 수정하면, 모든 코드에 그 값이 반영되므로 일일이 수정할 필요가 없다.

변수를 사용한 추상화의 장점

이처럼 변수를 활용해 코드를 추상화하면, 반복적으로 구체적인 값을 입력할 때마다 잘 입력했는지 걱정할 필요가 없다. 변수 이름을 잘못 입력했더라도, 실행 시 오류가 발생해 어디서 실수했는지 쉽게 확인할 수 있다.

예를 들어, 감자튀김 가격을 실수로 잘못 입력했을 경우, 아래와 같은 상황이 발생할 수 있다.

오타 예시

let friesPrice = 2500;

console.log(friesPrice * 2); // 감자튀김 2개 -> 정상 출력: 5000
console.log(friePrice * 2); // 오타 발생 -> 오류 발생: ReferenceError: friPrice is not defined

이 경우, friePrice라는 잘못된 변수를 입력했기 때문에 실행 시 오류가 발생하며, 어디서 오류가 발생했는지 쉽게 알 수 있다. 이렇게 변수를 사용하면 오타를 쉽게 잡아낼 수 있고, 코드의 유지보수도 훨씬 쉬워진다.

만약 변수를 사용하지 않고 숫자만 반복해서 입력한다면, 실수할 확률이 훨씬 높아진다. 예를 들어, 감자튀김의 가격을 계산할 때 숫자를 잘못 입력하거나, 착각해서 잘못된 값을 넣는다면 아래와 같은 문제가 발생할 수 있다.

console.log(2500 * 2); // 감자튀김 2개 -> 정상 출력: 5000
console.log(2600 * 2); // 잘못된 입력 -> 출력: 5200 (잘못된 값)

이처럼 숫자를 직접 입력하는 경우, 실수로 잘못된 값을 넣는 것은 매우 흔한 오류다. 하지만 변수를 사용하면, 이런 오류를 줄일 수 있다. 변수 이름이 잘못 입력되었을 경우, 실행 시 오류를 바로 확인할 수 있기 때문이다.

코드의 유지보수성

변수를 사용하면 유지보수가 훨씬 용이해진다. 예를 들어, 치즈버거 가격이 5,500원에서 5,800원으로 변경되었다고 가정하자. 이때, 변수를 사용하지 않고 직접 값을 입력했다면, 코드를 일일이 찾아 수정해야 한다.

console.log(5500 * 3); // 치즈버거 3개 -> 기존 가격
// 가격 변경 시, 모든 코드에서 5500을 5800으로 수정해야 함

하지만 변수를 사용하면 cheeseBurgerPrice 변수의 값만 수정하면 된다.

cheeseBurgerPrice = 5800;

console.log(cheeseBurgerPrice * 3); // 치즈버거 3개 -> 변경된 가격 반영

정리

프로그래밍에서 변수는 값을 저장하고 관리하는 가장 기본적인 개념이다. 변수를 사용하면 코드의 가독성이 높아지고, 나중에 값이 변경되었을 때 쉽게 수정할 수 있다. 변수를 적절히 활용하면, 반복되는 숫자 입력으로 인한 오류도 줄일 수 있고, 코드의 재사용성도 높일 수 있다.

다음에 내용은 변수 선언할 때 지켜야 할 규칙과 코드 스타일 가이드를 정리할 예정이다.