변수 (Variable)
- 프로그래밍은 데이터 처리를 하는 것임을 이해한다.
- 변수 사용은 데이터를 편리하게 저장하고 꺼내 쓰는 것임을 이해한다.
- 변수의 선언과 값의 할당에 대해서 설명하고 코드로 작성할 수 있다.
- 값으로 변환된 표현문이 변수에 할당되어 담기는 과정을 설명할 수 있어야 한다.
- 자바스크립트에서 변수의 선언과 값의 할당에 대해서 설명할 수 있다.
- 변수 선언과 값 할당에 사용되는 용어에 대해서 정확하게 알 수 있다.
- =이 "같다"라는 의미가 아니라 할당연산자임을 이해할 수 있다.
- num = num + 1이 "같다"라는 의미가 아니라 값을 할당하는 것임을 설명할 수 있다.
데이터 타입 (Data type)
- 자바스크립트에서 원시 자료형과 참조 자료형이 무엇인지 알 수 있다.
- 원시 자료형 string, number, boolean, undefined의 의미를 이해할 수 있다.
- 타입마다 다른 속성과 메소드가 있다는 것을 이해할 수 있다.
- typeof 를 활용하여 특정 값의 타입을 확인할 수 있다.
- 비교 시 엄밀한 비교( === 과 !== )의 필요성을 이해할 수 있다.
변수는 값의 위치(주소)를 기억하는 저장소이다. 여기서 값의 위치는 값이 위치하고 있는 메모리 상의 주소(address) 를 의미한다. 다시 말해 변수란 값이 위치하고 있는 메모리 주소에 접근하기 위해서 일시적으로 명명한 식별자(identifier)이다.
변수는 프로그램에서 사용되는 데이터를 일정 기간 동안 저장하여 필요한 때에 다시 사용하기 위해 데이터에 고유 이름인 식별자(identifier)로 나타낸 것이다. 변수에 명명한 고유한 식별자를 변수명이라 하고 변수로 참조할 수 있는 데이터를 변수값이라 한다.
- 식별자(identifier)란?
어떠한 값이나 다른 코드의 일부분을 담거나 참조할 수 있는 수단이다.let 변수
,const 상수
,function 함수명
혹은 특정 코드루프에 대한 레이블을 생성 및 지정하기 위해 자료형(data type)이나 자료저장 메커니즘과 함께 혹은 독단적으로 사용하는 텍스트를 칭한다.
var
, let
, const
키워드를 사용하여 선언하고 할당 연산자를 사용해 값을 할당한다. 그리고 식별자인 변수명을 사용해 변수에 저장된 값을 참조한다.선언이란 데이터를 보관하기 위한 어떤 공간을 마련 하는 것이다. 비유를 하자면 우리가 어떤 물건을 수납 하기 위해서 수납장(데이터공간)을 하나 마련하거나, 어떤 음식을 담기 위해서 그릇(데이터공간)을 준비한다. 라고 생각하면 좋겠다. 이런 행위를 선언(declaration)이라고 한다.
// 아래는 myname 그리고 age라는 이름을 가진 변수를 생성(선언) 한 것이다. let myname; let age;
데이터를 보관할 공간을 마련 했다면 이곳에 넣고 싶은 데이터를 입력해서 저장할 수 있다. 데이터를 입력하는 것. 이것을 할당(assignment)이라고 한다. 수납장이 하나 있다면 이제 물건을 넣어서 보관할 수 있고, 그릇이 있다면 어떤 음식이나 반찬을 담을 수 있다. 이처럼 무엇인가를 보관하고 담는다는 것이다. 즉 데이터를 저장한다는 의미로 생각할 수 있다.
아래의 예시에서 보이는 할당 연산자(=)가 자칫 '같다'라는 의미로 착각될 수 있다. 그것이 아니라 각각 myname, age라는 이름으로 선언된 변수에 'jae', 25라는 값을 할당한 것이다.
// 할당(assignment)은 "같다"라는 의미가 아니다. // age라는 이름의 변수(보관함)를 선언하고 이 변수에 25 라는 숫자, myname이라는 보관함에 // 'Jae'라는 값을 대입(assgin)한 것이다. let myname' let age; myname = 'Jae'; age = 25;
// 아래와 같이 변수 선언과 값 할당을 한 줄에 작성할 수도 있다. let name = 'kim'; let myname = 'Jae';
아래의 개발자 도구창에 보이는 것처럼 코드의 각 한 줄을 표현식이라고 부른다. 그리고 이 표현식이 무엇을 의미하는지 알아내는 과정을 평가(evaluation)라고 한다.
자바스크립트에선 변수 명명 시 몇 가지 주의할 점이 있다.
- 변수명에는 오직 문자와 숫자, 그리고 기호 $와 _만 들어갈 수 있다.
- 첫 글자는 숫자가 될 수 없다.
- 대·소문자 구별
apple와 AppLE은 서로 다른 변수다.- use strict 사용하기
변수는 대개 정의되어 있어야 사용할 수 있다. 하지만 예전에는let
없이도 단순하게 값을 할당해 변수를 생성하는 것이 가능했는데,use strict
를 쓰지 않으면 과거 스크립트와의 호환성을 유지할 수 있기 때문에 여전히 이 방식을 사용할 수 있다.num = 5; // 변수 'num'이 정의되어있지 않더라도, 단순 할당만으로 변수가 생성된다. alert(num); // 5
위의 예시처럼 변수를 생성하는 것은 나쁜 관습이다. 엄격 모드에서는 에러를 발생시키기 때문이다.
"use strict"; num = 5; // error: num is not defined
- 할당이 없는 변수
선언만 하고 할당이 없다면 아래처럼 myname에는 undefined로 뜬다.
원시 타입의 값은 변경 불가능한 값(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
불린형(논리 타입)은 true
와 false
두 가지 값밖에 없는 자료형이다.
불린형은 긍정(yes)이나 부정(no)을 나타내는 값을 저장할 때 사용한다. true
는 긍정, false
는 부정을 의미한다.
불리언 타입의 값은 참과 거짓으로 구분되는 조건에 의해 프로그램의 흐름을 제어하는 조건문에서 자주 사용한다. 비어있는 문자열과 null
, undefined
, 숫자 0
은 false
로 간주된다.
⑤ 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)를 만들 때 사용된다.