Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

자바스크립트에서 변수란 무엇이고, 어떻게 활용할까?

자바스크립트에서 변수(Variable)란?

자바스크립트를 비롯한 대부분의 프로그래밍 언어에서 변수는 값을 참조(reference)하기 위해 저장해 두는 일종의 컨테이너입니다. 필요할 때 언제든 꺼내서 다양하게 활용할 수 있죠. 여기서 '값'이라면 문자열(텍스트)부터 숫자, 함수, 심지어 다른 변수까지 거의 모든 것이 해당됩니다.

몇 가지 예시를 살펴볼까요?

  • 문자열 값: let name = 'James'
  • 숫자 값: let amount = 100
  • 함수 값: let myFunction = function() {}
  • 변수 값: let fullName = firstName + lastName

예를 들어, 나중에 접근해서 여러 작업을 하고 싶은 '사람 목록'에 대한 참조를 저장하고 싶다고 가정해 봅시다.

// 사람 목록(배열)을 peopleList 변수에 할당
let peopleList = ['Arnold', 'Linda', 'Sylvester', 'Dolph']

// 리스트 출력
console.log(peopleList)

이제 매번 전체 목록을 다시 입력할 필요 없이, 사람 목록(배열)을 가리키는 peopleList 변수만 참조하면 언제든 목록에 접근하고 조작할 수 있습니다.

코드의 구성 요소

위 코드는 크게 3가지 요소로 이루어져 있습니다.

  • peopleList라는 이름의 참조 변수
  • 할당 연산자: =
  • 문자열 값으로 이루어진 배열(리스트): ['Arnold', 'Linda', 'Sylvester', 'Dolph']

할당 연산자(=)는 왼쪽의 변수 이름과 오른쪽의 값(숫자, 문자열, 함수, 변수 등)을 연결해 주는 접착제라고 생각하면 이해하기 쉽습니다.

사람 목록으로 무엇을 할 수 있을까?

활용 방법은 정말 다양합니다. 프로그래밍에서 가장 기본이 되는 작업 중 하나가 바로 CRUD 연산인데, 이를 통해 변수 활용법을 익혀보겠습니다.

  • Create (생성)
  • Read (읽기)
  • Update (수정)
  • Delete (삭제)

Create — 생성

생성은 앞서 사람 목록을 만들 때 이미 해봤습니다. 변수에 새로운 값을 할당하는 것이 곧 생성입니다.

Read — 읽기

읽기는 말 그대로 저장된 값을 가져오는 것입니다. 위에서 만든 peopleList를 가져와 보겠습니다. console.log() 외에도 alert 팝업 창으로 목록을 표시할 수 있습니다.

// 팝업 창으로 사람 목록 가져오기
alert(peopleList)

목록에서 첫 번째 사람의 값만 읽어오고 싶다면 인덱스를 활용하면 됩니다.

// 사람 목록에서 첫 번째 사람 가져오기
console.log(peopleList[0])

// Arnold 출력

참고: 자바스크립트에서 배열(리스트)은 제로 베이스(zero-based)입니다. 즉, 0부터 세기 시작하므로 0이 첫 번째, 1이 두 번째 항목을 의미합니다. 그렇기 때문에 [0]을 사용하면 배열의 첫 번째 항목인 Arnold가 출력되는 것이죠.

Update — 수정

수정은 기존 값을 변경하는 것을 의미합니다. Sylvester를 Keanu로 바꾸고 결과를 확인해 보겠습니다.

let peopleList = ['Arnold', 'Linda', 'Sylvester', 'Dolph']

peopleList[2] = 'Keanu'

console.log(peopleList)

// 결과: ["Arnold", "Linda", "Keanu", "Dolph"]

Delete — 삭제

삭제는 상상하는 그대로 항목을 제거하는 작업입니다. 사람 목록에서 Arnold를 제거해 보겠습니다. (위 코드를 재활용합니다.)

let peopleList = ['Arnold', 'Linda', 'Sylvester', 'Dolph']

peopleList[2] = 'Keanu'

// 배열의 첫 번째 항목(Arnold) 제거
peopleList.shift()

// 결과: ["Linda", "Keanu", "Dolph"]

배열의 마지막 항목을 제거하고 싶다면 shift() 대신 pop()을 사용하면 됩니다.

마무리하며

물론 지금 살펴본 내용은 자바스크립트 변수의 극히 일부에 불과합니다. 하지만 변수가 어떤 용도로 쓰이는지, 그리고 얼마나 유연하게 활용될 수 있는지 감을 잡기에는 충분합니다. 이 기본기를 바탕으로 더 깊이 있는 자바스크립트 학습을 이어가 보세요!