[큐시즘스터디 1주차] 코테를 위한 자바스크립트 (1)

다음 주 월요일부터 유데이 자료구조, 알고리즘 스터디를 들어가기 전에 자바스크립트에서 꼭 알아야할 컨셉들에 대해서 미리 알아보고 수-일동안 이 컨셉들에 대해서 살펴보려고 한다.

어떤 컨셉이 있는지 보겠다. 5일 동안 하단의 컨셉들은 모두 살피고 간다.

1. 기본 문법

   • 변수, 상수, 자료형 (String, Number, Boolean 등)
   • 조건문 (if, switch)
   • 반복문 (for, while, do-while)
   • 함수, 화살표 함수
   • 배열과 객체 리터럴

2. 배열

   • 배열 메서드 (push, pop, shift, unshift, splice, slice, map, filter, reduce, sort 등)
   • 배열 순회
   • 다차원 배열

3. 객체

   • 객체의 속성과 메서드
   • Object.keys(), Object.values(), Object.entries()
   • 프로토타입과 상속

4. 문자열 처리

   • 문자열 메서드 (substring, substr, slice, indexOf, split, replace 등)
   • 정규 표현식

5. 함수

   • 재귀 함수
   • 클로저와 스코프
   • 고차 함수 (Higher-order functions)

6. 자료구조

   • 스택, 큐, 링크드 리스트, 트리, 그래프
   • 해시 테이블 (객체를 사용하여 구현 가능)

7. 알고리즘

   • 정렬 (버블, 선택, 삽입, 병합, 퀵 정렬 등)
   • 검색 (선형 검색, 이진 검색)
   • 트리와 그래프 관련 알고리즘 (DFS, BFS 등)
   • 동적 프로그래밍, 그리디 알고리즘
   • 최단 경로 알고리즘 (다익스트라, 플로이드-워셜 등)

8. 비동기 처리

   • Promise, async/await
   • callback

9. 기타

   • 스프레드 연산자, 구조 분해 할당
   • Set과 Map 등의 내장 객체 사용
   • reduce, filter,
   • find, findIndex

10. 최적화 및 디버깅

    • console.log를 활용한 디버깅
    • 시간 복잡도와 공간 복잡도 개념

1주차 1일차는 1,2번에 대해서 살펴보겠다.

기본문법

• 변수, 상수, 자료형

let age = 25; // 변수 - 변할 수 있는 값
const pi = 3.141 // 상수 - 변할 수 없는 값
let name = 'John' // String
let isActive = true; // Boolean

• 조건문
  if / switch

if( 조건 ) console.log('dd');
switch(name){
	case 'John' :
    	console.log('john입니다');
        break;
    case 'Suwon' :
    	console.log('suwon입니다');
        break;
    default :
    	console.log('default');
    }

• 반복문
  for / while / do-while

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

let j = 0;
while(j<5){
	console.log(j);
    j++
}

let k = 0;
do{
	consolelog(k);
    k++;
} while(k<5);

• 화살표 함수
  화살표 함수는 es6에서 도입된 새로운 함수 표기법니다. 화살표 함수는 더 간결하게 함수를 작성할 수 있게 해주며, 일반 function키워드를 사용하는 것과 this바인딩에 관해서 차이를 가진다.

const add = (a,b) => a+b; // 인수 a,b , return a+b

this binding: 화살표 함수는 자체 this binding을 가지고 있지 않다. 화살표 함수 내부의 this는 그 함수가 정의될 때의 렉시컬 환경(주변문맥)의 this를 상속받는다.

function Timer(){
	this.seconds = 0;
   	setInterval( () => {
    	this.seconds++; // 여기서의 this는 Timer 객체를 참조한다.
        console.log(this.seconds);
    }, 1000);
}

let timer = new Timer();

배열, 객체 리터럴

배열 리터럴은 대괄호[]를 사용하여 정의된다.

let fruits = ['apple', 'banana', 'cherry'];

객체 리터럴은 중괄호{}를 사용하여 정의된다. 속성과 값의 쌍으로 구성된다.

let person = {
	name:'suwon',
    age:25
};

배열 메서드

강렬한 파이썬의 내장메서드만큼 자바스크립트도 그 못지 않은 메서드가 있다.
1. push
배열의 긑에 하나 이상의 요소를 추가하고, 변경된 배열의 길이를 반환한다.

fruits.push("mango");  // fruits: ["apple", "banana", "cherry", "mango"]

2. pop
   배열에서 마지막 요소를 제거하고, 그 요소를 반환한다.

let lastFruit = fruits.pop();  // lastFruit: "mango", fruits: ["apple", "banana", "cherry"]

3. shift
   배열에서 첫번째 요소를 제거하고 그 요소를 반환한다.

let firstFruit = fruits.shift();  // firstFruit: "apple", fruits: ["banana", "cherry"]

4. unshift
   배열의 시작에 하나 이상의 요소를 추가하고, 변경된 배열의 길이를 반환한다.

fruits.unshift("grape");  // fruits: ["grape", "banana", "cherry"]

5. splice
   배열의 내용을 제거하거나 대체하거나 요소를 추가하여 배열의 내용을 변경한다.

fruits.splice(1, 1, "kiwi");  // fruits: ["grape", "kiwi", "cherry"]

6. slice
   배열의 부분 배열을 반환한다.

let slicedFruits = fruits.slice(1, 3);  // slicedFruits: ["kiwi", "cherry"]

7. map
   배열의 모든 요소에 함수를 호출하고, 결과로 구성된 새로운 배열을 반환한다.

let fruitLengths = fruits.map(fruit => fruit.length);  // fruitLengths: [5, 4, 6]

8. filter
   주어진 함수를 만족하는 요소로 구성된 새로운 배열을 반환한다.

let longFruits = fruits.filter(fruit => fruit.length > 5);  // longFruits: ["cherry"]

9. reduce
   배열의 각 요소에 대해 주어진 함수를 실행하고 하나의 결과값을 반환한다.

let totalLength = fruits.reduce((acc, fruit) => acc + fruit.length, 0);  // totalLength: 15

10. sort
    배열의 요소를 적절한 위치에 정렬하고 배열을 반환한다.

fruits.sort();  // fruits: ["cherry", "grape", "kiwi"]

배열 순회

배열을 순회하면서 각 요소에 접근할 수 있다.

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

// 혹은 forEach를 사용
fruits.forEach(fruit => console.log(fruit));

다차원 배열

배열의 요소로 또 다른 배열을 포함하면, 이것을 다차원 배열이라고 한다.

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

console.log(matrix[1][2]);  // 출력: 6