[Do it! 모던 자바스크립트 프로그래밍의 정석] 02. 변수와 자료형

02. 변수와 자료형

• `console.log()` 함수
  • 콘솔 창에 괄호 안의 내용 표시
  • 자바스크립트 소스를 작성하면서 중간에 프로그램이 제대로 동작하는지 확인하는 용도
  • 괄호 안에 텍스트나 변수로 사용할 수 있음
• `document.write()` 함수
  • 괄호 안의 내용을 웹 브라우저 화면에 표시
  • 실제 웹 브라우저 화면에 내용을 표시할 때에는 DOM을 이용
  • 연결 연산자(+)를 사용할 수도 있고, 템플릿 리터럴을 사용할 수 있음

---

변수

• 프로그램에서 사용하기 위해 값을 담아놓는 바구니
  • ex. 날씨 정보를 알려 주는 프로그램이라면 지역 or 날짜 같은 값
• 일반적으로 프로그램 안에서 값이 달라질 수 있는 데이터
• But, 프로그램 안에서 계속 값이 바뀌지 않더라도 변수로 만들어서 사용(상수 변수)

// 1. 변수 선언: 키워드 let, const + 변수 이름
let 변수명;
const 변수명; // 상수 위한 예약어

// 2. 변수에 값 할당: 변수 R에 = 기호 붙이고 저장할 값이나 식을 작성
변수명 = 값 또는 식;

// 3. 변수 선언과 값 할당 동시에 할 수 있음
let 변수명 = 값 or 식;

---

변수 이름 정하는 규칙

• 숫자로 시작할 수 X 이름 안에 공백 포함 X
• 자바스크립트는 영문자의 대소문자를 구별
• 한 단어로 이뤄진 변수 사용할 때는 주로 소문자 사용
• 두 단어 이상으로 이뤄진 변수는 언더바(_)로 연결하거나 중간에 대문자 섞어 사용
• 미리 정해 놓은 예약어(ex. let 등)는 변수 이름으로 사용 X
• 무의미한 변수 이름 피함

---

var와 let, const

ECMAScript 2015(ES6) 이전까지는 `var`를 사용해 변수를 선언

---

변수의 재선언과 재할당

• `var` 변수: 재선언 O/ 재할당 O
• `let` 변수: 재선언 X/ 재할당 O
• `const` 변수: 재선언 X/ 재할당 X

function add(a, b) {
	return a + b;
}

// var 변수
var sum = add(10, 20);
console.log(sum); // 30
var sum = 100;
console.log(sum); // 100

// let 변수
let sum = add(10, 20);
let sum = 100;
console.log(sum); // Syntax Error

// const 변수
const myNumber = 10;
myNumber = 50;
console.log(myNumber); // Type Error

---

자바스크립트의 자료형(data type)

• 프로그램에서 처리하는 자료의 형태
  • ex. 3을 숫자로 처리 or 문자로 처리
• 자료형, 자료 유형, 데이터 타입 등으로 부름
• 원시형(primitive type): 하나의 값만 가지고 있는 자료형
• 객체(object): 원시형 외의 모든 자료
• typeof(값 or 변수): 어떤 자료형인지 알려줌

---

템플릿 리터럴

• 문자열, 변수, 식 섞어서 하나의 문자열 만드는 표현 형식
• ES6 이전에는 + 사용해서 식 or 변수 연결했음 -> 오타 나올 확률 높음
• 백팃(` `) 기호 사용
• 변수나 식이 들어가면 ${ }로 묶고, 태그나 띄어쓰기, 이스케이프 문자 그대로 표시할 수 있기 때문에 사용이 편리

name = "백두산"
classroom = 205
console.log(`${name}님, ${classroom}호 강의실로 입장하세요.`)

// 1. 문자열 삽입
// 예약어 식별자 리터럴
let name = 'Hojun';
const greeting = 'Hello my name is ${name}';
console.log(greeting); // Hello my name is Hojun

// 2. 표현식 삽입
let a = 1;
let b = 10;
console.log('1 * 10 is ' + (a * b)); // ES6 이전
console.log(`1 * 10 is ${a * b}`); // ES6: 백틱 이용 - 백틱 안에는 문자열

// 3. 여러 줄 문자열 생성
let text = "Hello, \
my name is Alberto \
how are you? \ "; // ES6 이전

let text = `Hello,
my name id Alberto
how are you?`; // ES6: 백틱 이용

// 4. 중첩 템플
// 배열 안에 객체 3개 들어감
const people = [{
	name: 'Hojun 1',
	age: 27,
}, {
	name: 'Hojun 2',
	age: 28,
}, {
	name: 'Hojun 3',
	age: 29,
}
];

// people에 들어있는 object 하나가 person
// for person in people
//	person.name
const markup = `
<ul>
	${people.map(person => `<li> ${person.name} </li>`)};
</ul>
`;

cosnole.log(markup);

// <ul>
//	<li> Hojun 1 </li>, <li> Hojun 2 </li>, <li> Hojun 3 </li>
// </ul>

---

논리형 = 불린(boolean) 유형

• 참(true) or 거짓(false) 값을 표현하기 위한 데이터 유형
• 지정한 조건을 체크하는 조건식에서 많이 사용

---

truthy와 falsy

• `true`와 `false`라는 명확한 값 이외에 참과 거짓을 표현하는 방법
• `truthy`: `true`로 인정할 수 있는 값
• `falsy`: `false`로 인정할 수 있는 값
• `falsy` 값을 제외한 모든 값은 `truthy` 하다 = `true`로 친다

// falsy 값
0 // 숫자 0
"" // 빈 문자열
NaN // Not a Number: 숫자가 아님
undefined
null

변수를 선언만 하고 값이 할당하지 않은 상태에서 그 변수를 더하거나 빼는 연산에 사용하면 NaN

undefined

• 변수를 선언하기만 하고 값을 할당하지 않을 때 변수의 초깃값
• 값이면서 동시에 자료형

null

• 유효하지 않은 값
• 값이면서 동시에 자료형

---

 

배열

• 하나의 변수에 여러 값을 할당할 수 있는 형태
• 대괄호([ ])로 묶고, 그 안에 값을 나열. 각 값은 쉼표(,)로 구분
• 빈괄호: 대괄호 안에 아무 값도 X

배열명 = [값1, 값2, ...]

emptyArr = [] // 빈 배열
colors = ["red", "blue", "green"] // 문자열 배열
arr = [10, "banana", true] // 여러 자료형

 

인덱스

• 배열에 있는 여러 값을 저장하는 방 번호/ 0부터시작
• 두번째 값 알고 싶다면: `배열명[1]`
• 배열에 있는 요소 갯수 알고 싶다면: `배열명.length`
• 배열의 마지막 값을 알고 싶다면: `배열명[ 배열명.length - 1]`

---

심볼

• ES6에 새롭게 추가된 원시 유형의 자료형
• 유일성 보장
  • 한 번만 만들면 변경할 수 X, 같은 값을 가진 심볼 만들 수 X
• 객체 프로퍼티의 키로 사용할 수 있음
  • [키] 처럼 대괄호 묶어서 사용
  • 키에 접근할 때도 마침표가 아닌 대괄호 사용
• ex. 오픈 소스 가져와 사용하거나 다른 팀원이 만든 객체를 함께 사용할 경우 키 이름이 중복될 수 있음
  -> 키 이름을 심볼로 지정 => 서로 충돌 발생 X

Symbol()

let var1 = Symbol()
let var2 = Symbol()

var1 === var2 // false -> 심볼은 유일한 값

// member 객체 만들면서 id 키를 고유하게 만들기
let id = Symbol()
const member = {
	name : "Kim",
    [id] : 1235
}

member // {name: "Kim", Symbol(): 12345}
member[id] // 1235

// 다시 id 키 지정
member.id = 6789
// 다시 심볼형 id 키 지정
id = Symbol();
member[id] = 555;

---

자료형 변환

• C 언어, 자바 등 일반 프로그래밍 언어
  • 변수 선언할 때 변수의 자료형 결정
  • 자료형에 맞는 값만 변수에 저장 가능
  • 자료형으로 인한 프로그램의 오류 방지 가능
• 자바스크립트
  • 프로그램 실행 중에 자료형이 변환되는 언어
    • 변수 선언할 때 자료형 지정 X
    • 변수에 값을 저장할 때 자료형 결정
  • 변수 일관성 있게 유지하기 힘듦
  • 자동으로 형 변환될 때가 있음(연산)
    
    • 문자열을 사칙 연산에 사용 -> 자동으로 숫자형으로 변환
    • 숫자와 문자열 연결 -> 숫자가 문자열로 반환
  • 프롬프트 창에서 입력 받은 값은 문자열

---

출처

Do it! 모던 자바스크립트 프로그래밍의 정석