📓 JavaScript 기초 - TIL 1

프론트엔드 개발자에게 아주 기본적이고 가장 중요한 언어라고 할 수 있는 자바스크립트에 대해 기초적인 문법과 기본 지식을 얻고자 0단계부터 차근차근 시작!

자바스크립트 코딩테스트를 꾸준히 준비하고 싶어서 완전 기초부터 탄탄하게 시작하는 게 좋을 것 같다고 생각했다. 아직 코딩테스트 단계는 아니지만 1단계, 2단계 쭉쭉 성장할 수 있을 정도로 탄탄하게 자바스크립트를 공부하고 싶다!
→ 개발자 취업에서 코딩테스트는 기본 중 기본이니깐!!!🔥
(포기하지 않을 거임…😎)

• 프로그래밍? 코딩이란?
  : 우리가 프로그램(엑셀, 노션 등등)을 사용하는 과정인 입력 → 처리 → 출력 과정이 프로그램이 하는 일이고 이렇게 프로그램이 정해진 방식에 따라서 일할 수 있도록 작성해놓은 것이 바로 프로그래밍이다.

• 자바스크립트란?
  : 프로그래머들은 어떠한 도구를 이용해서 코딩을 하는데, 이때 이용하는 도구가 바로 프로그래밍 언어다. 프로그래밍 언어도 인간의 언어와 같이 그 종류가 다양하고 언어마다 사용하는 문법도 다르다. 자바스크립트는 이렇게 다양한 프로그래밍 언어 중 하나인 것이다.

---

1. Hello World 출력
2. 변수
3. 데이터 타입
4. 연산자
5. 조건문

1️⃣ Hello World 출력

→ 코딩을 처음 시작하게 되면 가장 먼저 하는 일이 바로 Hello World를 출력하는 것!
console.log라는 명령어를 활용해서 터미널에 Hello World가 출력되도록 한다.
node hello.js를 터미널에 입력하면 Hello World가 출력된다!

console.log('Hello World!')
// 주석 처리 : 컴퓨터가 해석하지 않는 부분 -> 코딩을 하면서 특별히 담고 싶은 설명이나 혼자 메모를 할 때 많이 사용!

• 프로그래밍 : 데이터 입력받기 → 입력받은 데이터를 처리 → 처리된 최종 데이터를 출력!

2️⃣ 변수

→ 변수는 저장해놓은 값을 가리키는 일종의 이름표와 같은 것이다.
변수를 사용하면 데이터가 의미하는 바를 변수 이름을 통해서 정확하게 표현할 수 있으며 계속해서 재사용할 수도 있다.

• 변수 선언 및 할당 : let 변수이름 = 값

// 변수 선언 및 할당
let name = 'sebin Han'
// 문자열이 아닌 변수명을 전달하면 된다.
console.log(name)

name = 'olivia'
// 다른 값으로 할당
console.log(name)
// 코드는 위에서부터 아래로 해석된다!

변수 선언 키워드는 let뿐만 아니라 const도 존재!

• 변수 선언 및 할당 : const 변수이름 = 값

// 변수 선언 및 할당
const name = "sebin han"
// 변수 name이 가리키고 있는 값인 "sebin han" 출력
console.log(name)

// 위에서 선언했던 name이라는 변수에 "William"이라는 값을 다시 재할당
name = "William"
// 하지만 재할당 실패 -> 에러 발생!!

const는 let과 달리 변수에 값을 재할당할 필요가 없을 때 사용한다. 해당 변수가 고정된 값을 계속 갖고 있을 때 쓰면 좋다! ⇒ const로 선언한 값에 재할당을 하게 되면 에러가 생기는 이유!

let, const가 있기 전에는 var를 써서 변수를 선언해야만 했다. 하지만 최신 자바스크립트에서는 let과 const를 사용해서 변수를 선언해야 한다. var는 여러 단점들이 있기 때문에 더 이상 사용하지 X

3️⃣ 데이터 타입

→ 자바스크립트에는 다양한 데이터 타입이 존재한다.
프로그래밍 언어에는 데이터 타입이 존재하는데 앞서 말했듯이 프로그래밍은 입력받은 데이터를 처리해서 출력하는 과정이다. 이때, 무수히 많은 종류의 데이터를 입력받아 처리하게 되는데 미리 데이터 타입을 구분해 놓으면 컴퓨터가 보다 쉽고 효율적으로 처리할 수 있게 된다. 이러한 이유로 프로그래밍 언어에는 다양한 데이터 타입이 존재하고 이러한 데이터 타입을 배워두는 것이 필수다!

1) 숫자 number = 말 그대로 숫자 데이터.

console.log(20) // 20 출력

const myAge = 24
const yourAge = 27

console.log(myAge) // 24 출력
console.log(yourAge) // 27 출력

2) 문자열 string = 말 그대로 문자열 데이터.
이중 따옴표("")나 작은따옴표('')로 데이터를 감싸야 한다.

const firstName = 'sebin'
const lastName = 'Han'

console.log(firstName, lastName) // sebin, Han 출력

3) 참과 거짓 Boolean = 자바스크립트에서 참과 거짓을 나타내는 true / false를 표현하는 데이터

const isMan = true
const isWoman = false

console.log(isMan) // true 출력
console.log(isWoman) // false 출력

4) null, undefined = null은 텅텅 비어 있는 값을 의미.
undefined은 변수를 선언만 하고 값이 할당되어 있지 않은 것.

let name1 = null
console.log(name) // null 출력

let name2
console.log(name2) // undefined 출력

[ 연습 ]

let name = 'sebin Han'
let age = 24
let home = 'Daejeon'
let wm = null
let hobby

console.log(name, age, home, wm, hobby)

4️⃣ 연산자

1) 문자열 붙이기와 템플릿 리터럴 = '+'를 사용하여 문자열을 이어 붙일 수 있으며 추가로 문자열과 숫자를 이어붙이면 숫자가 문자로 인식!

console.log('My' + ' car') // My car 출력
console.log('2' + 4) // 24 출력

• 백틱(``) 을 사용하여 문자열 데이터를 표현할 수 있다. 이중 따옴표나 작은따옴표로 문자열을 표현할 때보다 간결하게 문자열 붙이기가 가능!

let shoesPrice = 200000
console.log('이 신발의 가격은 '+ shoesPrice +'원입니다.')
console.log(`이 신발의 가격은 ${shoesPrice}원 입니다.`)

2) 산술연산자

console.log(2 + 3) // 5 출력
console.log(2 - 1) // 1 출력
console.log(6 / 2) // 3 출력
console.log(2 * 11) // 22 출력
console.log(10 % 3) // 나머지(remainder) 연산자. 1 출력
console.log(10 ** 2) // exponentiation. 10의 2승인 100 출력

3) 증감연산자 = 자기 자신의 값을 증가시키거나 감소시키는 연산자(++, —).
증감연산자를 변수 앞에 놓는냐, 변수 뒤에 놓느냐에 따라 차이가 있다!

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

4) 대입연산자

const shirtsPrice = 200000
const pantsPrice = 50000
let totalPrice = 0

totalPrice += shirtsPrice // totalPrice = totalPrice + shirtsPrice 와 동일
console.log(totalPrice)
totalPrice += pantsPrice // totalPrice = totalPrice + pantsPrice 와 동일 
console.log(totalPrice)

totalPrice -= shirtsPrice // totalPrice = totalPrice - shirtsPrice 와 동일
console.log(totalPrice)

5) 비교연산자 = 말 그대로 숫자 값을 비교하는 연산자 → 비교연산자를 통해서 얻는 값이 바로 boolean이다.

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

6) 논리연산자 = ||(or), && (and), ! (not) 과 같은 연산자

• ||는 연산 대상 중 하나만 true 여도 true 리턴
• &&는 연산 대상이 모두 true 여야만 true 리턴
• !는 true를 false로, flase를 true로 바꿔서 리턴

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

7) 일치연산자 = 두 값이 일치하는지를 비교

console.log(1 === 1) // true
console.log(1 === 2) // false
console.log('Javascript' === 'Javascript') // true
console.log('Javascript' === 'javascript') 
// 대소문자나 띄워쓰기도 다 정확히 일치해야 한다. 따라서 false

• == vs ===

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

=> ==는 비교하는 두 값의 데이터 타입이 일치하지 않을 때 해당 값의 데이터 타입을 자동으로 변환해 주는 자바스크립트만의 특성이 있다. 이 특성으로 실수를 유발할 가능성이 있기 때문에 일치 연산자로는 ===를 사용!

[ 연습 ]

const pen = 3500
const note = 2100
let total = pen + note
console.log(`펜은 ${pen}원, 노트는 ${note}원으로 총 ${total}원 입니다.`)

total -= total * 0.2
console.log(`20% 할인된 가격은 ${total}원 입니다.`)

// console.log(`총 가격은 ${total*0.8}원 입니다.`)

5️⃣ 조건문

→ 특정 조건문을 만족했을 때만 코드를 실행하도록 하는 구문!
이 조건의 결괏값이 바로 boolean 값이다.

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

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

else와 else if 구문 = else는 false일 때 실행된다.
else if 다른 조건을 추가할 때 사용한다.

const shoesPrice = 50000
if (shoesPrice < 40000) { 
	console.log('신발을 사겠습니다.')
} else {
	console.log('너무 비싸요. 신발을 사지 않겠습니다.')
}
// 신발 가격이 40000원보다 작지 않으므로 else 코드가 실행됨


const shoesPrice = 50000
if (shoesPrice < 40000) { 
	console.log('신발을 사겠습니다.')
} else if (shoesPrice <= 50000) {
	console.log('고민을 해볼게요...')  // 신발 가격이 50000원보다 작거나 같으므로 않으므로 해당 코드가 실행됨
} else {
	console.log('너무 비싸요. 신발을 사지 않겠습니다.')
}

[ 연습 ]

// 단위:km
const distance = 2

if (distance < 2) {
    console.log('걸어가자!')
} else if (2 <= distance && distance < 5 ) {
    console.log('택시를 타자.')
} else {
    console.log('기차를 타자ㅜ')
}