코딩 테스트를 위한 자바스크립트 (상) - 문자열 기본 마스터하기

JavaScript for Coding Tests (Part 1) - Mastering String Basics

• 변수 선언
  • let (값 변경 가능, 재선언 불가능)
  • const (값 변경 불가능, 상수)
    코딩 테스트에서는 보통 이 두 가지를 사용합니다.
• 데이터 타입
  :
  • Number: 숫자 (정수, 실수 구분 없음)
  • String: 문자열
  • Boolean: true 또는 false
  • null: 값이 없음을 의도적으로 명시
  • undefined: 값이 할당되지 않은 상태
  • Array: 배열 (리스트)
  • Object: 객체 (키-값 쌍)
• 기본 연산자
  • +, -, *, /(나누기), %(나머지)
    ==(값 비교), ===(값과 타입 비교 - 이걸 주로 사용하세요!), !=, !==
    &&(AND), ||(OR), !(NOT)

• 문자열 길이
  문자열.length 속성을 사용하면 문자열의 길이를 알 수 있습니다.
• 특정 위치 문자 접근
  문자열[인덱스] 형태로 특정 위치의 문자에 접근할 수 있습니다. 인덱스는 0부터 시작합니다.
• 예시

  const myString = "Hello!"; // 문자열 선언
  console.log(myString.length); // 출력: 6 (문자열 길이)
  console.log(myString[0]);     // 출력: 'H' (첫 번째 문자)
  console.log(myString[5]);     // 출력: '!' (마지막 문자)
  console.log(myString[myString.length - 1]); // 마지막 문자에 접근하는 다른 방법

• +` 연산자
  가장 간단하고 흔하게 사용되는 방법입니다.
• **concat()메서드**문자열1.concat(문자열2, 문자열3, ...)형태로 사용할 수도 있지만,+` 연산자가 더 직관적입니다.
• 예시

  const firstName = "길동";
  const lastName = "홍";
  const fullName = lastName + firstName; // '+' 연산자 사용
  console.log(fullName); // 출력: "홍길동"
   
  const world = "World";
  const helloWorld = "Hello".concat(" ", world, "!"); // concat 메서드 사용
  console.log(helloWorld); // 출력: "Hello World!"

• slice(시작_인덱스, 끝_인덱스)
  시작 인덱스부터
  끝 인덱스 직전까지
  의 부분을 잘라냅니다.
  끝 인덱스는 생략 가능하며, 생략 시 문자열 끝까지 잘라냅니다.
  음수 인덱스도 사용할 수 있습니다 (뒤에서부터 셈).
• substring(시작_인덱스, 끝_인덱스)
  slice와 유사하지만, 음수 인덱스를 0으로 취급하고, 시작 인덱스가 끝 인덱스보다 크면 두 값을 바꿔서 처리합니다.
• substr(시작_인덱스, 길이)
  시작 인덱스부터
  지정된 길이만큼
  잘라냅니다. (이 메서드는 오래되어 사용을 권장하지 않습니다.)
• 예시

  const sentence = "자바스크립트는 재미있어요.";
  console.log(sentence.slice(0, 6));   // 출력: "자바스크립트" (0부터 6 직전까지)
  console.log(sentence.slice(7));      // 출력: "는 재미있어요." (7부터 끝까지)
  console.log(sentence.slice(0, -7));  // 출력: "자바스크립트" (0부터 뒤에서 7번째 직전까지)
  console.log(sentence.substring(0, 6)); // 출력: "자바스크립트" (slice와 동일하게 동작)
  console.log(sentence.substring(6, 0)); // 출력: "자바스크립트" (인덱스 순서 바꿔서 0부터 6 직전까지)
  // console.log(sentence.substr(7, 8)); // 출력: "는 재미있어요" (7부터 8글자, 비권장)

보통 slice 메서드가 가장 많이 사용됩니다.

• split(구분자)
  구분자를 기준으로 문자열을 나누어 각 부분을 요소로 하는 배열을 반환합니다.
  구분자를 생략하거나 빈 문자열('')로 지정하면 각 문자를 하나씩 나눕니다.
• 예시

  const fruits = "사과,바나나,딸기,포도";
  const fruitArray = fruits.split(","); // ','를 기준으로 나누기
  console.log(fruitArray); // 출력: ['사과', '바나나', '딸기', '포도']
   
  const word = "안녕하세요";
  const charArray = word.split(''); // 각 글자 단위로 나누기
  console.log(charArray); // 출력: ['안', '녕', '하', '세', '요']
   
  const csvLine = "데이터1 데이터2 데이터3";
  const dataArray = csvLine.split(' '); // 공백을 기준으로 나누기
  console.log(dataArray); // 출력: ['데이터1', '데이터2', '데이터3']

공백이나 콤마로 구분된 입력값을 처리할 때 매우 유용합니다.

• join(구분자)
  배열의 요소 사이에 지정된 구분자를 넣어 하나의 문자열로 합칩니다. 구분자를 생략하면 콤마(,)가 기본값으로 사용되고, 빈 문자열('')을 지정하면 구분자 없이 모든 요소를 이어 붙입니다.
• 예시

  const colors = ["빨강", "파랑", "노랑"];
  console.log(colors.join());    // 출력: "빨강,파랑,노랑" (기본 구분자 콤마)
  console.log(colors.join(" ")); // 출력: "빨강 파랑 노랑" (공백으로 구분)
  console.log(colors.join(""));  // 출력: "빨강파랑노랑" (구분자 없이 합치기)
   
  const digits = ['2', '0', '2', '4'];
  console.log(digits.join('')); // 출력: "2024"

• indexOf(찾는문자열, 시작위치?)
  찾는 문자열이 처음 나타나는
  인덱스
  를 반환합니다.
  없으면 -1을 반환합니다. 선택적으로 검색 시작 위치를 지정할 수 있습니다.
• lastIndexOf(찾는문자열, 시작위치?)
  찾는 문자열이
  마지막
  으로 나타나는 인덱스를 반환합니다.
  없으면 -1을 반환합니다.
• includes(찾는문자열, 시작위치?)
  찾는 문자열이 포함되어 있으면 true, 없으면 false를 반환합니다. (존재 유무만 확인 시 편리)
• startsWith(시작문자열)
  문자열이 지정된 문자열로 시작하면 true, 아니면 false.
• endsWith(끝문자열)
  문자열이 지정된 문자열로 끝나면 true, 아니면 false.
• 예시

  const text = "자바스크립트는 유용하고 재미있어요. 자바스크립트 최고!";
  console.log(text.indexOf("자바스크립트"));    // 출력: 0 (첫 번째 '자바스크립트'의 시작 인덱스)
  console.log(text.indexOf("자바스크립트", 1)); // 출력: 22 (인덱스 1부터 검색하여 찾은 두 번째 '자바스크립트')
  console.log(text.indexOf("파이썬"));         // 출력: -1 (찾는 문자열 없음)
  console.log(text.lastIndexOf("자바스크립트")); // 출력: 22 (마지막 '자바스크립트'의 시작 인덱스)
  console.log(text.includes("재미있어요"));    // 출력: true
  console.log(text.includes("어려워요"));      // 출력: false
  console.log(text.startsWith("자바"));       // 출력: true
  console.log(text.endsWith("!"));          // 출력: true

• replace(찾는문자열 또는 정규식, 바꿀문자열)
  처음
  발견되는 찾는문자열 하나만 바꿀문자열로 바꾼 새로운 문자열을 반환합니다.
  정규표현식(특히 g 플래그 사용)과 함께 쓰면 더 강력합니다.
• replaceAll(찾는문자열 또는 정규식, 바꿀문자열)
  문자열 내의
  모든
  찾는문자열을 바꿀문자열로 바꾼 새로운 문자열을 반환합니다. (비교적 최신 기능)
• 예시

  const message = "apple pie is apple flavor.";
  console.log(message.replace("apple", "banana")); // 출력: "banana pie is apple flavor." (첫 번째만 변경됨)
  // 정규식을 사용하여 모든 'apple' 바꾸기 (g 플래그 사용)
  console.log(message.replace(/apple/g, "banana")); // 출력: "banana pie is banana flavor."
  // replaceAll 사용 (정규식 필요 없음)
  console.log(message.replaceAll("apple", "banana")); // 출력: "banana pie is banana flavor."

• toUpperCase()
  모든 문자를 대문자로 바꾼 새 문자열 반환.
• toLowerCase()
  모든 문자를 소문자로 바꾼 새 문자열 반환.
• 예시

  const mixedCase = "JavaScript";
  console.log(mixedCase.toUpperCase()); // 출력: "JAVASCRIPT"
  console.log(mixedCase.toLowerCase()); // 출력: "javascript"

• trim()
  문자열 양 끝의 공백을 제거한 새 문자열 반환.
• trimStart() / trimLeft(): 앞쪽 공백만 제거.
• trimEnd() / trimRight(): 뒤쪽 공백만 제거.
• 예시

  const userInput = "   안녕하세요!   ";
  console.log(userInput.trim()); // 출력: "안녕하세요!"

• 사용자 입력값을 처리하거나, 파일에서 읽어온 데이터를 정리할 때 유용합니다.

• 기본 연산
  +, -, *, /, % (나머지).
• Math 객체
  수학 관련 유용한 메서드들을 제공합니다.
  • Math.abs(x): 절대값
  • Math.max(a, b, c...): 최대값
  • Math.min(a, b, c...): 최소값
  • Math.floor(x): 내림 (x보다 작거나 같은 가장 큰 정수)
  • Math.ceil(x): 올림 (x보다 크거나 같은 가장 작은 정수)
  • Math.round(x): 반올림
  • Math.sqrt(x): 제곱근
  • Math.pow(base, exponent): 거듭제곱 (base ** exponent 와 동일)
• 예시

  console.log(Math.max(1, 5, 2, 8, 3)); // 출력: 8
  console.log(Math.min(1, 5, 2, 8, 3)); // 출력: 1
  console.log(Math.floor(3.14));     // 출력: 3
  console.log(Math.ceil(3.14));      // 출력: 4
  console.log(Math.round(3.5));      // 출력: 4
  console.log(Math.sqrt(16));        // 출력: 4
  console.log(Math.pow(2, 3));       // 출력: 8
  console.log(2 ** 3);             // 출력: 8 (거듭제곱 연산자)

• 배열 생성
  const arr = [1, 2, 3];, const emptyArr = [];
• 요소 접근
  arr[인덱스] (인덱스는 0부터 시작)
• 배열 길이
  arr.length
• 예시

  const scores = [85, 90, 78]; // 배열 생성
  console.log(scores[0]);      // 출력: 85
  console.log(scores.length);  // 출력: 3

• 조건문
  if (조건) { ... } else if (다른조건) { ... } else { ... }
• 반복문
  :
  • for (let i = 0; i < 반복횟수; i++) { ... }: 가장 기본적인 반복문.
  • for (const 요소 of 배열) { ... }: 배열의 각 요소를 순회할 때 편리.
  • while (조건) { ... }: 조건이 참인 동안 반복.
• 예시

  // if-else
  const age = 20;
  if (age >= 19) {
      console.log("성인입니다.");
  } else {
      console.log("미성년자입니다.");
  }
   
  // for loop
  let sum = 0;
  for (let i = 1; i <= 5; i++) {
      sum += i;
  }
  console.log(sum); // 출력: 15 (1+2+3+4+5)
   
  // for...of loop
  const fruitsArray = ['사과', '바나나', '딸기'];
  for (const fruit of fruitsArray) {
      console.log(fruit); // '사과', '바나나', '딸기' 순서대로 출력
  }

• 함수 정의
  function 함수이름(파라미터1, 파라미터2) { ... 코드 ... return 결과값; }
• 함수 호출
  함수이름(인자1, 인자2)
• 예시

  function add(a, b) {
      return a + b;
  }
  const result = add(3, 5);
  console.log(result); // 출력: 8

• MDN Web Docs - JavaScript: https://developer.mozilla.org/ko/docs/Web/JavaScript↗
• 코딩 테스트 연습 플랫폼 (Programmers, LeetCode 등)의 JavaScript 관련 문제들