[JavaScript] 스파르타 자바스크립트 기초 인강(1~7강)

0. 자바스크립트란?

 

프로그래밍이란?

데이터의 입력 ⇒ 처리 ⇒ 출력이 바로 프로그램이 하는 일, 이렇게 프로그램이 정해진 방식에 따라 일할 수 있도록 작성해놓는게 프로그래밍이다.

자바스크립트란?

프로그래머들이 이용하는 도구가 바로 프로그래밍 언어이고, 자바스크립트는 이러한 언어들 중에서 몇 손가락 안에 들만큼 많이 쓰이는 언어이고, 많은 프로그래머들로부터 사랑받고 있는 언어이다! 

 

1. 변수

변수는 저장해놓은 값을 가리키는 일종의 '이름표'라고 생각할 수 있다. 이렇게 변수를 사용하면 해당 데이터가 의미하는 바를 변수 이름을 통해 정확히 표현할 수 있고, 계속해서 재사용도 할 수 있음

let 변수이름 = 값

변수 <변수이름> 를 선언했고, 해당 변수에 <값>을 할당했다! 

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

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

 

const 변수이름 = 값

const는 let과 달리 변수에 값을 재할당할 필요가 없을 때 쓴다. 

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

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

//TypeError: Assignment to constant variable.

 

2. 데이터 타입

◼ 원시형 (primitive) 타입과 객체타입(참조 타입) 이 있다. 여기서 원시형 타입(기본타입)만 설명

 : number, string, boolean, null, undefined

◼ 데이터 타입의 존재 이유?

무수히 많은 데이터들을 컴퓨터가 보다 빠르고 효율적으로 처리하기 위해 자바스크립트라는 프로그래밍 언어가 구분해놓음

1) 숫자

const myAge = 37
const yourAge = 25

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

 

2) 문자

이중 따옴표("")나 작은따옴표('')로 데이터를 감싸야 함

const firstName = 'Hyemi'
const lastName = 'Gwak'

console.log(firstName) // Hyemi를 출력
console.log(lastName) // Gwak을 출력

 

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를 출력

 

3. 연산자

 1) 문자열 붙이기

     ◾ +를 사용하여 문자열을 이어붙일 수 있음
     ◾ 문자열과 숫자를 이어붙이면 숫자가 문자로 인식

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

     2) 템플릿 리터럴(Template literals)

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

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

 

     3) 산술연산자 (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을 출력

 

     4) 증감연산자 (Increment and Decrement operators)

       ◾ 자기 자신의 값을 증가시키거나 감소시키는 연산자(++, —)
       ◾ 변수앞에 놓느냐, 뒤에 놓느냐에 따른 차이 존재

 

 앞에 놓았을 때,  ++count  

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

 

 뒤에 놓았을 때, count ++ 

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

 

     5) 대입연산자 (Assignment operators)

       ◾ 어떤 값을 어떤 변수에 할당하는 것, = 외에도 += , -= 같은 것들을 사용하여 연산과 대입 한번에 가능

const shirtsPrice = 100000
const pantsPrice = 80000
let totalPrice = 0

totalPrice += shirtsPrice // totalPrice = totalPrice + shirtsPrice 와 동일
console.log(totalPrice)
// 100000 출력

totalPrice += pantsPrice // totalPrice = totalPrice + pantsPrice 와 동일 
console.log(totalPrice)
// 180000 출력

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

 

   6) 비교연산자 (Comparison operators)

       ◾ 말 그대로 숫자값을 비교하는 연산자. 이를 통해 얻는 값이 boolean임. 조건문과 자주 활용

console.log(1 < 2) // true
console.log(2 <= 2) // true
console.log(1 > 2) // false
console.log(1 >= 2) // false

 

   7) 논리연산자 (Logical operators)

     ◾ || (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

 

8) 일치연산자 (Equality operators)

       ◾ 두 값이 일치하는지 비교
       ◾  == 도 있지만, 두 값의 데이터 타입을 확인하여 일치하지 않으므로 실무에서 자주 사용하지 않음. 

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

 

       ◾  == 와 === 의 차이

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