TIL 6일차 - [JavaScript] 변수와 타입

Yoon Kyung Park·2023년 4월 17일
0

TIL

목록 보기
6/75
  • JavaScript 코드를 직접 실행할 수 있다.

    o
    Node.Js에서 제공하는 통합 개발 환경 중 하나인 REPL를 사용하여 코드를 작성할 시 바로 결과값을 반환할 수 있고, 직접 console.log( ); 를 입력하여 코드를 직접 실행할 수 있다.

    JavaScript를 실행하기 위한 통합 개발 환경에는 VSCode, SublimeText, 브라우저(크롬,익스플로러)에서 제공하는 개발자도구 console창, Node.js 등이 있다.

  • 원하는 데이터를 console.log()로 출력할 수 있다.

    O
    console.log('문자열');
    console.log(숫자);

    ex) console.log('hello world');
    // hello world 반환

  • JavaScript 엔진이 코드를 읽는 법에 대해 기억한다.

    o
    JavaScript 엔진이란, 자바스크립트 코드를 실행할 수 있는 프로그램으로
    코드를 위에서 아래로 읽고 해석하고 평가하다가 문제가 생기면,
    관련된 에러에 대한 메시지와 함께 에러를 발생시키고 그 즉시 코드 실행을 중단한다.

  • 코드와 주석을 구분할 수 있다.

    o
    코드는 컴퓨터가 이해할 수 있는 0과 1로 이루어진 기계어와 사람이 컴퓨터와 소통하기 위한 일정의 문법과 의미를 지닌 프로그래밍 언어로 이루어져 있는데, 이 언어들은 컴퓨터가 읽을 수 있다.
    그러나 사람의 언어인 자연어는 컴퓨터가 읽고 해석할 수 없다.
    따라서 코드 위에 해당 코드에 대한 의미, 설명, 코드를 쓴 이유 등을 //나 /* */로 표시하여
    작성한다. 주석을 사용하는 이유는 해당 코드 작성 의도를 파악하고 전달하기 위함이다.

  • 값과 연산자를 구분할 수 있다.

    o
    값은 작성한 코드에 대한 평가가 완료되어 하나의 의미를 가지는 코드로
    값을 표현하는 방식에는 여러가지가 있다.
    하나의 값으로 평가될 수 있는 표현식(expression)이 있고,
    산술연산이나 논리연산 등을 할 수 있는 연산자(operator)가 있다.

  • console.log()로 구구단을 출력할 수 있다.

    O
    ex) 2단

    1) 식 마다 값을 대입
    console.log(2); // 2
    console.log(4); // 4
    ...
    console.log(18); // 18

    2) 식을 대입
    console.log(21); // 2
    console.log(2
    2); // 4
    ...
    console.log(2*9); // 18

    3) 변수를 선언
    let num;
    num = 2;
    console.log(num1); // 2
    console.log(num
    2); // 4
    console.log(num3); // 6
    ...
    console.log(num
    9); // 18

  • 데이터 타입이 무엇인지 이해한다.

    o
    데이터 타입은 값의 종류를 의미한다. 각 타입은 고유한 속성과 메서드(방식)가 존재하며,
    자바스크립트의 모든 값은 타입을 가지고 있다. 그래서 쉽게 분류할 수 있다.
    이러한 데이터 타입에는 7가지가 있다. 문자열(string), 숫자(number), 불리언(boolean), undefined, null, symbol, object(딕셔너리)이다.

    둘 다 보이지 않는 값을 가진다.
    이때, undefined는 정해지지 않은 것을 의미하지만 한다. 즉, 의도하지 않은 누락을 의미하며,
    null은 빈 값을 의미한다. 즉, 의도적인 생략을 의미한다.

    변수 메모리 주소 돌아와서 볼 것

  • JavaScript의 데이터 타입 중 Number, String, Boolean이 있다는 것을 기억한다.

    o
    가장 자주 쓰이는 대표적인 타입이다. 각 타입의 속성들과 메서드를 잘 이해하고 있어야 한다.

  • Number 타입에 사용가능한 연산자를 사용하여 간단한 연산을 console에 출력할 수 있다.

    o

    -typeof 연산자를 통해 해당 값이 어떤 타입의 데이터인지 알 수 있다.
    -->
    console.log(typeof 'hello world'); // string
    console.log(typeof 123); // number

    -산술연산자(arithmetic operator)를 통해 간단한 사칙연산을 할 수 있다.
    -->
    console.log(1+2); // 3
    console.log(1-2); // -1
    console.log(1*2); // 2
    console.log(1/2); // 0.5
    console.log(5%2); // 1 --> 5를 2로 나눈 나머지의 값

  • Math 내장 매서드 중 Math.floor(), Math.sqrt() 등에 대해 설명할 수 있다.

    o
    Math 내장 객체는 좀 더 복잡한 계산을 사용할 수 있도록 한다.
    -->
    Math.floor() : ()안의 숫자를 내림하여 반환
    Math.ceil() : ()안의 숫자를 올림하여 반환
    Math.round() : ()안의 숫자를 반올림하여 반환
    Math.abs() : ()안의 숫자를 절대값으로 반환
    Math.sqrt() : ()안의 숫자의 루트값으로 반환
    Math.pow() : ()안의 첫번째 숫자는 밑을, 두번째 숫자는 지수를 의미하는 값으로 반환

    ex) Math.pow(5,3) : 5의 세제곱근 값을 반환 = 5 5 5 = 125
    cf) 거듭제곱근을 구하는 3가지 방식이 있다.
    pow===num*num;
    pow===num**2;
    pow===Math.pow(num,2);

  • '+'연산자로 문자열과 문자열을 합칠 수 있다.

    o
    이때 +는 사칙 연산에 사용되는 산술연산자가 아닌 문자와 문자를 연결하는 문자열 연결 연산자이다.
    ex) 'hello ' + 'world' ; // hello world

  • 문자열의 길이를 조회할 수 있다.

    o
    '.length' 속성을 사용하여 문자의 길이를 알 수 있다. 이때 길이는 1부터 센다.
    ex) console.log('hello'.length); // 5
    console.log('hello world'.length); // 11 (띄어쓰기도 센다.)

    cf) 문자열 내에 특정 문자가 몇번째에 위치하는지 알 수 있는 속성은 indexOf()속성이다.
    이때는 0부터 센다. 이모지의 경우 이모지마다 차지하는 유니코드 코드 포인트가 다르므로 1개를 차지하는 텍스트와 다르다.

    그 외 문자열의 주요 메서드에는
    ()의 문자열을 모두 소문자로 바꾸는 toLowerCase(),
    ()의 문자열을 모두 대문자로 바꾸는 toUpperCase(),
    문자열 연결 연산자처럼 문자와 문자 사이에서 문자를 이어 붙여주는 .concat,
    몇 번째부터 몇 번째까지의 문자열을 잘라서 보여주는 slice(부터,까지),
    문자열 내에 특정 문자가 포함되어 있는지를 알 수 있는 includes()가 있다.

  • Boolean타입의 두 가지 값인 true와 false를 이해한다.

    o
    불리언 타입은 true와 false로 값을 반환한다.
    주로 직관적으로 알려주기 위해 불리언의 변수는 is~로 정한다. --> let isUser = true;
    불리언 타입은 아니지만, falsy와 truthy값이 있다.
    얼마 없는 falsy 값을 암기하여 truthy 값과 구분한다.
    대표적인 falsy 값 : false, 0, -0, 0n, "", '' , ``, null, undefined, NaN

  • 비교연산자(===)와 논리연산자(!, &&, ||)를 이해한다.

    o
    두 값이 같은지 다른지를 비교하는 연산자가 있다.
    같음을 의미하는 '===' 와 다름을 의미하는 '!=='이 있다.
    이는 엄격하게 같음과 다름을 구분하여 같은 값처럼 보여도 다른 타입이면 'false'를 반환한다.
    ex) 123 === '123'; false (숫자와 문자는 같지 않음)

    cf) 코딩에서 '='는 같음을 의미하지 않고 변수에 값을 할당하는 대입의 의미를 가진다.
    느슨한 동치 연산자('==','!='가 있지만 모호하므로 권장하지 않는다.)

    >,<,<=,>= 으로 대소 관계를 나타내는 대소 관계 비교 연산자도 있다.
    이때, '='은 무조건 부등호 오른쪽에 와야 작동한다.

    두 값의 논리 관계를 확인하는 논리 연산자가 있다.
    논리 연산자에는 ||과 &&이 있다.
    논리의 합을 의미하는 '||(논리합)'은 여러 값 중 하나만 true여도 true를 반환하며,
    여러 값이 모두 false이면, false를 반환한다.
    논리의 곱을 의미하는 '&&(논리곱)'은 여러 값이 모두가 true여야 true를 반환하며,
    여러 값 중 하나만 false여도, false를 반환한다.

    논리 부정 연산자 '!'는 사실 관계를 반대로 표현한다.
    반대의 사실을 값으로 반환한다.

    ex) !true; // false
    !(100>200); // true

  • 변수가 메모리에 데이터를 저장하는 방법이라는 것을 기억한다.

    o
    컴퓨터와 소통하기 위해 특정 데이터에 대한 이름(변수명 작성)을 공유한다.
    특정 데이터를 컴퓨터가 기억할 수 있도록 메모리 공간을 확보(let 키워드 사용)한다.
    그 메모리 공간에 이름을 부여(변수 선언)한다. --> let 변수명;
    컴퓨터가 확보한 메모리 공간에 값을 넣는다.(변수값 할당) --> 변수명=값;
    이때, 선언과 할당을 같이 하여 let 변수명 = 값; 으로 표현할 수 있다.
    여기서 '='은 같음을 의미하는 것이 아닌 오른쪽 값을 지정한 변수에 대입하겠다는 의미다.

  • let 키워드를 활용하여 변수를 선언하고 원하는 값을 할당할 수 있다.

    o
    이미 선언한 변수에 다른 변수를 다시 할당할 수 있다. 이를 재할당이라고 한다.
    단 let 키워드를 사용하여 선언하면 재할당이 아닌 재선언으로 에러가 발생한다.

    ex)
    let num=3;
    console.log(num); //3
    let num=4;
    --> error

    ex)
    let num=3;
    console.log(num+2); // 5
    num=4;
    console.log(num+2); //6

    ex)
    let sum = 1;
    sum = sum + 2;
    sum = sum + 3;
    sum = sum + 4;
    console.log(sum) // 10
    맨 처음 선언의 값은 사라지고 덮어씌어진 값에 재할당 된 것이므로 누적으로 더해준 값이 된다.

    이때 재할당이 불가능한 변수인 상수는 const키워드를 사용하여 선언한다.
    변하지 않는 일정한 변수를 의미하는 constant value이므로 재할당이 불가하다.

  • 변수를 활용하여 더 쉽게 구구단을 출력할 수 있다.

    o
    ex)
    let num;
    num = 2;
    console.log(num1); // 2
    console.log(num
    2); // 4
    console.log(num3); // 6
    ...
    console.log(num
    9); // 18

  • template literal을 사용할 수 있다.

    o
    문자열을 나타내는 데이터 타입은 " ",' ',`` 으로 묶어주면 문자열로 표현할 수 있는데,
    이때 백틱(``)을 사용하는 방법을 템플릿 리터럴이라고 한다.
    "" 와 '' 와는 다른 기능을 가지고 있는데, 문자열 내부에 변수를 삽입할 수 있는 기능이 있다.
    템플릿 리터럴 내부에 ${}를 사용하면 변수를 삽입하여 나타낼 수 있다.
    문자열이 할당되지 않은 변수도 문자열로 취급된다.
    ' '를 이용하여 단어 사이의 공백을 나타내는 것보다 훨씬 가독성이 좋다.

    ex)
    function showTime(hour, min, sec) {
    return 현재 시각은 ${hour}시 ${min}분 ${sec}초 입니다.;
    }

소감
🔡➡️💻➡️🤓👍

후 증맬루 오늘도 복습하느라 12시가 되었다.
그래.. 쉬운 거 하나 없지.
대학교에서 4년 배우는 걸 6개월이라는 짧은 시간에 압축해서 배우려면
얼마나 많은 노력과 시간이 필요하겠나.
그래 이제 미친척하고 이런 사고를 가져야겠다.

'안녕 나는 세계 코딩 짱이 되고자 하지.
너는 어디서 왔니? 나는 이제부터 코딩과 좀 친해져보려해.
슈퍼 파워 f였지만, t가 되려고 노력해야겠지.
아 물론 성격은 f인 내가 좋아.
단지 부케로 일을 하는 데에 있어서는 t로 변신하려고 해.
그럼 t 스위치를 만들어 볼까?'

profile
developerpyk

0개의 댓글