JavaScript 기초

1. 컴퓨터 구조

2. JavaScript

    2.1. 변수

    2.2. 자료형

    2.3. 키워드와 예약어

    2.4. 연산자

    2.5. if문

    2.6. for문

---

1. 컴퓨터 구조

[그림 1] 컴퓨터 구조

컴퓨터 구조에는 여러 가지 요소들이 많이 존재하지만, 간단하게 CPU, RAM, HDD 정도만 살펴보고자 한다. 

 

컴퓨터 구조	설명
CPU (Central Processing Unit)	- 중앙처리장치라고 불리는 CPU는 컴퓨터 시스템을 통제하고 프로그램의 연산을 실행하고 처리하는 가장 핵심적인 컴퓨터의 제어 장치이다. - CPU는 외부에서 정보를 입력받고, 기억하고, 컴퓨터 프로그램의 명령어를 해석하여 연산하고, 외부로 출력하는 역할을 한다. 컴퓨터의 두뇌에 해당한다고 할 수 있다.
RAM (Random Access Memory)	- 램은 임의의 영역에 접근하여 읽고 쓰기가 가능한 주기억 장치이다. 반도체 회로로 구성되어 있으며 휘발성 메모리이다. - 램은 어느 위치에 저장된 데이터든지 접근(읽기 및 쓰기)하는 데 동일한 시간이 걸리는 메모리이기에 '랜덤(random)'이라는 명칭이 주어진다. 반면 하드디스크, 플로피디스크 등의 자기 디스크나 자기 테이프는 저장된 위치에 따라 접근하는 데 걸리는 시간이 다르다.
HDD (Hard Disk Drive)	- 하드 디스크 드라이브는 전원이 꺼지더라도 저장된 데이터가 유지되는 비휘발성이며, 순차접근이 가능한 컴퓨터의 보조 기억 장치이다. - 보호 케이스 안에 있는 플래터를 회전시켜, 이것에 자기 패턴으로 정보를 기록한다. 데이터는 플래터 표면의 코팅된 자성체에 기록되며, 회전하는 플래터 위에 부상하는 입출력 헤드에 의해 자기적으로 데이터를 읽고 쓸 수 있다.

 

 

2. JavaScript

[그림 2] 자바스크립트 로고

자바스크립트(JavaScript)는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 쉽게 설명하면, 웹을 풍부하게 만들어주는 작고 가벼운 언어이다.

 

자바스크립트는 본래 넷스케이프 커뮤니케이션즈 코퍼레이션의 브렌던 아이크(Brendan Eich)가 처음에는 모카(Mocha)라는 이름으로, 나중에는 라이브스크립트(LiveScript)라는 이름으로 개발하였으며, 최종적으로 자바스크립트가 되었다. 

 

자바스크립트가 자바와 구문이 유사한 점도 있지만, 이는 두 언어 모두 C언어의 기본 구문에 바탕을 뒀기 때문이고, 자바와 자바스크립트는 직접적인 연관성이 약하다.

 

자바스크립트는 ECMA스크립트(ECMAScript)의 표준 사양을 가장 잘 구현한 언어로 인정받고 있으며 ECMAScript 5(ES5)까지는 대부분의 브라우저에서 기본적으로 지원되었으나 ECMAScript 6 이후부터는 브라우저 호환성을 위해 트랜스파일러로 컴파일된다.

 

 

2.1. 변수

변수는 '값을 담는 상자'이다. 자바스크립트의 변수 선언에는 var, let, const 이렇게 3가지를 쓸 수 있다.

 

ES5에서의 변수 선언은 var 키워드가 유일했는데, 이 변수 선언의 특징과 문제점은 다음과 같다.

• 함수레벨 범위로 동작 (전역 변수의 남발 및 코드 복잡도 증가)
• 변수 선언 시 var 키워드 생략 허용 (변수의 의도하지 않은 전역화)
• 중복 선언 허용 (변수의 의도하지 않은 값 변경)
• 변수 호이스팅 (변수 선언 이전에 참조 가능)

위의 특징들은 대부분 전역 변수의 선언과 사용으로 인해 발생하며 코드 복잡도를 높이는 원인이 된다. ES6에서는 var의 단점을 보완하기 위해 let과 const를 도입했다. 

 

[그림 3] var와 let 비교

var로 선언한 name은 처음에는 '철수'로 값을 지정하고, 블록 안에서 '짱구'로 중복 지정을 한 후 console.log(name); 에서 '짱구'라는 결과가 나왔다. 즉, var는 블록 안에 있든 밖에 있든 상관없이 언제든지 중복하여 재지정이 가능하다.

 

반면 let으로 선언한 hometown은 처음에 '서울'을 지정한 후 블록 안에서 다시 '부산'으로 지정해주고 블록 밖에서 console.log(hometown); 을 썼을 때 '서울'이라는 결과가 나왔다. 블록 안에서 지정한 변수 hometown2는 블록 밖에서 인식하지 못했다. 블록 밖의 변수와 블록 안의 let 변수는 독립적이다.

 

대부분의 언어는 block-level 범위를 지원하지만, JavaScript 언어는 function-level 범위를 지원한다. 

블록레벨(block-level)과 함수레벨(function-level)을 정리하면 다음과 같다.

 

범위	특징
block-level	- 코드 블록 내부에서 선언한 변수는 코드 블록 내에서만 유효하며 외부에서 참조 불가     ex) let, const
funcion-level	- 함수 내부에서 선언한 변수는 함수 내에서만 유효하며 외부에서 참조 불가     (함수 내부에서 선언한 변수는 지역 변수이고 함수 외부에서 선언한 변수는 전역 변수)     ex) var

 

 

※ 호이스팅 (Hoisting)

 

[그림 4] let은 호이스팅이 지원되지 않아 TDZ가 존재함

JavaScript는 모든 선언(var, let, const, function, function*, class)에 대해 호이스팅한다. 호이스팅은 선언문을 해당 스코프(범위)의 선두로 옮겨서 동작하는 것처럼 만드는 특성을 의미한다. 자바스크립트 파일의 메모리 할당 과정에서 호이스팅을 필요로 한다.

 

하지만 let과 const는 변수 선언 이전에 참조하면 에러(Reference Error)가 발생한다. 이 경우 let과 const로 선언된 변수는 스코프의 시작에서 변수 선언 단계 전까지 일시적 사각지대(TDZ, Temporal Dead Zone)에 빠지게 된다.

 

변수 생성 단계	설명
선언 단계	변수를 실행 context의 변수객체(Variable Object)에 등록 (변수객체는 스코프가 참조하는 대상)   이 단계에서 변수를 참조할 경우 참조 에러(Reference Error) 발생
초기화 단계	변수객체에 등록된 변수의 공간을 메모리에 할당   변수는 undefined로 초기화됨
할당 단계	undefined로 초기화된 변수에 값을 할당

 

[그림 5] Reference Error 발생 예

let을 사용하여 변수 선언한 b는 변수 선언 단계 이전에 참조했을 때 Reference Error가 나타난다.

 

아래는 var, let, const에 대한 비교를 나타낸 표이다.

 

	var	let	const
범위	function-level	block-level	block-level
변수 중복 선언	O	X	X
변수 값 재할당	O	O	X
초기화 필요	X	X	O

 

 

2.2. 자료형

자바스크립트의 자료형(Data Type)은 변수 하나에 데이터 하나를 할당하는 기본형과 변수 하나에 여러 속성을 할당하는 객체형이 있다.

 

기본형	문자형 (String)	- 데이터를 '', "", `` 안에 표현하며 숫자가 들어갈 경우에도 숫자가 아닌 텍스트로 인식
	숫자형 (Number)	- 숫자를 나타내거나 연산을 하는 데 쓰이는 데이터 타입   - 정수나 실수를 기본하지 않고 통용해서 숫자를 처리
	논리형 (Boolean)	- 참과 거짓으로 표현되는 값이며 2개의 데이터를 비교 시 사용   - 비교연산자 등에 의해 참/거짓을 자동으로 판별 가능   - 메소드에 데이터 입력 시 0, null, defined를 제외한 모든 데이터에 true 값 반환
	null	- 빈 값 (변수가 참조하는 객체가 없음)   - 기존에 정의한 변수 값을 초기화 할 때에도 사용하는 데이터 타입
	undefined	- 값을 할당하지 않은 변수가 가지는 값 (아직 값을 할당하지 않음)   - 어떠한 변수를 정의하고 값을 할당하지 않았을 때 document.write로 해당 값 확인 가능   - undefined는 아무 데이터도 없을 때 표시하지만, null은 null이라는 값이 저장됨
	심볼형 (Symbol)	- 유일하며 변경 불가능한 기본값을 만듦
군집형	함수 (Function)	- 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록
	배열 (Array)	- 여러 개의 데이터를 순번을 가지고 저장할 때 사용   - []를 이용해 생성하고 , 으로 값들을 구분
	객체 (Object)	- 이름(name)과 값(value)으로 구성된 정렬되지 않은 집합

 

[그림 6] 자료형 사용 예

배열에는 기본적으로 index가 매겨지는데, 0부터 0,1,2,3,... 이렇게 1씩 증가하는 규칙이 있다. 배열에 있는 요소를 출력하기 위해서는 console.log(arr[]);의 [] 안에 출력하고 싶은 요소의 index를 넣어주면 된다. 객체는 key: value 의 형태로 데이터를 입력하는데, 원하는 key의 값을 출력하고 싶다면 console.log(obj.name); 처럼 obj(꼭 obj가 아니라 원하는 이름 가능)뒤에 .을 찍고 key를 적어주면 된다.

 

 

2.3. 키워드와 예약어

	키워드	예약어
설명	- 제어문의 시작과 끝, 특정한 조작 목적으로 쓰임 - 기능들이 정의되어 있기 때문에 식별자나 속성 이름으로 사용 불가	- 아직 특별한 쓰임새는 없지만 미래에 키워드로 쓸 가능성이 있어서 예약해 둔 것
예시	break, case, catch, continue, debugger, default, delete, do, else, finally, for, function, if, in, instanceof, new, return, switch, this, throw, try, typeof, var, void, while, with	abstract, boolean, byte, char, class, const, double, enum, export, extends, final, float, goto, implements, import, int, interface, long, native, package, private, protected, public, short, static, super, synchronized, throws, transient, volatile

 

 

2.4. 연산자

자바스크립트는 여러 종류의 연산을 위한 연산자(operator)를 제공한다. 

 

산술연산자	+	왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 더함
	-	왼쪽 피연산자의 값에서 오른쪽 피연산자의 값을 뺌
	*	왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 곱함
	/	왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눔
	%	왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눈 후, 그 나머지를 반환함
대입연산자	=	왼쪽 피연산자에 오른쪽 피연산자의 값을 대입함
	+=	왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 더한 후, 그 결과값을 왼쪽 피연산자에 대입함
	-=	왼쪽 피연산자의 값에서 오른쪽 피연산자의 값을 뺀 후, 그 결과값을 왼쪽 피연산자에 대입함
	*=	왼쪽 피연산자의 값에서 오른쪽 피연산자의 값을 곱한 후, 그 결과값을 왼쪽 피연산자에 대입함
	/=	왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눈 후, 그 결과값을 왼쪽 피연산자에 대입함
	%=	왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눈 후, 그 나머지를 왼쪽 피연산자에 대입함
증감연산자	++x	먼저 피연산자의 값을 1 증가시킨 후에 해당 연산을 진행함
	x++	먼저 해당 연산을 수행하고 나서, 피연산자의 값을 1 증가시킴
	--x	먼저 피연산자의 값을 1 감소시킨 후에 해당 연산을 진행함
	x--	먼저 해당 연산을 수행하고 나서, 피연산자의 값을 1 감소시킴
비교연산자	==	왼쪽 피연산자와 오른쪽 피연산자의 값이 같으면 참을 반환함
	===	왼쪽 피연산자와 오른쪽 피연산자의 값이 같고, 같은 타입이면 참을 반환함
	!=	왼쪽 피연산자와 오른쪽 피연산자의 값이 같지 않으면 참을 반환함
	!==	왼쪽 피연산자와 오른쪽 피연산자의 값이 같지 않거나, 타입이 다르면 참을 반환함
	>	왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 크면 참을 반환함
	>=	왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 크거나 같으면 참을 반환함
	<	왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 작으면 참을 반환함
	<=	왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 작거나 같으면 참을 반환함
논리연산자	&&	논리식이 모두 참이면 참을 반환함 (논리 AND 연산)
	||	논리식 중에서 하나라도 참이면 참을 반환함 (논리 OR 연산)
	!	논리식의 결과가 참이면 거짓을, 거짓이면 참을 반환함 (논리 NOT 연산)
비트연산자	&	대응되는 비트가 모두 1이면 1을 반환함 (비트 AND 연산)
	|	대응되는 비트 중에서 하나라도 1이면 1을 반환함 (비트 OR 연산)
	^	대응되는 비트가 서로 다르면 1을 반환함 (비트 XOR 연산)
	~	비트를 1이면 0으로, 0이면 1로 반전시킴 (비트 NOT 연산)
	<<	지정한 수만큼 비트를 전부 왼쪽으로 이동시킴 (left shift 연산)
	>>	부호를 유지하면서 지정한 수만큼 비트를 전부 오른쪽으로 이동시킴 (right shift 연산)
	>>>	지정한 수만큼 비트를 전부 오른쪽으로 이동시키며, 새로운 비트는 전부 0이 됨

 

[그림 7] 연산자 사용 예

[그림 7]과 같이 다양한 연산자를 사용해 보았다.

 

 

2.4. if 문

if 문은 표현식의 결과가 참(true)이면 주어진 실행문을 실행하며, 거짓(false)이면 아무것도 실행하지 않는 조건문이다. else 문은 if 문의 표현식 결과가 거짓(false)일 때 주어진 실행문을 실행한다.

 

if (표현식) {

         표현식의 결과가 참일 때 실행하고자 하는 실행문;

} else {

      표현식의 결과가 거짓일 때 실행하고자 하는 실행문;

}

 

위 형태의 문법으로 if 문과 else 문을 작성할 수 있다.

 

[그림 8] if문 사용 예

[그림 8]은 if 문을 작성한 예시이다. num1 < num2 가 참이기 때문에 '안녕하세요'만 출력된다.

 

 

2.5. for 문

for 문은 초기식, 표현식, 증감식을 갖고 있는 반복문이다.

 

for (초기식; 표현식; 증감식) {

      표현식의 결과가 참인 동안 반복적으로 실행하고자 하는 실행문;

}

 

위 형태와 같은 문법으로 for 문을 작성할 수 있다.

 

[그림 9] for문 사용 예

[그림 9]는 for 문을 작성한 예시이다. i의 초기값이 0으로 설정되었고, i가 10보다 작을 때 1씩 증가하도록 설계했다.

따라서 i의 값과 출력값을 비교해보면 다음과 같다.

 

i	0	1	2	3	4	5	6	7	8	9	10
출력값	0	1	2	3	4	5	6	7	8	9

 

증감식이 i++이기 때문에 연산을 먼저 수행하고 i의 값이 1 증가한다. 따라서 마지막에 i가 9가 되었을 때 console.log(i);는 그대로 9가 출력되고 그 다음에 i 값은 10이 된다. 이때 i의 값이 10이 되면서 i < 10 이라는 조건을 만족하지 않게 되었으므로 더이상 console.log(i);는 실행되지 않는다. 이러한 원리로 결국 0부터 9까지의 정수만 출력되는 것이다.