온보딩 공부

Variables란?

개발자 오오 2023. 3. 31. 06:06

안녕하세요~ 요즘 날씨가 따뜻해지고 벚꽃이 길거리에 많이 피었더라구요?! 저는 번아웃을 겪어서 좀 쉬었습니다..! 

지금이라도 의지를 불태워 가지고 열심히 개발공부를 해보겠습니다.(얼마나 갈지는 모르지만..ㅎㅎ)

Variables는 '변수'입니다.

 

1. 변수의 사용

다음은 자기소개 문구의 예시입니다.

  • "제 이름은 김개발입니다."
  • "제 직업은 개발자입니다."

제 이름은 무엇이고, 직업은 무엇인가요?
위에서 소개한 대로, 제 이름은 '김개발'이고 제 직업은 '개발자'입니다.

이처럼 우리는 어떤 정보에 대해 특정 명칭으로 부르곤 합니다.
컴퓨터도 사람과 같이 많은 데이터를 기억해 두었다가 필요할 때마다 꺼내어 사용해야 하는데, 이때 변수라는 개념을 사용합니다.

 

2. 변수의 생성 (선언) & 변수 값 할당

프로그래밍을 하기 위해서는 다양한 값을 다뤄야 하고, 그 값들은 각각의 변수에 저장되어 사용됩니다. "이름", "직업"과 같은 역할을 하는 것을 변수(variable)라고 하며, "김개발", "개발자"와 같은 값은 값(value)이라고 합니다. JavaScript 에서 변수를 선언하고 값을 할당하는 방법은 다음과 같습니다.

 

var name = "김개발";

var job = "developer";

 

  • name, job은 변수 입니다.
  • 김개발은 name이라는 변수에 할당된 값입니다.
  • developer는 job이라는 변수에 할당된 값입니다.

var 키워드를 사용해서 name이라는 변수를 선언하고, 동시에 “김개발”이라는 값을 할당했습니다. 이제 여러분이 제 이름 → "김개발" 임을 알 수 있듯이, 자바스크립트도 name → "김개발"이라고 알 수 있게 되었습니다.

 

3. 변수 이름 정하기

위에서 사용한 변수명인 name과 job은 제가 마음대로 정한 이름입니다. myName 과 fullName이라는 변수를 만들어 보도록 하겠습니다.

var myName = "김개발";

var fullName = "김개발";

 

이처럼 변수 이름은 원하는 대로 정할 수 있지만 몇 가지 주의할 점이 있습니다.

변수 이름 생성 시 주의 사항 (naming convention)

  • 한 파일에서 같은 변수 이름을 중복해서 사용할 수 없습니다.
  • 대소문자 구문 - 변수이름, 함수이름, 연산자 모두 대소문자를 구분합니다. 따라서 myName과 MyName은 다른 변수입니다.
  • 변수 이름을 정할 때, 첫 번째 문자는 반드시 글자나 밑줄(_), 달러기호($)중 하나입니다.
  • function, const와 같이 자바스크립트 내에서 특정 의미를 가지고 사용하는 예약어는 변수로 사용할 수 없습니다.

 

4. cf. camelCase vs. snake_case

1) camelCase

  • 단어 전체적으로 소문자를 사용하지만, 맨 첫 글자를 제외한 각 합성어의 첫 글자만 대문자로 표기합니다.
  • camelCase는 낙타를 의미하는 "camel"이라는 영어 단어에서 유추하실 수 있듯이 변수 생김새가 낙타의 등처럼 울퉁불퉁합니다.

✔️ 참고 예시:

  • myProfileImg
  • toDoListArray

2) snake_case

  • camelCase 이외에 snake_case라는 표현법도 있습니다. snake_case란 변수의 형태가 뱀과 닮았다고 하여 붙여진 이름입니다.
  • 소문자를 사용하며, 각 합성어를 언더바('_')로 연결하는 방식으로 표기합니다.

✔️ 참고 예시:

  • my_profile_img
  • to_do_list_array

 

5. cf. 의미가 추측 가능한 변수명

어떤 개발자들은 직접 로직을 구현하는 시간보다 변수명을 고르는데 시간과 노력을 더욱 많이 들인다고 말하기도 합니다. 고민의 시간을 덜어주기 위해 변수명을 지어주는 사이트가 있을 정도입니다. 변수명 짓기는 왜 중요한 걸까요? 아래와 같이 크게 두 가지 이유가 있습니다.

  1. 다른 개발자, 혹은 먼 훗날의 자기 자신이 이 코드를 더욱 쉽게 이해할 수 있습니다. (코드의 가독성)
  2. 커뮤니케이션에 들어갈 리소스를 줄일 수 있어 개발의 효율이 높아지게 됩니다. (유지보수 용이)

따라서 변수명을 지을 때는 모호하지 않고, 변수명 만으로도 의미가 추측 가능할 수 있도록 노력해야 합니다. 아래 코드의 변수명을 보면 x, asvasefsefwefwe로 설정이 되어 있습니다. 이와 같이 사용해도 코드는 동작하지만, 해당 코드를 접하게 되는 다른 사람뿐만 아니라 코드 작성자 자신도 추후에 이해할 수 없는 변수명이기 때문에 적절하지 못한 변수명입니다.

const x = "javascript";

const asvasefsefwefwe = "자바스크립트";

 

 

6. let, const

앞서 변수를 소개하면서 변수 앞에 var 키워드를 사용했습니다. 기존에 JavaScript의 변수 선언은 var 키워드를 통해서만 가능했는데, ES6 버전에서 var 키워드의 여러 문제점들을 보완한 let과 const 키워드가 추가되어 var 키워드는 거의 사용하지 않게 되었습니다. 두 키워드를 활용한 변수의 선언과 할당 방법은 var와 같습니다.

let name = "wecode";

const birthday = 19910223;

 

let vs const

  • let 키워드를 사용하면 변수 값을 수정할 수 있습니다.
  • const 키워드를 사용한 변수 값은 수정할 수 없습니다.

→ 즉, 사용하고자 할 변수가 재할당되지 않는 상수라면 const를, 추후에 재할당이 되는 변수라면 let을 사용하면 됩니다. 물론 두 개 구분할 필요 없이 var를 쓸 수는 있겠지만, 보통 어느 정도 안정화가 된 최신 버전에 맞는 문법을 사용하는 게 권장됩니다.

 

7. 변수 값 수정

위에서 var, let, const 키워드를 사용하여 변수를 선언하고, 그 변수에 값을 할당하는 것도 배웠습니다. 이번에는 변수에 할당된 값을 수정하는 방법에 대해 알아보겠습니다.

const 키워드를 사용한 변수의 값은 수정할 수 없으며, var 키워드는 사용을 지양해야 하는 키워드입니다. 따라서 let 키워드를 사용해 변수의 값을 수정해 보도록 하겠습니다.

let 키워드는 변수를 새로 생성할 때만 사용됩니다. 값을 수정할 때는 변수 앞에 let 키워드를 사용하지 않습니다. 다음과 같은 방법으로 변수명에 새로운 값을 할당할 수 있습니다.

(이미 선언해 둔) 변수명 = 새로운 값;

 

몇 가지 예시를 살펴보겠습니다.

let name = "김개발";

let job = "developer";

 

name = "김코딩";

job = "코더";

 

  • 첫 두줄에서는 name, job이라는 변수를 선언하고 각각 "김개발", "developer"라는 초기값을 할당하고 있습니다.
  • 아래 두 줄에서는 name, job 변수에 새로운 값을 할당하고 있습니다.
  • 값을 수정할 때는 첫 두 줄의 코드와 달리 let 키워드가 없이 변수 이름만 있는 것을 확인할 수 있습니다.
  • 하지만 위에 언급한 것처럼 const 키워드로 선언한 변수는 값을 바꿀 수 없습니다.
  • 아래는 오류가 있는 코드이며 아래 내용을 실행 시 다음의 에러가 발생할 것입니다.

const name = "김개발";

name = "김코딩";

 

Uncaught TypeError: Assignment to constant variable.

 

8. 변수의 생성 vs. 변수의 수정

let name = "김개발";

let name = "김코딩";

 

  • let 키워드의 역할은 변수를 "생성"하는 것입니다.
  • 위의 코드는 name이라는 변수의 값을 변경한 것이 아니라 name 이라는 변수를 두 번 생성한 것입니다.
  • 같은 변수 이름을 중복해서 쓰면 안 됩니다.
  • 만약 위와 같이 작성하면 아래와 같은 에러가 발생합니다.

Uncaught SyntaxError: Identifier 'name' has already been declared

 

9. 변수의 선언(declare) vs. 변수 값 할당(assign)

  • 변수의 선언과 할당은 분리될 수도 있습니다.
  • 즉, 선언과 할당을 위 예제들처럼 동시에 할 수도 있지만, 선언만 하고 값의 할당은 그 후에 할 수도 있다는 뜻입니다.
  • 아래는 변수의 선언과 할당을 분리한 예시입니다.

let address;

address = "선릉";

 

  • address라는 변수를 선언하고, 그 다음 줄에서 "선릉" 이라는 값이 할당되었습니다.
  • 만약 값의 할당 없이 선언만 한다면 address 라는 변수는 어떤 값이 나올까요? 직접 확인해 보세요!

let address;

console.log('address : ', address);

 

address = "선릉";

console.log('address : ', address);

 

  • 변수명은 중복이 되면 안 된다고 하는데, 값의 중복은 가능할까요?

let company1address = "선릉";

let company2address = "선릉";

let company3address = "강남";

let company4address = "강남";

let company5address = "선릉";

company5address = "선릉";

 

  • 물론 가능합니다. 변수 이름은 중복되면 안 되지만, 값은 얼마든지 중복 가능합니다.

참고자료 : wecode,

http://www.tcpschool.com/c/c_datatype_variable

저작자표시 비영리 변경금지 (새창열림)