프로그래밍 공부/Javascript

TIL 2일차 2021.08.24

Kevinkb 2021. 8. 24. 18:09

오늘 배운 것

1. 변수

프로그래밍은 데이터 처리를 하는 것이다. 컴퓨터에는 '메모리'라는 데이터 보관함이 존재하는데 이 보관함의 크기는 동일하다. 변수는 각 보관함의 이름을 의미한다. (간단한 변수들는 콜 스택에 저장된다.) 즉, 데이터의 이름표(이름이 붙은 값)이다. 이 이름표를 이용해 데이터를 효율적으로 사용할 수 있다.(재활용)

How to use

1) 보관함 확보(선언 declaration)

let age;

2) 보관함에 데이터 저장(할당 assignment)

age = 12; // 등호 기호는 '같다'라는 의미가 아닌 '데이터의 할당'(저장)을 의미한다.

3) 선언과 할당은 동시 사용 가능

let age = 12;

2. 타입

변수에 담을 수 있는 데이터는 숫자나 문자처럼 특정한 형태를 가지고 있다. 이를 데이터 타입(data type) 줄여서 '타입'이라고 한다. 타입은 값의 종류를 말하며 자바스크립트의 모든 값은 데이터 타입을 갖는다. typeof를 활용하면 특정 값의 타입을 확인할 수 있다.

원시 자료형(primitive data type)

고정된 저장 공간을 차지하는 데이터를 원시 타입 데이터라고 한다. 원시 자료형은 하나의 데이터 타입만을 담고 있다.
string, number, boolean, undefined, symbol, null

let word = 'hello';       // string
let num = 3;              // number
let isStudent = true;     // boolean
var kevin;                // undefined
var key = Symbol('key');  // symbol

console.log(typeof key);  // symbol
console.log(typeof num); // number

참조 자료형(reference data type)

자바스크립트에서 원시 자료형이 아닌 모든 것들은 참조 자료형이다. 대표적으로 배열, 객체, 함수 등이 있다. 원시 자료형은 하나의 변수에 하나의 데이터만을 담을 수 있는데, 참조 자료형은 여러 데이터를 담고 있다.

let name = 'Kevin';
let arr = ['string', 123, name];

let check = function () {
    console.log('check check check');
    return 'check';
}

console.log(typeof check);   // function

※ 비교 연산

느슨한 비교(==)는 값만 같으면 true를 출력하지만 엄격한 비교(===)는 타입과 값이 모두 동일해야 true를 출력한다.
즉, 느슨한 비교(==)는 타입의 강제변환을 허용하지만, 엄격한 비교(===)는 타입의 강제변환을 허용하지 않는다.

console.log(1 == '1');     // true
console.log(1 === '1');    // false

3. 함수

논리적인 일련의 작업을 하는 하나의 단위. 코드의 묶음, 기능의 단위, 입력과 출력간의 매핑
함수를 정의하면 메모리 힙(Memory Heap)에 저장되어 언제든 다시 사용할 수 있다. (객체, 배열, 함수 등 복잡한 데이터 구조의 값들은 메모리 힙에 저장된다.)

How to use

// 1. 정의(definition)
// 함수 정의 방식은 3가지 방법으로 가능하다.

// 함수 선언식
function cal (para1, para2) {
    console.log(para1 + para2);
    return para1 * 10;
}

// 함수 표현식
let cal = function (para1, para2) {
    console.log(para1 + para2);
    return para1 * 10;
};

// 화살표 함수
let cal = (para1, para2) => {
    console.log(para1 + para2);
    return para1 * 10;
};

// 2. 호출(call, invocation)
cal(10, 20);

let result = cal(10, 20);   // 함수가 실행이 되면서 console.log(10 + 20); 즉, 30이 출력된다.
console.log(result);        // 100

4. 디버깅

디버깅(debugging)은 스크립트 내 에러를 검출해 제거하는 일련의 과정을 의미한다.
개발도구에 중단점(breakpoints)를 설정하거나 debugger; 문을 이용해 디버깅할 수 있다.

function hello (name) {
    let hi = `Hello, ${name}!`;

    debugger;      //    <------ 여기서 실행이 멈춘다.

    return hi
}

5. 조건문

어떠한 조건을 판별하는 기준을 만드는 문, 반드시 비교 연산자가 필요하다.

if (조건문1) {
    // 조건문1이 true일 경우
} else if (조건문2) {
    // 조건문1이 false이고
    // 조건문2가 true일 경우
} else {
    // 모든 조건문이 false인 경우
}

falsy 값

false, null, undefined, 0, NaN, ''

truthy

falsy 값을 제외한 모든 값

논리 연산자

AND => &&, OR => ||, NOT => !


내일 배울 것(할 것)

  • 디버그에 대한 자세한 포스팅
  • 문자열
  • 코플릿 - 조건문, 문자열
  • checkpoint solution(변수와 자료형, 조건문, 문자열)

'프로그래밍 공부 > Javascript' 카테고리의 다른 글

TIL 4일차 2021.08.26  (0) 2021.08.26
TIL 3일차 2021.08.25  (0) 2021.08.25
TIL 1일차 2021.08.23  (0) 2021.08.23
표현식과 문  (0) 2021.08.11
변수  (0) 2021.07.29