javascript

자바스크립트 기초 - 2

Dec 14, 2019

자바스크립트 기초 - 2

목차

1. 변수
2. 상수
3. 자료형
4. 요약

1. 변수

1.1 변수란?

let msg = "hi",
msg2 = "hello",
msg3 = "what is your name?";

1.2 var 대신 let을 사용하자.

오래된 소스에서는 var를 사용하지만 미묘한 차이가 있다.
같은 방식으로 작동하는 것처럼 보이지만
var는 블록 스코프가 없다. 블록 밖에서 접근 가능하다.

if(true){
  var msg = "hello var";
}
alert(msg);  // if문이 끝났음에도 msg변수에 접근이 가능하다.

var는 if, for 등의 코드블록을 관통한다. 구식 자바스크립트의 잔재이다.
오래된 ‘var’ 에 자세한 설명이 있다.

함수형(functional) 프로그래밍 언어에서는 변수값 변경을 금지한다.
변수에 다른 값을 저장하고 싶다면 새로운 상자를 만들어야 한다.
이러한 제약이 ‘병렬 계산’과 같은 영역에서는 장점으로 작용한다.

1.3 변수 명명 규칙

변수명에는 오직 문자와 숫자, 그리고 기호 ’&‘와 ’_’ 만이 들어갈 수 있다.
첫 글자는 숫자가 될 수 없다.

2. 상수

2.1 상수란?

변화하지 않는 변수를 선언할 떈 ‘const’를 사용한다. 

const myName = "bongdong2";

2.2 대문자 상수

const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "FF7F00";

// 색상을 고르고 싶을 때 별칭을 사용할 수 있게 되었다.
let color = COLOR_RED;
alert(color);

대문자 상수를 사용하면 내용을 기억하기 쉽다.
오타를 낼 확률이 낮다.
이름을 사용하여 유의미하고, 코드 가독성이 높아진다.
대문자 상수는 “하드 코딩한” 값을 별칭을 만들 때 사용한다.

3. 자료형

자바스크립트 변수는 어떤 데이터든지 담을 수 있다. 변수는 어느 순간에 문자열일 수 있고 다른 순간엔 숫자가 될 수 있다.

let msg = "hello";
msg = 123;
alert(msg);  // 123 출력됨

자료의 타입은 있지만, 변수의 타입은 어제든지 바꿀수 있는 언어를 동적타입 언어라 부른다.
자바스크립트에는 7가지 자료형이 있다.

3.1 숫자형

정수, 부동소수점 숫자를 말한다.
특수 숫자 값인 Infinity, -Infinity, NaN 포함한다.

Infinity는 무한대를 말한다.

alert(1 / 0); // 무한대
alert(Infinity); // 무한대

NaN은 계산 중에 에러가 발생했다는 것을 말한다.

alert("문자열" / 2); // NaN, 문자열을 숫자로 나누면 오류가 발생한다.
alert("NaN" / 1 + 1); // NaN

자바스크립트에서 숫자 연산은 안전하다. 말이 안 되는 숫자 연산을 해도 스크립트는 치명적인 에러를 뿜으며 죽지 않는다. NaN을 반환하여 연산이 종료될 뿐이다.

3.2 문자형

문자열(string)을 따옴표로 묶는다.

let str = "Hello";
let str2 = 'Single quotes ar ok too';
let phrase = `can embed ${str}`;

따옴표의 종류는 3가지다.

  1. 큰 따옴표
  2. 작은 따옴표
  3. 역 따옴표(백틱, backtick)

큰 따옴표와 작은 따옴표의 차이는 없다.
역 따옴표로 변수나 표현식을 감싸고 ’${…}’안에 넣어주면, 원하는 변수나 표현식을 문자열 중간에 넣을 수 있다. ’${…}’안에는 변수나 ‘1 + 2’ 같은 수학 관련 표현식을 넣을 수 있다.

자바스크립트에는 문자형(char)는 없다.

3.3 Boolean

Boolean형은 true와 false 두 가지만 있는 자료형이다.

let nameIsBongdong = true;
let isGreater = 4 > 1;
alert(isGreater);

3.4 “null” 값

지금까지 소개한 자료형 중 어느 자료형에도 속하지 않는다.
null 값은 오로지 null 값만 포함하는 별도의 자료형을 형성한다.
자바스크립트 이외의 언어에서는 null을 ‘존재하지 않는 객체에 대한 참조’ 또는 ‘널 포인터’를 나타낼 때 사용한다.

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

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

3.5 “undefined” 값

null 처럼 자신만의 고유한 자료형을 형성한다.
undefined 는 “값이 할당되지 않은 상태”를 나타낼 때 사용한다.
변수는 선언했지만 값이 할당되지 않았을 때, 해당 변수에 자동으로 undefined가 할당된다.

let x;
alert(x); // undefined

개발자가 직접 undefined를 할당할 수는 있지만 권장하진 않는다. 변수가 “비었거나”, “알 수 없는” 상태라면 null을 사용하면 되기 때문이다. undefined는 변수에 값이 할당되었는지 여부를 확일 할 때 사용하도록 한다.

3.6 객체(object)와 심볼(symbol)

객체형을 제외한 다른 자료형은 한 가지만 표현한다. 객체는 아니다.
객체는 특수한 자료형이고 나중에 다루기로 한다.

심볼형은 객체의 고유한 식별자를 만들 때 사용된다.
객체를 학습하고 다룬다.

3.7 typeof 연산자

typeof 연산자는 인수의 자료형을 반환해준다. 자료형에 따라 처리 방식을 다르게 하고 싶거나 변수의 자료형을 빠르게 알아내고자 할 때 유용하다.
typeof 연산자는 두 가지 문법을 지원한다.

  1. 연산자 : typeof x
  2. 함수 : typeof(x)

괄호가 있든 없든 결과는 동일하다.

typeof undefined // "undefined"

typeof 0 // "number"

typeof true // "boolean"

typeof "foo" // "string"

typeof Symbol("id") // "symbol"

typeof Math // "object"  (1)

typeof null // "object"  (2)

typeof alert // "function"  (3)

마지막 세 줄은 약간의 설명이 필요해 보이네요.

  1. Math는 수학 연산을 제공하는 내장 객체이므로 “object”가 출력됩니다. Math에 대해선 숫자형 챕터에서 학습하도록 하겠습니다. 내장객체는 객체형이라는 것을 알려주기 위해 이런 예시를 작성해 보았습니다.
  2. typeof null의 결과는 “object”입니다. null은 별도의 고유한 자료형을 가지는 특수 값으로 객체가 아니지만, 자바스크립트에선 호환성을 유지하기 위해 이런 오류를 수정하지 않고 남겨둔 상황입니다. 언어 자체의 오류이므로 null이 객체가 아님에 유의하시기 바랍니다.
  3. typeof는 피연산자가 함수면 “function”을 반환합니다. 그러므로 typeof alert는 “function”을 출력해줍니다. 그런데 자바스크립트엔 “함수”형이 없습니다. 함수는 객체형에 속합니다. 이런 동작 방식이 형식적으론 잘못되긴 했지만, 실무에선 매우 유용하게 사용되고 있습니다. 함수에 관한 내용은 이후 챕터에서 자세히 다루도록 하겠습니다.

4. 요약