자바스크립트 - 복습

아는 거 말고 덧붙일것만 기록하자

 

다른 js 파일에 함수를 가져오는 방법 -1

import / export 

ex) getType.js 파일에서 getType() 함수를 main.js로 가져오기

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

main.js
import getType from './getType';
console.log(getType(123);

default 키워드를 넣어줘야 import시 가져 올 함수를 알 수 있으며, import 000 from 의 경우 000는 main.js에서 쓰일 함수명이라 생각하면 됨. 가령, getType.js에서는 getType() 함수이지만 import시에 import isType from 으로 가져오는 경우 main.js에서 console.log(isType(123)); 으로 쓰일 수 있음

 

 

JS에서는 == 값을 비교하고, ===는 타입까지 비교한다

 

연산자 정리

// 산술 연산자
console.log(1 + 2);
console.log(5 - 3);
console.log(3 * 4);
console.log(10 / 2);
console.log(10 % 3);

//할당 연산자
let a = 2;
a+=1;
console.log('a:' + a);

//비교 연산자(===,==,!===,!=,>,<,>=,<=)
const b = 1;
const c = '1';

console.log(b!=c);

function isEqual(x,y){
    return x===y;
}

console.log(isEqual(1,2));
console.log(b!==c);

//논리 연산자(&&, ||,!)

//삼항 연산자
const n =1;
const m =2;
n > m ? console.log('맞나?') : console.log('틀리나') ;

 

조건문 정리

import random from './getRandom';

//조건문

//if
const a = random();

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

//switch
switch(a){
    case 0:
        console.log('a is 0');
        break;
    case 1:
        console.log('a is 1');
        break;
    default:
        console.log('a is else');
}

 

반복문 정리

for(시작조건; 종료조건; 변화조건){}

 

 

함수 정리

 

function 함수명(매개변수) {

    구현할 로직 

}

 

화살표 함수

//화살표 함수
//() => {}

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

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

주의 할점 : 화살표 함수시 객체데이터를 반환하려면 소괄호로 감싼다

ex)

const dobuleArrow = (x) => ({name: 'Goru'});
console.log('dobuleArrow : ', dobuleArrow(7));

 

즉시 실행 함수(IIFE) - 함수를 재활용할 필요가 없고 만들자마자 즉시 실행하는 경우에 사용한다

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

 

호이스팅

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

const a = 7;

//함수 표현식(호이스팅 불가)
const double = function() {
    console.log(a * 2);
}

double();

//함수 선언식(호이스팅 가능)
multifly();

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

 

타이머 함수

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

const timer = setInterval(()=>{
    console.log('Goru');
},3000);

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

 

콜백 함수

1. 인수로 사용되는 함수는 CallBack 함수이다

2. CallBack 함수는 실행 위치를 보장해준다

//콜백
//함수의 인수로 사용되는 함수

/**
 * ex)
 * setTimeout(함수, 시간) : 일정 시간 후 함수 실행
 */

function timeout(cb){
    setTimeout(()=> {
        console.log('Goru');
        cb();
    },2000);
}
timeout(()=>{
    console.log('Done!');
});

 

클래스

//생성자 함수
function User(first, last) {
    this.first = first;
    this.last = last;
}

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

const goru = new User('Goru','Majone');

console.log(goru);
console.log(goru.getFullName());

//this
//일반 함수는 호출 위치에서에 따라 this를 저으이
//화살표 함수는 자신이 선언된 함수 범위에서 this를 정의

const kodae = {
    name: 'Kodae',
    normal: function () {
        console.log(this.name);
    },
    arrow: () => {
        console.log(this.name);
    }
}

kodae.normal();
kodae.arrow();

const amy = {
    name: 'Amy',
    normal: kodae.normal,
    arrow: kodae.arrow
}

//ES6 Classes
class People {
    constructor(first,last) {
        this.first = first;
        this.last = last;
    }

    getFullName() {
        return `${this.first} ${this.last}`;
    }
}

const curu = new People('Curu', 'Majone');
console.log(curu.getFullName());

//상속(확장)
class Car {
    constructor(name, wheel){
        this.name = name;
        this.wheel =wheel;
    }
}
const car = new Car('차',4);
console.log(car);

class Taxi extends Car {
    constructor(name,wheel,license){
        super(name,wheel)
        this.license = license;
    }
}

const taxi = new Taxi('택시',2);
console.log(taxi);