자바스크립트 초보 필독! 변수와 자료형 10분 만에 완전 정복 (코딩 자율학습)

자바스크립트 변수와 자료형 쉽게 알아보기

1. 데이터를 담는 그릇, 변수와 상수

프로그래밍을 하려면 데이터를 저장할 공간이 필요해. 자바스크립트에서는 이 공간을 변수와 상수라고 불러.

• 변수 (Variable): 이름 그대로 값이 변할 수 있는 데이터를 저장하는 공간이야.

  • 만드는 방법: var라는 키워드를 쓰고 변수 이름을 정한 뒤, = 기호를 써서 데이터를 넣어주면 돼.
    javascript var 넘 = 10; // '넘'이라는 변수에 10을 저장해라!
  • var 키워드, 변수 이름(넘), = 연산자, 데이터(10) 이렇게 구성돼.
  • 변수에 저장된 데이터는 나중에 console.log() 같은 걸로 쉽게 꺼내 쓸 수 있어.

• 상수 (Constant): 값이 변하지 않는 데이터를 저장하는 공간이야. (이번 영상에서는 자세히 다루지 않지만, 변수와 반대되는 개념이라고 생각하면 돼.)

2. 변수 만드는 더 좋은 방법: let과 const

var 말고 변수를 만드는 더 좋은 방법이 있어. 바로 let과 const야.

• let: var의 단점을 보완해서 나온 키워드야.

  • 가장 큰 장점: 같은 이름의 변수를 여러 번 만들 수 없어!
    javascript let 넘 = 10; // let 넘 = 20; // 이렇게 하면 에러가 나! 이미 '넘'이라는 변수가 있다고 알려줘.
    여러 명이 같이 코딩할 때 변수 이름이 겹쳐서 문제가 생기는 걸 막아줘.
  • 또 다른 장점: var는 코드를 실행하기 전에 변수 선언이 맨 위로 올라가는 호이스팅이라는 기능이 있는데, let은 이게 안 돼. 그래서 코드를 더 정확하게 이해하고 오류를 빨리 찾을 수 있어.

• const: 값이 절대 변하지 않는 데이터를 저장할 때 사용해.

  • 한번 값을 저장하면 절대 바꿀 수 없어.
    javascript const 이름 = "홍길동"; // 이름 = "김철수"; // 이렇게 바꾸려고 하면 에러가 나!
  • 주의할 점: const는 변수를 만들 때 반드시 값을 같이 넣어줘야 해. 나중에 값을 넣으려고 하면 에러가 나.

결론: 특별한 경우가 아니면 var 대신 let이나 const를 사용하는 게 좋아!

3. 자바스크립트에서 다룰 수 있는 데이터 종류: 자료형

자바스크립트에서 다룰 수 있는 데이터의 종류를 자료형이라고 해.

• 문자열 (String): 글자들을 모아놓은 거야. 따옴표(" 또는 ')로 감싸주면 돼.
  javascript "안녕하세요"; '반갑습니다';

  • 주의할 점: 문자열 안에 따옴표를 넣고 싶으면, 바깥에 쓴 따옴표와 다른 종류의 따옴표를 사용하거나 이스케이프 문자(\)를 사용해야 해.
    javascript "그는 '안녕'이라고 말했다."; // 큰따옴표 안에 작은따옴표 '그녀는 "반가워"라고 말했다.'; // 작은따옴표 안에 큰따옴표 "그는 \"안녕\"이라고 말했다."; // 이스케이프 문자 사용
  • 템플릿 문자열 (Template Literal): 백틱(`)을 사용하면 따옴표 안에 따옴표를 넣어도 되고, 변수도 쉽게 사용할 수 있어. (ES6부터 추가됨)
    javascript let 이름 = "철수"; let 인사 = `안녕, ${이름}아!`; // 변수 사용 가능 console.log(인사); // "안녕, 철수아!" 출력

• 숫자형 (Number): 숫자들을 말해. 정수, 소수점 다 포함돼.
  javascript 10; 3.14; -5;

  • 주의할 점: 소수점 계산할 때 컴퓨터가 정확하게 계산하지 못하는 경우가 있어. (예: 0.1 + 0.2가 0.3이 아닌 다른 값이 나올 수 있음) 이럴 때는 숫자를 10이나 100 등으로 곱해서 계산한 뒤 다시 나눠주는 방법을 쓰기도 해.

• 논리형 (Boolean): 참(true) 또는 거짓(false)을 나타내는 값이야.
  javascript true; false;

  • 비교 연산(>, <, === 등)의 결과로도 논리형 값이 나와.

• undefined: 변수를 선언만 하고 아무 값도 넣어주지 않으면 자동으로 undefined가 돼.
  javascript let 변수; console.log(변수); // undefined 출력

• null: 의도적으로 값이 없다는 것을 나타낼 때 사용해. undefined와 비슷하지만, 개발자가 직접 넣어주는 값이야.
  javascript let 값 = null; console.log(값); // null 출력

• 객체 (Object): 여러 데이터를 묶어서 관리할 때 사용해. 나중에 더 자세히 배울 거야. (중괄호 {} 안에 데이터를 넣어)

• 배열 (Array): 여러 데이터를 순서대로 담아놓은 거야. 대괄호 [] 안에 데이터를 콤마(,)로 구분해서 넣어.
  javascript let 과일 = ["사과", "바나나", "딸기"]; console.log(과일[0]); // "사과" 출력 (배열은 0부터 시작!)