TIL 6. 변수, 데이터타입, 연산자, 조건문, 반복문, 함수, 객체, 배열

내일배움단과 미니프로젝트를 진행하면서 javascript 공부를 했지만
2주차를 시작하면서 기본기를 잘 다져놓기 위해 복습한다는 마음으로 정리를 하려고 한다.

변수

변수는 데이터를 담는 공간이다.

const alphabet; 이건 변수를 선언한 것이다.
alphabet = "a"; 이건 할당 또는 초기화라고 한다.
그리고 선언과 할당을 한 번에 할 수 있다.
const alphabet = "a"; 이렇게 하면 선언과 할당을 한 번에 한 것이다.

---

변수명 왼쪽에 붙은 const라는 키워드는 const 말고도 더 있다.
키워드는 총 3개로, const, let, var이 있는데, var은 현재에는 쓰이지 않으며,
삭제하고 싶지만 이미 예전부터 써왔던 웹페이지 때문에 없애는 건 불가능하다고 한다.

const는 재할당을 할 수 없다.

const alphabet = "a";
alphabet = "b";

위의 코드는 에러가 난다.

let은 재할당이 가능하다.

let alphabet = "a";
alphabet = "b";

const는 값이 변하지 않는 변수에 사용하고, 값이 변할 수 있을 것 같은 변수에는 let을 사용한다.

데이터 타입

데이터 타입에는 숫자, 문자(문자열), boolean, null, undefined이 있다.

• 숫자
  말 그대로 숫자다.

const a = 1;
console.log(a); // 1

• 문자
  작은 따옴표(' ')나 큰 따옴표(" ") 안에 있는 걸 말한다.

const a = "1";
const b = "a";

console.log(a); // 1
console.log(b); // a

• boolean(참,거짓)
  true(참)와 false(거짓)으로 이루어져 있다.

const a = true;
const b = false;

console.log(a); // true
console.log(b); // false

const c = 1;
console.log(c == 2); // false

• null, undifined
  값이 없다는 뜻으로, null은 null이라는 값을 할당한 것을 뜻하며
  undifined는 값이 할당되지 않은 걸 뜻한다.

let a = null;
console.log(a); // null

let b;
console.log(b); // undefined

연산자

• 산술연산자
  +(덧셈), -(뺄셈) , * (곱하기), / (나누기), %(나눗셈의 나머지 값. ex. 25 % 10 = 5. 몫이 2, 나머지가 5)

숫자 뿐 아니라 문자열도 산술연산자 사용 가능.

let a = "1"; 
let b = 2; 

a+b // '12'

let c = "1";
let d = "2";

c+d // '12'

let num = 2;
console.log(num += 3); // 5 (num += 3 은 num = num + 3과 같다.)

• 증감연산자
  증감연산자는 전위와 후위로 나뉜다.
  전위는 ++num, 후위는 num++의 형태를 갖고 있다.
  둘의 차이가 약간 있는데, 간단하게 말하자면 전위는 연산을 하고 그 값을 할당하는 것이며,
  후위는 값을 할당 후 계산을 한다. 그래서 할당되는 값을 보면 전위는 계산한 된 값이 출력되며,
  후위는 계산되기 전의 할당 값이 출력된다.
  아래 예시2가 그 예다.

예시 1.

let num = 5;
console.log(++num); // 5 + 1 후 6 출력. (num+1 후 num출력. 계산한 값이 출력된다.)

let num = 5;
console.log(num++);  // 5 출력 후 5 + 1. (num출력 후 num-1. 계산한 값은 출력되기 전.)

예시 2.

let count = 1
const preIncrement = ++count
// 증감연산자를 앞에 놓게 되면 아래 주석으로 처리한 두 줄의 코드와 같은 내용입니다.
// 먼저 자기 자신에게 1을 더해서 재할당 한 후, 이를 preIncrement 에 할당했다는 의미입니다.
// count = count + 1
// const preIncrement = count
console.log(`count: ${count}, preIncrement: ${preIncrement}`) // count: 2, preIncrement: 2

let count = 1
const postIncrement = count++
// 증감연산자를 뒤에 놓게 되면 아래 주석으로 처리한 두 줄의 코드와 같은 내용입니다.
// postIncrement에 자기 자신의 값을 먼저 할당하고, 이후에 1을 더해서 재할당합니다. 
// const postIncrement = count
// count = count + 1
console.log(`count: ${count}, postIncrement: ${postIncrement}`) // count: 2, postIncrement: 1 

• 비교연산자

console.log(1 < 2) // 1이 2보다 작은가? true
console.log(2 <= 2) // 2가 2보다 작거나 같은가? true
console.log(1 > 2) // 1이 2보다 큰가? false
console.log(1 >= 2) // 1이 2보다 크거나 같은가? false

• 논리연산자

let isOnSale = true
let isDiscountItem = true

console.log(isOnSale && isDiscountItem) // true && true 이므로 true
console.log(isOnSale || isDiscountItem) // true || true 이므로 true

isOnSale = false
console.log(isOnSale && isDiscountItem) // false && true 이므로 false
console.log(isOnSale || isDiscountItem) // false || true 이므로 true

isDiscountItem = false
console.log(isOnSale && isDiscountItem) // false && false 이므로 false
console.log(isOnSale || isDiscountItem) // false || false 이므로 false

console.log(!isOnSale) // !false 이므로 true

==와 ===의 차이

console.log(1 === "1") // false를 출력
console.log(1 == "1" // true를 출력

조건문

• if문
  조건문이 참이라면 if문을 실행
  구문 : if (조건) { 조건을 만족할 때 실행할 코드 }

조건문이 참이라면 if문을 실행

let a = 20;
let b = 30;

if (a < b) { // true
	document.write(“a 는 b 보다 작다”); // 실행

const shoesPrice = 40000
if (shoesPrice < 50000) { // 신발 가격이 50000원보다 작으므로 해당 코드가 실행됨
	console.log('신발을 사겠습니다.')
}

const capPrice = 50000
if (capPrice < 50000) {
	console.log('모자를 사지 않겠습니다.') // 모자 가격이 50000원보다 작지 않으므로 해당 코드가 실행되지 않음
}

• else문
  조건문이 참이라면 if문 실행, 거짓이라면 else문 실행

let a = 40;
let b = 30;

if (a < b) { // false
	document.write(“a 는 b 보다 작다”);
} else {
	document.write(“a 는 b 보다 크다.”); // 실행
}

• else if문
  여러 개의 조건문을 생성할 때 사용하고, 참이 되는 부분에서 실행을 멈춘다.

let a = 40;
let b = 30;
let c = 20;

if (a < b) { // false
	document.write(“a 는 b 보다 작다”);
} else if (a <= b) {
	document.write(“참1”);
} else if (a == c) {
	document.write(“참2”);
} else {
	document.write(“모두 거짓”); // 실행

반복문

• while문
  구문 : while (조건) { 조건을 만족할 때 실행할 코드 }

let num = 0;

while (num < 10) {
	console.log(num);
	num++;
}

• do~ while문
  while의 조건과 관계 없이, do의 명령을 실행하고, 실행한 후 부터 while의 조건을 검사.

let i = 12;

do {
	console.log(i);
	i++;
} while (i < 10):

• break와 continue

break : 그 부분에서 탈출

for (let i =0; i <10, i++) {
	if ( i == 5 ) break; // i 가 5가 되면 끝
}

continue : 그 부분을 건너뜀

for (let i =0; i <10, i++) {
	if ( i == 5 ) continue; // 5를 건너뜀. (0, 1, 2, 3, 4, 6, 7, 8, 9)
}

---

• for문
  구문 : for ( 초기화(할당)한 변수값; 조건; 증감표기; ); { 실행 할 명령;}

for (let i = 0; i < 5; i++) {
	console.log( i );
}

결과 : 0, 1, 2, 3, 4 

• for of문
  배열 순환 반복문. 값들을 하나씩 담아서 반복한다.

let a = [10, 20, 30, 40];

for (let i of a) {
	console.log(i + 1); // 11, 21, 31, 41
}

• for in문
  객체 순환 반복문. 객체의 key값과 value값을 추출하는데 용이하다.
  하지만 for in문에도 배열을 넣을 수 있는데, 따지고 보면 배열도 객체이기 때문이다.
  객체의 key값이 배열의 index값이라고 할 수 있다.

let object = {
  a: '가', 
  b: '나', 
  c: '다'
};

for (let key in object) {
	console.log(key, object[key]); // a 가, b 나, c 다
}
```javascript
`console.log(key, object[key]);`부분의 key가 위치한 자리는 객체의 key자리다.
`console.log(key)`를 출력해보면 a, b, c만 출력되는 걸 볼 수 있다.

> 함수

함수란 특정 행동(실행)을 재사용하기 용이하게 만든 것이다.
변수에 값을 넣어, 계속 재사용하는 것처럼 함수도 특정 실행을 하는 코드를 넣어 여러 번 사용할 수 있다.
- 함수의 선언

함수선언식 - 호이스팅 O
```javascript
function 함수이름(매개변수들...) { 

	이 함수에서 실행할 코드들

	return 반환값
}

function calculateAvg(price1, price2) {
	const sum = price1 + price2 // 매개변수인 price1, price2을 변수처럼 활용!
	console.log(`두 상품의 합계는 ${sum}입니다.`)
	const avg = sum / 2
	return avg // 평균가격을 리턴!
}

함수표현식 - 호이스팅 X

const 함수이름 = function (매개변수들...) { 

	이 함수에서 실행할 코드들

	return 반환값

}

const calculateAvg = function (price1, price2) {
	const sum = price1 + price2 // 매개변수인 price1, price2을 변수처럼 활용!
	console.log(`두 상품의 합계는 ${sum}입니다.`)
	const avg = sum / 2
	return avg // 평균가격을 리턴!
}

호이스팅이란? 함수가 중단, 하단 등 어느 곳에 위치하든 맨위에 위치하는 것처럼 해주는 것.
깊게 들어가자면, 함수표현식도 호이스팅은 일어나지만 '일시적 사각지대(TDZ)'에 놓여 에러가 나는 것.
(TDZ : Temporal Dead Zone)

• 함수의 호출

함수이름(매개변수);

// 함수의 선언
function calculateAvg(price1, price2) {
	return price1 + price2
}

const priceA = 1000
const priceB = 2000
// 함수의 호출
calculateAvg(priceA, priceB) // 3000

const 변수이름 = 함수이름 (매개변수);

// 함수의 선언
function calculateAvg(price1, price2) {
	const sum = price1 + price2 // 매개변수인 price1, price2을 변수처럼 활용!
	console.log(`두 상품의 합계는 ${sum}입니다.`)
	const avg = sum / 2
	return avg // 평균가격을 리턴!
}

const priceA = 1000
const priceB = 2000
// 함수의 호출
const avg1 = calculateAvg(priceA, priceB)
console.log(`두 상품의 평균은 ${avg1}입니다.`)

const priceC = 3000
const priceD = 4000
// 함수의 호출
const avg2 = calculateAvg(priceC, priceD)
console.log(`두 상품의 평균은 ${avg2}입니다.`)

• 콜백함수
  함수를 인자(argument)로 주고 나중에 그걸 실행시키겠다.

//콜백함수들
function add(x, y) {
    return x + y;
}

function mul(x, y) {
    return x * y;
}

//함수
function cal(a, b){
    return a(10, 10) + b(10, 10);
}
//함수호출
cal(add, mul); // 120

• 화살표함수
  let 함수이름(파라미터) => {실행문}
  화살표 함수의 기본 구문은
  (파라미터) => {실행문} 이다. 그리고 { } 안에 return문을 넣을 수 있다. (물론 파라미터 생략도 가능)
  그리고 만일 중괄호를 빼면 (파라미터) => 실행문 이런 형식인데 이건 ( parameter ) => { return } 과 같은 의미이다.
  중괄호를 기재한다면 중괄호 안에 return문을 꼭 써줘야 한다.
  return 문 뒤에 소괄호를 넣으면 return 다음 행에 최상위 엘리먼트를 기재하고
  retun 뒤에 소괄호를 뺀다면 return과 같은 행에 최상위 엘리먼트를 기재해야 한다.

function cal(a, b){
	return a(10, 10) + b(10, 10);
}

위의 함수를 아래의 화살표 함수로 만들 수 있다.

let cal((a, b) => a + b, (a, b) => a * b);

객체(Object)

컴퓨터 하나에 대한 정보를 표현하려면 아래처럼 할 수 있을 것이다.

// 컴퓨터 것을 표현하기 위한 데이터들
const notebook1Name = 'Macbook'
const notebook1Price = 2000000
const notebook1Company = 'Apple'

그렇게 주르륵 쓰는 것 말고 저 데이터들을 하나로 묶어, 아래처럼 객체로 만들어 사용하면 훨씬 좋을 것이다.

const computer = {
	name: 'Apple Macbook',
	price: 20000,
    company : 'Apple'
	printInfo: function () {
		console.log(`상품명: ${this.name}, 가격: ${this.price}원`. 회사: ${this.company})
	}
}

computer.printInfo() // 상품명: Apple Macbook, 가격: 20000, 회사: Apple

const computer = {
	name: 'Apple Macbook',
	price: 20000,
    company : 'Apple'
}

function printInfo (computer) {
		console.log(`상품명: ${this.name}, 가격: ${this.price}원`. 회사: ${this.company})
}

printInfo() // 상품명: Apple Macbook, 가격: 20000, 회사: Apple

배열

배열이란 상자안에 데이터를 넣는 것과 비슷하다.
과일들에 이름을 붙여주고 방안에 어지럽게 두는 것보다
과일이라는 상자에 과일들을 넣어두는게 관리하기 효과적인 것처럼 말이다.

const arr = [1, 2, 3, 4, 5] 이런식으로 선언할 수 있다.

배열은 모든 값이 하나의 의미를 가리킨다. (객체와의 차이)
배열속 원하는 데이터만 골라서 추출할 수 있다. 좌표값(index) 사용.

const coffee = [“아메리카노”, “카페라떼”, “마끼아또”, “에스프레소”];

console.log(coffee); // ['아메리카노', '카페라떼', '마끼아또', '에스프레소']
console.log(coffee[0]); // 아메리카노 (0부터 첫 번째, 1은 두 번째 … 순이다.)

배열을 변경, 추가, 삭제할 수도 있다.

let coffee = [“아메리카노”, “카페라테”, “마끼아또”, “에스프레소”];
coffee[0] = “카페모카”;

console.log(coffee); // ['카페모카', '카페라테', '마끼아또', '에스프레소']