Java Script 작성하기 - 변수선언, 작성하기

안녕하세요.

Hynn 입니다.

 

이번 포스팅에서는 Java Script 에서 변수선언, 그리고 JavaScript 작성에 대한 기본 방식에 대해서 설명해보도록 하겠습니다.

먼저 JavaScript 의 파일을 HTML 파일과 연결하였다면, CSS 처럼 연결이 잘 되었는지를 확인해야 합니다.

 

그 과정부터, 이제 실제 기초적인 작성부터 확인해보는 방법을 설명해보도록 하겠습니다.

 

=====================

1. JavaScript 파일 연결 확인하기.

2. 변수 이해하기

3. 선언 실습하기

======================

 

1. JavaScript 파일 연결 확인하기.

 

JavaScript 파일을 연결을 시도했다면 이제 이러한 구성으로 먼저 Visual Studio Code 에서 창을 구성하시면 작성에 도움이 됩니다. 

연결을 정상적으로 완료하고 난 뒤, Chrome 으로 실행 한 뒤, 검사를 실행합니다.

검사를 실행하고 난 뒤 네트워크 탭으로 이동하여, 새로고침을 하면 두번째 그림과 같은 화면이 나왔다면 성공입니다.

 

 

상태의 숫자가 다르게 표시될 수 는 있지만, 404와 같은 친숙한[?] 숫자가 아니라면 성공입니다.

이제 JavaScript 의 기본적인 변수선언에 대해서 알아보도록 하겠습니다.

 

2. 변수 이해하기

먼저 JavaScript 에서 가장 많이 보는 간편한 실행은 "console.log()" 입니다.

이를 통해 검사 > 콘솔에서 내가 원하는 텍스트를 출력할 수 있는지를 기본적으로 파악을 할 수 있습니다.

 

하지만, 아래에서 사용되는 예약어를 사용할 때, 선언할 변수의 명에는 2가지의 제약이 있다.

첫번째로, 변수선언은 반드시 "텍스트"로 시작해야 한다. 즉 , 1ac 로는 시작할 수 없으나, ac1 로는 시작이 가능하다.

두번째로, 당연한 이야기일 수 변수명을 예약어로 지정할 수 없다. 이는 변수와 예약어가 충돌할 수 밖에 없으니 당연한 규칙이라고 할 수 있다.

 

여기서 대표적으로 3가지의 예약어가 존재하고, 차이점에 대해서 간략하게 정리해보면 다음과 같습니다

 

예약어	설명
Var	ES6 이전에 대표적으로 사용됬지만, 거의 사용하지 않음
let	ES6 시점에서 가장 대표적으로 사용됨
const	ES6 시점에서 가장 대표적으로 사용됨

 

먼저 이 3가지의 차이점을 이해하면 보다 쉽게 이해가 가능하다.

 

2-1. 중복선언

먼저 중복선언이 가능한지에 대한 여부이다.

먼저 "Var" 은 중복선언이 가능하다. 이 중복선언이라 하면, 간단하게, 여러번의 변수를 선언하는 것이다.

 

아래의 예시를 보면, var 을 사용하여 최초에, a 는 10, b는 20이라는 값을 선언했다.

그리고 Console log 를 통해, 10, 20이 나타나도록 출력했고, 이후 동일한 a 라는 이름을 11로 변수를 선언하면, a가 이미 2개의 값으로 나뉘어 있다.

 

하지만 이 경우, 10 이후에 출력한 console.log 에서는 10, 이후에 나타나는 console.log 는 11이 출력된다.

이것을 중복선언이라고 하며, Let, Const 는 이러한 사용을 하게 될 경우, 오류메시지가 나타나고 값이 출력되지 않는다. 

 

var a = 10
var b = 20 

console.log(a)
console.log(b)

var a = 11

console.log(a)

 

이는, 오히려 중복선언이 가능함으로서, 기존의 선언된 값이 이상하게 변질될 수도있고, 여러가지 문제를 내포하고 있기 때문에, VAR의 단점으로 지적되어야 하는 점이다.

 

2-2. 재할당

재할당은, 이미 지정된 값을 다시 변경하는것을 뜻한다.

당연히 이 개념에서는 위의 이야기하는 중복선언과는 명백하게 다르며, 예시를 참고하면 아래와 같습니다.

var a = 10
a = 20
console.log(a)

let i = 10
i = 20
console.log(i)

 

위의 개념처럼, 최초 var과 let 을 사용하여, 각각 10이라는 숫자를 선언했지만, a, i 각각 20으로 재할당을 하게 될 경우, console.log 에서는 마지막으로 할당한 20이라는 숫자가 출력된다.

 

하지만 const 는 재할당을 하기 위해서는 반드시 "초기화", 즉 값 할당을 해주어야 합니다.

 

2-3. Scope (참조범위)

이 참조범위를 보다 쉽게 이해하기 위해서는, "전역변수", "지역변수" 라는 두 가지의 대한 이해가 필요하다.

"전역변수" 라는 것은, 말 그대로 JavaScript 페이지 전체에 적용되는 변수이고, "지역변수" 는 특정 구역 내에서만 적용되는 변수라고 이해하면 쉽다. 

 

즉, 지역변수로 선언된 변수는, 특정 영역(Code-Block) 안에서만 통용되고, 바깥에서는 통용되지 않는다.

이 점에서 var 과 let, const 는 큰 차이를 가지고 있다.

 

VAR - Function-Level Scope 

Function-Level 에서의 Function 은 "함수" 내부에서 선언된 변수만을 지역변수로 취급하고, 그 외에는 모두 전역변수로 취급한다.

예시문과 같이 참조해보면 도움이 됩니다.  이와 관련되어 다음 설명될 Hoisting 이라는 개념도 등장하는데, 이는 별도의 포스팅을 할 예정이다.

 

function hello(){
    var a = 1
    console.log(a) 
}
hello () <-- 실행가능
console.log(a) <-- 실행불가

Let,const - Block Level Scope 

 

하지만, Let, Const 는 Code-Block 이라고 하는 Block 단위에서 지역변수, 전역변수로의 취급이 이루어진다.

이 Code-Block 을 조금 더 쉽게 표현하자면, CSS 에서 우리는 " { } " 를 열고 속성을 부여하고, 괄호를 닫아서 하나의 속성을 완성했었다.

 

이 { } 안의 영역을 Code-Block 이라고 하며, 이는 Function-Level 과는 다르다.

 

for (let g=1 ; g < 10; g++){
    console.log(g)
}

console.log(g) <-- 실행불가

 

이 외에도 다른 점이 존재하지만, 나머지 다른점을 이해하기 위해서는, 추가적 개념에 대한 이해가 필요하므로, 이후의 포스팅에서 작성할 예정입니다.

여러분들의 이해를 돕기 위해, Google 에서 JavaScript Style Guide 에 가장 핵심적인 사항을 발췌해서 설명드리자면, 아래의 3가지로 요약이 가능하다.

 

"Decleare all local variables with either const or let. Use const by default, unless a variable needs to be reassigned. Tha bar keyword must not be used."

 

위 내용의 대한 핵심은 이것입니다.

1. 값을 재할당 할 것이 아니라면, const 를 기본으로 사용

2. 모든 변수는  const,let 을 이용

3. 절대 var 사용하지말 것.

 

사실상 가장 중요한 세줄 압축은 이 내용이 되겠네요.

 

3. 선언 실습하기 

먼저 이 선언은 위에 언급되어 있는, Let, Const 를 사용하여 변수를 선언하고. 그를 출력하는 역활을 합니다.

이제 간단한 예시와 실제 출력물을 살펴 보도록 하겠습니다.

 

위의 Style Guide 처럼, 먼저 재할당을 하지 않을 변수를 Const 를 사용하여 선언합니다.

그리고 Let 으로 몇가지를 선언해보죠.

 

 

각각의 a,b,c,d,e 라는 변수명을 입력 후 , Console.log 를 이용해 값을 호출하면, 작성자가 지정한 변수를 호출합니다.

이것이 기본적인 작성이고, 간단하게 추가한다면, 이전 포스팅에서 언급한 사칙연산자를 이용하여서 활용이 가능합니다.

 

 

각각의 사칙연산자들을 이용하면 이러한 값도 도출이 가능합니다.

먼저 첫4열은 +를 사용해 변수로 선언한 값들을 더하고 빼기를 한 결과값을 출력합니다.

 

두번째 2열은 * 을 사용하여 곱한 값으로 결과값을 출력합니다.

세번째 2열은 / 을 사용하여 나눈 값으로 결과값을 출력합니다.

 

마지막 1열은 나누고 남은 숫자가 출력되도록 결과값을 출력합니다.

 

이제 숫자가 아닌 텍스트를 출력해보도록 하겠습니다.

 

 

이전 숫자와는 다르게 나타나고, 오류가 출력됩니다. 

이 오류의 의미를 이제 이해한다면 기본 개념의 대한 준비가 완료됩니다.

 

먼저 JavaScript 에서 문자의 개념은 Type of date 라는 데이터 타입에 대한 이해가 필요하다.

이 내용은 설명이 길어지므로, 다음 포스팅에서 작성을 이어가도록 하겠습니다.