[자바스크립트] 기초 2

[자바스크립트] 기초 2 updated_at: 2024-07-24 14:22

1. 자바스크립트 개요

자바스크립트란?

객체지향 프로그램을 지원하는 인터프리터 방식의 프로그램 언어.
자바스크립트의 핵심부분인 코어 자바스크립트 문법은 C,C++,Java(자바)언어와 비슷하다.
웹브라우저에서 사용되는 자바스크립트를 클라이언트 측 자바스크립트라 한다.
자바스크립트와 자바는 서로 다른 언어이다.

DOM(Document Object Model)이란?

문서의 내용, 구조, 스타일을 스크립트를 통해 동적 접근 및 수정 할수 있도록 하는 인터페이스>다.
이미 출력이 된 문서(정적)를 삽입,수정,삭제등을 하여 재출력(동적)이 가능하다.

주요내용

자바스크립트의 시작 및 끝은 <script>``</script>을 사용한다.

메서드란?

객체지향 프로그래밍에서 사용하는 함수나 프로시저를 이야기함.

자바스크립트는 HTML문서 내용에 접근이 가능하다.
스크립트 작성시 웹브라우저와 에디터(메모장,에디트플러스등)만 있으면 가능하다.
자바스크립트내에서는 대소문자를 구분한다.
스페이스, 탭, 줄바꿈등은 자유롭게 이용이 가능하나, 줄나눔은 위치에 따라 제한사항이 존재한다.
문장 마지막에 세미콜론은 생략가능하나, 되도록이면 적는 습관을 가진다.
한줄짜리 주석은 //을 사용하고, 주석이 여러줄인 경우 /* 로 시작하고 */로 끝난다.
스크립트에 이용되는 데이터값을 리터럴(literal)이라 한다.

식별자

자바스크립트에서 변수나 함수 그리고 레이블 등에 이용되는 이름을 이야기한다.
첫번째 문자는 알파벳, 밑줄(_), 달러($)로 시작되어야 한다.
유니코드 표현시 '\u09a0'등과 같이 뒤에 4자리는 16진수 코드로 작성된다.

예약어

break	do	if	switch	typeof
case	else	in	this	var
catch	false	instanceof	throw	void
continue	finally	new	true	while
default	for	null	try	with
delete	function	return
abstract	double	goto	native	static
boolean	enum	implements	package	super
byte	export	import	private	synchronized
char	extends	int	protected	throws
class	final	interface	public	transient
const	float	long	short	volatile
debugger
arguments	encodeURI	Infinity	Object	String
Array	Error	isFinite	parseFloat	SyntaxError
Boolean	escape	isNaN	parseInt	TypeError
Date	eval	Math	RangeError	undefined
decodeURI	EvalError	NaN	ReferenceError	unescape
decodeURIComponent	Function	Number	RegExp	URIError

2. 자바스크립트 데이터 타입, 값, 변수

데이터 타입

숫자 리터럴 - 자바스크립트에서는 정수와 실수를 구분하지 않고 모두 실수로 표현됨.

정수 리터럴 (-9007199254740992 ~ 9007199254740992)
16진수, 8진수 (16진수는 '0X'로 시작하며, 8진수는 0으로 시작한다.)
부동소수점 리터럴

특수한 숫자 값

부동소수점 값으로 표현 가능한 값을 넘어갔을 경우 'Infinity'값을 출력, 음의 무한대를 넘어간 경우 '-Infinity'값을 출력
0으로 나눈값이나 에러를 발생시킬 경우에는 'NaN'이라는 특수값을 출력
'NaN'은 어떤 숫자와도 같지 않고, 스스로와 비교해도 같지 않는 특별한 진행방식을 같는다.
'NaN'은 isNaN() 함수로 판별을 할 수 있다.
isFinite()는 값이 'NaN'이 아니고, 양의 무한대나 음의 무한대가 아닌지 여부를 검사한다.

특수한 숫자 상수값

Infinity : 무한대를 나타내는 특수값
NaN : 숫자가 아닌 특수값
Number.MAX_VALUE : 표현 가능한 최대값</
Number.MIN_VALUE : 표현 가능한 최소값(0에 가까운)
Number.NaN : 숫자가 아닌 특수값
Number.POSITIVE_INFINITY : 양의 무한대를 표현하는 특수값<
Number.NEGATIVE_INFINITY : 음의 무한대를 표현하는 특수값

문자열

큰따옴표(") 나 작은따옴표(')로 문자열을 둘러싼 값

단일 문자도 길이가 1인 문자열로 취급된다.
문자열은 한줄을 넘지 말아야 한다.
줄바꿈시는 '\n'을 사용한다.
일부 특수 문자를 이용하기 위해서는 탈출문자를 이용한다.

이스케이프 문자

탈출문자	유니코드	내용
\0	\u0000	널문자
\b	\u0008	백스페이스
\t	\u0009	수평 탭
\n	\u000A	줄바꿈 문자
\v	\u000B	수직 탭
\f	\u000C	폼 피드
\r	\u000D	캐리지 리턴
\"	\u0022	큰따옴표
\'	\u0027	작은따옴표
\\	\u005C	역슬래시
\x**		두개의 16진수 숫자**에 의해 지정되는 Latin-1 문자
\u****		네개의 16진수 ****에 의해 지정되는 Unicode 문자

위 문자 이외의 문자 앞에 이용할 경우 ''는 무시된다. ex) $ => $

문자열 연산
- 문자열을 합칠때 '+' 연산자 이용
- String.length는 문자열을 알아내는 메서드이며, 문자열 인덱스는 0부터 시작한다.
- String.charAt(), String.substring(), String.indexOf() 등의 문자열 함수등이 있다.
- 문자열은 배열로 참조가 가능하다. ex) last_c = s[s.length-1]; //마지막 문자 구하기
- 위 배열 참조는 ECMAScript V3 표준이 아니기때문에 사용을 피한다.
숫자를 문자열로 변환
- 숫자 + 문자열 => 문자열로 변환 (단순 변환시 숫자 뒤 ""문자열을 더해줘도 됨)
- 명시적인 숫자 변환시 String(변수) or 변수.toString() 사용
- Number.toFixed(소수점 자리수), Number.toExponential(지수사용 자리수) 함수로 출력형태 지정가능
문자열을 숫자로 변환
- 숫자 연산식에 쓰이면 자동으로 숫자로 변환됨.
- 숫자 문자열 - 0 을 해서 숫자형으로 변환 (그러나 숫자 문자열 + 0 을 할경우 문자열로 처리가 된다.)
- 명시적 변환 방법은 Number(숫자 문자열)
- 위 내용은 문자열이 오로지 숫자일 경우만 가능하다.
- parseInt(), parseFloat()는 문자열 내에 숫자로 시작된값을 반환하고, 숫자 뒤의 문자들은 버린다.
- '0x','0X'로 시작하는 문자열은 16진수로 인식한다.
- 숫자를 반환하지 못하는 경우에는 'NaN'을 반환한다.
불리언 값
- 'true' 나 'false' 값을 갖는다.
- 숫자 연산에 쓰일경우 'true'는 '1', 'false'는 '0' 으로 반환한다.
- 문자열에서는 그대로 'true', 'false'값을 반환한다.
- 불리언 값 반환시 0, NaN, 빈문자열, null, undefined 인 경우 'false' 반환
- 위 값 이외에 null이 아닌 객체나 함수 배열등은 'true' 반환
- 명시적 불린값 변환시 Boolean(변수) 함수 이용
- not 연산자 두번 이용하여도 된다. ex) !!var

3. 자바스크립트 함수(function) 및 객체, 배열

함수(function)란?

자바스크립트에서 실행 가능한 코드들의 집합체라 할 수 있다.
한번 정의된 함수는 여러번 실행될 수 있으며, 전달인자나 매개변수를 넘겨받아 처리도 할 수 있다.
함수가 어떤 객체의 프로퍼티로 할당이 되면 메서드(method)로 불린다.<

함수 형태

function plus(x) //함수이름은?plus이며, 전달인자 x값을 받는다.?
{ //함수의 시작을 의미한다.
  return x+x;//계산한 값을 반환한다.
} //함수의 종료를 의미한다.

함수 리터럴 형태

var plus = function(x) { return x+x; } //함수이름을 생략가능하다.
var plus = new Function("x", "return x+x;"); //전달인자 목록과 함수 몸체를 문자열 형태로 함수 생성자에 전달, 비효율적임

객체

이름붙은 값들의 집합체

프로퍼티

객체가 가지고 있는 일종의 변수
배열이나 함수, 객체를 포함한 어떠한 값도 가질수 있다.
함수가 프로퍼티로 저장될 경우 메서드라 부른다.<

프로퍼티 접근법

프로퍼티에 접근하기 위하여 '객체.프로퍼티'로 사용
메서드를 실행하기 위하여 '객체.메서드()'로 사용
연관배열로 접근하기 위하여 '객체["프로퍼티"]'로 사용<

객체 생성법

'new' 라는 특수 생성자 함수를 호출하여 생성
ex) var exp = new Object();? //새로운 객체 생성
ex) exp.a = 20;?? //프로퍼티 값 설정<

객체 리터럴

객체의 생성과 초기화를 동시에 진행
객체 = {프로퍼티?이름 :?값, ... }
ex) var exp?=?{ a:20, b:50 };? //a,b 각 프로퍼티에 값을 지정
ex) var exp = { exp1: {a:20,b:50}, exp2: {c:70,d:100} };?
alert(exp["exp1"]["a"]);? //중첩된 리터럴 사용<

배열(array)

데이터들의 집합을 의미한다.
각 데이터들은 고유한 인덱스 값을 가짐
배열의 인덱스는 0 부터 시작함
배열의 원소들은 각각 다른 타입의 값을 가질수 있다.
다차원 배열은 지원하지 않지만, 배열의 원소가 또다른 배열을 가질수 있다.<

배열의 생성 및 초기화

'new' 특수 생성자 함수를 이용해 생성
var arr = new Array();? //배열의 생성
var arr = new Array("test",30,true,{a:30,b:50});? //배열의 생성 및 배열값을 초기화
var arr = new Array(100);? //배열을 생성하고, 정의되지 않은 원소 100개도 포함<

배열 리터럴

var arr = ["test",30,true,{a:30,b:50}];? //배열 리터럴로 배열 생성및 초기화
var arr = [ [1,2,3],[4,5,6],[7,8,9] ];? //중첩된 리터럴 사용
var arr?= [1,,,,5];? //데이터 1,5를 포함하고 정의되지 않은 원소3개를 포함하여 총 5개의 배열원소를 생성

4. null, undefined, Date 객체, 정규표현식, Error 객체, 타입변환, 값에 의한, 참조에 의한

null

아무런 값도 없는 고유한 특수값
블리언에서 'false'로 변환
숫자문맥에서 0으로 변환
문자열 문맥에서 "null"로 변환<

undefined

선언은 되었지만 값이 할당되지 않은 변수에 접근할 경우 반환
존재하지 않는 프로퍼티에 접근할 경우 반환
null과는 동일하지 않지만 동등연산자('==')는 같은 것으로 간주함.
undefined는 null과 다르게 예약어가 아니다.
불리언에서 'false'로 변환
숫자문맥에서는 'NaN'으로 반환
문자열문맥에서는 "undefined"로 변환<

Date 객체

기본 데이터 타입은 아니지만, 날짜와 시간을 표현하고 그값을 조작하는데 사용할 수 있는 객체 집합
ex) var today = new Date(); //현재 날짜와 시간을 담고 있는 객체 생성
ex) var birthday = new Date(2010,5,5); //어린이날 지정한 객체 생성<

정규 표현식(regular expression)

주어진 텍스트 패턴을 매칭, 검색, 치환을 구현하는데 강력한 문법을 제공함.
표현 문법은 펄(Perl) 언어의 정규표현식을 사용한다.
정규표현식은 RegExp 객체로 표현되며, RegExp()생성자로 생성함.
RegExp 객체도 기본 타입이 아니다.
리터럴을 제공하며, '/^[0-9]{5}$/'의 형태를 가진다.<

Error 객체

런타임 에러 발생시 에러 내용을 담고 있는 객체이다.
에러 메시지를 담고 있는 message 프로퍼티가 있다.
여러 에러객체의 종류에는 Error, EvalError, RangeError, ReferenceError, SyntaxError, TypeError, URIError이 있다.<

자동 데이터 타입변환 표

값	문자열 문맥	숫자 문맥	불리언 문맥	객체
undefined	"undefined"	NaN	false	Error
null	"null"	0	false	Error
빈 문자열이 아닌 문자열	그 자체	문자열이 나타내는 숫자 값 혹은 NaN	true	String 객체
빈 문자열	그 자체	0	false	String 객체
0	"0"	그 자체	false	Number 객체
NaN	"NaN"	그 자체	false	Number 객체
무한대	"Infinity"	그 자체	true	Number 객체
음의 무한대	"-Infinity"	그 자체	true	Number 객체
기타 숫자	숫자를 그대로 문자열로 표현	그 자체	true	Number 객체
true	"true"	1	그 자체	Boolean 객체
false	"false"	0	그 자체	Boolean 객체
Object	toString()	valueOf(), toString(), NaN	true	그 자체

기본 데이터 타입

숫자, 문자열, 불리언
각 기본타입에 Number, String, Boolean 클래스가 대응된다.
Object 객체는 모든 타입에 대응된다.<

래퍼(wrapper) 객체

기본 데이터 타입과 동일한 값을 가지고 있다.
데이터 조작을 위한 프로퍼티와 메서드를 가지고 있다.
기본타입에서 래퍼객체로 변환될 경우 래퍼객체는 자동 생성후 자동으로 소멸된다.
모든 숫자, 문자열, 불리언 값은 Object() 함수를 통해 대응되는 래퍼 객체로 변환된다.
ex) var num_obj = Object(3); // Number 래퍼로 대응된다.<

객체에서 기본타입으로 변환

null이 아닌 객체가 불리언 문맥에서 사용시 true를 반환하며, 객체가 가지고 있는 고유값과는 상관이 없다.
ex) Boolean(false); //값은 거짓이더라도 Boolean 객체자체의 여부를 판단하기 때문에 true로 변환된다.
Object는 기본 valueOf() 메서드를 상속받고, 기본 데이터 타입 값을 반환하지 않는다.
Object 객체에서 숫자로 변환될 경우에는, valueOf() 메서드로 객체 자체가 반환되고, toString() 메서드가 호출된다.
배열에서 toString()로 변환시에는 원소와 원소사이 쉼표로 이어진 문자열이 반환되고, 빈 배열은 빈 문자열로 반환되어 숫자0으로 변환된다. 배열의 원소가 둘 이상이거나, 숫자가 아닌 원소가 있으면 'NaN'으로 변환된다.
대부분의 객체는 valueOf(), toString() 메서드를 가지고 있지 않다.
valueOf() 메서드 역활은 객체를 적절한 기본 타입 값으로 변환하는것이다.<

데이터 값을 다루는 방식

값에 의한(by value)
참조에 의한(by reference)<

값에 의한 방식

변수에 대입할 경우 실제의 값이 대입되고, 복사본이 존재한다.
함수에 매개변수로 전달할 경우 그 값만이 전달이 되며, 전달되는 원본 값은 변하지 않는다.<

참조에 의한 방식

변수에 대입할 경우 실제의 값이 아닌, 원본값의 참조값이 넘어가며, 변수값이 변경되면 원본 값도 변경된다.
함수에 매겨변수로 전달될 경우 원본의 참조값이 넘어가며, 함수내에서 변경시 함수 밖 원본값도 변경된다.<

기본 타입과 참조 타입

기본타입은 값에 의해 조작이 되며, 숫자와 불리언 값, null, undefined 타입이다.
참조타입은 참조에 의해 조작이 되며, 객체(Object), 배열, 함수등이다.
객체나 배열등은 그 크기가 엄청나게 커질수 있으므로 이들의 대한 값에 의한 조작은 할 수 없다.
문자열은 기본인지 참조인지 명확치가 않지만 값에 의한 조작으로 보아도 무방하다.<

5. 변수, 변수의 유효범위, 가비지 컬렉션, 변수와 프로퍼티

변수란?

변하는 값을 갖는 저장공간을 의미
변수의 타입은 정해져 있지 않음
변수 선언시 'var' 키워드 사용
변수 선언시 초기화 하지 않으면, 변수가 갖는 값은 'undefined'이다.
'var'로 선언된 변수는 영구적이다.
변수는 여러번 선언이 되어도 상관없다.
선언되지 않은 변수에 값을 할당하면, 묵시적으로 변수가 선언된다.
문시적으로 선언된 변수는 함수 내부라 하더라도 전역변수로 선언된다.
함수 내부에서만 이용할 지역변수는 'var'로 선언해주도록 한다.<

변수의 유효범위(scope)

변수의 유효범위란 변수의 값이 유지되는 범위를 이야기 한다.
전역변수는 코드 전체에 유효하며, 지역변수는 현재 선언된 범위내(함수내)에서만 유효하다.
같은 변수 이름이 존재할 경우 전역변수보다 지역변수가 우선한다.
블록내 유효범위는 존재하지 않는다.<

정의되지 않은 변수

정의되지 않은 변수는 선언되지 않은 변수와 할당되지 않은 변수로 나뉜다.
선언이 되지 않은 변수는 변수가 생성되지 않았기 때문에 변수에 접근시 런타임 오류가 발생한다.
하지만 선언되지 않은 변수에 할당할 경우에는 묵시적인 선언이 되기때문에 오류가 나지 않는다.
할당되지 않은 변수는 'undefined'라는 값을 갖는다.<

가비지 컬렉션

더이상 이용되지 않는 메모리공간(변수) 자동으로 판단해 메모리를 이용할 수 있도록 해제해주는 시스템<

6. 연산자

자바스크립트 연산자

우선순위	결합방향	연산자	내용
1	좌->우 좌->우 좌->우 우->좌	. [] () new	프로퍼티 접근 배열 인덱스 함수 호출 새 객체 생성
2	우->좌 우->좌 우->좌 우->좌 우->좌 우->좌 우->좌 우->좌 우->좌	++ -- - + ~ ! delete typeof void	단항연산, 변수값 증가 단항연상, 변수값 감소 부정, 단항 마이너스 연산없음, 단항 플러스 NOT 비트 논리 NOT 프로퍼티 정의 무효화 데이터 타입 반환 undefined 값 반환
3	좌->우	*,/,%	곱하기,나누기,나머지
4	좌->우	+,- +	더하기, 빼기 문자열 붙이기
5	좌->우	<<,>>,>>>	왼쪽이동,부호비트 확장하며 오른쪽 이동,오른쪽 이동
6	좌->우	<,<=,>,>= instanceof in	작다,작거나 같다,크다,크거나 같다 객체타입 확인 프로퍼티가 존재하는지 확인
7	좌->우	== != === !==	동등한가? 동등하지 않는가? 일치하는가? 일치하지 않는가?
8	좌->우	&	AND 비트연산
9	좌->우	^	XOR 비트연산
10	좌->우	\|	OR 비트연산
11	좌->우	&&	AND, 그리고
12	좌->우	\|\|	OR, 또는
13	우->좌	?:	예) 변수=(조건식)?문장1:문장2;
14	우->좌	= *=,/=,%=,+=,-=,<<=,>>=,>>>=,&=,^=,\|=	좌변에 값 할당 연산후 할당 및 비교연산
15	좌->우	,	복수 평가