[7]JavaScript

JS가 뭐임?

JS HTML로 뼈대를 잡고, CSS는 디자인 및 스타일을 구현, JavaScript 동작과 기능을 구현하는 것이다

기존에 JS는 웹에서 개발해야했지만 Node.js를 활용하여 백엔드에서도 개발이 가능하고, Terminal로 보며 개발이 가능해진다

JS 기본 문법

1. 변수

 

var은 잘 안쓰인다고 하니 skip

const라는 의미를 보면 상수라고 되어있는데, 상수가 숫자 상수가 아니라, 변하지 않는값, Constant의 약자로 Const가 사용된다.

재선언과 재할당의 차이

 

재선언

같은 Scope 내에서 키워드를 함께 사용하며 다시 선언하는경우

 

var a = 1;
var a = 2; // ✅ var는 재선언 가능
let b = 1;
// let b = 2; // ❌ SyntaxError: Identifier 'b' has already been declared
const c = 1;
// const c = 2; // ❌ SyntaxError

재할당

이미 선언된 변수에서 값을 새롭게 정의하는 경우

var a = 1;
a = 3; // ✅ 가능

let b = 1;
b = 3; // ✅ 가능

const c = 1;
// c = 3; // ❌ TypeError: Assignment to constant variable

let age = 20;       // 선언 및 초기화

console.log(age);   // 20

age = 25;           // ✅ 재할당 가능

console.log(age);   // 25

 

이런식으로 결과가 출력되게 된다. 변수를 let으로 선언하게되면 재 할당이 가능하다

 

let const로 선언된 변수는 가장 가까운 중괄호 블록{} 안에서만 유효하다.

---

2.변수 자료 형식- 기본형

 

const num1 = 10;

const num2 = 0.1;

const sum = num1 + num2;

console.log(sum);

이처럼 선언해준다. C언어에서 int와 Float으로 나누어진것과 다르게 이렇게 const로 상수를 선언해주면 바로 결과값이

이처럼 나오게된다. 편하네요ㅎㅎ

---

3.Literal 변환

3.1 number를 string으로 변환

let num = 123;

let str = String(num);

console.log(str);         // "123"

console.log(typeof str);  // "string"

let num1 = 123;

let str1 = num1.toString();

console.log(str1);         // "123"

console.log(typeof str1);  // "string"

let num2 = 123;

let str2 = `${num2}`;

console.log(str2);         // "123"

console.log(typeof str2);  // "string"

let num4 = 123;

let str4 = num4 + "";

console.log(str4);         // "123"

console.log(typeof str4);  // "string"

위와같이 4가지 방법이 존재한다

근데 편한것은 $ dollar sign을 사용하거나 String을 사용하거나 toString을 사용하는거인듯

3.2 string을 number로 변환

 

let str = "123";

let num = Number(str);

console.log(num);         // 123

console.log(typeof num);  // "number"

let str1 = "123";

let num1 = parseInt(str1, 10); // 10 → 진법(radix) 지정

console.log(num1);         // 123

console.log(typeof num1);  // "number"

let str2 = "123";

let num2 = +str2;

console.log(num2);         // 123

console.log(typeof num2);  // "number"

let str3 = "123";

let num3 = str3 * 1;

console.log(num3);         // 123

console.log(typeof num3);  // "number"

위와같이 4가지 방법이 존재한다

실질적으로 사용하기 편한건 +를 붙여주거나 *1을해주는거, 아니면 위와 통일성을 지키기 위해 Number를 선언해주는거 정도?

String을 사용해주면 " " 를 열어줘서 String type을 나타내주고 Number를 나타내면 보통 그냥 쓰는듯하다..

3.3 Bigint로 사용

값이 클때는 정수형의type을 써주고 뒤에 n을 붙여준다  

let big = 1234567890123456789012345678901234567890n;

 이런거처럼

3.4 Symbol 사용

고유하고 변경 불가능한 값으로, 주로 객체의 고유한 속싱 키로 사용 

let sym1 = Symbol("id");

let sym2 = Symbol("id");

console.log(sym1 === sym2); // false

let user = {

[sym1]: 1234,

[sym2]: "1234"

};

console.log(user);

console.log(user[sym1] === user[sym2]);

console.log(user[sym1] == user[sym2]);

Result:

false
{ [Symbol(id)]: 1234, [Symbol(id)]: '1234' }
false
true

Symbol을 설정하게 되면 input값을 같은값으로 넣어도 결과값이 달라지게된다.

---

1. Primitive 타입

• 예: number, string, boolean, null, undefined, symbol, bigint
• 저장 위치: 스택(Stack)
  → 값 자체를 스택에 저장 (고정 크기이기 때문에 가능)
• 특징: 값이 복사됨 (Call by Value)

2. Reference 타입

• 예: object, array, function
• 저장 위치:
  • 실제 데이터는 힙(Heap)에 저장
  • 변수에는 참조 값(주소)이 스택에 저장됨
• 특징: 주소가 복사되므로, 같은 객체를 참조하게 됨 (Call by Reference)

약간 포인터 개념으로 생각하면 되는거같음

Primitive 타입의 데이터 타입은 Stack의 주소를 가르키고, 그속에 값이 들어있는데

Reference 타입의 데이터 타입은 Stack의 주소를 가르키고, 그 속에 Heap영역의 주소를 가르킨다

 

---

 

1.함수에 변수를 할당하는 경우

const sayHello = function() {

    console.log("Hello");

};

sayHello(); // Hello

2.함수를 인자로 전달하는 경우

function execute(fn) {

    fn(); // 전달받은 함수 실행

}

execute(() => console.log("Executed"));

// 출력: Executed

 

3.함수를 반환하는 경우

function makeAdder(x) {

    return function(y) {

        return x + y;

    };

}

const add5 = makeAdder(5);

console.log(add5(3)); // 8

4.객체의 속성으로 사용하는 경우

const calculator = {

    add: function(a, b) {

        return a + b;

    }

};

console.log(calculator.add(2, 3)); // 5

---

// 1. 함수를 변수에 할당

const sayHello = () => {

    console.log("Hello");

};

sayHello(); // Hello

// 2. 함수를 인자로 전달

const execute = (fn) => {

    fn(); // 전달받은 함수 실행

};

execute(() => console.log("Executed"));

// 출력: Executed

// 3. 함수를 반환

const makeAdder = (x) => (y) => x + y;

const add5 = makeAdder(5);

console.log(add5(3)); // 8

// 4. 객체의 속성으로 사용

const calculator = {

    add: (a, b) => a + b

};

console.log(calculator.add(2, 3)); // 5

이처럼 함수를 사용할수있다.

화살표로 return을 생략할 수 있으며 보다 더 간결하게 함수를 나타 낼 수 있다.

---

Array Method

추가 Method

push(value)	배열 끝에 요소 추가	arr.push(4) → [1, 2, 3, 4]
unshift(value)	배열 앞에 요소 추가	arr.unshift(0) → [0, 1, 2, 3]
splice(index, 0, value)	원하는 위치에 요소 삽입	arr.splice(1, 0, 100) → [1, 100, 2, 3]

let arr = [1, 2, 3];
arr.push(4);          // [1, 2, 3, 4]
arr.unshift(0);       // [0, 1, 2, 3, 4]
arr.splice(2, 0, 99); // [0, 1, 99, 2, 3, 4]

 

읽기 Method

[index]	인덱스로 접근	arr[1] → 2
includes(value)	값 존재 여부 확인 (true/false)	arr.includes(2) → true
indexOf(value)	값의 인덱스 반환 (없으면 -1)	arr.indexOf(3) → 2

let arr = [1, 2, 3];
console.log(arr[1]);        // 2
console.log(arr.includes(2)); // true
console.log(arr.indexOf(3));  // 2

 

삭제 Method

pop()	마지막 요소 제거	arr.pop() → 마지막 값 제거
shift()	첫 번째 요소 제거	arr.shift() → 첫 번째 값 제거
splice(index, count)	원하는 위치의 요소 삭제	arr.splice(1, 2) → index 1부터 2개 삭제

let arr = [1, 2, 3, 4];
arr.pop();           // [1, 2, 3]
arr.shift();         // [2, 3]
arr.splice(0, 1);    // [3]  (index 0부터 1개 삭제)

 

---

 

If-else 문

let age = 18;

if (age < 13) {

console.log("어린이");

} else if (age < 20) {

console.log("청소년");

} else {

console.log("성인");

}

예전에 C언어 조금 해보며, 연관지으며 이해하고있는데

if else문은 거의 비슷하고 console.log는 printf문으로 생각하면 편할듯하다

printf("Hello World') == console.log("Hello world");

---

for...of 문이란?

• 반복 가능한 객체(Iterable)의 값을 하나씩 꺼내서 반복하는 문법
• 반복 가능한 객체에는:
  • 배열(Array)
  • 문자열(String)
  • Map
  • Set
    
    
•  
• let arr = [10, 20, 30];
  for (let value of arr) {
  console.log(value);
  }

이런 방식으로선언하는건데 A of B  라는 영어를 보면 B가 더 main이지 않았나... 그런방식으로 생각했듭니다

그래서 배열의 형태는 B의 위치에 해당하고, 앞에 오는것은 Value에 해당하는 값 

// Map 생성과 초기화를 한번에

let map = new Map([

    ["name", "홍길동"],

    ["age", 30],

    ["city", "서울"]

]);

// Map 순회하며 출력

for (let [key, value] of map) {

    console.log(`${key}: ${value}`);

}

// 또는 forEach 사용

console.log("\n--- forEach 방식 ---");

map.forEach((value, key) => {

    console.log(`${key}: ${value}`);

});

---

 

for...in 문이란?

• 객체(Object) 안의 속성 이름(key)을 하나씩 꺼내서 반복하는 문법입니다.
• 키를 꺼내고, 그 키를 이용해 해당 값(obj[key])에 접근할 수 있습니다.

Object에서 Key값을 찾는다는 것이다

 

기본문법

for (let key in 객체) {

    // key를 사용한 실행 코드

}

 

let obj = {

    name: '홍길동',

    age: 28,

    company: '활빈당'

};

for (let key in obj) {

    console.log(`${key}: ${obj[key]}`);

}

---

forEach란?

• 배열(Array), Set, Map과 같이 반복 가능한 자료형의 각 요소에 대해 콜백 함수를 실행하는 메서드
• for나 for...of처럼 반복문 역할을 하지만, 내부적으로 순회를 처리해줌
• 반환 값이 없음 (undefined를 반환) → 단순히 순회하며 작업할 때 사용

let arr = [10, 20, 30];

arr.forEach((value, index, array) => {

console.log (value, index, array);

});

이런 방식으로 데이터를 반복적으로 뽑아내는 것에 해당한다