초보자를 위한 자바스크립트 변수 다루기 예제

오늘은 자바스크립트 초보자분들을 대상으로, 변수를 다루는 방법에 대해서 자세히 설명해드리겠습니다.

자바스크립트에서 변수를 다루는 방법은 매우 중요합니다. 변수는 우리가 값을 저장하고 조작할 수 있는 수단입니다. 자바스크립트에서 변수는 var, let, const 세 가지 키워드를 사용하여 선언할 수 있습니다.

var는 예전부터 사용해왔던 키워드입니다. 하지만 var는 블록 스코프를 지원하지 않아서 전역 변수로 선언되어 문제가 생길 수 있습니다. 그래서 최근에는 let과 const 키워드를 많이 사용합니다.

let과 const는 블록 스코프를 지원합니다. 즉, 변수를 선언한 블록 내에서만 사용할 수 있습니다. let은 변수를 선언한 이후에 값을 변경할 수 있지만, const는 변수를 선언하면서 값을 할당해야 하며 이후에는 값을 변경할 수 없습니다.

예제를 통해 자세히 알아보겠습니다. 다음은 변수를 선언하고 값을 할당하는 예제입니다.

 

자바스크립트 변수 할당 방법 모음

 

변수를 선언할 때 변수 이름은 유의미하게 지어야 합니다. 변수 이름은 camelCase 표기법을 사용하며, 첫 번째 단어는 소문자로 시작하고 다음 단어부터는 첫 문자를 대문자로 적습니다. 이렇게 변수 이름을 지으면 가독성이 좋아지고, 변수의 용도를 쉽게 파악할 수 있습니다.

예를 들어, 다음과 같이 나이를 저장하는 변수를 선언할 때 이름을 지을 수 있습니다.

let userAge = 30;

변수를 다루는 또 다른 방법은 변수의 스코프입니다. 스코프란 변수가 선언된 영역을 의미합니다. 스코프는 전역 스코프와 지역 스코프로 나뉩니다.

전역 스코프는 함수 바깥에서 선언된 변수로, 어디서든 접근할 수 있습니다. 이렇게 전역 스코프에서 변수를 선언하면 코드의 복잡도가 증가하고 변수 이름이 충돌할 가능성이 있습니다. 따라서 변수는 전역 스코프에서 선언하지 않는 것이 좋습니다.

지역 스코프는 함수 내부에서 선언된 변수로, 함수 바깥에서는 접근할 수 없습니다. 이렇게 지역 스코프에서 변수를 선언하면 변수 이름이 충돌하지 않고, 함수 내부에서만 사용할 수 있습니다.

예제를 통해 자세히 알아보겠습니다. 다음은 전역 스코프와 지역 스코프에서 변수를 다루는 예제입니다.

 

// 전역 스코프에서 변수를 선언
var globalVariable = "Global Variable";

function testFunction() {
  // 지역 스코프에서 변수를 선언
  var localVariable = "Local Variable";

  console.log(globalVariable);
  console.log(localVariable);
}

testFunction(); // 결과: Global Variable, Local Variable

console.log(globalVariable);
console.log(localVariable); // Uncaught ReferenceError: localVariable is not defined 이라는 에러가 나옵니다.

 

전역 스코프에서 선언된 변수는 함수 내부에서도 접근할 수 있습니다. 하지만 함수 내부에서 선언된 변수는 함수 외부에서는 접근할 수 없습니다.

변수를 다루는 또 다른 방법은 변수의 타입입니다. 자바스크립트에서 변수는 동적 타입 언어이기 때문에 변수를 선언할 때 타입을 지정하지 않아도 됩니다.

예제를 통해 자세히 알아보겠습니다. 다음은 변수의 타입을 다루는 예제입니다.

// 변수의 타입을 알아보는 예제
var variable1 = 10;
var variable2 = "Hello World!";
var variable3 = true;

console.log(typeof variable1); // 결과: number
console.log(typeof variable2); // 결과: string
console.log(typeof variable3); // 결과: boolean

자바스크립트에서는 typeof 연산자를 사용하여 변수의 타입을 알아낼 수 있습니다. 변수의 타입에 따라 연산을 수행할 수 있는지 여부를 판단할 수 있습니다.

자바스크립트에서 변수를 다루는 방법은 매우 다양합니다. 이번 포스트에서는 변수의 선언과 스코프, 타입에 대해서 알아보았습니다. 변수를 다룰 때는 변수 이름을 유의미하게 지어서 가독성을 높이고, 전역 스코프에서 변수 선언하지 않는 것이 좋으며, 변수의 타입을 잘 파악하여 코드를 작성하는 것이 중요합니다.

또한, 변수의 스코프를 잘 파악하여 변수 이름 충돌을 방지하고, 변수의 영역을 제한하는 것도 중요합니다. 변수의 스코프를 파악하지 못하면 의도하지 않은 결과가 발생할 수 있기 때문입니다.

이상으로 자바스크립트에서 변수를 다루는 방법에 대해서 알아보았습니다. 변수를 잘 활용하여 보다 효율적이고 안정적인 코드를 작성할 수 있도록 노력해봅시다!

 

참고로 변수를 할당할 때 사용하는 let, const, var 의 차이점과 언제 쓰면 좋은지 등은 아래 잘 정리해둔 블로그 글이 있으니까 꼭! 참조해보세요!!

 

2023.02.21 - [IT/JavaScript] - 자바스크립트 let, var, const 장단점, 차이점, 쓰는 곳

자바스크립트 let, var, const 장단점, 차이점, 쓰는 곳