Javascript

1. 산술 연산자

console.log(1 + 2)	// 덧셈
console.log(5 - 7)  // 뺄셈
console.log(3 * 4)	// 곱샘
console.log(10 / 2) // 나눗셈(몫)
console.log(7 % 5)  // 나눗셈(나머지)

2. 할당 연산자

let a = 2
a += 1  // a = a + 1
a -= 1  // a = a - 1
a *= 1  // a = a * 1
a /= a  // a = a / 1
a %= 1  // a = a % 1

console.log(a)

 

3. 비교 연산자

const a = 1
const b = 3

console.log(a === b)   // 일치 연산자
console.log(a !== b)   // 불일치 연산자
console.log(a < b)
console.log(a <= b)     
console.log(a > b)
console.log(a >= b)

function isEqual(x,y) {
  return x === y
}
console.log(isEqual(1 , 1))
console.log(isEqual(1 , '1'))

4. 논리 연산자

const a = 1 === 1
const b = 'AB' === 'AB'
const c = false

console.log(a)
console.log(b)
console.log(c)

console.log('&&(AND): ', a && b && c)
console.log('||(OR): ', a || b || c)
console.log('!(NOT): ', !a)

5. 삼항 연산자

const a = 1 < 2

if(a) {
  console.log('참')
}else {
  console.log('거짓')
}

console.log(a ? '참' : '거짓')

6. 조건문

//getRandom.js
// export default function random() {
//  return Math.floor(Math.random() * 10)
//}


import random from './getRandom'  // 다른 Javascript 호출 방법

const a = random()

if (a === 0) {
  console.log('a is 0')
}else if(a === 2) {
  console.log('a is 2')
}else if(a === 4) {
  console.log('a is 4')
}else {
  console.log('rest...')
}

const a = random()

switch (a) {
  case 0:
    console.log('a is 0')
    break
  case 2:
    console.log('a is 2')
    break
  case 4:
    console.log('a is 4')
    break
  default:
    console.log('rest...')
}

7. 반복문

// for(시작조건; 종료조건; 변화조건) {}
const ulEl = document.querySelector('ul')

for (let i = 0 ; i < 10 ; i += 1) {
  const li = document.createElement('li')
  li.textContent = `list-${i + 1}`
  if ((i + 1) % 2 ===0) {
    li.addEventListener('click', function () {
      console.log(li.textContent)
    })
  } 
  ulEl.appendChild(li)
}

8. 변수 유효범위

var(함수 레벨) vs let, const(블록레벨)

 

9. 형 변환

// 동등연산자(==) vs 일치연산자(===)
// Truthy(참 같은 값)
// true, {}, [], 1, 2, 'false', -12, '3.14'...

// Falsy(거짓 같은 값)
// false, '', null, undefined, 0, -0, NaN(Not a Number)

10. 화살표 함수

() => {} vs function () {}

const double = function (x) {return x * 2}
console.log('double: ', double(7))

const doubleArrow = (x) => {return x * 2}
const doubleArrow2 = (x) => ({name: 'the'}) // 객체 데이터 + 화살표 함수
console.log('doubleArrow: ',doubleArrow(7))

 

11. 즉시 실행 함수

// 기본
const a = 7
function double() {
  console.log(a * 2)
}
double();

// 즉시 실행 함수
// 1
(function double() {
  console.log(a * 2)
}) ();

// 2 
(function double() {
  console.log(a * 2)
}());

12. 호이스팅: 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상

const a = 7

double()

function double() {
  console.log(a * 2)
}

13. 타이머 함수

// setTimeout(함수, 시간): 일정 시간 후 함수 실행
// setInterval(함수, 시간): 시간 간격마다 함수 실행
// clearTiemout(): 설정된 Timeout 함수를 종료
// clearInterval(): 설정된 Interval 함수를 종료

const timer = setTimeout(() => {
  console.log('IRONMAN')
}, 3000)

const h1El = document.querySelector('h1')
h1El.addEventListener('click', () => {
  clearTimeout(timer)
})

const timer2 = setInterval(() => {
  console.log('CAPTAIN')
}, 3000)
const h1El = document.querySelector('h1')
h1El.addEventListener('click', () => {
  clearInterval(timer2)
})

14. 콜백: 함수의 인수로 사용되는 함수

setTimeout(함수, 시간)
function timeout(cb) {
  setTimeout(() => {
      console.log('IRONMAN')
      cb()
    }, 3000)
}
timeout(() => {
  console.log('Done!')
})

15. 생성자 함수

function User(first, last) {
  this.firstName = first
  this.lastName = last
}
User.prototype.getFullName = function () {
  return `${this.firstName} ${this.lastName}`
}

const hero = new User('Iron', 'Man')
const hero2 = new User('Thor', 'God')
const hero3 = new User('Hurk', 'Pro')
console.log(hero.getFullName())
console.log(hero2.getFullName())
console.log(hero3.getFullName())

16. this

const hero = {
  name:'Ironman',
  normal() {
    console.log(this.name)
  },
  arrow: () => {
    console.log(this.name)
  }
}
hero.normal()
hero.arrow()

const hero2 = {
  name:'Thor',
  normal: hero.normal,
  arrow: hero.arrow
}
hero2.normal()
hero2.arrow()

17. ES6 Classes

function User(first, last) {
  this.firstName = first
  this.lastName = last
}
User.prototype.getFullName = function () {
  return `${this.firstName} ${this.lastName}`
}

class User {
  constructor(first, last) {
      this.firstName = first
      this.lastName = last
  }
  getFullName() {
    return `${this.firstName} ${this.lastName}`
  }
}

const hero = new User('Iron', 'Man')
const hero2 = new User('Thor', 'God')
const hero3 = new User('Hurk', 'Pro')
console.log(hero.getFullName())
console.log(hero2.getFullName())
console.log(hero3.getFullName())

18. 상속(확장)

class Vehicle {
  constructor(name, wheel) {
    this.name = name
    this.wheel = wheel
  }
}
const myVehicle = new Vehicle('운송수단', 2)
console.log(myVehicle)

class Bicycle extends Vehicle {
  constructor(name, wheel){
    super(name, wheel)
  }
}
const myBicycle = new Bicycle('삼천리', 2)
const daughterBicycle = new Bicycle('세발', 3)
console.log(myBicycle)
console.log(daughterBicycle)

class Car extends Vehicle {
  constructor(name, wheel, license) {
    super(name, wheel)
    this.license = license
  }
}
const myCar = new Car('넥서스', 4, true)
const daughterCar = new Car('레이', 4, false)
console.log(myCar)
console.log(daughterCar)