본 강의는 Programmers의 Hello, JavaScript: 자바스크립트 입문 강의를 기반으로 작성되었으나, 작성자에 의견에 따라 일부 내용이 추가되거나 수정되어 작성된 포스트입니다
01. 변수(Variable)
변수는 데이터를 저장하고 참조하는 식별자이다. 간단히 말해, 데이터 처리를 위한 대부분의 데이터는 이 변수에 저장한다.
변수를 본격적으로 알아보기 전에 변수의 선언과 초기화에 대해서 알아야 한다.
// 변수의 선언 (Declare)
var a;
// 변수의 초기화 (Inirialize)
a = 10;기본적으로 변수는 선언과 초기화를 진행해야 정상적으로 사용할 수 있다.
01.01. 변수의 선언 방식
JS에서 변수를 선언하는 데 사용하는 키워드는 총 3가지다.
var, let, const
강의에서는 이 중 var 방식만 설명했지만, 최근에는 let 과 const 키워드를 사용해 선언 하는 것을 권장하고 있다.
만약 아래 이론이 어렵다면 당장은 다음 내용으로 진행을 하고, 추후에 다시 살펴보는 것도 좋다.
왜 var 보다 let, const 를 추천할까?
우선 이 이야기를 하기 전에 몇가지 JS에 대한 프로그래밍적 이론 지식을 알아야 한다. 키워드는 총 세가지다.
스코프(Scope) 호이스팅(Hoisting) 재할당/재선언
스코프(Scope)
스코프는 변수나 함수의 유효 범위를 의미한다. 예제를 살펴보기 전에, 세가지 선언 방식의 스코프는 아래와 같다.
var // 함수 스코프(Function Scope)
let // 블록 스코프(Block Scope)
const // 블록 스코프(Block Scope)예제에서 아직 배우지 않은 함수나 조건문이 나오는데, 우선 스코프를 설명하기 위한 것이니 구조적인 부분만 살펴보자.
함수 스코프(Fuction Scope)
var 변수 선언 예제를 살펴보자. var 는 함수 스코프를 가진다.
function example() {
// x 변수는 example 함수 내에서만 유효
var x = 10;
console.log(x); // [output] 10
}
example();
console.log(x) // [output] ERROR
// 변수 x는 함수 외부에서 접근 불가위 예제처럼 함수 밖에서는 변수 x 로 접근이 불가하다.
블록 스코프(Block Scope)
블록 스코프는 let 과 const 선언 방식에서 유효한 스코프다.
function example() {
if(true) {
// x 변수는 if문 내에서만 유효
let x = 10;
console.log(x); // [output] 10
}
console.log(x); // [output] ERROR
}
example()위 예제처럼 블록 스코프는 중괄호 {} 로 둘러싸인 영역 내에서만 유효하다.
let과const는 블록 내에서로 스코프가 제한되기에 변수 충돌 문제를 방지할 수 있다
호이스팅(Hoisting)
호이스팅은 JS에서 변수나 함수 선언이 스코프 상단으로 끌어올려지는 현상을 의미한다.
JS는 기본적으로 위에서부터 아래로, 순차적으로 실행된다. 그러나 변수나 함수의 사용은 선언이 되기 전에는 사용할 수 없다. 이를 위해 JS에는 호이스팅이라는 기능이 존재한다.
호이스팅은 실행 컨텍스트(execution context)가 생성될 때 발생한다. 아래 예제에서는 example(); 이 실행 컨텍스트다.
아래 예제를 보자.
function example() {
console.log(x); // [output] undefined
var x = 10;
console.log(x); // [output] 10
}
example();위 예제에서는 변수의 호이스팅이 발생했다.
호이스팅이 없었다면 변수를 선언하기 전, 첫번째 console.log(x); 를 출력할 때 Uncaught ReferenceError: x is not defined 에러가 발생했어야 한다.
그러나 호이스팅이 발생했기에 undefined 가 출력된다. 호이스팅이 되어 첫번째 console.log(x); 를 출력하기 전, 스코프 최상단에서 메모리에 변수 x 를 담게된다.
호이스팅의 문제는 코드의 가독성이나 디버깅을 어렵게 할 수 있다.
let과const는 호이스팅이 발생하지 않기에 비교적 가독성과 디버깅에 이점이 있다
재할당 또는 재선언
우선 var 부터 살펴보자.
var a = 10;
console.log(a); // [output] 10
var a = 20;
console.log(a); // [output] 20
var a = 30;
console.log(a); // [output] 30위 예제처럼 변수를 몇번 선언, 할당을 해도 오류 없이 잘 된다.
그러나 이는 커다란 문제가 있다.
var는 재할당 또는 재선언이 되지 말아야 하는 변수에 대해서도 오류 없이 진행되기 때문에, 다른 곳에서 오류가 발생할 가능성이 높다.
이를 위해 최신 ES6에서는 let 과 const 를 추천한다.
var
var는 위 예제처럼 재선언, 재할당 모두 가능하다.
let
let 은 재선언은 불가하지만, 재할당은 가능하다.
// 재선언: 불가
let x = 1;
let x = 2; // [output] SyntaxError: Identifier 'x' has already been declared
console.log(x); // [output] 1
// 재할당: 가능
x = 3;
console.log(x) // [output] 3const
const 는 재선언과 재할당 모두 불가능 하다. 값이 변경되면 안되는 상수를 저장할 때 사용한다. 그리고 선언과 동시에 값을 초기화(할당) 해야한다.
// 재선언: 불가
const x = 1;
const x = 2; // [output] SyntaxError: Identifier 'x' has already been declared
// 재할당: 불가
const y = 1;
y = 2; // [output] TypeError: Assignment to constant variable.01.02. 변수 사용해보기
lecture03/index.html 과 lecture03/main.js 파일을 생성한다.
lecture03/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="main.js"></script>
</head>
<body>
</body>
</html>우선 JS 파일을 불러온다.
변수를 출력해보기
lecture03/main.js
let msg;
msg = "Hello World";
alert(msg);이렇게 작성해주면 변수 msg 에 저장된 Hello World 가 alert 창으로 출력되는 것을 확인할 수 있다.
console.log를 이용해서 출력하면 개발자 도구의 Console 탭에서 확인할 수 있다.
데이터를 입력 받고, 출력해보기
lecture03/main.js
let name = prompt("이름을 입력하세요");
console.log(`{name}님 반갑습니다.`);이 예제를 입력해보면 사용자로부터 prompt 창을 띄워 이름을 입력받고, Console 에 출력할 수 있다.
02. 자료형
JS에도 다른 프로그래밍 언어와 마찬가지로 비슷한 자료형들을 갖고 있다. 여기서 몇가지 자료형을 알아볼건데, JS에서 자료형을 공부할 때 주의해야 할 점이 있다.
JS는 변수의 자료형을 명시적으로 지정하지 않아도 된다.
동적 타입 언어다.
그래서 문제가 생긴다.
문제점
아래 예제를 보자. z 의 출력은 어떻게 될까?
let x = 10;
let y = "20";
let z = x + y;놀랍게도 문자열 "1020" 이다(...)
이 문제는 JS가 동적으로 변수의 자료형을 지정하기 때문이다.
문제를 해결하기 위해서는 변수의 자료형을 매번 확인하거나
이것 때문에 만들어진 정적 타입의 언어 TypeScript 를 사용하면 된다.
02.01. 자료형 알아보기
JS에서 자료형을 알아보기 위한 함수는 typeof 다.
let x = 1;
console.log(typeof(x)); // [output] number02.02. 숫자(Number)
숫자를 나타내는 자료형이다. 정수, 실수, 음수 등의 숫자를 포함한다.
JS는 64비트를 기반으로 숫자를 계산한다.
let x = 10;
let y = 3.14;
let z = -5;숫자로 변경하기
동적 타입 언어이기에, 가끔 입력 받은 데이터와 같이 외부에서 가져온 데이터가 숫자여야하는데 문자열이거나 다른 타입인 경우가 있다.
그 경우 parseInt, parseFloat 등의 함수를 사용해 Integer 또는 Float으로 변경해주면 된다.
NaN(Not A Number), Infinity
NaN이란, 숫자가 아님을 나타낸다.
let x = "hello";
let y = 10;
let z = x + y;
console.log(z); // [output] NaNInfinity는 무한대를 나타내는 값이다.
02.03. 문자열(String)
문자열을 나타내는 자료형이다. 작은따옴표' 또는 큰따옴표 " 로 감싸서 표현한다.
이스케이프 문자를 사용해 작은따옴표나 큰따옴표를 표시하거나, 다른 역할을 하게 만든다.
작은따옴표 안에는 큰따옴표를, 큰따옴표 안에는 작은따옴표를 사용할 수 있다.
let str1 = 'Hel"lo'; // Hel"lo
let str2 = "Wor'ld"; // Wor'ld
let str3 = '\'Hello\'' // 'Hello'
let str4 = "\"World\"" // "World"이스케이프 문자
줄바꿈: \n
작은따옴표: \'
큰따옴표: \"
역슬래시: \\
02.04. 불리언(Boolean)
참(true) 또는 거짓(false)을 나타내는 자료형이다.
let isTrue = true;
let isFalse = false;02.05. undefined
값이 할당되지 않았음을 나타낸다.
let x; // 값이 할당되지 않은 변수
console.log(x) // [output] undefined02.06. null
값이 존재하지 않음을 나타낸다.
let x = null;02.07. 객체(Object)
여러 개의 속성(key-value)으로 구성된 복합적 자료형이다. 중괄호 {} 로 표현한다. String, Number 등 대부분의 자료형을 사용할 수 있으며, Object안에 Object도 사용할 수 있다.
객체 내의 값을 참조하려면 . 을 사용하거나, 대괄호 [] 를 사용해 사용합니다.
let person = {
name: "Kim", // String
age: 20, // Number
isMale: true, // Boolean
};
console.log(person.name); // [output] Kim
console.log(person["age"]) // [output] 2002.08. 함수(Function)
일련의 작업을 수행하는 코드 블럭을 나타내는 자료형이다.
이는 추후에 함수 파트에서 별도로 설명한다.
우선, 오늘은 여기까지다.
다음 시간에는 연산자 와 함수(Function) 을 살펴보겠다.
