웹 시스템 개발 #JavaScript:Fundamentals 고급편

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

 

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

이번편은 JavaScript:Fundamentals 초급편에 이은 고급편입니다.

 

더 심화된 기초를 다루므로 이전 초급편을 읽고오시는 것을 추천드립니다.

2023.10.26 - [학교 공부/웹 개발] - 웹 시스템 개발 #JavaScript:Fundamentals 초보편

---

Objects

객체(Object)는 "키-값" 쌍의 집합으로, 자바스크립트에서 복잡한 데이터 구조를 표현하는 데 사용됩니다.

 

객체는 어떤 형태의 데이터든 담을 수 있고, 함수를 통해 그 데이터를 조작하는 로직을 포함할 수 있습니다.

사용 예시

const person = {
  name: "John",
  age: 30,
  sayHello: function() {
    console.log("Hello, " + this.name);
  }
};

 

name과 age는 데이터를, sayHello는 함수를 값으로 가집니다.

객체의 속성에 접근하려면 "점(.) 표기법"을 사용합니다.

console.log(person.name);  // Output: "John"

 

---

Arrays

배열은 순서가 있는 리스트로, 각 요소에 접근하는 것이 "인덱스"를 통해 이루어집니다.

 

배열은 인덱스를 통해 접근할 수 있으며, push, pop, shift, unshift 등의 메서드로 데이터를 컨트할 수 있습니다.

사용 예시

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

 

인덱스를 통해 접근할 수 있으며, push, pop, shift, unshift 등의 메서드로 데이터를 조작할 수 있습니다.

console.log(fruits[0]);  // Output: "Apple"

 

const arr1 = [1, 2, 3];
arr1.push(4);
console.log(arr1); // 출력: [1, 2, 3, 4]

const arr2 = [1, 2, 3];
const last = arr2.pop();
console.log(last); // 출력: 3
console.log(arr2); // 출력: [1, 2]

const arr3 = [1, 2, 3];
const first = arr3.shift();
console.log(first); // 출력: 1
console.log(arr3); // 출력: [2, 3]

const arr4 = [1, 2, 3];
arr4.unshift(0);
console.log(arr4); // 출력: [0, 1, 2, 3]

---

Expressions(표현식)

표현식(Expression)은 값을 생성하거나 변수에 값을 할당하는 코드의 일부입니다.

 

간단한 것부터 복잡한 것까지 다양한 형태의 표현식이 있습니다.

 

산술 표현식

let sum = 3 + 2;  // 5
let product = 3 * 2;  // 6

문자열 연결 표현식

let greeting = 'Hello' + ' ' + 'World';  // "Hello World"

논리 표현식

let isTrue = (3 > 2) && (2 < 4);  // true

조건(삼항) 표현식

let value = (3 > 2) ? 'true' : 'false';  // "true"

함수 호출 표현식

let max = Math.max(3, 5, 2);  // 5

배열/객체 리터럴 표현식

let arr = [1, 2, 3];  // [1, 2, 3]
let obj = {name: 'Alice', age: 25};  // {name: "Alice", age: 25}

---

Statements

문장(Statement)은 프로그램의 "최소 실행 단위"입니다.

여러 표현식이 조합되어 하나의 명령을 형성하여 액션을 수행합니다. 예를 들어, 변수 선언, 값 할당, 조건문, 반복문 등이 있습니다.

 

변수 선언과 할당

let x = 10;
const PI = 3.14159;

조건문

if (x > 5) {
    console.log('x is greater than 5');
} else {
    console.log('x is not greater than 5');
}

반복문

for (let i = 0; i < 5; i++) {
    console.log(i);
}

함수 선언

function greet(name) {
    return 'Hello, ' + name;
}

함수 호출

greet('Alice');

객체와 배열의 선언

let obj = { key: 'value' };
let arr = [1, 2, 3];

Return 문장

return x * x;

---

Expressions (표현식) vs Statements (문장)

Expressions (표현식)

• 표현식은 값을 반환합니다.
• 표현식은 더 큰 표현식의 일부가 될 수 있습니다.

5 // 숫자 표현식
x // 변수 표현식
x + 5 // 연산자 표현식
greet() // 함수 호출 표현식

---

Statements (문장)

• 문장은 특정 작업을 수행하지만 값을 반환하지 않습니다.
• 문장은 일반적으로 표현식으로 구성됩니다, 하지만 반드시 값을 반환할 필요는 없습니다.

let x = 10; // 변수 선언문
if (x > 5) { // 조건문
    console.log('x is greater than 5'); // 출력문
}

 

정리를 하자면 다음과 같습니다.

1. 값의 반환: 표현식은 값을 반환하지만, 문장은 그렇지 않습니다.
2. 구성 요소: 문장은 표현식을 포함할 수 있지만, 표현식 자체는 문장이 될 수 없습니다 (단, 표현식 문장은 예외입니다).
3. 목적: 표현식은 계산을 위한 것이고, 문장은 작업을 수행하는 것입니다.

간단한 예를 들어, x + 1은 표현식입니다. 왜냐하면 이것은 단순히 값을 계산하기 때문입니다. 반면에 let y = x + 1;은 문장입니다. 이것은 x + 1이라는 표현식을 포함하고 있지만, y라는 변수에 값을 할당하는 작업을 수행하기 때문입니다.

 

---

Loops

루프는 특정 코드 블록을 조건이 만족하는 동안 반복해서 실행합니다.

for, while, do-while 등 다양한 종류의 루프가 있으며 주로 배열의 요소를 순회하거나, 특정 조건을 만족할 때까지 코드를 반복 실행하는데 사용됩니다.

 

for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}

let i = 0;
while (i < 5) {
  console.log(i); // 0, 1, 2, 3, 4
  i++;
}

let i = 0;
do {
  console.log(i); // 0
  i++;
} while (i < 1);

const obj = {a: 1, b: 2, c: 3};
for (const key in obj) {
  console.log(`${key}: ${obj[key]}`); // "a: 1", "b: 2", "c: 3"
}