[JS] 자바스크립트 기초 - 기본

📌 키워드

키워드는 특별한 의미가 부여된 단어다.

ex) break, if, else, true, false, null, return, var ,void 등

 

📌 식별자

식별자는 이름을 붙일 때 사용하는 단어다.

 

식별자 규칙은 다음과 같다.

• 키워드를 사용하면 안 된다.
• 특수 문자는 '_'와 '$'만 허용된다.
• 숫자로 시작하면 안 된다.
• 공백은 입력하면 안 된다.

식별자 생성시 관례

1. 생성자 함수의 이름은 항상 대문자로 시작한다.
2. 변수, 함수, 속성, 메소드의 이름은 항상 소문자로 시작한다.
3. 여러 단어로 된 식별자는 각 단어의 첫 글자를 대문자로 한다.(Camel Case)

📌 주석

프로그램의 진행에 전혀 영향을 주지 않는 코드다.

프로그램을 설명할 때 주로 사용한다.

방법	표현
한 줄 주석 처리	// 주석 내용
여러 줄 주석 처리	/* 주석 내용 */

 

📌 기본 자료형

1. 숫자

연산자	설명
+	덧셈 연산자
-	뺄셈 연산자
*	곱셈 연산자
/	나눗셈 연산자
%	나머지 연산자

※ 나머지 연산자와 부호

나머지 연산자의 부호는 왼쪽 피연산자의 부호를 따른다. (오른쪽 피연산자의 부호는 전혀 상관없다!)

console.log(4 % 3)   // 1
console.log(-4 % 3)  // -1
console.log(4 % -3)  // 1
console.log(-4 % -3) // -1

 

2. 문자열

문자의 집합을 문자열이라고 한다. 하지만, 한 문자로 구성된 것(ex 'a')도 문자열로 취급한다.

※ 자주 사용하는 이스케이프 문자

이스케이프 문자	설명
＼t	수평 탭
＼n	줄바꿈
＼'	작은따옴표
＼''	큰따옴표
＼＼	역슬래시

 

※ 문자열에 사용되는 연산자

연산자	설명
+	문자열 연결 연산자
문자열[숫자]	문자 선택 연산자

 

※ 템플릿 문자열(ECMAScript6)

ECMAScript6부터는 템플릿 문자열 기능이 추가되었다. 템플릿 문자열은 ` 기호로 생성한다.

템플릿 문자열은 생성 이후에는 일반 문자열과 똑같이 취급된다.

 

또한 템플릿 문자열은 생성할 때 내부에 ${표현식}을 사용할 수 있다. 내부에 ${표현식}을 입력하면 표현식이 계산되어 문자열에 들어간다.

`안녕하세요` // 안녕하세요

`52 + 273 = ${52 + 273}` // '52 + 273 = 325'

`올해는 ${new Date().getFullYear()}년입니다.` // '올해는 2021년입니다.'

 

📌 불(Bool)

참과 거짓으로 표현할 때 사용한다. → true / false

 

※ 비교 연산자

연산자	설명
==	같다.
!=	다르다.
>	왼쪽 피연산자가 크다.
<	오른쪽 피연산자가 크다.
>=	왼쪽 피연산자가 크거나 같다.
<=	오른쪽 피연산자가 크거나 같다.

추가로 자바스크립트는 비교 연산자를 문자열에도 적용할 수 있다.

문자열은 사전 순서에서 앞에 있는 문자열이 작은 값을 가진다. ex) "가나" < "다라"

 

※ 논리 연산자

연산자	설명
!	논리 부정 연산자
||	논리합 연산자(OR)
&&	논리곱 연산자(AND)

 

📌 변수

변수는 값을 저장할 때 사용하는 식별자다. 

숫자뿐만 아니라 모든 자료형을 저장할 수 있다.

let 식별자;

let pi;
pi = 3.141592;

let pi = 3.141592;

1. 변수 선언하기 - let

• 데이터 값에 이름을 지정하여 사용하고 싶을 때
• 데이터 값을 반복 사용하고 싶을 때
• 값 변경이 가능한 변수를 사용하고 싶을 때 cf) 데이터 값의 수정이 불가능한 상수를 사용하고 싶을 때 → const

// 변수 초기화 생략 - 변수의 초기화는 생략이 가능하며, 생략 시 값으로 'undefined'가 주어진다.
let value;
console.log(value); // undefined

// 한꺼번에 변수 선언하기 - 콤마(,)로 구분하면 'let'하나에 여러 개의 변수를 선언할 수 있다.
let a = 1,
	b = 2,
    c;
console.log(a + b); // 3
console.log(c);     // undefined

 

📌 복합 대입 연산자

복합 대입 연산자는 자료형에 적용하는 기본 연산자와 '='연산자를 함께 사용할 수 있다.

연산 및 대입을 동시에 진행한다.

연산자	설명
+=	숫자 덧셈 후 대입 연산자(문자열도 가능!)
-=	숫자 뺄셈 후 대입 연산자
*=	숫자 곱셈 후 대입 연산자
/=	숫자 나눗셈 후 대입 연산자

이외에도 '**=', '%='가 있다.

📌 증감 연산자

증감 연산자는 단항 연산자로 변수 앞과 뒤에 ++ 기호와 -- 기호를 붙여 만든다.

연산자	설명
변수++	기존 변수 값에 1을 더한다.(후위)
++변수	기존 변수 값에 1을 더한다.(전위)
변수--	기존 변수 값에 1을 뺀다.(후위)
--변수	기존 변수 값에 1을 뺀다.(전위)

 

📌 자료형 검사

자바스크립트는 하나의 변수에 여러 자료형을 넣을 수 있다.

따라서, 어떤 자료형이 변수에 들어갔는지 확인하기 위해서 자료형 검사를 해야할 때가 있다.

 

자료형 검사는 'typeof' 연산자를 사용한다.

typeof(10)              // 'number'
typeof("문자열")        // 'string'
typeof(true)           // 'boolean'
typeof(function() { }) // 'function'
typeof({})             // 'object'
typeof(alpha)          // 'undefined'

 

📌 undefined 자료형

자바스크립트에서 '초기화되지 않은 것'을 표현하는 자료형으로 undefined가 있다.

변수를 선언했으나 초기화하지 않았을 때 나타난다.

> let a
undefined

 

📌 강제 자료형 변환

어떤 자료형을 특정 자료형으로 강제 변환하고 싶을 때는 다음의 함수를 사용한다.

함수	설명
Number()	숫자로 자료형 변환
String()	문자열로 자료형 변환
Boolean()	불로 자료형 변환

1. Number() 함수와 NaN

console.log(Number("1013"));     // 52
console.log(Number("52.273"));   // 52.273
console.log(Number(true));       // 1
console.log(Number(false));      // 0
console.log(Number("안녕???"));  // NaN

숫자로 구성된 문자열은 숫자로 변환된다. 그리고 불에 해당하는 true, false는 각각 1, 0으로 변환된다.

 

숫자로 변환할 수 없는 문자열을 Number() 함수로 변환하면 'NaN'을 출력한다.

NaN은 'Not a Number'의 줄임말로 '숫자 자료형이지만 숫자가 아닌 것'을 의미한다.

※ NaN인지 확인할 때는 isNaN() 함수를 사용한다.

 

2. Boolean() 함수

자바스크립트에서 Boolean() 함수를 사용하면 다음 5개의 요소는 false로 변환된다. (이외에는 모두 true로 변환)

• 0
• NaN
• "" (빈문자열)
• null
• undefined

📌 자동 자료형 변환

자바스크립트는 일부 자료형을 상황에 따라 자동으로 변환한다.

 

1. 숫자와 문자열 자료형 자동 변환

숫자와 문자열에 '+' 연산자를 적용하면 자동으로 숫자가 문자열로 변환된다.

console.log(52 + 273);     // 325
console.log("52" + 273);   // 52273
console.log(52 + "273");   // 52273
console.log("52" + "273"); // 52273

2. 불 자료형 자동 변환

'!' 연산자를 사용할 때는 불 자료형으로 자동 변환된다.

※ ! 연산자를 두 번 사용(!!)하는 것은 Boolean() 함수를 사용하는 것과 효과가 같다.

console.log(!!0);                 // false
console.log(!!nan);               // false
console.log(!!"");                // false
console.log(!!null);              // false
console.log(!!undefinedVariable); // false

 

📌 일치 연산자

자바스크립트는 '자료형까지 검사하는' 일치 연산자를 제공한다.

연산자	설명
===	자료형과 값이 같은지 비교한다.
!==	자료형과 값이 다른지 비교한다.

console.log(`1234 == "1234": ${1234 == "1234"}`);   // 1234 == "1234": true
console.log(`1234 === "1234": ${1234 === "1234"}`); // 1234 === "1234": false

console.log(`0 == "": ${0 == ""}`);   // 0 == "": true 
console.log(`0 === "": ${0 === ""}`); // 0 === "": false

※ '=='와 '==='의 차이점

'==' 를 사용한 비교는 두 비교 대상이 다른 타입이라도 동일한 것으로 간주하여 비교한다.

'==='를 사용한 비교는 두 데이터의 타입이 다르면 다른 데이터로 간주한여 비교한다. 

'!='와 '!==='의 관계도 동일하다.

 

📌 상수

ECMAScript6부터 const 상수 생성 키워드가 추가되었다.

const는 상수(constant)를 만드는 키워드다. 

const는 '변경하지 않을 대상'에 적용한다. ex) pi를 3.14로 고정할 때 사용

 

상수는 '프로그램을 조금 더 읽기 쉽고, 빠르고 안정적으로 만들려고' 사용한다. 

상수는 '변하지 않을 것'이라고 강제한 것이기 때문에 자바스크립트가 내부적으로 간단한 형태로 저장한다. 

따라서 프로그램의 메모리 사용을 미세하게나마 줄일 수 있다.

// 상수 선언
const constant = "변경할 수 없다.";
constant = "";

// 출력
console.log(constant); 
/*
TypeError: Assignment to constant variable' 오류 발생 
상수 값은 변경하 수 없기 때문에 발생하는 오류다.
*/

---

참고도서

• 자바스크립트 프로그래밍 입문
• 실무에 바로 적용하는 자바스크립트 코드 레시피 278