내일배움캠프 Day 6

• 오늘은 자바스크립트 기초를 복습하는 시간을 가졌다. 

 

JavaScript 기초 (1)

 

변수

변수 선언과 데이터 할당

자바스크립트에서 변수를 선언할 때는 let 과 const 를 사용 

let name = 'Sinok Kim' // name이라는 변수에 Sinrok Kim 이라는 값을 할당
console.log(name) // 변수 name이 가리키고 있는 값 Sinrok Kim 을 출력

name = 'William' // 위에서 선언했던 name이라는 변수에 "William"이라는 값을 재할당
console.log(name) // 변수 name이 가리키고 있는 값 "William"을 출력

const는 let과 달리 변수에 값을 재할당할 필요가 없을 때 사용. 해당 변수가 고정된 값을 계속 갖고 있을 때 쓰인다.

const name = "Sinok Kim" // name이라는 변수에 "Sinrok Kim"이라는 값을 할당
console.log(name) // 변수 name이 가리키고 있는 값 "Sinrok Kim"을 출력

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

변수를 선언할 때 var 라는 키워드도 있으나 이것은, 

let, const가 있기 전에는 실제로 var 를 써서 변수를 선언해야만 했다.

하지만 최신 자바스크립트에서는 let과 const만 사용 한다.

그 이유는 var는 여러 단점들이 있기 때문에 

 

데이터 타입

숫자

console.log(10) // 10을 출력

const myAge = 37
const yourAge = 25

console.log(myAge) // 37을 출력
console.log(yourAge) // 25를 출력

문자열

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

const firstName = 'Sinrok'
const lastName = 'Kim'

console.log(firstName) // Sinrok을 출력
console.log(lastName) // Kim을 출력

 

Boolean

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

const isMan = true
const isWoman = false

console.log(isMan)
console.log(isWoman)

null, undefined

null은 텅텅 비어 있는 값을 의미함

undefined은 변수를 선언만 하고 값이 할당되어 있지 않은 것

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

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

 

연산자

문자열 붙이기

+를 사용하여 문자열을 이어 붙일 수 있다.

추가로 문자열과 숫자를 이어붙이면 숫자가 문자로 인식됨

console.log('My' + ' car') // My car를 출력
console.log('1' + 2) // 12를 출력

템플릿 리터럴 (Template literals)

백틱(``)을 사용해서 문자열 데이터 표현 가능

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

산술연산자 (Numeric operators)

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

증감연산자 (Increment and Decrement operators)

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

대입연산자 (Assignment operators)

const shirtsPrice = 100000
const pantsPrice = 80000
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)

 

비교연산자 (Comparison operators)

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

논리연산자 (Logical operators)

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

일치연산자 (Equality operators)

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

 

일치연산자는 == 도 있다. 자바스크립트에는 두 가지의 일치연산자가 있는데

 === 는 엄밀한 (strict) 일치연산자여서 비교하는 두 값의 데이터타입과 값 자체가 정확히 일치해야만 true를 리턴함

반면 == 는 비교하는 두 값의 데이터타입이 일치하지 않을 때 해당 값의 데이터타입을 자동으로 변환해주는 자바스크립트만의 특성이 있다. 이 특성이 자칫 개발자의 실수를 유발할 가능성이 크기 때문에 실무에서는 거의 쓰지 않고 있다. 

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