JavaScript 기본 문법

1. JavaScript 기본문법
2. JavaScript 함수/조건문/반복문

00  자바스크립트의 정의

---

자바스크립트(JavaScript, JS)는 웹페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립팅 언어 또는 프로그래밍 언어이다. HTML이 웹 콘텐츠의 기본 구조와 의미를 정의하고, CSS는 HTML 콘텐츠에 색상, 글꼴, 레이아웃 등 스타일을 적용한다면, JavaScript 는 웹페이지의 동적 콘텐츠를 바꾸고, 멀티미디어를 제어하고, 애니메이션을 추가하는 등 각종 기능을 만들 수 있다. 본래는 브라우저에서 쓸 목적으로 고안된 언어이나, 현재는 다양한 환경에서 활용되고 있다.

01  코드 구조

---

자바스크립트 문법의 대부분은 C, C++, Java로부터 차용하여 제작되었으며, 다수의 표현식(expression)으로 하나의 명령문(statement)이 만들어지고 명령문의 내용을 바탕으로 프로그램(application)이 실행된다. 하나의 명령문의 끝은 개행문자(enter) 또는 세미콜론(semicolon, ;)으로 표시된다(enter 사용 시 세미콜론을 생략할 수 있음).

 

• 표현식(expression) : 값으로 평가될 수 있는 문으로, 단일 값을 생성. 값으로 평가될 수 있는 문은 전부 표현식.
• 문(statement) : 어떤 작업을 수행하는 문법 구조(syntax structure)와 명령어(command). 프로그래밍을 구성하는 기본 단위이자 최소 실행단위. 값이 들어가야 할 곳에 들어갈 수 없기 때문에 함수의 인자, 대입 연산된 값, 연산자의 피연산자, 반환 값으로 사용 불가.

let
hello
"안녕하세요"
//표현식(값)

let hello="안녕하세요";
//문

02  기본 용어

---

값 Value : 더이상 평가될 수 없는 하나의 식으로 자료형을 간단히 이루는 값

자료형 Data Type : 숫자형, 불리언(논리), 문자, 문자열

 

변수 Variable : 다양한 값을 담을 수 있는 박스와 같은 컨테이너

값이 저장된 메모리 주소와 이름을 연결할 때, 그 주소의 별칭이 변수

 

키워드 Keyword : 자바스크립트에서 문법을 만들 때 미리 정해진 용도로 동작하기 위해 정의해 놓은 단어

(*ES5,ES6에 추가된 단어 / 표 출처 https://www.w3schools.com/js/js_reserved.asp )

 

abstract	arguments	await*	boolean
break	byte	case	catch
char	class*	const	continue
debugger	default	delete	do
double	else	enum*	eval
export*	extends*	false	final
finally	float	for	function
goto	if	implements	import*
in	instanceof	int	interface
let*	long	native	new
null	package	private	protected
public	return	short	static
super*	switch	synchronized	this
throw	throws	transient	true
try	typeof	var	void
volatile	while	with	yield

 

식별자 : 스크립트에서 변수나 함수에 이름을 붙일 때 사용하는 단어로, 대소문자를 구별하며 유니코드 문자셋을 사용

• 키워드 사용 불가 (for, let, while 등 자바스크립트 키워드-어느 쪽인지 판단할 수 없어서)
• 숫자로 시작 불가 ( ex: 123string (x) string123 (O) )
• 특수문자는 _, $만 허용
• 공백 문자 포함 불가 ( ex: reverse number (x) reverse_number (O) )

주석 : 프로그램 구현 시 개발자의 설명 및 이해를 도와주는 문장으로 실제 실행 코드에는 포함되지 않음.

단일 행 주석 //
//무슨 말을 써도 코드에는 포함되지 않음

다중 행 주석 /* */
/*
한 번에 여러 줄을 주석으로 만들 수 있음
역시 어떤 글을 써도 코드와 상관 없음!
개행이 되어도 주석 처리가 되는 것이 차이
*/

03  변수와 상수

---

변수

변경 가능한 값을 저장하기 위한 기억 공간(memory)으로, 사용하기 전 반드시 선언을 해야 한다. 중복선언은 불가하며, 변수를 선언할 때 사용하는 키워드는 let 이다.

변수 명에는 문자와 숫자, 기호 _,$만 들어갈 수 있으며, 첫 글자는 숫자가 될 수 없다. 일반적으로 카멜 표기법(camelCase)으로 변수 명을 작성한다.

let 변수명 = "값";

let message; //선언
message = 'Hello!'; //값 할당
message = 'World!'; // 값 재할당
let age = 33; //선언과 동시에 할당

let myPhoneNumber;
//카멜 표기법: 단어를 차례대로 나열하면서 첫 단어를 제외한 각 단어의 첫 글자를 대문자로 작성

 

상수

변경 불가능한 값을 저장하기 위한 기억 공간으로 사용하기 전 반드시 선언해야 한다(선언과 동시에 값 초기화). 중복선언 은 불가하며, 상수를 선언할 때 사용되는 키워드는 const 이다.

상수는 재할당할 수 없으므로 변경하려 하면 에러가 발생한다. 변숫값이 절대 변경되지 않을 것이라 확신할 시, 값 변겨을 방지하면서 다른 개발자들에게 이 변수가 상수임을 알리기 위해 const를 사용해 선언해야 한다. 상수는 재할당할 수 없으므로 변경하려 하면 에러가 발생한다.

 

*대문자 상수 : 상수는 대문자와 밑줄로 구성된 이름으로 명명한다. 일반적인 변수명을 작성할 때처럼 명명해도 무방하며, 하드 코딩한 값의 별칭을 만들 때 사용하면 된다.

const myBirthday = '18.04.1982';
myBirthday = '23.05.1999'; //상수이므로 재할당 불가, 에러 발생

const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";

let color=COLOR_RED;

04  자료형 Data Type

---

목적에 따라 특별한 성질이나 정해진 범주를 갖고 있는 데이터의 종류로, 크게 원시 타입(Primitive value)과 객체(Object)가 있다.

구분	데이터 타입	설명
원시 타입 Primitive value : 변경 불가능한 값	Boolean 불린	논리적 값. true/false
	null	존재하지 않거나 유효하지 않은 주소 표시
	undefined	선언 후 값을 할당하지 않은 변수
	number 숫자	정수, 실수 등 숫자(최대 2^53)
	string 문자열	빈 문자열이나 글 표현하는 문자열
	symbol 심볼	문자열과 함께 객체 프로퍼티로 사용, ES6에 추가
객체 Object	object	두 개 이상의 복잡한 객체 저장 가능

 

typeof 연산자

인수의 자료형을 반환하는 연산자로, 연산자인 typeof x와 함수인 typeof(x)로 문법을 지원한다. 자료형에 따라 처리 방식을 다르게 하고 싶거나 변수형의 자료형을 빠르게 알아내고자 할 때 유용하다.

console.log(typeof Math); // output : object
console.log(typeof “Hello World!”); // output : string
console.log(typeof Symbol(“id”)); // output : symbol
console.log(typeof console.log); // output : function
console.log(typeof 456n); // output : bigint

 

Boolean

논리적인 값을 표현하는 자료형으로 참인 true, 거짓인 false 두 가지 값만 존재한다. 주로 조건문 등에서 동작 판단의 기준으로 사용된다.

let nameFieldChecked = true; // 네, name field가 확인되었습니다(checked).
let ageFieldChecked = false; // 아니요, age field를 확인하지 않았습니다(not checked)

let isGreater = 4 > 1;
alert( isGreater ); // true (비교 결과: "yes")
//비교 결과를 저장

 

null

값이 비어 있다는 의미로 표현되는 자료형으로 존재하지 않는(nothing), 비어 있는(empty), 알 수 없는(unknown) 값을 나타내는 데 사용된다.

console.log(typeof null);  
//output: object < 하위버전 호환성으로 object 표기
const null_check=null;
console.log(null_check===null);  // output : true

 

undefined

값이 할당되어 있지 않은 상태를 나타낼 때 사용되는 자료형으로 변수 선언 후 초기화하지 않는다면, undefined 가 자동으로 할당된다. 변수 할당 여부 파악용으로 사용된다.

변수에 undefined를 명시적으로 할당할 수도 있으나, 권장되지는 않으며 변수가 비어있거나 알 수 없는 상태라는 것을 나타내려면 null을 사용해야 한다.

let apple;   //할당 후 초기화하지 않음
console.log(apple);  //output : undefined

 

Number 숫자형

정수, 부동소수점(floating point) 숫자를 표현하는 자료형으로 number과 관련된 연산은 사칙연산이 대표적이다.

일반적인 숫자 외 Infinity, -Infinity, NaN(Not a Number) 같은 특수 숫자 값들이 포함된다. 2^53-1 보다 큰 값을 사용할 수 없으며, 더 큰 정수를 다루고 싶다면 bigint 자료형을 사용해야 한다.

let num_1=123.0;
let num_2=123.456;
let num_3=1/0;
let num_4=123456n;   //BigInt(“123456”)

console.log(num_1-num_2) //output: -0.4560000000000307
(부동소수점 계산 시 최적화 이슈로 계산 오류가 발생)
console.log((num_1-num_2).toFixed(3));  //output: -0.456
//toFixed(n) : 소수점 n자리 이하 값은 버림 처리하는 함수
console.log(num_3);  // Infinity
console.log(num_1 / “hello”); //NaN (문자는 숫자가 아님)
console.log(typeof num_4);  //bigint

 

String  문자열

문자 및 문자열을 표현하는 자료형으로 텍스트 길이 상관 없이 텍스트 형식의 데이터는 문자열 형태로 저장된다. 총 3가지 종류의 따옴표( " ", ' ', ` ` )로 표현 가능하다. 작은따옴표와 큰따옴표는 기능상 차이가 없으나 백틱(` `)은 문자 안에 변수(${...})를 삽입할 수 있으며, 이런 방식을 템플릿 리터럴(template literal)이라고 한다.

let str_1="Hello";  //큰따옴표
let str_2='World!';  //작은따옴표 (“, ‘ 은 비슷하게 사용)
let num=3
let str_3=`hello_${num}`;  // 백틱+변수, output : hello_3

//백틱을 이용한 템플릿 리터럴
function sum(a, b) {
  return a + b;
}

alert(`1 + 2 = ${sum(1, 2)}.`); // 1 + 2 = 3.

//백틱 사용 시 여러 줄에 걸쳐 문자열을 만들 수 있음
let guestList = `손님:
 * John
 * Pete
 * Mary
`;

05  객체 Object

---

다수의 원시 자료형을 포함하거나 복잡한 개체(entity)를 표현할 수 있는 자료형으로 Object() 혹은 중괄호({})를 통해 생성한다. object의 개체는 key : value 형태로 표현(property)하며, 접근은 object.key 형태로 표현한다.

key에는 문자형, value에는 모든 자료형이 허용되며, '프로퍼티 키'는 '프로퍼티 이름' 또는 '식별자' 라고도 부른다.

객체(object)에 대한 개체(entity) 추가는 obj.key=value, 삭제는 delete 명령어를 통해 수행된다.

//객체를 만드는 방법
let user = new Object(); // '객체 생성자' 문법
let user = {};  // '객체 리터럴' 문법

let user = {     // 객체
  name: "John",  // 키: "name",  값: "John"
  age: 30        // 키: "age", 값: 30
};

//점 표기법 dot notation
alert( user.name ); // John
alert( user.age ); // 30
//user에 대한 공간에 접근해서 공간을 찾고 그 안의 name이라는 번지를 찾는다는 개념으로 이해

//삭제
let user={
   name:”john”,
   age: 27
};
user.weight=”72kg”;
console.log(user);  // { name : ‘john’, age: 27, weight: ’72kg’ }
delete user.age;
console.log(user);  // { name : ‘john’, weight: ’72kg’ }

06  연산자

---

연산자는 프로그램에서 데이터를 처리하여 결과를 산출할 목적으로 사용되는 문자이다. 연산의 대상 값은 피연산자라고 하며, 피연산자의 개수에 따라 단항/이항/삼항 연산자의 종류가 존재한다.

 

단항 연산자	부호 연산자 : +, - 증감 연산자 : ++, -- 논리 연산자 : ! 비트 연산자 : ~
이항 연산자	산술 연산자 : +, -, *, /, % 대입 연산자 : =, +=, -= 비교 연산자 : ==, !=, ===, !== 논리 연산자 : &&, ||, !
삼항 연산자	(조건식) ? 참일 경우의 식 : 거짓일 경우의 식

 

* 연산자 우선순위 표 (출처 https://lpla.tistory.com/112 )

 

우선순위	연산자 유형	연산자
...	...	...
17	단항 덧셈	+
17	단항 부정	-
16	거듭제곱	**
15	곱셈	*
15	나눗셈	/
15	나머지	%
14	덧셈	+
14	뺄셈	-
...	...	...
3	할당	=
...	...	...

 

산술연산자 : 수학적 계산을 위해 제공하는 연산자

console.log(5+6) //덧셈 +
console.log(8-2) //뺄셈 - 
console.log(7*9) //곱셈 *
console.log(10/76) //나눗셈 /
console.log(3%10) //나머지 %
console.log(5**6) //거듭제곱 **

 

대입연산자 : 계산한 결과를 하나의 변수에 저장하기 위한 연산자

let num=1234;
let ber=5678;
let str="Welcome";
let str2="Home!"

let add, str3;
add=num+ber;
str3=str+str2;

 

복합대입연산자: 산술연산자로 피연산자를 계산해 결과값을 한 번에 대입시켜주는 연산자

 

+=	왼쪽의 피연산자에 오른쪽의 피연산자를 더한 후, 왼쪽의 피연산자에 대입함.
-=	왼쪽의 피연산자에서 오른쪽의 피연산자를 뺀 후, 왼쪽의 피연산자에 대입함.
*=	왼쪽의 피연산자에 오른쪽의 피연산자를 곱한 후, 왼쪽의 피연산자에 대입함.
/=	왼쪽의 피연산자를 오른쪽의 피연산자로 나눈 후, 왼쪽의 피연산자에 대입함.
%=	왼쪽의 피연산자를 오른쪽의 피연산자로 나눈 후, 그 나머지를 왼쪽의 피연산자에 대입함.
.=	왼쪽 피연산자의 문자열에 오른쪽 피연산자의 문자열을 추가한 후, 왼쪽의 피연산자에 대입함.
<<=	왼쪽의 피연산자의 비트를 오른쪽의 피연산자만큼 전부 왼쪽으로 이동시킨 후, 그 결과를 왼쪽의 피연산자에 대입함
>>=	왼쪽의 피연산자의 비트를 부호를 유지하면서 오른쪽의 피연산자만큼 전부 오른쪽으로 이동시킨 후, 그 결과를 왼쪽의 피연산자에 대입함.
&=	왼쪽의 피연산자와 오른쪽의 피연산자의 논리식이 모두 true면 왼쪽 피연산자에 true을 대입하고, 그 외에는 false을 대입함.
|=	왼쪽의 피연산자나 오른쪽의 피연산자의 논리식 중 하나라도 true면 왼쪽 피연산자에 true을 대입하고, 그 외에는 false을 대입함.
^=	왼쪽 피연산자의 논리식과 오른쪽 피연산자의 논리식이 서로 다르면 왼쪽 피연산자에 true을 대입하고, 그 외에는 false을 대입함.

(표 출처 http://www.tcpschool.com/php/php_operator_assignment )

 

 

증가/감소 연산자 : 숫자 1만큼 증가시키거나 감소시킬 때 사용되는 연산자

• 증가 연산자: ++(피연산자), (피연산자)++
• 감소 연산자: --(피연산자), (피연산자)--

**피연산자 앞: 증감 연산자가 반영된 결과가 return됨

**피연산자 뒤: 피연산자 먼저 값 넣은 후 증감연산자 반영

 >> 위치에 따라 동작이 달라지기 때문에 주의해서 사용해야 한다.

 

비교 연산자 : 좌항과 우항의 피연산자를 비교한 다음 결과값을 논리적 자료형으로 반환하는 연산자

 

비교연산자	설명	예제	결과
a>b	a가 b보다 크면 true,아니면 false	5>3	true
a<b	a가 b보다 작으면 true,아니면 false	5<3	false
a>=b	a가 b보다 크거나 같으면 true,아니면 false	5>=10	false
a<=b	a가 b보다 작거나 같으면 true,아니면 false	10<=10	true
a==b	a와 b가 같으면 true, 아니면 false(느슨하게)	5=='5'	true
a===b	a와 b의 값 또는 데이터 타입이 같으면 참, 아니면 거짓(엄밀하게)	5==='5'	false
a!=b	a와 b가 다르면 true, 아니면 false(느슨하게)	5!='5'	false
a!==b	a와 b의 값 또는 데이터 타입이 같으면 true, 아니면 false(엄밀하게)	5!=='5'	true

 

논리 연산자 : 좌항과 우항의 피연산자 간 논리 값을 연산하여 참 또는 거짓을 결과로 얻는 연산자

 

논리 연산자	설명	예제	결과
a || b (AND)	a가 b보다 크면 true, 아니면 false	false || 0 false || true	false true
a && b (OR)	a가 b보다 작으면 true, 아니면 false	true & 3 true && false	false true
!a (NOT)	a가 b보다 크거나 같으면 true, 아니면 false	!false !123	true false

 

07  스코프 Scope

---

스코프는 변수 혹은 상수에 접근할 수 있는 범위로, 모듈/함수 내 코드에서 동일한 변수 사용 시 간섭을 줄이는 용도로 사용된다. Global Scope(전역 스코프)와 Local Scope(지역 스코프=>함수 스코프, 블록 스코프) 의 타입으로 구분한다.

 

• Global Scope : 전역에 선언되어 어디서도 접근 가능
• Local Scope(block, function level scope): 특정 지역에 선언되어, 해당 지역 내에서만 접근 가능(블록 {}, 함수 등)

Global > let x=1;  let y=2; (전역)
Local>  { //괄호 내에서 선언
	let x=3;  let y=5;
}
function scope(){ //함수 내 선언
let x=6;  let y=7;
}
//global scope
let A=1;  let B=2;
{ //local scope
let C=3;  let D=4;
	{ let C=3;  let D=4; } //오버라이딩됨
}
console.log(C);  //ReferenceError: C is not defined(C는 지역스코프에만 있기 때문)

08  형 변환 Type Conversion

---

자바스크립트는 느슨한 타입 언어 혹은 동적 타입 언어로 변수의 자료형을 명시적으로 선언할 필요가 없는 언어로, 일반적으로는 연산자로 인한 계산 또는 변수에 전달되는 값은 자바스크립트에서 자동적으로 암묵적 형 변환이 수행된다.

강제적 형 변환을 위해서는 자료형 함수를 이용해 명시적 형 변환을 수행해야 한다.

 

문자형 변환  String(value)

- 문자형 값이 필요할 때 발생

- 다른 형의 값을 전달받으면 문자형으로 자동 변환

- String(value) 함수로 문자열 명시적 형 변환 가능

let value = true;
alert(typeof value); // boolean

value = String(value); // 변수 value엔 문자열 "true"가 저장됩니다.
alert(typeof value); // string

 

숫자형 변환  Number(value)

- 수학과 관련된 함수와 표현식에서 자동적으로 암묵적 형 변환이 발생

- Number(value) 함수 사용하면 주어진 값을 숫자형으로 명시적 변환 가능

- 숫자형 변환 규칙

 

전달받은 값	형 변환 후
undefined	NaN
null	0
true / false	1 / 0
string	-문자열의 처음과 끝 공백이 제거됨 -남아있는 문자열이 없으면 0, 그렇지 않다면 문자열에서 숫자를 읽음 -변환 실패 시 NaN

let str = "123";
alert(typeof str); // string

let num = Number(str); // 문자열 "123"이 숫자 123으로 변환됩니다.

alert(typeof num); // number

//숫자 이외의 글자가 들어가 있는 문자열을 변환 시
let age = Number("임의의 문자열 123");

alert(age); // NaN, 형 변환이 실패합니다.

불린형 변환  Boolean(value)

- 논리 연산 수행 시 발생

- 0, 빈 문자열, null, undefined, NaN 등 “비어있다고” 느껴지는 값들은 false가 됨.

- 그 외의 값은 true로 변환됨

alert( Boolean(1) ); // 숫자 1(true)
alert( Boolean(0) ); // 숫자 0(false)

alert( Boolean("hello") ); // 문자열(true)
alert( Boolean("") ); // 빈 문자열(false)

//문자열 "0"은 true
alert( Boolean("0") ); // true
alert( Boolean(" ") ); // 비어있지 않은 문자열은 언제나 true

---

참고자료

 

MDN JavaScript 문서  https://developer.mozilla.org/ko/docs/Web/JavaScript

모던 JavaScript 튜토리얼 문서  https://ko.javascript.info/