1. JS 시작하기

1.1 데이터 타입 확인

console.log('Hello world!') // ; 안붙여도 실행된다. 단, 특수한 경우에는 필요

console.log(typeof 'Hello world!') //string
console.log(typeof 123) // number
console.log(typeof true) // boolean
console.log(typeof undefined) // undefined
console.log(typeof null) // object
console.log(typeof {}) // object
console.log(typeof []) // object

function getType(data) {
  return Object.prototype.toString.call(data)
}

console.log(getType(123)) // [object Number]
console.log(getType(false)) // [object Boolean]

function getType(data) {
  return Object.prototype.toString.call(data).slice(8, -1)
}

import getType from './getType';

console.log(getType(123)) // Number
console.log(getType(false)) // Boolean
console.log(getType(null)) //Null
console.log(getType({})) // Object
console.log(getType([])) // Array

1.2 산술, 할당 연산자

1.2.1 산술 연산자(arithmetic operator)

console.log(1+2) //3
console.log(5-7) //-2
console.log(3*4) // 12
console.log(10/2) //5
console.log(7%5) //2 : 7을 5로 나눈 나머지 연산자

1.2.2 할당 연산자(assignment operator)

let a = 2
console.log(a) // 2
a +=1 // a = a + 1 : 모든 산술 연산자 적용 가능
console.log(a) // 3

1.3 비교, 논리 연산자

1.3.1 비교 연산자(comparison operator)

const a = 1
const b = 1
console.log(a===b) // true : 일치 연산자, a와 b가 일치하는지
function isEqual(x, y) {
  return x === y
}
console.log(isEqual(1, 1)) // true
console.log(isEqual(2,'2')) // false : 숫자데이터와 문자데이터 이기 때문
const a = 1
const b = 1
console.log(a!==b) // false : 불일치 연잔자, a와 b가 서로 다른지
console.log(a < b) // false : a가 b보다 작은지
console.log(a > b) // false : a가 b보다 큰지
console.log(a >= b) // true : a가 b보다 크거나 같은지
console.log(a <= b) // true : a가 b보다 작거나 같은지

1.3.2 논리 연산자(logical operator)

const a = 1 === 1
const b = 'AB' === 'AB'
const c = false
console.log(a) // true
console.log(b) // true
console.log(c) // false
console.log('&&:', a && b && c) // false : 모두 true여야 true가 되는 AND 연산자
console.log('||:', a || b || c) // true : true가 하나 이상이면 true가 되는 OR 연산자
console.log('!: ', !a) // false : true면 false를 나타내는 부정 연산자

1.4 삼항 연산자

const a = 1 < 2 
if (a) {
  console.log('참') // 참
} else {
  console.log('거짓')
} 
console.log(a ? '참' : '거짓') // 조건 ? 참값 : 거짓값

1.5 조건문 If Else

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

--main.js--
import random from './getRandom'

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...')
}

1.6 조건문 Switch

import random from './getRandom'

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...') 
}

1.7 반복문 For

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)
}

1.8 변수 유효범위

1.9 형 변환

1.9.1 Truthy(참 같은 값)

true, {}, [], 1, 2, 'false', -12, '3.14' ...

1.9.2 Falsy(거짓 같은 값)

false, ' ', null, undefined, 0 -0, NaN(Not a Number)

2. JS 함수

2.1 함수 복습

const sum = function (x, y) { // 매개변수
  if (x < 2) {
    return 123 // 반환과 종료를 의미함
  }
  return x + y 
}

console.log(sum(1,3)) // 123

const sum = function (x, y) { 
  console.log(arguments)
  return arguments[0] + arguments[1]
}

console.log(sum(1,3)) // 4

2.2 화살표 함수

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

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

const doubleArrow1 = x => x * 2
console.log('doubleArrow1: ', doubleArrow1(7))

const doubleArrow2 = x => ({ name: 'Heroppy' }) // 객체데이터 반환 시
console.log('doubleArrow2: ', doubleArrow2(7))

2.3 즉시실행함수

IIFE, Immediately-Invoked Function Expression

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

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

2.4 호이스팅(Hoisting)

함수 선언부가 유효범위 최상단으로 끌어올려지는 현상

const a =7

double()

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

2.5 타이머 함수

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

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

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

const timer = setInterval( () => {
  console.log('Heropy!')
}, 3000)

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

2.6 콜백(Callback)

함수의 인수로 사용되는 함수

function timeout(cb) {
  setTimeout(() => {
    console.log('Heropy!')
    cb()
  }, 3000)
}
timeout(() => {
  console.log('Done!')
})

3. JS 클래스

3.1 생성자 함수(prototype)

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

const heropy = new User('Heropy', 'Park')
const amy = new User('Amy', 'Clarke')
const neo = new User('Neo', 'Smith')

console.log(heropy.getFullName())
console.log(amy.getFullName())
console.log(neo.getFullName())

3.2 this

• 일반(Normal) 함수는 호출 위치에서 따라 this 정의!
• 화살표(Arrow) 함수는 자신이 선언된 함수 범위에서 this 정의!

const heropy = {
  name: 'Heropy',
  normal: function () {
    console.log(this.name)
  },
  arrow: () => {
    console.log(this.name)
  }
}
heropy.normal() // Heropy
heropy.arrow() // Undefined

const amy = {
  name: 'Amy',
  normal: heropy.normal,
  arrow: heropy.arrow
}
amy.normal()
amy.arrow()

function User(name) {
  this.name = name
}
User.prototype.normal = function () {
  console.log(this.name)
}
User.prototype.arrow = () => {
  console.log(this.name)
}

const heropy = new User('Heropy')

heropy.normal() // Heropy
heropy.arrow() // Undefined


const timer = {
  name: 'Heropy!!',
  timeout: function () {
    setTimeout(function () {
      console.log(this.name)
    }, 2000)
  }
}
timer.timeout() // Undefined

const timer = {
  name: 'Heropy!!',
  timeout: function () {
    setTimeout(() => {
      console.log(this.name)
    }, 2000)
  }
}
timer.timeout() // Heropy!!

3.3 ES6 Classes

normal: function ( ) { } = normal( ) { } 생략 가능!

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 heropy = new User('Heropy', 'Park')
const amy = new User('Amy', 'Clarke')
const neo = new User('Neo', 'Smith')

console.log(heropy.getFullName()) // Heropy Park
console.log(amy.getFullName()) // Amy Clarke
console.log(neo.getFullName()) // Neo Smith

3.4 상속(확장)

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 daughtersBicycle = new Bicycle('세발', 3)
console.log(myBicycle)
console.log(daughtersBicycle)

class Car extends Vehicle {
  constructor(name, wheel, license) {
    super(name, wheel)
    this.license = license
  }
}
const myCar = new Car('벤츠', 4, true)
const daughtersCar = new Car('포르쉐', 4, false)
console.log(myCar)
console.log(daughtersCar)

4. 참조

• FastCampus For Business
• KDT 핀테크 프론트엔드 개발자 2기
• (KDT FE2) 한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online.
• 박영웅 강사님