자바스크립트 - 핵심개념(1)

김태완·2024년 11월 4일
자바스크립트

  • 자료형이란?

    • 프로그래밍 언어로 조작할 수 있는 값의 유형을 의미.
    • 총 8가지 자료형 존재(원시 타입 7 + 참조 타입 1)
    • 다음에 자세히 다루고 지금은 핵심적인 몇 개만 알아보장.

  • <숫자형>

    • 나머지 연산
      console.log(7%3) -> 7을 3으로 나누고 나머지를 출력하세요!
    • 거듭제곱
      console.log(2 ** 3) -> 2의 3제곱을 출력하세요!
    • 사칙연산의 우선순위 규칙을 따른다. 덧셈, 뺄셈보다 곱셈, 나눗셈이 먼저 && 괄호안이 먼저.
    • 제곱과 곱이 있을때는 제곱먼저 계산해준다.

  • <문자열>

    • 자바스크립트에서 문자열은 우리가 사용하는 글자들을 값으로 표현할때 쓰는 자료형이다.
    • " ", ' ' 로 표현한다. 둘다 동일한 역할을 한다. 어떤 것을 사용해도 상관없지만 열고 닫는건 동일한 문자를 사용해야한다.
    • 겹쳐사용할때는 큰따옴표 안에 작은 따옴표를 사용한다.
    • 둘다 사용해야한다면?? 백틱을 사용한다.
    • console.log('hello" + 'kim') 을 하면 hellokim이 출력
    • console.log('3' + '5') 를 하면 35가 출력
    • 따라서 본인이 더하려는 내용이 문자인지 숫자인지 명확하게 해야한다.

      -> 이거 코드 짜다보면 은근히 헷갈린다. 잘 살펴봅시다

  • <불 대수>

    • 일상적인 논리를 수학적으로 표현한 것이다.
    • 불 대수의 값은 진리값이다.
    • 진리값은 어떤 명제가 참인지 거짓인지 나타내는 것이라 true or false로 나눈다.
    • 연산기호는 AND, OR, NOT을 사용한다.
    • 그렇다면 명제란? -> 참, 거짓이 확실한 문장이다.
    • x AND y -> x와 y가 모두 참일때만 참이다.
    • x OR y -> x와 y가 둘다 거짓일때만 거짓이고, 한 개라도 참이면 참이다.
    • NOT -> 반대로 해준다.

  • <불린형(Boolean)>

    • 불린의 두 값은 소문자로 true, false로 출력된다.
    • 비교시에는 등호를 부등호 뒤에 써야한다.
    • AND 연산은 &&로 표시한다.
    • OR 연산은 || 로 표시한다.
    • NOT 연산은 ! 로 표시한다.
    • !! 이렇게하면 반대의 반대가 나온다.
    • ex)
      // 불린(Boolean) - 1.
      console.log(2 < 1 && 'Codeit' !== 'Codeit');
      -> false 리턴
      // 불린(Boolean) - 2.
      console.log(7 !== 7 || 4 < 3);
      -> false 리턴
      // 불린 (Boolean) - 3.
      let x = 3;
      console.log(x > 4 || !(x > 2));
      -> false 리턴

  • 비교연산자
    === 과 == 의 차이점은?
    -> 조금 더 엄격한 비교를 할 때 ===, 조금 덜 엄격한 비교를 할 때 == 를 사용합니다.

    • console.log(2 == "2")는 숫자 2와 문자 2는 같은 것이라 판단하여 true를 반환합니다.
    • console.log(2 === "2")는 숫자 2와 문자 2가 완전 같은지 판단하여 false를 반환합니다.

  • <typeof 연산자>

    • typeof '값' 을 입력하면 이 값을 평가해서 해당하는 자료형을 문자열로 돌려준다.

    • console.log(typeof 101)
      -> number가 출력된다.

    • 자바스크립트는 정수와 소수를 따로 구분하지 않으므로 1이나 1.0 둘다 number를 출력한다.

    • ex)
      let name = "lee" function sayHello(){ console.log('Hello") } console.log(typeof name); console.log(typeof sayHello);
      -> string과 function이 출력된다.

    • 연산식을 넣으면
      console.log(typeof 'hello' + 'lee')
      console.log(typeof 8-3)
      -> stringlee 와 NaN이 출력된다.

    • NaN은 not a number
      왜 NaN이 나와?
      -> typeof는 사칙연산보다 우선순위가 높다.
      typeof 8은 문자열인데 문자열에 -3을 하니깐 NaN이 나온다.
      그래서 괄호로 연산을 우선순위로 만들어주면 된다.

  • 연산자 우선순위

  • 형 변환(Type Conversion)

    • console.log('10' + '5') -> 105가 출력
      console.log(Number('10') + Number('5')) -> 15가 출력
      마찬가지로 String, Boolean으로 형 변환 가능하다.
    • 숫자가 아닌 문자값들은 숫자로 변환할때 NaN 값이 출력된다.
    • 근데 불린을 숫자로 변환할땐 0과 1로 나온다.
    • 불린으로 변환할때는 값이 있다면 true,
      공백이거나 0, NaN일때 false로 변환
      -> 이 3가지를 falsy 값이라고 부름
    • 산술연산(+,-,*, /, %, **)은 모두 숫자형으로 변환한 다음 연산을 한다.
    • 하지만 더하기 연산자는 문자열을 연결하는 기능도 있다.
      그래서 숫자와 문자를 더한다면 문자열 더하기 기능이 더 우선적으로 실행된다.
      console.log(typeof('4' +3)) -> string 이 출력된다.

  • 관계비교(<, >, <=, >=)

    • 숫자형으로 변환된 다음 비교가 진행된다.
    • console.log('two' >= 1) 처럼 NaN과 1의 비교가 불가능 한 경우에도 false를 출력한다.

  • 같음 비교 연산(===, !==, ==, !=)
    3개 사용은 일치, 불일치(엄격한 비교)
    -> 형변환 없이 본래의 자료형으로 비교가 진행된다.
    2개사용은 동등, 부등(느슨한 비교)
    -> 숫자로 형변환이 일어나서 비교가 진행된다.

    ex)
    1 === 1; // true (값과 타입 모두 동일)
    1 === '1'; // false (값은 같지만 타입이 다름)
    1 == '1'; // true (값은 같고, 타입 변환 후 비교)

    ===을 사용하는 것이 의도하지 않은 형 변환을 피하고 더 안전하게 비교를 할 수 있는 방법인 것 같다.
    느슨한 비교는 잘 사용하지 않았던 것 같다.

  • <템플릿 문자열>

    • 특별한 형식을 가진 문자열을 템플릿 문자열이라고 한다.
      let year = 2010;
      console.log(`생년월일은 ${year}년 입니다.`)
    • 중괄호 안에는 변수, 연산식, 함수결과값 등이 들어갈 수 있다.

      백틱을 굉장히 많이 사용했던 것 같다. 탬플릿 문자열을 사용하면 문자열 내에 변수를 쉽게 삽입할 수 있고, 여러 줄로 문자열을 작성할 수도 있다.

  • <null과 undefined>

    • 자료형에는 숫자, 문자, 불린 외에도 null과 undefined도 있다.

    • 둘다 '값이 없다' 이지만 조금 다르다.
      null은 의도적으로 표현할때 사용하는 값이다.
      undefined는 값이 없다는 것을 확인하는 값이다.

    • ex)
      let lee;
      console.log(lee);
      -> undefined를 출력한다.

    • 선언을 한 다음 값을 정해주지 않았기에 undefined를 출력한다.

    • 하지만 여기에 lee=null;을 추가하면 null이 출력된다.

<-- 자바스크립트 추상화 -->

  • <할당 연산자>

    • 오른쪽에 있는 피연산자를 왼쪽에 있는 피연산자에 할당한다.
      let x = 5;
      x = x-2;
      console.log(x) -> 3 을 리턴
      = 는 서로같다는 의미가 아니라 위의 의미로 기억하자.

  • <복합 할당 연산자, 증가감소 연산자>

    • 할당 연산자와 결합해서 자주 쓰이는 표현을 더 간략하게 쓸수있게 하는 연산자를 의미한다.
      x = x+1;
      x+=1;
      x = x+1;
      x++;

  • <함수의 실행 순서와 return>

    • 함수가 실행되고 함수내 코드 순서대로 실행되는데,
      return문이 나오면 함수는 멈추고 밖으로 나온다.
    • return문 아래의 코드는 실행되지않는다. dead code라고 하며, 작성하지 않는 것이 좋다.
    • retunrn은 함수 호출 부분에 어떤 값을 되돌려주며, 함수 자체를 중단한다.

  • <return과 console.log의 차이>

    • 리턴은 함수를 실행하고 어떤 값을 돌려주는 것이고
      콘솔은 콘솔창에 어떤 것을 출력해주는 것.

  • <옵셔널 파라미터>

    • 함수를 호출할때 소괄호 안에 어떤 값들을 넣어주게되면
      이 값이 파라미터로 전달이 되고,
    • 함수 내부에서는 이 파라미터를 확인해서 서로 다른 결과값을 출력한다.
    • 만약 아무 값도 넣어주지않으면 undefined를 출력한다.
      그래서 파라미터를 전달할 수 도 있고 생략할 수 도 있다.
    • 파라미터의 기본값을 정해줘서 선택적으로 받는다고 해서 옵셔널 파라미터라고 한다.
    • 옵셔널 파라미터는 함수 선언할때 괄호안에 변수이름 = 값으로 기본값을 설정해주는 것인데, 이 순서는 제일 마지막이 좋다. 중간에 들어가면 값이 밀려버린다.

  • <변수의 scope>

    • scope는 범위, 영역이라는 뜻인데,

    • 변수에는 사실 유효한 범위가 있어서 범위를 벗어나면 오류를 발생한다.

      function 함수 () {
      // 블록문(block Statement = 중괄호로 감싼 부분)
      let x = 3;
      // 로컬 변수, 지역변수 => 블록문안에서만 쓸수있는 변수
      console.log(x);
      //여기서는 3이 출력
      }
      함수();
      console.log(x);
      여기서는 에러가 발생하는데, 변수 x가 유효하지않은 곳에서 사용했기때문!

    • 근데 위 예제에서 변수 x를 함수 밖에서 선언한다면?
      둘다 잘 출력된다.

    • 왜? 전역(글로벌)변수로 선언했기때문이다.

    • 함수안에서는 로컬변수가 있는지 확인하고 없다면 글로벌 변수를 확인한다.

  • <상수>

    • constant / 절대 변하지 않고 항상 일정한 값을 상수라고 한다.
    • 값을 바꾸지않고 일정한 수로 유지하는 변수는 let 대신에 const라고 선언해주는 것이 좋다.
    • const 로 선언하고 밑에서 다시 재할당을 하려하면 에러가 발생한다. 값을 설정해주지않아도 에러가 발생한다.
      -> 변수와 상수의 구분을 위한 규칙
    • 상수 이름 지을때 모든 알파벳을 대문자로 쓰고, 두개 이상의 단어가 있을때는 언더바로 단어를 구분해서 쓴다.
    • 왜냐하면 상수와 변수를 구분하기 위해서!

<-- 자바스크립트 제어문 -->

  • <if문>

    if  (조건부분) {
      동작부분
    }

    • 만약 조건이 충족되면 동작부분을 수행해라
    • else로 이외조건에 대한 동작을 설정할 수 있다.

  • <else if문>

    • 두가지 이상의 옵션이 필요한 조건문일때는?
      -> else if 를 사용하세용

  • <switch문>

    • 어떤값을 입력하느냐에 따라 동작(case)이 달라진다.

    • if문과는 동작하는 방식이 다르다.

      switch (비교할 값) {
      case 조건값_1:
       동작부분:
       break;
      ...
      default:
       동작부분:
      }

      - if문은 조건이 복잡하거나 불린 조건을 기반으로 분기할 때 사용한다.
      - switch문은 하나의 변수를 여러 값과 비교할 때 사용되며, 명확한 값 비교에 적합하다.

    • 조금 자세하게 보자면,

      • if문을 하나 하나 직접 작성하면 생각보다 많이 번거롭다.
      • 코드 길이는 if문 쪽이 짧지만, switch문 쪽이 눈에 더 잘 들어온다.
      • 범위를 만족하는 조건식을 만들 때는 if문을 활용하는 것이 효과적이고, 특정값을 만족하는 조건식을 만들 때는 switch문이 효과적이기 때문이다.
      • 이렇게 서로 다른 특성이 있긴 하지만, 서로 대체가 가능하니 switch문이 익숙하지 않다면 if문을 사용하면 된다.
      • 한 가지 주의할 점은 조건식에서 반드시 등호를 세 개 입력해야 한다는 점이다. switch문은 암시적 형 변환을 허용하지 않기 때문이다.

        그렇기 때문에, switch문은 값들을 비교할 때 자료형을 엄격하게 구분한다는 점과 if문으로 대체할 때는 반드시 등호 세 개를 사용해 일치 비교를 해야 한다는 점을 꼭 기억하자!

  • <for 반복문 - loop statement>

    for ( 초기화부분;  조건부분;  추가동작부분) {
      동작부분
    }

    • 조건부분이 false가 될때까지 동작부분이 반복한다.
    • 반복문이 종료가 되면 끝!
    • 추가 동작 부분을 꼭 채울 필요는 없다. 추가 동작 부분을 비워두고, 동작 부분에 i를 1씩 증가시키는 부분이 들어가도 문제는 없다.

for (let  i =  1;  i  <=  10; ) {
   console.log(${i} 너 최고!);
   i++;
}

  • 추가 동작 부분의 내용을 동작 부분에서 실행해도 아무런 문제가 없다. 하지만 i++와 같은 역할을 하는 곳으로 for문의 추가 동작 부분을 만든 것이기 때문에, 동작 부분에서는 반복하고자 하는 내용만 작성하는 것이 좋다.
  • 조건과 관련된 부분은 소괄호에 모아 두는 것이 for문의 목적에 맞게 코드를 작성하는 방법이다.

    하지만 코드의 목적이나 순서에 따라 충분히 본인의 의도에 맞춰서 사용하면 좋을듯!

  • 초기화 부분에서 생성한 변수는 for문의 로컬 변수다
  • 초기화 부분도 반드시 채울 필요는 없다
  • for 반복문에서 초기화 부분도 사실 꼭 채울 필요는 없다.

let i = 1;
for (; i <= 10; i++) {
  console.log(${i} 너 최고!);
}

  • 위 코드 처럼 for 반복문의 로컬 변수를 꼭 활용하지 않고, 반복문 밖에 있는 글로벌 변수를 활용해도 아무런 문제없이 같은 결과를 출력한다.

  • 단, for문의 소괄호 안쪽 가장 첫 번째 세미콜론은 생략할 수 없다. 저 세미콜론은 초기화 부분과, 조건 부분을 구분하는 세미콜론이기 때문에 초기화 부분의 코드를 생략하더라도 세미콜론 만큼은 생략해선 안된다.

  • for문의 소괄호 안쪽은 반드시 세미콜론 2개가 필요합니다. 그렇지 않으면 실행 오류가 발생합니다..

  • <while 반복문 - while statement>

    while (조건부분) {
      동작부분
    }

    • while 반복문을 사용하려면 반복횟수를 증가시키는 변수를 전역변수로 설정해야한다.
    • 그리고 카운트를 추가하는 동작부분도 while문 안에 넣어야한다.
    • 언제 for문을 쓰고 언제 while문을 쓰는지 고민해보자
  • <break와 continue>
    • break는 말그대로 코드 진행을 멈추고 나오는 것이다.
    • continue는 동작부분을 한번 건너뛰는 것. 아래 코드들은 실행되지않고 다음단계로 넘어간다.
profile
김태완
중고
이전 포스트

프로그램밍 개관 - 3

다음 포스트

자바스크립트 - 핵심 개념(2)

0개의 댓글