[JS] 기초 정리

자바스크립트의 기초 내용을 배우며 실습한 내용을 토대로 개념을 정리해 보았다.

변수

변수 선언 및 값 할당

• let 으로 변수 선언
• = 으로 값 할당

let num = 1, num2 = 5;
result = num * num2; // 결과값으로 5

타입

원시 자료형

• string(문자), number(숫자), boolean(참,거짓), undefined
• typeof 를 활용하여 특정 값의 타입을 확인할 수 있다.

타입비교

• == 기초 데이터 타입 대상 값을 비교 시
• === 같은 객체인지 비교 시
• 박싱이 되는지 안되는지를 구분하여 사용

함수(function)

매개변수와 전달인자

• 매개변수(parameter)는 바뀔 수 있는 값
  ⚠️ 변수는 읽기 쉽고 어떤 동작인지 알 수 있게 네이밍
• 전달인자(argument)는 매개변수에 할당되는 값
• 같은 기능을 하는 함수를 선언식, 표현식, 화살표 함수로 바꾸어 표현할 수 있다.

함수 선언식

 function 변수 (매개변수1, 매개변수2) {
                let 변수1 = 매개변수1 + 매개변수2;
                return 변수1 
                }

ㄴ 함수 표현식 : 변수 선언 -> function 익명함수 할당
ㄴ 화살표 함수 : 함수 표현식에 익명함수를 => 로 표현, 리턴 및 중괄호 생략

• const 선언은 블록 범위의 상수를 선언합니다. 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없습니다.

🔑 검색 Tip!

• 구글 : mdn + "키워드"
  ㄴ how to ~~~ in javascript
• stackoverflow : 에러 메세지 전체를 검색
  ㄴ 개발자 지식인

조건문

if 와 else if

• 시험할 조건은 괄호 안에 위치
• 값이 맞는지 아닌지는 비교연산자 사용, true /false리턴
• else 를 꼭 넣지 않아도 된다.

if (조건1) { 조건1에 맞는경우 진행되는 코드 } {
  else if (조건2) { 조건2에 맞는 경우 진행되는 코드 
  } else { 위 모든 조건이 아닌 경우 진행되는 코드 }

• if 문 안에 if 문을 넣어 중첩하여 사용할 수 있다.

function isEitherEvenAndLessThan9(num1, num2) {
  if (num1 < 9 && num2 < 9) {
    if (num1 % 2 === 0 || num2 % 2 === 0) {
      return true;
    }
    return false;
  }
  return false;
}

비교 연산자

• === / !== 값이 같거나 다른지
• <, >, <=, >= 작거나, 크거나, 작거나 같은지, 크거나 같은지

논리 연산자

• && AND, || OR, ! 값 반전
• 실행불가 if 구문 6개
  ㄴ false, null, undefined, 0, NaN, ''
  ㄴ 위 값이 아닌 경우 true 리턴
• || 연산자를 사용할 때 각 변수를 꼭 명시해야함

if (x === 5 || y > 3 || z <= 10) {
  // run my code
}

• 조건문 작성은 순서가 매우 중요
  ㄴ 특히 서로 "겹치지 않고 빠짐없이 나눠지지 않는" 경우
  ㄴ 큰수부터 작은수 순으로 || 먼저, 그다음 &&

문자열 (String Method)

문자열은 문자들로 이루진 순서열이기 때문에 위치를 가지고 특정 문자를 지정할 수 있다. 위치를 가지고 문자를 가리키는 것을 인덱싱(indexing)이라고 한다.
코드에 따옴표나 쌍따옴표로 묶인 문자열을 입력하면 문자열 리터럴 (string literal)

문자와 숫자

• Number() 괄호 안의 입력값을 숫자로 바꿈
• toString() 괄호 안의 입력값을 문자열로 변환

문자열 다루기

• + 로 문자열을 합칠 수 있다. word1 + " " + word2
• str.length 문자열의 길이 확인.
• str[0] 문자열의 글자 하나하나에 접근
• str.indexOf('a') 문자열 중 원하는 문자의 index를 찾을 수 있음 (문자 필터링에 활용)
  ㄴ 찾는 문자가 없는경우 -1로 뜸
  ㄴ 두번 연속 등장하는 경우 처음 등장한 첫번째 값만 뜸
  ㄴ 합친 값은 string 으로 변환됨
  ㄴ str.lastIndexOf() 뒤에서부터 문자열 찾음
• str.slice(0, 3) 또는 str.substring(0, 3) 문자열을 원하는 만큼만 선택
  ㄴ 텍스트의 중간 내용만 가져오고 싶을 때
  ㄴ 시작과 끝 사이의 문자열 가져옴
  ㄴ str.slice(2) 의 경우 2번째 문자열까지 제외하고 나머지 문자 반환
• str.toUpperCase() 영문을 모두 대문자로
• str.toLowerCase() 영문을 모두 소문자로
• str.replace(바꿀값,바뀔값) 문자열 일부 변경
• str.split () 문자열을 분리할 수 있음
  ㄴ .split('\n') 줄바꿈
• parseFloat 문자열을 분석해 부동소수점 실수로 반환
• parseInt 문자열을 분석해 정수로 반환
• `문자 ${인자} 문자` 문자열 간 덧셈 ` 사용

✅ 체크 포인트

• 선언은 공간을 마련하는 것, 할당은 공간 안에 데이터를 넣는 것
• 변수를 할당할 때 괄호를 넣지 않는다.
• let 선언 후 ',' 를 이용하여 한번에 선언할 수 있다.
• 매개변수에 임의의 숫자를 넣으면 안됨
• 함수 vs 매소드 > 검색해보기 !
• 공백도 string 으로 포함해야함
• 함수를 호출한다는 것은 ( ) 를 붙여준 것
• 함수가 작동하고 있는지 확인하려면 > consle.log.(num)

반복문

반복문은 한 동작을 여러 번 반복하는 것으로 반복할 조건을 코드로 작성

for 문

• for (let i = 0; i < 5; i++) 실행할 문장
  ㄴ (초기문 ; 조건문 ; 증감문)
  ㄴ 초기문 실행 후 조건문 검사
  ㄴ 조건문이 참이라면 문장 실행, 거짓이면 종료

function factorial(num) {
  let result = 1;
  for (let i = 1; i <= num; i++) {
    result = result * i;
  }
  return result;
}

이중 for 문

function makePermutations(str) {
  // 문자열 순서대로 문자갯수만큼 
  // 글자수가 몇개인지 = str.length 길이
  // 문자를 만들어 리턴
  let result = ''
  for (let i=0; i< str.length; i++){
    for (let j=0; j< str.length; j++){
      result= result + `${str[i]}${str[j]},`;
    }
  }
  return result.slice(0, result.length-1)
}

while 문

• while 초기문이 필요 없는 경우 사용 / 조건문만 괄호 안에
  ㄴ 조건문이 참이기만 하면 문장을 계속해서 수행

function makeDigits2(num) {
  let result = '1';
  let i = 2;
  while (i <= num) {
    result = result + `-${i}`;
    i++;
  }
  return result;
}

break 문

• 반복문, switch문, 레이블 문과 결합한 문장을 빠져나올 때 사용

for (i = 0; i < a.length; i++) {
  if (a[i] == theValue) {
    break;
  }
}

문자열, 반복문 리뷰

실습을 하며 놓쳤던 것들, 꼭 기억해야 할 것들

• 수도코드부터 기재하기
• Math.abs 절대값
• 가장 작은 범위부터 우선하여 작성
• 홀수와 짝수 숫자-2 = 0 (짝수)
• num 이 음수인 경우 양수로 변경 (절대값 사용)
• dibugger; 또는 console.log(num) 로 콘솔에서 확인 가능
• 소수 가 아닌 경우는?
  ㄴ 이중 for 문 사용하여 1부터 for 문으로 나눠보고 떨어지는 경우가 있다면 소수가 아님
  ㄴ 짝수인 경우 X
  ㄴ 3부터 num으로 제곱근을 나누어 나눠 떨어지면 소수 아님
  Math.sqrt() 사용

🖍 반복문은 아직도 헷갈린다... 문제를 다시 한번 더 풀어보면서 값이 하나하나 어떻게 나오는지 이해해야 겠다.