웹 시스템 개발 #JavaScript:Fundamentals 초보편

학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다.

 

부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다.

 

---

 

JavaScript란 무엇인지

JavaScript는 웹 브라우저에서 작동하는 인터프리터 언어로, 동적 웹 페이지를 생성하기 위해 사용됩니다.

 

HTML은 구조를, CSS는 스타일을, JavaScript는 기능을 추가합니다.

 

---

주석 사용방법

주석은 코드의 일부를 무시하게 만들거나, 설명을 추가하는 데 사용됩니다.

 

한 줄 주석: 코드 뒤에 //를 삽입합니다.

// 이 줄은 주석입니다.

여러 줄 주석: /*로 시작하고 */로 끝납니다.

/* 이것은
   여러 줄 주석입니다. */

---

Character Set

JavaScript는 Unicode Character Set를 사용합니다.

즉, 모든 문자와 기호가 고유한 코드를 가지며, 이를 통해 다양한 언어와 기호를 표현할 수 있습니다.

const english = "Hello, World!";
const korean = "안녕하세요!";
const specialCharacters = "!@#$%^&*()";

---

Variable

JavaScript에서 변수는 var, let, const 키워드를 사용하여 선언할 수 있습니다.

몇 가지 예시를 들겠습니다.

var age = 25;
var name = "John";

let score = 100;
let isActive = true;

const pi = 3.141592653589793;
const birthYear = 1990;

var는 함수 범위를 가지며, let과 const는 블록 범위를 가집니다. const는 한 번 할당하면 변경할 수 없는 "상수"를 정의하는데 사용됩니다.

---

Identifiers and Reserved Words

식별자는 변수, 함수, 객체를 구분하기 위해 사용하는 이름입니다.

 

Identifiers: 변수, 함수, 속성의 이름 등을 의미합니다. 예) userName, calculateArea

let userName = "John";  // 'userName'이라는 식별자를 가진 변수
function calculateArea() {} // 'calculateArea'라는 식별자를 가진 함수

 

Reserved Words: JavaScript에서 특별한 목적으로 사용되므로, Identifier로 사용할 수 없습니다. 예) break, for, return

// 잘못된 예
let var = 10;  // 'var'은 예약어이기 때문에 변수 이름으로 사용할 수 없습니다.

// 올바른 예
let variable = 10;  // 'variable'은 예약어가 아니기 때문에 변수 이름으로 사용할 수 있습니다.

---

식별자를 만드는 규칙은 다음과 같습니다.

1. 반드시 문자, 밑줄(_), 또는 달러 기호($)로 시작해야 합니다.
2. 그 다음 문자는 문자, 숫자, 밑줄, 또는 달러 기호를 포함할 수 있습니다.
3. 유니코드 문자도 사용할 수 있습니다 (예: λ, ä).

let 변수명 = 42;
const _밑줄을포함한식별자 = "밑줄";
const $달러기호를포함한식별자 = "달러기호";
const λ = 3.14;

 

아래는 유효하지 않은 식별자 예시입니다.

 

// 예약어 사용
let if = 42; // 문법 오류

// 숫자로 시작
let 123abc = "안녕"; // 문법 오류

---

"Conventions" 

JavaScript에서 식별자를 명명할 때 일반적으로 따르는 몇 가지 컨벤션(관례)가 있습니다. 이러한 컨벤션은 코드의 가독성과 유지보수성을 높이기 위해 중요합니다.

 

변수나 함수의 이름은 문자, 숫자, 밑줄(_), 달러 기호($)로 구성되며, 숫자로 시작할 수 없습니다.

주로 camelCase를 사용합니다.

let userName = "John";
let calculateArea = function() {};

 

---

Literals

Literals은 데이터의 값을 직접 표현하는 방법입니다.

1. Numeric Literals: 숫자를 표현합니다. 예를 들어, 42, 3.14 등입니다.
2. String Literals: 문자열을 표현합니다. 예를 들어, 'hello', "world" 등이 있습니다.
3. Boolean Literals: 불린 값을 표현합니다. true 또는 false입니다.
4. Object Literals: 객체를 표현합니다. { name: "John", age: 30 } 같은 형태입니다.
5. Array Literals: 배열을 표현합니다. [1, 2, 3] 같은 형태입니다.

let num1 = 42; // Integer
let num2 = 3.14; // Floating-point

let str1 = 'hello';
let str2 = "world";

let isTrue = true;
let isFalse = false;

let obj = {
  name: "John",
  age: 30
};

let arr = [1, 2, 3];

---

Types

Types은 데이터의 종류를 나타냅니다.

1. Number: 숫자를 나타냅니다.
2. String: 문자열을 나타냅니다.
3. Boolean: 불린 값을 나타냅니다.
4. Undefined: 값이 정의되지 않은 변수의 타입입니다.
5. Null: 값이 없거나 빈 값을 나타냅니다.
6. Object: 여러 값을 담을 수 있는 컨테이너입니다.
7. Symbol: 고유하고 변경 불가능한 값을 나타냅니다.

 

JavaScript의 데이터 타입은 크게 두 가지로 나뉩니다.

• Primitive types : Number, String, Boolean, null, undefined, Symbol
• Non-primitive types : Object, Array
  

---

Primitive 타입이란?

Primitive 타입(원시 타입)은 JavaScript에서 불변성(immutable)을 가진 데이터 타입을 의미합니다. 이들은 값이 메모리에 고정된 크기로 저장되고, 데이터 자체가 변경되지 않음을 의미합니다.

let num = 42;

let str = "Hello";

let bool = true;

let notDefined;

let empty = null;

const uniqueSymbol = Symbol("Description");

 

let person = {
  name: "John",
  age: 30
};

const numbers = [1, 2, 3, 4, 5];

const fruits = ['Apple', 'Banana', 'Cherry'];

const nested = [[1, 2], ['Apple', 'Banana']]; // 중첩배열

---

null과 undefined의 차이점

항목	null	undefined
사용 목적	명시적으로 '값이 없음'을 나타내기 위해 사용	선언은 되었지만 값을 할당하지 않은 변수가 자동으로 가지는 값
데이터 타입	자체적으로 하나의 객체 타입으로 간주	undefined 타입의 하나뿐인 값
연산자와의 상호작용	수치 연산에서 0으로 간주	수치 연산에서 NaN (Not a Number)으로 간주
일치 연산자(===)	undefined와 일치 연산자를 사용하면 false를 반환	null과 일치 연산자를 사용하면 false를 반환
느슨한 동등 연산자(==)	undefined와 느슨한 동등 연산자를 사용하면 true를 반환	null과 느슨한 동등 연산자를 사용하면 true를 반환

예시 코드

let a = null;       // 명시적으로 '값 없음'을 선언
let b;              // 값을 할당하지 않았으므로 'undefined'

console.log(a == b);  // true, 느슨한 동등 연산자는 true를 반환
console.log(a === b); // false, 일치 연산자는 false를 반환

console.log(typeof a); // "object"
console.log(typeof b); // "undefined"

console.log(Number(a)); // 0
console.log(Number(b)); // NaN

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

Symbol

Symbol은 고유하고 변경 불가능한 원시 타입입니다.

주로 객체의 키로 사용되며, 다른 어떤 키와도 충돌하지 않는 고유한 키를 만들 때 사용됩니다.

const mySymbol = Symbol("myDescription");
let obj = {};
obj[mySymbol] = "value";
console.log(obj[mySymbol]); // Output: "value"

---

String Escaping

Escaping이란 특수 문자를 문자열 안에서 제대로 처리하기 위해 백슬래시('\')를 사용하는 기술입니다.

예를 들어, 큰따옴표나 작은따옴표, 줄바꿈, 탭 등을 문자열 내에서 표현하려면 이스케이핑이 필요합니다.

 

let sentence = "He said, \"Hello, world!\"";
console.log(sentence); // 출력: He said, "Hello, world!"

let sentence = 'He said, \'Hello, world!\'';
console.log(sentence); // 출력: He said, 'Hello, world!'

let sentence = "Hello, world!\nHow are you?";
console.log(sentence); 
// 출력: 
// Hello, world!
// How are you?

let sentence = "Hello,\tworld!";
console.log(sentence); // 출력: Hello,	world!

---

Template Strings

Template Strings은 ES6에서 도입된 문자열 리터럴이며 문자열을 더 간편하고 가독성 좋게 처리할 수 있습니다.

백틱(` `)으로 감싸져 있으며, 변수나 표현식을$ {} 안에 넣어 "동적"으로 문자열을 생성할 수 있습니다.

 

백틱(` `)을 사용하여 변수나 표현식을 문자열 안에 삽입하는 예시입니다.

let name = "John";
let greeting = `Hello, ${name}!`;
console.log(greeting); // 출력: Hello, John!

let multiLineString = `This is a
multi-line
string.`;
console.log(multiLineString);
// 출력:
// This is a
// multi-line
// string.

let x = 10;
let y = 20;
let result = `The sum is ${x + y}`;
console.log(result); // 출력: The sum is 30

---

Variables are Untyped

JavaScript 변수는 유형화되지 않음을 뜻합니다.(동적으로 유형화됨을 의미함)
변수에 모든 유형의 값을 할당할 수 있으며 나중에 동일한 변수에 다른 유형의 변수에 다른 유형의 값을 할당할 수 있습니다.
즉, 자동 변환이 이루어진다고 생각하시면 됩니다.

let myVar = 'hello';
myVar = 10;
myVar = true;

 

---

Operators 종류 

 

Comparison Operators

비교 연산자에 대한 설명입니다.

연산자	설명	예시	결과
==	동등 비교. 값만 비교합니다.	5 == '5'	true
===	일치 비교. 값과 타입 모두 비교합니다.	5 === '5'	false
!=	불일치. 값이 다르면 참입니다.	5 != '6'	true
!==	불일치. 값이나 타입이 다르면 참입니다.	5 !== '5'	true
<	작다	4 < 5	true
>	크다	5 > 4	true
<=	작거나 같다	4 <= 5	true
>=	크거나 같다	5 >= 4	true

---

Logical Operators

• &&: 논리곱
• ||: 논리합
• !: 논리 부정

 

---

Arithmetic Operator

산술 연산자에 대한 설명입니다.

연산자	설명	예시	결과
+	덧셈	3 + 2	5
-	뺄셈	3 - 2	1
*	곱셈	3 * 2	6
/	나눗셈	6 / 2	3
%	나머지	5 % 2	1
++	증가 (increment)	x = 3; x++	4
--	감소 (decrement)	x = 3; x--	2
**	거듭제곱	2 ** 3	8

 

 

---

Conditional Operator

조건 연산자에 대한 설명입니다.

 

"조건 ? 값1 : 값2"의 형식으로 사용됩니다. 조건을 평가한 후에, 결과가 true이면 값1을 반환하고, false이면 값2를 반환합니다.

const age = 18;
const result = (age >= 18) ? "Adult" : "Minor";
console.log(result);  // 출력: "Adult"

---