자바스크립트 기초 내용 정리

내용 지속적으로 추가 예정입니다!

 

자바스크립트 버전

 

• 2009: ES5
• 2015: ES6
• 2016: ES7

 

2015년부터 2015 → ES6과 같은 방식으로 1씩 올라가는 네이밍을 하기 시작했다.

Console.log()

자바스크립트에는 console이라는 콘솔 출력을 위한 객체가 있다.

나중에 다루겠지만 변수를 디버그 하는데 있어서 가장 기본적인 요소이므로 시작에서 다루고 넘어간다.

console.log(0) // console창에 0 출력

 

Strict 모드 사용

변수 선언자 없이 변수 선언을 하면 에러를 발생하게 해준다.

// 맨 위에 'use strict'; 명시
'use strict';

var a = 1 // ok
a = 1 // error

 

1. 기본문법

1.1 변수

 

 

특성/변수명	CONST	VAR	LET
재선언	불가능	불가능	가능
재할당	불가능	가능	가능

const foo1 = 0;
var foo2 = 0;
let foo3 = 0;

const foo1 = 0; // error
foo1 = 1; // error

var foo2 = 0; // error
foo2 = 1; // ok

let foo3 = 0; // ok
foo3 = 1; // ok

1.2 함수

• 함수 선언: 새로운 함수를 선언, 이름을 없애면 파라미터 안에서 람다 함수로 사용 가능하다.
• 에로우 펑션: 새로운 함수 문법으로 기존 함수 문법보다 간결하게 사용하기 위해 만들었다.(파라미터 안에서 사용할 때 간결하게 표시하기 편함)

function foo(){
  function constructor(){
    console.log(this) // function foo를 가르킴
  }
  const temp1 = 0;
  var temp2 = 0;
  let temp3 = 0;
  return temp;
}

// window는 전역객체(전역 변수 등의 내용을 담고 있음)
const bar = () => {
  let a = 1;
  return a;
}

// arrow function를 파라미터에 사용
const b = 1;
const c = 2;

const bar = (a, b, c) => {
  return a(b, c)
}

let result = bar((a, b) => (a + b), b, c)

// console.log(reuslt)의 값은 3

 

1.3 조건식과 반복문

 

1.3.1 if문 문법 및 엄격한 검사

 

• 엄격하지 않은 검사는 삼단논법이 적용되지 않는다.
• [] == 0, '0' == 0이면 [] == '0'이어야 하는데 false가 출력된다.
• 자바스크립트에선 빈 리스트, '0' 문자열도 편의상 0으로 취급하기 때문이다.
  
  

const a = 1;
const b = 2;

// 기본 if 문법
if (a == b){
  console.log(true)
} else if (a != b){
  console.log(false)
} else {
  console.log("출력되지 않음")
}

const zero = 0;
const emptyList = [];

// 엄격한 검사는 타입도 함께 검사함
console.log([] == 0) // true 출력

console.log([] === 0) // false 출력

 

1.3.2 for문과 forEach, for in, for of

• for문 문법

for(let i = 0; i < 10; i++){
  console.log(i)
}
// 0, 1, 2,... 9, 10

• forEach문 문법

let array = [0, 1, 2, ... 9, 10];

array.forEach((i) => {
  console.log(i);
})
// 0, 1, 2,... 9, 10​

• for in 과 for of

 

• for in 은 객체 전용 문법
• for of 는 ES6부터 추가된 컬렉션 전용 문법으로써 객체가 [Symbol.iterator] 속성을 가지고 있어야만 한다.
• 컬렉션이란 자바스크립트가 제공하는 array, set, map등의 연속된 자료형을 의미한다.

const user = {
  id: 1,
  name: "Kim"
}

const names = ["Kim", "Choi"]

// for in
for(let info in user){
  console.log(info) // 1, Kim
}

// for of
for(let name of names){
  console.log(name) // "Kim", "Choi"
}

 

2. 심화 문법 및 개념

2.1 this 키워드

 

• this 키워드는 객체 자신을 불러오고 싶을 때 사용한다.

console.log(this) // window 객체를 가르킴
const foo = {
  bar: function() {
    console.log(this) // foo 객체를 가르킴
  }
}

• 일반 함수는 자기 자신과 가장 가까운 this를 불러오지만 arrow function은 this를 재정의하지 않는다.

console.log(this)
const foo = {
    a: 1,
    b: 'name',
    bar1: function (){
        console.log(this)
    },
    bar2: () => {
        console.log(this)
    }
}
foo.bar1() // {a: 1, b: 'name', bar1: ƒ, bar2: ƒ}
foo.bar2() // global {global: global, clearInterval: ƒ, ...

2.2 변수의 Hoisting 현상

• 변수의 선언을 변수 범위 맨 위로 끌고 오는 현상이다.
• 함수의 선언 및 정의가 더 아래에 있는데도 불구하고 정상적으로 실행된다.

const a = 1;
const b = 2;

const c = foo(a, b);

console.log(c)

function foo(a, b){
    return a + b;
}

2.3 변수 여러개 동시에 선언 및 할당하는 방법

let a = 1, b = 2;

// Destructuring(구조 분해 할당)이라함
// 배열 예시
let [c, d] = [1, 2]

// 객체 예시
let { name, password, description } = { name: "Kim", password: "q1w2e3r4", description: "안녕하세요"}

2.4 Template literals 함수

• 문자열을 쉽게 분해할 수 있다.

// p1은 문자열, p2는 각 변수들을 의미함
function test(p1, ...rest) {
    console.log(p1, rest)
  }
const apple = 'banana';
const box = 'house';

test`this is ${apple} in the ${box}`;
// ['this is ', ' in the ', '', raw: Array(3)]
// ['banana', 'house']

2.5 spread operator 활용법 (…args)

• …array는 array의 대괄호를 없애준다.
• 문자도 배열처럼 인덱싱이 가능하기 때문에 문자열에 사용하면 배열로 바꿔준다. (ex: “hello” → [“h”, “e”, “l”, “l”, “o”])
• array 합치기/복사에 매우 유용함, deepcopy할 때 매우 유용하다.

var a = [1, 2, 3];
var b = [4, 5];
var c = [...a] // 새로운 주소를 가진 배열c [1, 2, 3] 생성
var d = [...a, ...b] // 새로운 주소를 가진 배열d [1, 2, 3, 4, 5] 생성

• 오브젝트 합치기/deepcopy

var o1 = {a: 1, b: 2}
var o2 = {...o1, c: 3} // {a: 1, b: 2, c: 3}
var o3 = {...o2, c: 2} // {a: 1, b: 2, c: 2} 중복되는 값이 있을 시 뒤에 있는 값으로 덮어 씌워짐

2.6 apply, call 함수 사용법

• 객체나 배열에 값을 추가하는 함수이다.

let array = [];
let foo = [1, 2, 3];

// apply는 파라미터로 배열을 받음
array.apply(undefined, foo);
console.log(array) // [1, 2, 3];

let array1 = [];
let [a, b, c] = [1, 2, 3]

// call은 파라미터로 변수들을 받음
array1.call(undefined, a, b, c, ...rest)
console.log(array1) // [1, 2, 3];

2.7 함수 사용 심화

• 기본값을 사용할 수 있다.

function add(a, b = 2 * 5){
  return a + b
}

add(2, undefined) // undefined가 들어갈 시 기본값 사용

• …rest 파라미터
• … 문법은 함수 파라미터에 붙으면 값들을 모으고 나머지에서는 퍼트린다.

function foo(bar, ...rest){
    console.log(bar);
    console.log(rest[0]);
}
foo(1, 2, 3, 4); // 1, 2를 출력

3. 객체

 

3.1 reference vs primitive

• reference는 참조에 의한 복사로 메모리의 주소를 저장하기 때문에 두 변수가 같은 메모리를 사용한다.
• primitive는 값에 의한 복사로 메모리도 복사하여 두 변수가 다른 메모리를 사용한다.

 

3.2 Constructor

• 객체를 반복적으로 생성하는 문법이다.

function foo(arg1, arg2, arg3){
  this.arg1 = arg1;
  this.arg2 = arg2;
  this.arg3 = arg3;
}

const bar = new foo(1, 2, 3); // new는 새로운 객체를 생성하는 문법
console.log(bar); // foo {arg1: 1, arg2: 2, arg3: 3}

3.3 prototype vs __proto__

• prototype은 객체에서 원형을 쉽게 가져오기 위해서 만든 객체이다.

특징/이름	prototype	__proto__
위치	객체 원형(함수 원형)	모든 객체
특징	생성자를 가지는 원형으로 생성할 수 있다.	하나의 Link라고 할 수 있다.

 

3.4 class 상속과 모듈

• 생성자에 함수를 만들면 자식에게도 상속한다.
• 생성자 아래의 스코프에 함수를 만들면 부모의 prototype에 추가된다.

class Parent{
  constructor(arg1, arg2){ // 상속되는 영역
    this.arg1 = arg1;
    this.arg2 = arg2;
  }
  foo(){ // 상속은 되지 않지만 prototype에 추가되는 영역
    
  }
}

3.4.1 extends/super

• extends는 상속하는데 사용하는 키워드이다. 부모의 생성자에 있는 변수 및 함수가 상속된다.
• super는 부모의 생성자를 가져온다. super(name, age, …rest)는 부모의 생성자를 가져와서 초기화한다.

class parent{
    constructor(name, age, tall){
        this.name = name;
        this.age = age;
        this.tall = tall;
    }
}

class child extends parent{
    constructor(name, age, tall, isChild){
       super(name, age, tall)
       this.isChild = isChild;
    }
}

const foo = new parent("Kim", 10, 178);
const bar = new child("Choi", 10, 178, true);

console.log(foo) // parent {name: 'Kim', age: 10, tall: 178}
console.log(bar) // child {name: 'Choi', age: 10, tall: 178, isChild: true}

3.4.1 gettter/setter

• get/set 키워드를 사용한다.
• ES5부터 추가됐다.
• 함수를 프로퍼티한다.
• 파라미터 없이 직관적으로 이용 가능하다.

const foo = {
    get getName(){
        return this.name
    },
    set setName(name){
        this.name = name
    }
}

let bar = foo;
foo.name = "Kim"
console.log(bar.name) // Kim

3.4.1.1 class에서 사용하는 get/set

• 생성자 아래에서 사용하며 위와 같다.

class foo {
    constructor(){
        this.name = "Kim"
        this.age = 10
    }
    get getNextAge(){
        return this.age + 1;
    }
    set setValidationName(name){
        if(typeof name == "string"){
            this.name = name;
            return true
        } else{
            return false
        }

    }
}

let bar = new foo();
bar.setValidationName = "Hi"
console.log(bar.getNextAge) // 11
console.log(bar.name) // Hi

3.4.2 import/export

• ES6/ES2015부터 도입된 개념이다
• require()와 import()의 주요 차이점 중 하나는 require()는 프로그램 내부 모든 곳에서 호출할 수 있는 반면 import()는 조건부로 호출할 수 없으며 항상 파일의 시작 부분에서 실행된다는 것이다.
• require() 문을 사용하려면 import() 문을 사용할 때 .mjs가 아닌 .js 확장자로 모듈을 저장해야 한다.
• ES 모듈은 require()와 달리 import() 함수를 통해 동적으로 로드할 수 있다.

 

• package.js

{
  "type": module
}

• math.js

export default function math(a, b){ // 메인 모듈
    return "math module";
}

export function add(a, b){ // 서브 모듈 1
    return a + b;
}

export function sub(a, b){ // 서브 모듈 2
    return a - b;
}

• main.js

import math, { add, sub } from './math.js'

console.log(math()); // math module
console.log(add(1, 2)); // 3
console.log(sub(2, 1)) // 1

4. 브라우저 작동원리 및 동기와 비동기

 

4.1 브라우저 작동원리

• 브라우저는 변수를 저장하는 힙, 실행된 함수들을 저장하는 스택, 비동기적 실행을 위한 큐를 사용한다.
• 스택이 모두 비어아먄 큐에 있는 함수들이 실행된다.
• setTimeout()과 같은 비동기 함수들을 만났을 때 큐로 이동됐다가 스택이 모두 비워진 이후에 실행된다.

setTimeout(() => {
    console.log("setTImeout") // for문이 종료된 후 2초 후에 실행됨
}, 2000)
let sum = 0
for(let i = 0; i < 10000000000; i++){
    sum += i
}
console.log("end sum") // for문이 종료되고 나서 출력됨

4.2 콜백 함수/ 비동기 함수

• 콜백 함수는 어떠한 함수의 실행이 완료된 이후에 다른 함수를 실행하기 위해 사용된다.
• 비동기 함수는 시간이 오래 걸리는 작업이 있을 시 동시에 함수를 실행하여 브라우저의 블로킹을 막고 효율적으로 작업하기 위해 사용한다.

 

4.2.1 Promise 객체

• Promise객체는 함수의 성공 실패 여부에 따라 실행을 나누기 위해 사용된다.
• Promise의 세가지 상태

1. 성공하면 <resolved>
2. 판정 대기중이면 <pending>
3. 실패하면 <rejected>

 

4.2.2 then(), catch(), finally()

• then()은 함수 실행 이후에 실행할 함수를 의미한다.
• catch()는 함수 실행에서 에러가 발생했을 때 실행될 함수를 의미한다.
• finally()는 then(), catch()가 끝난 후 무조건 실행할 함수를 의미한다.

async function getUsers(){
    return ["Kim", "Choi", "Park"];
}

getUsers()
    .then(users => {
    users.forEach(user => console.log(user))
    })
    .catch(error => { console.log(error)})
    .finally(() => {console.log("finally")}) // Kim Choi Park finally

4.2.3 async/await

• async는 함수를 비동기 함수로 만들어준다.
• await은 비동기 함수 안에 있는 함수 등을 동기적으로 실행되게 만들어준다.

async function manyTime(){
    let sum = 0
    for(let i = 0; i < 1000000000; i++){
        sum += i
    }
}

async function foo () {
    await manyTime() // await 키워드가 있으면 1 2 foo, 없으면 1 foo 2를 출력함
    console.log("foo")
}
async function main(){
    console.log(1)
    foo()
    console.log(2)
}

main()

5. 심화 자료형

 

5.1 Symbol

• Object 자료형의 비밀키값이며 유일하다.
• 반복문에서 출력되지 않는다.
• 어떠한 로직을 만들기 위한 자료형이 아니고 import해온 라이브러리 코드를 해치고 싶지 않을 때, 일정 심볼이 있을 때만 실행시키고 싶을 때 사용한다.

let symbol = Symbol("반복문");
obj[symbol] = "iterator";

5.1.1 전역 심볼

• 전역 심볼을 제외한 모든 심볼은 다른 메모리를 갖는다.
• 전역 심볼은 같은 메모리를 갖기 때문에 비교시 true가 나온다.

let foo = Symbol.for("반복문")
let bar = Symbol.for("반복문")
console.log(foo == bar) // true

5.2 Map/Set

5.2.1 Map

• Map/Set은 Key/value 매칭으로 이루어진 자료형이다.

let map = new Map();
let key = "0";
let value = 10
map.set(key, value);
let v = map.get(key);
console.log(v) // 10

6. 자바스크립트와 웹

 

6.1 커스텀 태그 만들기

• 자바스크립트로 기존 html이 가진 태그 외의 커스텀 태그를 만들 수 있다.
• 재사용 할 수 있어 코드의 중복을 줄일 수 있다.

<html>
    <header>
        <title>study</title>
    </header>
    <body>
        <custom-input></custom-input>
    </body>
</html>
<script>
class CustomComponent extends HTMLElement{
    connectedCallback(){
        var div = document.createElement("div");
        div.className = "hello"
        div.innerHTML = "hello"
        this.appendChild(div)
    }
    static get observedAttributes(){ // 관찰중인 속성
        return ['href']
    }
    attributeChangedCallback(){ // 속성 업데이트시 실행

    }
}
customElements.define('custom-input', CustomComponent)
</script>

6.2 Shadow-Dom

• 가리고 싶은 태그의 내용이 있을 때 사용한다.
• 개발자 도구에서 옵션을 체크하지 않으면 표시되지 않는다.

<html>
    <header>
        <title>study</title>
    </header>
    <body>
        <custom-input></custom-input>
    </body>
</html>
<script>
class CustomComponent extends HTMLElement{
    connectedCallback(){
        this.attachShadow({mode: open});
        this.shadowRoot.innerHtml = `<span>shadow-dom</span>`;
    }
    static get observedAttributes(){ // 관찰중인 속성
        return ['href']
    }
    attributeChangedCallback(){ // 속성 업데이트시 실행

    }
}
customElements.define('custom-input', CustomComponent)
</script>

6.3 Canvas

• 자바스크립트에서 도형, 색상 등을 자유롭게 표현하고 싶을 때 사용한다.

var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d') // 색상 등의 정보를 담음
ctx.fillStyle = 'green'