[React 1주차(1)] 자바스크립트 복습: 변수, 객체, 배열

변수는 프로그래밍에서 데이터를 저장하고, 그 값을 쉽게 관리하고 재사용할 수있게함.

(ex) 사용자로부터 받은 입력을 처리 & 계산 결과를 다시 사용할 때 변수 사용

 

 

만약 변수 사용을 하지 않고, 직접 값을 기입해서 사용한다면,

• 코드의 복잡성 증가
• 오류 가능성 증가
• 확장성과 유지 보수성 감소

==> 즉, 변수를 이용함으로서 코드의 가독성을 높이고, 적은 변경으로 수정하기 용이함. 또한, 코그의 재사용성을 높임.

 

변수의 종류 : const, let, var

자바스크립트의 주요 스코프 유형: Global. Function, Block

• let과 const는 블록 스코프, var는 함수 스코프 내에서 유효함.
• let : 재할당 가능, 재선언 불가
• const: 재할당 재선언 불가
• var: 재할당 재선언 가능

 

const, let 사용 지향,

- const를 사용해서 재할당 불가한 변수를 이용하면, 코드의 안전성을 높이고, 의도치 않은 값 변경으로 인한 버그 예방 가능

- const는 블록 스코프를 따르기 때문에, 예측 가능한 코드 작성 가능(let도 마찬가지)

 

- let은 변수의 값을 필요에 따라 유연하게 변경 가능

==> 우선 변수 선언 시 const를 사용하고, 필요한 경우 let을 사용!

 

var 사용 지양

- var는 함수 스코프를 갖기 떄문에 때때로 예상치 못한 범위에서 변수가 접근 가능하게됨.

for (let i = 0; i < 3; i++) {
    console.log(i); // 0, 1, 2
}
console.log(i); // ReferenceError: i is not defined

 

만약 var라면....

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

for 루프가 끝난 뒤 i++인 3 출력.

 

- 또한 같은 변수 이름(식별자)로 재선언이 가능함으로 오류를 발생시킬 수 도 있음.

 

- 호이스팅 문제: var는 호이스팅 될 때 const, let과 달리 값이 undefined로 초기화가됨. 즉, 변수 선언 전에도 참조할 수 있음. 그래서 값을 할당하지 않았음에도 Reference 오류가 나지 않음.

---

객체

키와 값의 쌍으로 구성된 데이터 구조

 

// 객체는 const 또는 let으로 변수화 시켜 선언합니다.
// value에는 어떤 데이터 타입이라도 올 수 있음을 기억해요.
let user = {
  name: "르탄이",
  age: 30,
  isAdmin: true,
	printHello: () => console.log("hello!")
};

// 객체접근방법1 : dot notation(점 표기법)
console.log(user.name);  // 르탄이
console.log(user.age);   // 30
user.printHello();

// 객체접근방법2 : Bracket Notation(괄호 표기법)
// 키 값이 변수일 때 주로 사용합니다.
// example 1
// console.log(user['name']);
// console.log(user['age']);
// example 2
let attribute = "name";
// console.log(user.attribute); // 이 케이스는 안돼요!
console.log(user[attribute]);

 

<두가지의 객체 접근 방법>

• dot notation
  • 속성 이름이 변수로 지정된 경우나 공백·특수 문자가 있는 경우 사용 불가
• bracket notation
  • 속성 이름에 공백·특수 문자가 포함되거나 변수로 지정된 경우에도 접근 가능

<속성 추가, 수정, 삭제>

• 속성 추가 및 수정

// 위 코드에 계속
user.email = "john.doe@example.com";
user.age = 31;
console.log(user);

• 속성 삭제

delete user.email;
console.log(user);

 

리액트에서는 state라는 개념을 사용하기 때문에 위처럼 직접적으로 객체의 속성을 삭제하거나 수정하는 방식은 잘 선호되지 않음.

주로 상태를 불변하게 유지하는 방법을 선호함.

 

 

객체 주요 메서드

1. Object.keys()

const user = {
  name: "르탄이",
  age: 30,
  isAdmin: true
};
const keys = Object.keys(user);
console.log(keys);  // ["name", "age", "isAdmin"]

- 객체의 키만

 

2. Object.values()

// 위 코드에 이어

const values = Object.values(user);
console.log(values);  // ["르탄이", 30, true]

- 객체의 값만

 

3. Object.entries()

// 위 코드에 이어

const entries = Object.entries(user);
console.log(entries);
// [["name", "르탄이"], ["age", 30], ["isAdmin", true]]

- 객체의 key, value 쌍으로하는 배열 반환

 

 

4. Object.assign()

// 위 코드에 이어
// user는 대상 객체

const userDetails = {
  occupation: "개발자"
};  //출처 객체


Object.assign(user, userDetails);
console.log(user);
// {name: "르탄이", age: 30, isAdmin: true, occupation: "개발자"}

- 출처 객체의 속성을 대상 객체안에 넣어주는 것. 즉, 속성 복사할때 씀.

 

 

---

 

배열

같은 타입의 여러 데이터를 하나의 변수에 순차적으로 저장하기 위해 사용

< 요소의 접근과 수정 >

console.log(numbers[0]); //배열 접근하기
numbers[2] = 10; //배열 수정하기
console.log(numbers); //[1, 2, 10, 4, 5]

 

배 주요 메서드

1. push, pop

• push: 배열의 끝에 하나 이상의 요소 추가하고, 배열의 새 길이를 반환
• pop: 배열의 마지막 요소 제거하고, 그 요소 반환

 

2. map

• 배열 내의 모든 요소 각각에 대해
• 주어진 함수를 호출한 결과를 모아
• 새로운 배열을 반환

==> 새로운 배열을 반환한다는 것은 리액트에서 불변성과 관련하여 큰 의미를 가짐.(원본 배열이 바뀌지 않기 때문) 따라서, push, pop, sort 등 기존 배열에 담겨있는 내용을 직접 수정하는 것 보다는 불변성을 유지하여 새로운 배열을 생성하여 사용토록 하는 것을 지향함.

 

==> ''동적으로 UI 요소를 만들어서 그려주는 역할을 React.js에서 많이 다루게 될텐데요, 따라서 map의 활용방법은 굉장히 중요하다고 할 수 있겠죠. youtube에서 각 비디오 정보는 데이터베이스에 저장되어있을거에요. 해당 정보를 불러와서 브라우저에 그려주기 위해서는 반드시 map 함수를 사용해야 한답니다.''

3. filter

• 중요한 배열 api로 주어진 함수의 테스트(조건)를 통과하는 요소를 모아(걸러주는 거 말그대로) 새로운 배열 반

 

4. reduce

• 배열의 각 요소에 대해 주어진 함수(리듀서 함수)를 실행하고, 결과물을 누적시켜 반환

5. sort

• 배열의 요소를 적절한 위치에 정렬하고, 배열을 반환
• sort() 내부에 별도의 함수 작성없이 쓰면, 유니코드 기준으로 정렬함. 그래서 숫자 정렬할 때는 그래서 꼭 sort((a,b)=> a-b} 처럼 정렬 순서를 정의하는 비교함수를 넣어주어야함.
• 참고로 자바스크립트에서 사용하는 sort는 최적화된 Quick Sort 또는 Merge Sort 기반으로 동작함.

---

<기억이 가물~가물~해서 빠르게 정리한 sort 알고리즘들>

1. Bubble Sort

• 원리: 인접한 요소를 비교하며 큰 값을 뒤로 이동시키는 방식
• 효율: 느림 - 시간 복잡도 O(n²)
• 특징: -없음

function bubbleSort(arr) {
  for (let i = 0; i < arr.length - 1; i++) {
    for (let j = 0; j < arr.length - 1 - i; j++) {
      if (arr[j] > arr[j + 1]) {
        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]]; // 자리 바꾸기
      }
    }
  }
  return arr;
}
// 예시: bubbleSort([5, 3, 8, 4, 2]); // [2, 3, 4, 5, 8]

- 앞에 두개 비교, 그다음 두개 비교, 그 다음 .. 해서 큰 숫자를 하나씩 뒤로 정렬시키는 거.

2. Selection Sort

• 원리: 배열에서 가장 작은 요소를 찾아 순서대로 앞에 위치시키는 방식
• 효율: 느림 - 시간 복잡도 O(n²)
• 특징: 메모리 사용량 적음

function selectionSort(arr) {
  for (let i = 0; i < arr.length; i++) {
    let minIndex = i;
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[j] < arr[minIndex]) minIndex = j;
    }
    [arr[i], arr[minIndex]] = [arr[minIndex], arr[i]]; // 자리 바꾸기
  }
  return arr;
}
// 예시: selectionSort([5, 3, 8, 4, 2]); // [2, 3, 4, 5, 8]

3. Insertion Sort

• 원리: 정렬된 부분에 요소를 삽입하여 정렬하는 방식
• 효율: 작은 데이터에 적합 - 시간 복잡도 O(n²)
• 특징: 데이터가 거의 정렬된 상태일 때 빠름

function insertionSort(arr) {
  for (let i = 1; i < arr.length; i++) {
    let current = arr[i];
    let j = i - 1;
    while (j >= 0 && arr[j] > current) {
      arr[j + 1] = arr[j];
      j--;
    }
    arr[j + 1] = current;
  }
  return arr;
}
// 예시: insertionSort([5, 3, 8, 4, 2]); // [2, 3, 4, 5, 8]

4. Merge Sort

• 원리: 배열을 반으로 나눠 각각 정렬한 후 병합하는 방식
• 효율: 빠름 - 시간 복잡도 O(n log n)
• 특징: 안정 정렬, 추가 메모리 사용

function mergeSort(arr) {
  if (arr.length <= 1) return arr;
  const mid = Math.floor(arr.length / 2);
  const left = mergeSort(arr.slice(0, mid));
  const right = mergeSort(arr.slice(mid));
  return merge(left, right);
}

function merge(left, right) {
  let result = [];
  while (left.length && right.length) {
    result.push(left[0] < right[0] ? left.shift() : right.shift());
  }
  return result.concat(left, right);
}
// 예시: mergeSort([5, 3, 8, 4, 2]); // [2, 3, 4, 5, 8]

5. Quick Sort

• 원리: 기준점을 정해 작은 값은 왼쪽, 큰 값은 오른쪽에 배치하여 정렬
• 효율: 빠름 - 평균 시간 복잡도 O(n log n)
• 특징: 최악의 경우 시간 복잡도 O(n²), 추가 메모리 적음

function quickSort(arr) {
  if (arr.length <= 1) return arr;
  const pivot = arr[arr.length - 1];
  const left = [], right = [];
  for (let i = 0; i < arr.length - 1; i++) {
    arr[i] < pivot ? left.push(arr[i]) : right.push(arr[i]);
  }
  return [...quickSort(left), pivot, ...quickSort(right)];
}
// 예시: quickSort([5, 3, 8, 4, 2]); // [2, 3, 4, 5, 8]