[JavaScript] 자바스크립트 기본 part 1

 

Dev Tool 활용하기

웹 페이지에서 Ctrl + Shift + i를 누르면 개발 툴이 나옵니다.

여기서 다양한 작업의 결과를 빠르게 확인할 수 있습니다!

 

async와 defer

<script src="script.js"></script>
<script async src="script.js"></script>
<script defer src="script.js"></script>

기본적으로 스크립트의 실행 시점을 조절합니다.

 

속성 X

DOM을 따라 반드시 순서대로 실행되어야 할 때 사용하는 것이 좋습니다.

async 속성

DOM이나 다른 스크립트에 의존성이 없고 실행 순서가 중요하지 않을 때 사용하는 것이 좋습니다.

defer 속성

DOM이나 다른 스크립트에 의존성이 있고 실행 순서가 중요한 경우에 사용하는 것이 좋습니다.

 

* 여기서 DOM이란?

문서 객체 모델 (The Document Object Model)

동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공합니다.

DOM은 프로그래밍 언어는 아니지만 DOM이 없다면 자바스크립트 언어는 웹 페이지 또는 XML 페이지 및 요소들과

관련된 모델이나 개념들에 대한 정보를 갖지 못하게 됩니다.

DOM은 브라우저가 자바스크립트를 이용해 웹 페이지를 조작할 수 있도록 제공해주는 요소일 뿐입니다.

우리가 자바스크립트를 이용해서 웹 페이지를 조작하는 것은 원본 HTML 문서를 조작하는 것이 아니라 DOM을 조작하는 것입니다.

결론적으로, DOM은 자바스크립트를 이용하여 조작할 수 있는 객체를 사용하여 원본 HTML 문서를 해석하는 방법입니다.

 

'use strict'

자바스크립트의 코드 사용은 유연하지만 애매모호한 부분이 있기 때문에 위험합니다.

이러한 위험성을 방지하기 위해 사용하는 것입니다.

 

var와 let

ES6 전까지는 var을 사용했지만 코드의 완벽성을 추구하기 위해 let을 도입했습니다.

 

var hoisting 이란?

어디에 선언을 했든 제일 위로 끌어올려주는 것

맨 아래에 선언하고 위에서 이 변수를 이용해 출력해도 오류가 발생하지 않습니다.

또한, var는 어느 블록에 선언하든 모든 구역에서 사용할 수 있습니다.

 

variable과 constant

variable(변수)는 읽고 쓰는 것이 가능하지만 constant(const)는 읽기만 가능합니다.

가능하다면 const를 사용하는 것이 좋습니다.

 

variable type

1. number

2. string

3. boolean

4. undefined

5. symbol

- 고유한 심볼을 만들기 위해 사용합니다.

- 같은 심볼로 만들기 위해서는 Symbol.for()를 사용합니다.

- 단, 심볼을 출력하기 위해서는 description 사용

const symbol1 = Symbol('id');
const symbol2 = Symbol('id');
console.log(symbol1 === symbol2);
// false 출력

const gSymbol1 = Symbol.for('id');
const gSymbol2 = Symbol.for('id');
console.log(gSymbol1 === gSymbol2);
// true 출력

console.log(`value: ${symbol1.description}`);
// value: id 출력

 

6. object

const person={name:'sooing',age:20};
console.log(person);
// {name: 'sooing', age:20} 출력

 

Template Literals

내장된 표현식을 허용하는 문자열 리터럴입니다.

$와 백틱(`)을 사용합니다.

console.log('이름은 '+person.name+' 나이는'+person.age+'입니다.');
// 일반적인 출력

console.log(`이름은 ${person.name} 나이는 ${person.age}입니다.`);
// Template Literals을 사용한 출력

 

논리 연산자 사용할 때 주의점 (현업에서 많이 지적받는 사항)

논리 연산자를 사용할 때는 심플한 변수를 앞에 두는 것이 좋습니다.

복잡한 연산을 하는 함수는 맨뒤로 보냅니다. (마지막에 마지못해 호출하도록)

value1 || value2 || check()
// 함수를 마지막에!

 

Loose Equality와 Strict Equality

==는 타입을 신경쓰지않고 비교하고, ===는 타입을 신경 써서 비교합니다.

const sFive='5';
const nFive=5;

console.log(sFive == nFive);
// true 출력

console.log(sFive === nFive);
// false 출력

 

Object Equality

const person1 = { name: 'sooing' };
const person2 = { name: 'sooing' };
const person3 = person1;

console.log(person1 == person2);
//각각의 참조가 다르기때문에 false

console.log(person1 === person2);
//이 또한 참조가 다르기 때문에 false

console.log(person1 === person3);
//참조가 같기 때문에 true

 

함수 사용 시 파라미터가 default일 경우

파라미터가 비어있을 경우 함수에서 간단하게 처리할 수 있습니다.

function showMessage(message, from= 'unknown'){
    console.log(`${message} ${from}`);
}

showMessage('Hi');

// Hi unknown 출력

 

Rest Parameter

배열 파라미터를 받아올 때 간편하게 받아올 수 있습니다.

function printAll(...args){
    for(let i=0;i<args.length;i++){
        console.log(args[i]);
    }
}
printAll('A','B','C');

// 아래와 같이 바꿔주셔도 됩니다.

function printAll(...args){
    for(const arg of args){
        console.log(arg);
    }
}
printAll('A','B','C');

 

Early return (현업에서 사용하는 Tip)

조건이 맞지 않을 경우 빠르게 리턴해주는 것이 좋습니다.

//기존 코드
function upgradeUser(user){
    if(user.point>10){
      //long upgrade logic..
    }
}

// Early return
function upgradeUser(user){
    if(user.point<=10){
        return;
    }
    //long upgrade logic..
}

 

function expression

함수 또한 변수에 할당될 수 있습니다.

그리고, 함수도 hoisting이 가능합니다.

//함수의 이름없이 작성해서 변수에 할당 (anonymous function)
const print = function(){
    console.log('print');
};

print();
// print 출력

const printAgain = print;
printAgain();
// print 출력

 

Callback Function

함수를 파라미터로 전달하여 사용하는 것

function randomQuiz(answer, printYes, printNo){
    if(answer === 'love'){
        printYes();
    }else{
        printNo();
    }
}

const printYes=function(){
    console.log('yes');
}

// named function으로 구현하였음, 이 때 정의된 함수 이름은 디버깅할 때 쓰임
const printNo=function print(){
    console.log('no');
}

randomQuiz('love',printYes,printNo);

// yes 출력

 

Arrow Function

함수를 간결하게 만들어주는 필수적인 아이템입니다!

// 기존에 함수를 만들었던 방법
const simplePrint = function() {
    console.log('print');
}

// Arrow Function 1
const simplePrint = () => console.log('print');

// Arrow Function 2
const add = (a,b) => a + b;

// Arrow Function 3 (블록이 필요한 경우)
const simpleMulti = (a,b) => {
    //...
    return a * b;
}

 

IIFE (Immediately Invoked Function Expression)

선언함과 동시에 호출하는 것

자주 사용하진 않지만 함수를 바로바로 사용하고 싶을 때 사용합니다.

(function simplePrint(){
    console.log('print');
})();

// 함수 선언과 동시에 호출

 

class와 object

class는 템플릿, object는 클래스의 인스턴스 개념

class Person{

    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    speak(){
        console.log('Hi');
    }
}

const person = new Person('sooing',20);
console.log(person.name);
console.log(person.age);
person.speak();

// sooing
// 20
// Hi
// 출력

 

getter와 setter

getter와 setter에서 쓰이는 변수는 다르게 해야 합니다. (변수가 같으면 constructor에서 계속해서 호출하기 때문)

class Person{

    constructor(fName,lName,age){
        this.fName=fName;
        this.lName=lName;
        this.age=age;
    }
    get age(){
        return this._age;
    }
    set age(val){
        if(val<0){
            throw Error('error');
        }
        this._age=val;
    }
}

const person = new Person('soo','ing',-1);

// age가 0보다 작으면 에러메시지가 나오도록 설정하였기 때문에 에러 메시지 출력

 

public과 private

class number{
    publicField=2; // 자동으로 public으로 선언
    #privateField=0; //private으로 선언
}

const num=new number();
console.log(num.publicField); // 2 출력
console.log(num.privateField); // undefined 출력

 

static

들어오는 데이터에 상관없이 공통적으로 클래스에서 쓰는 것일 때 사용하는 것이 좋습니다.

마찬가지로, 객체마다 할당되는 것이 아니기 때문에 객체를 따로 생성하지 않을 경우 사용하는 것이 좋습니다.

이렇게 사용하면 메모리의 사용을 줄일 수 있습니다.

// static 사용하지 않은 경우
class Name{
    person='sooing';
}
const a1=new Name();
console.log(a1.person);

// static 사용한 경우
class Name{
    static person='sooing';
  
    static print(){
        console.log(Name.person);
    }
}
console.log(Name.person);
Name.print();

 

상속과 다형성

같은 코드를 반복하는 것을 방지함으로써 코드의 양을 줄여줍니다.

class Shape{
    constructor(width, height, color){
        this.width=width;
        this.height=height;
        this.color=color;
    }
    draw(){
        console.log(`drawing ${this.color} color`);
    }

    getArea(){
        return this.width * this.height;
    }
}

class Rectangle extends Shape{}

class Triangle extends Shape{
    //overriding
    draw(){
        super.draw(); //부모 메서드 불러오기
        console.log("triangle");
    }
    getArea(){
        return (this.width * this.height) / 2 ;
    }
}

const rec = new Rectangle(20,20,'blue');
const tri = new Triangle(20,20,'red');

console.log(rec.getArea()); // 400 출력

tri.draw(); // drawing red color 출력
console.log(tri.getArea()); // 200 출력

 

instance of

왼쪽의 오브젝트가 오른쪽의 클래스의 인스턴스인지 true와 false로 리턴해주는 것

console.log(rec instanceof Rectangle); // true 출력
console.log(tri instanceof Rectangle); // false 출력
console.log(tri instanceof Triangle); // true 출력
console.log(tri instanceof Shape); // true 출력
console.log(tri instanceof Object); // true 출력 (모든 객체나 클래스는 Object에서 상속받음)