변수와 상수

변수

선언 후 할당되는 값이 변할 수 있는 값을 갖는 일종의 그릇 같은 개념 입니다.

let, var로 선언합니다.
단, var의 경우 호이스팅 문제로 사용을 지양하며, 호이스팅이 발생하지 않는 let을 사용합니다.

let과 var의 차이점

• let : 동일한 변수명으로 한번 선언된 이름은, 다시 선언 불가. 값을 재할당은 가능
• var : 동일한 변수명으로 여러번 재선언 가능. 값을 재할당하는 것도 가능

//변수선언과 값 할당을 따로
let `식별자`;
변수명 = 값;

// 변수선언과 동시에 값 할당
let `식별자` = 값;

💡 호이스팅
호이스팅이란, 코드가 실행되기 전 변수나 함수의 선언이 JS파일 최상단으로 끌어올려지는 것으로 즉, 지역변수, 지역함수로 선언된 것이 전역변수, 전역함수가 되는 것을 의미합니다.

해당 문제로 인해 var 사용이 지양되며 let이 만들어지게 되었습니다.

상수

상수는 변수와는 달리 한번 값이 할당되면 값이 변경될 수 없습니다.
따라서 const의 경우 선언과 동시에 값을 할당해줘야합니다.

const로 선언할 수 있습니다.

const `식별자` = 값;

식별자 네이밍 규칙

식별자를 지을 때는 몇가지 규칙을 준수해야합니다.

1. 식별자는 첫 시작은 글자, 달러기호($), 밑줄기호(_)로 시작해야 함 (숫자로 시작할 수 없음)
2. 식별자에는 글자, 숫자, 달러기호($), 밀줄기호(_)만 사용할 수 있음
3. 유니코드 문자도 사용 가능 (참고)
4. 예약어는 사용 불가
5. 띄어쓰기불가

💡 식별자 네이밍 규칙 참고
1. 한글 사용 지양
: 한글을 사용할 수 는 있으나, ① 영문 1글자 1바이트, 한글 1글자 2바이트로 용량면에서 영문이 우위에 있고 ② 한글 사용시 인코딩 문제가 발생할 수 있습니다.

2. 달러기호($) 사용 지양
: $의 경우 jquery 문법에서 많이 사용하기 때문에 햇갈릴 수가 있습니다.

3. 카멜(camel) 케이스 권장
: 각 프로그래밍 언어별로 주로 사용하는 네이밍 규칙이 있는데 JS에서 식별자의 경우 camel case를 암묵적으로 사용하고 있습니다.
첫 단어의 첫 글자는 소문자로 시작, 새 단어의 첫 글자의 시작은 대문자로 구성해주는 규칙

자료형

js에서 다루는 데이터 형태를 자료형이라고 합니다.

Primitive Type

• 객체가 아닌 것들
• 그 자체로 변수에 저장 됨.
• 값이 하나만 있는 값으로 이미 생성한 프리미티브 타입은, 객체, 배열, 함수와 달리 변형 불가

숫자형 - Number

말그대로 숫자 입니다. 다른 언어에서는 숫자의 종류별로 다른 타입을 갖지만 JS에서는 Number 타입만이 존재합니다.

JS 내에서는 아래의 값들도 Number 타입을 갖습니다.

• Infinity : 양수를 0으로 나누는 경우
• -Infinity : 음수를 0으로 나누는 경우
• NaN : 숫자가 아닌 것을 연산한 경우 (= Not a number)

문자열 - String

문자열이란 텍스트 데이터를 말합니다.
JS에서는 문자열을 표현할 때 작음따옴표(’) 따옴표(”) 백틱(`)를 사용합니다.

3 은 숫자형이지만, "3"은 문자열 입니다.

💡 문자열 안에서 다시 따옴표 작성하기
"문자열 표현입니다." 또는 '문자열 표현입니다.' 처럼 따옴표, 작은따옴표로 문자열을 표현해주면서 그 안에 다시 따옴표, 작은 따옴표가 들어가야하는경우,
'작은 따옴표로 문자열 전체를 감싸 줬다면, "따옴표"로 내부 따옴표를 표시합니다.'
"따옴표로 문자열 전체를 감싸 줬다면, '작은 따옴표'로 내부 따옴표를 표시합니다."

논리형 - Boolean

true 와 false 두 가지 값 밖에 없는 데이터 타입입니다.

null, undefined

특수한 데이터 형태로,

• null : 값이 없는 상태를 의미합니다. (정확히는 값이 없다는...아니나 일단 그렇게만 이해하는게 정신건강에 좋음)
• undefined : 할당되지 않은 상태를 의미합니다.

Object Type

Primitive 타입과 달리 값을 여러개 가질 수 있는 데이터 형태입니다.

배열 - Array

배열이란 순서(index)를 갖고 저장된 객체로, 순서는 0부터 시작 합니다.

["바보", "멍청이", "사과", "말미잘", "오징어"] 의 형태이며,
"바보"의 경우 순서는 0입니다. "멍청이"의 경우 1번이 됩니다.

객체 - Object

객체는 {이름(key) : 값(value)} 의 형태로 property를 저장하는 컨테이너 라고 볼 수 있습니다.

property 값으로는 기본타입, 또 다른 객체, 함수 등을 가질 수 있으며 객체가 프로퍼티로 함수를 가질 때 이를 매서드 라고 부릅니다.

const person = {
  name : '홍길동',
  age : 25,
  isProgramer : true,
  say () {
    console.log('Hello~~~');
  },
};

참고

Do it! 한 권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석 - 고경희
위 책을 공부하며 작성하고 있습니다!