JavaScript Variable란? 기본 타입

변수 ( Variable ) 란?

변수는 ( 문자나 숫자 같은 ) 값을 담는 컨테이너로 값을 유지할 필요가 있을 때 사용한다. 여기에 담겨진 값은 다른 값으로 바꿀 수 있다. 변수는 컴퓨터의 메모리에 존재하는 공간이다. 값을 찾기 쉽게 할려고 이름을 붙여서 사용한다.

변수 ( Variable ) 의 선언

JavaScript 변수를 선언하는 방법에는 3가지가 있다.

1. var
2. let
3. const

ES6 이전에는 변수를 선언하는 키워드가 var밖에 없었지만 ES6에서 let, const가 생겼다.

var, let, const의 차이점

첫 번째로 var는 함수 스코프이고 let, const는 블록 스코프이다.

스코프 ( Scope ) 란?

스코프 ( Scope )는 변수를 사용할 수 있는 유효 범위이다. JavaScript에선 2가지의 스코프가 있다. 유효범위 개념을 잘 알고 있으면 변수와 매개변수의 접근성과 생존기간을 제어할 수 있다. 전역 ( Globla ) 과 지역 ( Local )이 있다. 전역 변수는 모든 곳에서 다 쓸 수 있고 지역변수는 { } 안에서만 쓰이고 { } 밖에서는 쓰지 못 한다. ex) 함수, if문, for문 등

유효범위의 특징

• 함수 단위의 유효범위
• 변수명 중복 허용 ( let, const )도 가능
• var의 생략 ( var를 생략할 경우 전역변수가 된다. )

두 번째 var는 이미 선언되어있는 이름과 같은 이름으로 변수를 또 선언해도 에러가 나지 않지만 let, const는 이미 존재하는 변수와 같이 이름의 변수를 또 선언하면 에러가 난다.

세 번째 var, let은 변수 선언시 초기 값을 주지 않아도 되지만 const는 반드시 초기값을 할당해야 한다.

네 번째 var, let은 값을 다시 할당할 수 있지만 const는 한번 할당한 값은 변경할 수 없다.

변수선언 식별자

변수 선언할때 고유한 이름을 '식별자'라고 한다. 변수의 이름을 구성하는 규칙이 있다.

• 이름에는 문자, 숫자, 밑줄 및 달러 기호가 포함될 수 있다.
• 이름은 문자로 시작한다.
• 이름은 $ 및 _로 시작할 수도 있다.
• 이름은 대소문자를 구분한다. ( y와 Y는 다른 변수임 ).
• 예약어 (예: JavaScript 키워드) 는 이름으로 사용할 수 없다.

변수의 선언

var a; // 한개씩 선언
let b;
var a, i; // 동시에 선언
var sum = 0; // 선언과 초기화
let i=0, sum=10, message="Hello"; // 동시에 선언과 초기화

변수의 데이터 타입

데이터 타입 ( Data Type )는 프로그래밍 언어에서 사용할 수 있는
데이터 ( 숫자, 문자열, 불리언 등 )의 종류를 말한다. 코드에서 사용되는 모든 데이터는 메모리에 저장하고 참조할 수 있어야 한다. 데이터 타입은 데이터를 메모리에 저장할 때 확보해야 하는 메모리 공간의 크기와 할당할 수 있는 유효한 값에 대한 정보, 그리고 메모리에 저장되어 있는 2진수 데이터를 어떻게 해석할 지에 대한 정보를 컴퓨터와 개발자에게 제공한다.

기본 타입 ( primitive data type )

• boolean
• null
• undefined
• number
• string
• symbol ( ES6에서 추가 )

객체 타입 ( object )

• object
• array
• function

기본 타입

number

C나 Java의 경우 정수와 실수를 구분하여 int, long, float, double 등과 같은 다양한 숫자 타입이 존재하지만 자바스크립트는 독특하게 하나의 숫자 타입만 존재한다.

var integer = 10; // 정수
var double = 10.12; // 실수
var negative = -20 // 음의 정수
var binary = 0b0100001; // 2진수
var octal = 0o101; // 8진수
var hex = 0x41; // 16진수

자바스크립의 숫자 타입은 정수만을 위한 타입이 없고 모든 수를 실수로 처리한다. 정수로 표시된다해도 사실은 실수다. 따라서 정수로 표시되는 수 끼리 나누더라도 실수가 나올 수 있다.

• Infinity : 양의 무한대
• -Infinity : 음의 무한대

정수화, 실수화 함수

• parseInt()
  파라미터에 string, number를 넣어준다. string을 넣을 경우에는 number로 바뀌면서 정수화를 해주고 number를 넣을경우에는 그냥 정수화를 해준다.
  만약 string의 첫 글자를 정수로 변경할 수 없으면 NaN ( Not a Number ) 값을 리턴해준다.

var a = '123';
console.log(parseInt(a));

• parseFloat()
  파라미터에 string, number를 넣어준다. string을 넣을 경우에는 number로 바뀌면서 실수화를 해주고 number를 넣을경우에는 그냥 실수화를 해준다.
  만약 string의 첫 글자를 실수로 변경할 수 없으면 NaN ( Not a Number ) 값을 리턴해준다.

var a = '123';
console.log(parseFloat(a));

string

문자열 ( String ) 타입은 텍스트 데이터를 나타내는데 사용한다. 문자열은 0개 이상의 16bit 유니코드 문자 ( UTF-16 ) 들의 집합으로 대부분의 전세계의 문자를 표현 할 수 있다. 문자열은 작은 따옴표('')또는 큰 따옴표 ("")안에 텍스트를 넣어 생성한다. ( 시작을 '로 하고 "끝날경우 문법적 오류가 뜬다. ) 만약 ""안에서 "를 쓰고싶으면 \"를 써주면 된다.
문자열에서 줄바꿈을 하고싶으면 \n을 쓰면 된다.

var str = "string"; // 큰 따옴표
str = 'string'; // 작은 따옴표
str = `string`; // 백틱 ( ES6 문자열 리터럴 기법 )

C와 같은 언어와는 다르게 자바스크립트의 문자열은 원시 타입이며 변경 불가능하다. 문자열은 배열처럼 index를 통해 접근할 수 있다.

문자열 관련 함수

• string.indexOf()
  문자열에서 특정 문자열을 찾고, 검색된 문자열 검색된 문자열이 '첫번째'로 나타나는 위치 index를 리턴한다. 파라미터에 문자열을 넣어준다. ( 대소문자를 구분한다. )

var a = '문자열은 따옴표로 둘러싸면 됩니다.';
console.log(a.indexOf('따옴')); // 띄어쓰기도 index에 포함된다. ( 5 )

• string.length
  문자열의 길이를 length를 통해 구할 수 있다. 문자열에서 문자의 갯수를 return 시켜준다. 공백의 경우에도 한개의 문자로 인식하며 length에 포함시킨다.

var str = 'Hello';
console.log(str.length); // 5
str['length'] // .대신 이렇게도 사용가능하다.

• string.concat() - react에서 많이 사용
  concat()은 두 개의 문자열을 하나의 문자열로 만들어주는 역할을 하는 함수이다. 파라미터로는 변수명이나 문자열이 들어간다. 여러개의 문자열도 붙일 수 있다. concat().concat() 이런식으로

var str = 'Hello';
var str2 = 'World';
console.log(str.concat(str2)); // HelloWorld

'+'를 통해서도 문자열을 붙일 수 있다. ( str+str2 )
'문자열' + '문자열" = '문자열' 도 가능하다.
'문자열' + number = '문자열 number'
number + '문자열' = '문자열 number'

• string.charAt()
  charAt()은 문자열에서 지정된 위치에 존재하는 문자를 찾아서 반환하는 함수이다. 파라미터로는 index가 들어간다. 없는 index를 넣어줄경우 빈 스트링을 반환한다.

var str = 'abcdefg';
console.log(str.charAt(5)); // f

str[index] 로도 문자열을 반환할 수 있다.

• string.substr()
  substr()은 문자열에서 특정 부분만 골라낼 때 사용하는 함수이다.
  매개변수로 ( start, length )가 있고 특정 부분이 필요할 때 해당 index를 넣어준다. length의 값을 안넣어주면 시작점부터 끝까지 새로운 문자열을 반환한다.

var str = 'abcdefg';
console.log(str.substr(1,4)); // 'bcde'
console.log(str.substr(1)); // 'bcdefg'

• string.substring()
  substring()는 substr()과 마찬가지로 문자열에서 특정 부분만 골라낼 때 사용하는 함수이다.
  매개변수로 index의 ( start, end )를 받는다. 만약 end값이 없으면 끝까지 새로운 문자열을 반환한다. end는 포함이 안되고 end 전까지만 포함된다. start가 end보다 크면 자리를 바꿔서 반환한다. ( 음수가 들어가면 string 그대로 반환한다. )

var str = 'abcdefg';
console.log(str.substring(1,4)); // 'bcd'
console.log(str.substring(1)); // 'bcdefg'

• string.slice()
  substring()과 마찬가지로 문자열에서 특정 부분만 골라낼 때 사용하는 함수이다. 매개변수 받는것도 똑같다. end가 포함안되는 것도 똑같다. 차이점은 start가 end보다 크면 빈 string을 반환한다. index가 음수이면 뒤에서 부터 가져온다. ( 음수는 -1부터 시작 start, end 둘다 음수는 start가 더 작아야 제대로 가져온다. -1, -3 이면 빈 string 음수도 마찬가지로 end는 포함 x )

var str = 'abcdefg';
console.log(str.slice(1,4)); // 'bcd'
console.log(str.slice(-3)); // 'efg'

• string.split()
  문자열을 일정한 구분자로 잘라서 각각의 문자열을 배열로 저장해준다.
  string.split(separator, limit) separator는 배열을 나눠줄 기준 문자열을 넣는다. ( 출력될때 기준은 제외되고 배열화 된다. ) limit은 배열화되고 난 뒤 1을 넣으면 앞 index 2를 넣으면 뒤 index ( 빈 스트링을 넣으면 하나하나 배열로 된다. )

var str = 'abcdefg';
var str1 = str.split('d');
var str2 = str.split('d', 1);
var str3 = str.split('');
console.log(str1); // [ 'abc', 'efg' ]
console.log(str2); // [ 'abc' ]
console.log(str3); // [ 'a', 'b', 'c', 'd', 'e', 'f', 'g']

• string.toUpperCase()
  알파벳 소문자 문자열을 대문자로 변환시켜준다. 이미 대문자인건 그대로 대문자로 반환한다.

var str = 'AbCdEfg';
console.log(str.toUpperCase()); // 'ABCDEFG'

• string.toLowerCase()
  알파벳 대문자 문자열을 소문자로 변환시켜준다. 이미 소문자인건 그대로 소문자로 반환한다.

var str = 'AbCdEfg';
console.log(str.toLowerCase()); // 'abcdefg'

• string.trim()
  trim() 함수는 문자열의 앞 뒤의 모든 공백을 제거한다. ( space, tab, NBSP 등 ) 문자열 내부에 대한 공백 처리는 불가능하다. .trim() 은 IE 10이상부터 사용가능하다. 그래서 제이쿼리를 이용하여 IE 10미만 버전에서 .trim()을 사용할 수 있다.

var str = ' abcdefg '
var str1 = str.trim();
var str2 = $.trim(str); // jquery 써야만 가능
console.log(str2); // 'abcdefg'

• string.replace()
  .replace() 함수는 문자열 내부에 대한 공백 처리를 할때나 문자열을 다른 값으로 바꿔줄 때 사용한다. 문자열 앞 뒤 공백 처리는 불가능하다. ( 정규식을 쓸 경우 가능하다. ) 또 정규식으로 문자열 하나뿐만 아니라 안에있는 중복되어있는 문자열들도 바꿔줄 수 있다.

boolean

불리언 ( boolean ) 타입의 값은 논리적 참, 거짓을 나타내는 true와 false뿐이다. 불리언 타입의 값은 참과 거짓으로 구분되는 조건에 의해 프로그램의 흐름을 제어하는 조건문에서 자주 사용한다.

var foo = true;
var bar = false;

undefined

undefined 타입의 값은 undefined가 유일하다. 선언 이후 값을 할당하지 않은 변수는 undefined값을 가진다. 즉, 선언은 되었지만 값을 할당하지 않은 변수에 접근하거나 존재하지 않는 객체 프로퍼티에 접근할 경우 undefined가 반환된다. 이는 변수 선언에 의해 확보된 메모리 공간을 처음 할당이 이루어질 때까지 빈 상태로 내버려두지 않고 자바스크립트 엔진이 undefined로 초기화하기 때문이다.

var foo;
console.log(foo);

null

null 타입의 값은 null이 유일하다. 자바스크립트는 대소문자를 구별하므로 null은 Null, NULL등과 다르다. null은 의도적으로 변수에 값이 없다는 것을 명시할 때 사용한다. 또는 함수가 호출되었으나 유효한 값을 반환할 수 없는 경우 명시적으로 null을 반환한다. HTML 요소를 가져올때 검색할 수 없는 경우도 null을 반환한다.

var el = document.querySelector('.myElam');
// HTML 문서에 myElam 클래스를 갖는 요소가 없다면 null을 반환한다.
console.log(el); // null

NaN ( Not a number )

NaN은 전역 객체의 속성. JavaScript에서 not a number라는 뜻으로 숫자가 아니다라는 뜻이다. Number.NaN의 값과 같으며 최신 브라우저에서 NaN은 설정 불가, 쓰기 불가 속성이다. 그렇지 않다고 하더라도 덮어쓰는건 피하는게 좋다.

NaN을 반환하는 연산에는 다섯 가지 종류가 있다.

• 숫자로서 읽을 수 없음 (parseInt("어쩌구"), Number(undefined))
• 결과가 허수인 수학 계산식 (Math.sqrt(-1))
• 피연산자가 NaN (7 ** NaN)
• 정의할 수 없는 계산식 (0 * Infinity)
• 문자열을 포함하면서 덧셈이 아닌 계산식 ("가" / 3)