Javascript | 변수와 데이터 타입

Jae ·2021년 7월 19일
0

Javascript

목록 보기
1/14
post-thumbnail

✅ Achievement Goals

변수 (Variable)

  • 프로그래밍은 데이터 처리를 하는 것임을 이해한다.
  • 변수 사용은 데이터를 편리하게 저장하고 꺼내 쓰는 것임을 이해한다.
  • 변수의 선언과 값의 할당에 대해서 설명하고 코드로 작성할 수 있다.
  • 값으로 변환된 표현문이 변수에 할당되어 담기는 과정을 설명할 수 있어야 한다.
  • 자바스크립트에서 변수의 선언과 값의 할당에 대해서 설명할 수 있다.
  • 변수 선언과 값 할당에 사용되는 용어에 대해서 정확하게 알 수 있다.
  • =이 "같다"라는 의미가 아니라 할당연산자임을 이해할 수 있다.
  • num = num + 1이 "같다"라는 의미가 아니라 값을 할당하는 것임을 설명할 수 있다.

데이터 타입 (Data type)

  • 자바스크립트에서 원시 자료형과 참조 자료형이 무엇인지 알 수 있다.
  • 원시 자료형 string, number, boolean, undefined의 의미를 이해할 수 있다.
  • 타입마다 다른 속성과 메소드가 있다는 것을 이해할 수 있다.
  • typeof 를 활용하여 특정 값의 타입을 확인할 수 있다.
  • 비교 시 엄밀한 비교( === 과 !== )의 필요성을 이해할 수 있다.

변수 (Variable)

  • 변수값의 위치(주소)를 기억하는 저장소이다. 여기서 값의 위치는 값이 위치하고 있는 메모리 상의 주소(address) 를 의미한다. 다시 말해 변수란 값이 위치하고 있는 메모리 주소에 접근하기 위해서 일시적으로 명명한 식별자(identifier)이다.

  • 변수는 프로그램에서 사용되는 데이터를 일정 기간 동안 저장하여 필요한 때에 다시 사용하기 위해 데이터에 고유 이름인 식별자(identifier)로 나타낸 것이다. 변수에 명명한 고유한 식별자변수명이라 하고 변수로 참조할 수 있는 데이터변수값이라 한다.

  • 식별자(identifier)란?
    어떠한 값이나 다른 코드의 일부분을 담거나 참조할 수 있는 수단이다. let 변수, const 상수, function 함수명 혹은 특정 코드루프에 대한 레이블을 생성 및 지정하기 위해 자료형(data type)이나 자료저장 메커니즘과 함께 혹은 독단적으로 사용하는 텍스트를 칭한다.
  • 변수는 var , let , const 키워드를 사용하여 선언하고 할당 연산자를 사용해 값을 할당한다. 그리고 식별자인 변수명을 사용해 변수에 저장된 값을 참조한다.

변수의 사용


1) 선언(declaration)

선언이란 데이터를 보관하기 위한 어떤 공간을 마련 하는 것이다. 비유를 하자면 우리가 어떤 물건을 수납 하기 위해서 수납장(데이터공간)을 하나 마련하거나, 어떤 음식을 담기 위해서 그릇(데이터공간)을 준비한다. 라고 생각하면 좋겠다. 이런 행위를 선언(declaration)이라고 한다.

// 아래는 myname 그리고 age라는 이름을 가진 변수를 생성(선언) 한 것이다.
let myname;
let age;

2) 할당(assignment)

데이터를 보관할 공간을 마련 했다면 이곳에 넣고 싶은 데이터를 입력해서 저장할 수 있다. 데이터를 입력하는 것. 이것을 할당(assignment)이라고 한다. 수납장이 하나 있다면 이제 물건을 넣어서 보관할 수 있고, 그릇이 있다면 어떤 음식이나 반찬을 담을 수 있다. 이처럼 무엇인가를 보관하고 담는다는 것이다. 즉 데이터를 저장한다는 의미로 생각할 수 있다.

아래의 예시에서 보이는 할당 연산자(=)가 자칫 '같다'라는 의미로 착각될 수 있다. 그것이 아니라 각각 myname, age라는 이름으로 선언된 변수'jae', 25라는 값을 할당한 것이다.

// 할당(assignment)은 "같다"라는 의미가 아니다. 
// age라는 이름의 변수(보관함)를 선언하고 이 변수에 25 라는 숫자, myname이라는 보관함에 
// 'Jae'라는 값을 대입(assgin)한 것이다.

let myname'
let age;
myname = 'Jae';
age = 25;

3) 선언과 할당을 동시에

// 아래와 같이 변수 선언과 값 할당을 한 줄에 작성할 수도 있다.
let name = 'kim';
let myname = 'Jae';

4) 표현식의 평가(Evaluation of expressions)

아래의 개발자 도구창에 보이는 것처럼 코드의 각 한 줄을 표현식이라고 부른다. 그리고 이 표현식이 무엇을 의미하는지 알아내는 과정평가(evaluation)라고 한다.

5) 변수 명명 규칙

자바스크립트에선 변수 명명 시 몇 가지 주의할 점이 있다.

  • 변수명에는 오직 문자와 숫자, 그리고 기호 $와 _만 들어갈 수 있다.
  • 첫 글자는 숫자가 될 수 없다.
  • 대·소문자 구별
    apple와 AppLE은 서로 다른 변수다.
  • use strict 사용하기
    변수는 대개 정의되어 있어야 사용할 수 있다. 하지만 예전에는 let 없이도 단순하게 값을 할당해 변수를 생성하는 것이 가능했는데, use strict를 쓰지 않으면 과거 스크립트와의 호환성을 유지할 수 있기 때문에 여전히 이 방식을 사용할 수 있다.
num = 5; 
// 변수 'num'이 정의되어있지 않더라도, 단순 할당만으로 변수가 생성된다.

alert(num); // 5

위의 예시처럼 변수를 생성하는 것은 나쁜 관습이다. 엄격 모드에서는 에러를 발생시키기 때문이다.

"use strict";
num = 5; // error: num is not defined
  • 할당이 없는 변수
    선언만 하고 할당이 없다면 아래처럼 myname에는 undefined로 뜬다.

데이터 타입 (Data type)


  • 데이터 타입은 프로그래밍 언어에서 사용할 수 있는 데이터 : number(숫자), string(문자열), boolean(참 or 거짓) 등 의 종류를 말한다.
  • 자바스크립트의 모든 값은 데이터 타입을 갖는다. ECMAScript 표준(ECMAScript 2015 (6th Edition), 이하 ES6)은 8개의 데이터 타입을 제공한다.

원시 타입 (primitive data type)

원시 타입의 값은 변경 불가능한 값(immutable value)이며 pass-by-value(값에 의한 전달) 이다.

  • pass-by-value(값에 의한 전달)이란?
    원시 타입은 값(value)으로 전달된다. 즉, 값이 복사되어 전달된다. 원시 타입은 값이 한번 정해지면 변경할 수 없는 (immutable) 속성을 갖고 있다. 또한 원시 타입은 런타임(변수 할당 시점)에 고정된 메모리 영역을 차지하고 저장된다.
// Pass-by-value
var a = 100;
var b = a;

console.log(a, b);    // 100  100
console.log(a === b); // true

a = 10;
console.log(a, b);    // 1  10
console.log(a === b); // false

위의 코드는 원시 타입의 immutable한 속성을 보여주는 예시다. 변수 a는 원시 타입인 number 타입 100 을 저장하고 있다. 원시 타입의 경우 참조 타입으로 저장되는 것이 아니라 값 자체가 저장되게 된다. 변수 b에 변수 a를 할당할 경우, 변수 a의 값 100은 복사되어 변수 b에 저장된다.

원시 타입의 종류

① number
② Bigint
③ string
④ boolean
⑤ null
⑥ undefined
⑦ object
⑧ symbol

① number

숫자형(number type)은 정수 및 부동소수점 숫자(floating point number)를 나타낸다.
숫자형(number type)과 관련된 연산은 다양한데, 곱셈 *, 나눗셈 /, 덧셈 +, 뺄셈 - 등이 대표적이다.
숫자형엔 일반적인 숫자 외에 Infinity, -Infinity, NaN같은 '특수 숫자 값(special numeric value)'이 포함된다.

② Bigint

BigInt는 Number 원시 값이 안정적으로 나타낼 수 있는 최대치인 2^53 - 1보다 큰 정수를 표현할 수 있는 내장 객체다.

사실 대부분의 상황에서 이런 제약사항은 문제가 되지 않는다. 그렇지만 암호 관련 작업같이 아주 큰 숫자가 필요한 상황이거나 아주 높은 정밀도로 작업을 해야 할 때는 이런 큰 숫자가 필요하다.

BigInt는 정수 리터럴의 뒤에 n을 붙이거나(10n) 함수 BigInt()를 호출해 생성할 수 있다.

BigInt형은 표준으로 채택된 지 얼마 안 된 자료형으로, 길이에 상관없이 정수를 나타낼 수 있다.

③ string

자바스크립트에선 문자열(string)을 따옴표로 묶는다.

let str = "Hello";
let str2 = 'hallo! willkommen!';
let phrase = `can embed another ${str}`;

따옴표는 세 종류가 있다.

"Hello" // 큰따옴표
'Hello' // 작은따옴표 
`Hello` // 역 따옴표(backtick, ES6 템플릿 리터럴)

큰따옴표와 작은따옴표는 ‘기본적인’ 따옴표로, 자바스크립트에서는 이 둘에 차이를 두지 않는다.

역 따옴표로 변수나 표현식을 감싼 후 ${} 안에 넣어주면, 아래와 같이 원하는 변수나 표현식을 문자열(string) 중간에 손쉽게 넣을 수 있다.

let name = "Jae";
>
// 변수를 문자열 중간에 삽입
console.log( `Hello, ${name}!` ); // Hello, Jae!
>
// 표현식을 문자열 중간에 삽입
console.log( `the result is ${1 + 2}` ); // the result is 3

${} 안에는 위의 name 같은 변수나 1 + 2 같은 수학 관련 표현식을 넣을 수 있다. 더 복잡한 표현식도 넣을 수 있고, 무엇이든 들어갈 수 있다. 이렇게 문자열 중간에 들어간 변수나 표현식은 평가가 끝난 후 문자열의 일부가 된다.

큰따옴표나 작은따옴표는 이 방식을 사용할 수 없다. 이 방법은 역 따옴표를 써야만 가능하다.

④ boolean

불린형(논리 타입)truefalse 두 가지 값밖에 없는 자료형이다.
불린형은 긍정(yes)이나 부정(no)을 나타내는 값을 저장할 때 사용한다. true는 긍정, false는 부정을 의미한다.

불리언 타입의 값은 참과 거짓으로 구분되는 조건에 의해 프로그램의 흐름을 제어하는 조건문에서 자주 사용한다. 비어있는 문자열과 null, undefined, 숫자 0false로 간주된다.

⑤ null

null 값은 지금까지 봤던 자료형 중 어느 자료형에도 속하지 않는 값이다. null 값은 오로지 null 값만 포함하는 별도의 자료형을 만든다.

자바스크립트에선 null‘존재하지 않는(nothing)’ 값, ‘비어 있는(empty)’ 값, ‘알 수 없는(unknown)’ 값을 나타내는 데 사용한다.

//예시
let age = null;

let age = null; 은 나이(age)를 알 수 없거나 그 값이 비어있음을 보여준다.

⑥ undefined

undefined 값도 null 값처럼 자신만의 자료형을 형성한다.

undefined는 '값이 할당되지 않은 상태’를 나타낼 때 사용한다.

변수는 선언했지만, 값을 할당하지 않았다면 해당 변수에 undefined가 자동으로 할당된다.

//예시
let age;
>
alert(age); // 'undefined'가 출력된다.

따로 undefined를 명시적으로 할당하는 것도 가능하다.

let age = 20;
>
// 값을 undefined로 바꾼다.
age = undefined;
>
alert(age); // "undefined"

하지만 이렇게 undefined를 직접 할당하는 걸 권장하지 않는다. 변수가 ‘비어있거나’ ‘알 수 없는’ 상태라는 걸 나타내려면 null을 사용하는 게 좋다. undefined는 값이 할당되지 않은 변수의 초기값을 위해 예약어로 남겨두는 게 좋다.

⑦ object

객체(object)는 데이터와 그 데이터에 관련한 동작(절차, 방법, 기능)을 모두 포함할 수 있는 존재다. 달리 말해, 이름을 가지는 데이터를 의미하는 프로퍼티(property)동작을 의미하는 메소드(method)를 포함할 수 있는 독립적 주체이다.

자바스크립트는 객체(object) 기반의 스크립트 언어로서 자바스크립트를 이루고 있는 거의 “모든 것”이 객체(object)이다. 원시 타입(Primitives)을 제외한 나머지 값들(배열, 함수, 정규표현식 등)은 모두 객체(object)이다.

⑧ symbol

심볼(symbol)형은 객체의 고유한 식별자(unique identifier)를 만들 때 사용된다.

👀 Reference

0개의 댓글