[JS-기초편] 2.변수(variable)와 값(value)

코딩/Javascript

[JS-기초편] 2.변수(variable)와 값(value)

드리프트 2020. 12. 14. 10:52

728x170

JavaScript에서는 우리가 제공하거나 사용하는 모든 데이터는 값을 포함하는 것으로 간주됩니다.

1편에서 배운 아래 예제에서는 "hello, world!"라는 텍스트 값이 "alert" 함수에 전달하는 값을 포함하는 데이터입니다.

alert("hello, world!");

JavaScript에게 이러한 단어는 표면 아래에 특정 표현이 있습니다.

그것들은 값(value)으로 간주됩니다.

우리가 그 단어를 입력 할 때 그것에 대해 많이 생각하지 않았을 수도 있지만 JavaScript 세계에서는 모든 데이터가 값(value)으로 간주됩니다.

자, 왜 이것이 중요할까요?

앞으로 자바스크립트에서 우리는 값(value)를 많이 다룰 것이기 때문에 중요합니다.

실수만 하지 않는다면 자바스크립에서 값(value)과 함께 일하는 것은 좋은 일입니다.

값(value)을 가지고 작업할때 두 가지 명심해야할 것이 있습니다.

쉽게 식별가능

값(value) 자체를 불필요하게 복제하지 않고 프로그램 전체에서 재사용

이 두 가지는 우리가 나머지 시간을 할애 할 변수(variable)에 의해 쉽게 제공됩니다.

본격적으로 변수(variable)에 대해 알아 볼까요?

변수(Variables) 사용

변수(variable)는 값의 식별자입니다.

"hello, world!"를 입력하는 대신 애플리케이션에서 해당 문구를 사용하고 싶을 때마다 해당 문구를 변수에 할당하고 "hello, world!"를 사용해야 할 때마다 해당 변수를 사용할 수 있습니다.

잠시 후에 더 알아봅시다.

변수(variable)를 사용하는 방법에는 여러 가지가 있습니다.

대부분의 경우 가장 좋은 방법은 let 키워드 다음에 변수(variable)에 지정하려는 이름을 쓰는 겁니다.

let myText

위 코드에서 myText라는 변수(variable)를 선언합니다.

현재 상태는 단순히 변수(variable)만 선언되었습니다.

값(value)을 포함하지 않았습니다.

단지 빈 껍데기일뿐 입니다.

변수(variable)를 "hello, world!" 값(value)으로 초기화 봅시다.

let myText = "hello, world!";

이 시점에서 이 코드가 실행되면 myText 변수의 값은 "hello, world!"입니다.

실제 예제에 써 보겠습니다.

이전에 hello_world.html이 열려 있는 경우 script 태그의 내용을 다음으로 바꾸거나 새 HTML 파일을 만들고 다음 내용을 추가합니다.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Hello World!</title>

  <style>

  </style>
</head>

<body>
  <script>
    let myText = "hello, world!";
    alert(myText);
  </script>
</body>

</html>

더이상 "alert"함수에 "hello, world!" 텍스트를 직접 전달하지 않습니다.

대신, 이름이 myText라는 변수를 대신 전달합니다.

최종 결과는 동일합니다.

이 스크립트가 실행되면 1편에서 처럼 "hello, world!"라는 경고창이 뜰겁니다.

이 변화는 우리 코드에서 "hello, world!"가 변수에 지정되었다는 겁니다.

"hello, world!"를 다른 문구로 바꾸고 싶다면 우리는 이제 myText라는 변수만 바꾸면 됩니다.

let myText = "Hi, Javascript!";
alert(myText);

코드 전체에서 myText라는 변수를 참조만 한다면 위의 텍스트가 나타날겁니다.

코드가 길어지고 애플리케이션이 커질때 위에서 처럼 myText라는 변수만 바꿔도 코드 전체에 고루 적용된다는 것은 시간 낭비를 막을 수 있습니다.

앞으로 값(value)과 변수(variable)에 대해 좀 더 알아 봅시다.

변수 관련 사항

이전 섹션에서 배운 내용은 꽤 중요한 내용입니다.

적어도 자바스크립트를 코딩할때 좀더 익숙해 질것입니다.

여기서는 변수에 대해 너무 깊이 들어 가지 않을 것입니다.

코드가 더 복잡하고 변수의 중요성이 더 분명한 향후에 알아 볼 것이기 때문입니다.

변수 이름 정하기

변수 이름을 지정하는 데 많은 자유가 있습니다.

많은 자유가 있더라도 변수 이름을 정할 때 다음 사항을 염두에 두여야 합니다.

변수는 한 문자 만큼 짧을 수도 있고 원하는 만큼 길 수도 있습니다. 수천, 수천, 수천 개의 문자를 생각해보십시오.
변수는 문자, 밑줄(_) 또는 $ 문자로 시작할 수 있습니다. 숫자로 시작할 수 없습니다.
첫 번째 문자 외에 변수는 문자, 밑줄(_), 숫자 및 $ 문자의 조합으로 구성 될 수 있습니다. 또한 소문자와 대문자를 우리 마음대로 쓸 수 있습니다.
스페이스(빈 공간)은 허용 안됩니다.

다음은 유효한 변수 이름의 몇 가지 예입니다.

let myText;
let $;
let r8;
let _counter;
let $field;
let thisIsALongVariableName_butItCouldBeLonger;
let __$abc;
let OldSchoolNamingScheme;

자바스크립트 변수가 맞게 설정됐는지 확인해보는 재밌는 사이트가 있습니다.

https://mothereff.in/js-variables

변수가 유효하다고 괜찮다고 생각만 할게 아니라 보통 많은 프로그래머가 사용하는 규칙 같은게 있습니다.

나중에 좀 더 알아 보겠습니다.

변수 선언 및 초기화에 대한 추가 정보

자바스크립트에 대해 배우게 될 것 중 하나는 자바스크립트가 매우 관대하고 작업하기 쉽다는 것입니다.

변수 선언은 선택 사항입니다.

예를 들어 변수를 선언하기 위해 let 키워드를 사용할 필요가 없습니다.

다음과 같이 할 수 있습니다.

myText = "hello, world!";
alert(myText);

myText 변수는 var 나 let 키워드로 공식적으로 선언되지 않고 사용됩니다.

권장하지는 않지만 완전히 괜찮습니다.

최종 결과는 myText라는 변수가 있다는 것입니다.

이런 식으로 변수를 선언하면 변수를 전역적(global)으로 선언한다는 것입니다.

걱정하지 마십시오.

변수 스코프(variable scope)에 대해 이야기 할 때 전역적으로 선언하는 의미를 살펴 보겠습니다.

변수를 만들때 별도의 라인에서 선언하고 초기화하는 것이 좋습니다.

변수의 선언과 초기화가 동일한 라인에서의 이루어질 필요는 없습니다.

여러 문장으로 나눌 수 있습니다.

let myText;
myText = "hello, world!";
alert(myText);

실제로 우리는 항상 변수의 선언과 초기화를 따로 하게 될겁니다.

변수 값 변경 및 const 키워드

마지막으로 let을 통해 선언 된 변수의 값을 원할 때마다 원하는대로 변경할 수 있습니다.

let myText;
myText = "hello, world!";
myText = 99;
myText = 4 * 10;
myText = true;
myText = undefined;
alert(myText);

더 엄격한 언어로 작업한 경험이 있고 변수가 다양한 데이터 타입을 저장하는 것을 허용하지 않는 경우, 위 코드처럼 자바스크립트의 관대함이 자바스크립트를 싫어하는 원인이 될 수 도 있습니다.

그러나, const 키워드는 JavaScript에서 초기화 후 변수 값이 변경되지 않도록 제한합니다.

const siteURL = "https://www.google.com";
alert(siteURL);

const를 사용하면 위 코드처럼 siteURL의 값을 "https://www.google.com"이 아닌 다른 값으로 변경할 수 없습니다.

변경할려고 하면 자바스크립트가 에러를 내놓을 겁니다.

const 키워드를 사용하는데 몇가지 문제가 있지만, 실수로 변수를 수정하는 것을 방지하는데 전반적으로 큰 역할을 합니다.

결론

지금까지 변수 선언 및 사용하는 방법에 대해 알아보았습니다.

다음편은 함수에 대해 알아 보겠습니다.

그리드형

'코딩 > Javascript' 카테고리의 다른 글

[JS-기초편] 4.조건문 (If, Else, Switch) (0)	2020.12.14
[JS-기초편] 3.함수(Function) (0)	2020.12.14
[JS-기초편] 1.소개 (0)	2020.12.13
자바스크립트 웹 스크래핑 맛보기 - 2편 (0)	2020.12.13
자바스크립트 웹 스크래핑 맛보기 (0)	2020.12.12

현재글[JS-기초편] 2.변수(variable)와 값(value)

드리프트의 코-자-경(코딩, 자동차, 경제)