첫번째 프로젝트는 버튼을 누르면 배경화면의 색이 바뀌게 되는 color flipper를 만드는 내용이다. 

 

DOM이란?

DOM(Document Object Model)은 HTML 및 XML문서를 브라우저가 읽는 방법을 나타내는 인터페티스이다. 

자바스크립트가 웹 사이트를 조작, 구조화 및 스타일링할 수 있도록 도와주는 도구이다. 브라우저가 HTML 문서를 읽은 후 DOM이라고 하는 표현트리라고 하는 것을 만들어서 해당 트리에 엑세스 할 수 있는 방법을 정의한다. 

 

DOM을 조작함으로써 새로 고침없이 페이지의 데이터를 업데이트하는 어플리케이션을 만들 수 있다. 또한 사용자가 사용자 정의할 수 있는 어플리케이션을 만든 후 새로 고침없이 레이아웃을 변경할 수 있다. 

 

 

HTML파일 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Color Flipper || Simple</title>

    <!-- styles -->
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <nav>
      <div class="nav-center">
        <h4>color flipper</h4>
        <ul class="nav-links">
          <li><a href="index.html">simple</a></li>
          <li><a href="hex.html">hex</a></li>
        </ul>
      </div>
    </nav>
    <main>
      <div class="container">
        <h2>background color : <span class="color">#f1f5f8</span></h2>
        <button class="btn btn-hero" id="btn">click me</button>
      </div>
    </main>
    <!-- javascript -->
    <script src="app.js"></script>
  </body>
</html>

 

이 HTML파일을 기반으로 javascript를 적용한다. 

 

1. 배열 선언

const colors = ["green", "red", "rgba(133,122,200)", "#f15025"];

colors라는 배열을 선언하고, 네가지 색상값을 포함하고 있다. 

 

2.요소 선택

const btn = document.getElementById("btn");
const color = document.querySelector(".color");

- document.getElementById( )메소드는 특정 id속성을 가진 요소를 검색하고 그 요소를 리턴한다. 

- documnet.querySelector( )메소드는 id뿐만아니라 class, 복합 태그 등 모두 가져올 수 있기 때문에 더 강력하게 작용할 수 있다. 

위의 경우에는 클래스 속성인 ".color"를 가져왔다. 

 

3. 이벤트리스너 추가 

btn.addEventListener("click", function () {
  const randomNumber = getRandomNumber();
  document.body.style.backgroundColor = colors[randomNumber];
  color.textContent = colors[randomNumber];
});

 

- addEventListener( )는 document 요소에 event를 부여할 때 사용하는 메소드이다.

addEventListenr("이벤트", 실행할 함수)로 정의할 수 있다. 

- 그렇다면 이벤트는 무엇일까? 이벤트는 웹 브라우저에서 사용자가 수행하는 동작이나 시스템에서 발생하는 사건을 의미한다. 예를 들어 사용자가 버튼을 클릭하거나 키보드를 누르거나 마우스를 움직이거나 페이지가 로드 되는 등의 동작이 모두 이벤트에 해당한다. 

 

  • click: 사용자가 요소를 클릭할 때 발생합니다.
  • mouseover: 사용자가 요소 위에 마우스를 올려놓을 때 발생합니다.
  • keydown: 사용자가 키보드를 눌렀을 때 발생합니다.
  • load: 웹 페이지나 이미지 등이 로드될 때 발생합니다.
  • submit: 사용자가 폼을 제출할 때 발생합니다.

- 위 코드에서는 btn.addEventListenr에서 "click"이라 이벤트를 추가하였고 이는 버튼을 클릭할 때마다 함수가 실행된다는 것을 의미한다. 

- const randomNumber = getRandomNumber( );는 randomNumber라고 하는 상수에 무작위 숫자를 생성하는 함수를 저장하였다. getRandomNumber는 0부터 'colors' 배열의 길이보다 하나 작은 숫자까지의 정수를 반환한다. 

- document.body.style.backgroundColor = colors[randomNumber]; 에서는 HTML의 body를 참조하고 style.backgraoundColor속성을 사용해서 body의 배경색을 변경한다. colors[randomNumber]는 color배열에서 randomNumeber인덱스에 해당하는 색상을 가져온다. 이는 body의 배경색을 colors배열에서 무작위로 선택된 색상으로 설정된다는 뜻이다.

- color.textContent=colors[randomNumber];는 color클래스를 가지고 있는 HTML을 참조하여 textContent속성을  사용하여 이 요소의 텍스트 내용을 변경한다.  

 

4.무작위 숫자 생성함수 

function getRandomNumber() {
  return Math.floor(Math.random() * colors.length);
}

 

- 위에서 사용했던 getRandomNumber()함수에 대해서 알아보자 

- Math.random()함수를 사용하면 0이상 1미만의 부동 소수점 난수를 반환한다. 예를들어 0.4837이나 0.9342같은 값들이다. 이 값에 colors.length를 곱하면 colors.length의 값인 4를 곱해서 0이상 4미만의 부동 소수점 숫자가 된다. 

- Math.floor()함수는 주어진 숫자보다 크지 않은 가장 큰 정수를 반환하는 함수이므로 getRandomNumber()는 colors 배열의 길이 인덱스인 0,1,2,3중 하나를 반환하여 배열에서 무작위로 색상을 선택하는 데에 사용된다. 

ㄹㅇㄹ

 

짜잔! 그래서 적용하면 다음과 같은 화면이 완성 된다!! 

저 click me 버튼을 누르면 랜덤으로 color배열에 설정해 놓은 색으로 바뀌게 된다.

'개발 > javascript' 카테고리의 다른 글

[JS] Counter 만들기  (1) 2024.06.08
[JS]Color Flipper 만들기2  (2) 2024.06.07
[JS] 시작  (1) 2024.06.07
자료구조와 자료형  (0) 2024.04.14
객체 : 기본  (0) 2024.04.04

그 동안 개념적으로만 javascript를 공부하다보니 큰 지루함을 느끼게 되었다.

프로젝트를 진행하면서 공부하는게 더 맞다는 생각을 하였다. 

 

"백문이불여일타"라고 했던가 

백번듣는것보다 한번 쳐보는게 낫다

 

그래서 작은 규모의 프로젝트들을 진행해보면서 javascript에 대한 세부적인 내용들에 대해서 학습해 볼 생각이다. 

https://www.youtube.com/watch?v=3PHXvlpOkf4&t=421s

 

우연히 발견하게 된 해외 유튜브 js 강의인데 프로젝트들도 다양하고 설명도 잘해주시는 느낌이다. 

영어공부를 할 수 있는건 덤이다! 

 

하나의 프로젝트들을 진행할때마다 자세하게 학습하고 기록하며 실력을 높여볼 참이다. 

그럼 화이팅해봅시다.

'개발 > javascript' 카테고리의 다른 글

[JS]Color Flipper 만들기2  (2) 2024.06.07
[JS] Color Flipper만들기  (0) 2024.06.07
자료구조와 자료형  (0) 2024.04.14
객체 : 기본  (0) 2024.04.04
[javascript] new 연산자와 생성자 함수  (0) 2024.03.16

모던 Javascript 튜토리얼을 공부한 내용을 요약 정리하며 작성한 내용입니다

 

원시값의 메서드

- 자바스크립트는 원시값을 객체처럼 다룰 수 있게 한다. 

 

원시값을 객체처럼 사용하는 방법 

원시 값이 메서드나 프로퍼티에 접근하려 하면 추가기능을 제공해주는 특수한 객체인 원시래퍼 객체를 만들어준다. 

 

래퍼객체

원시 타입에 따라 종류가 다양하고 원시자료형의 이름을 그대로 사용한다. String, Number, Boolean, Symbol

 

String, Number, Boolean를 생성자로 쓰면 혼동을 불러일으킬 수 있기 때문에 쓰지 않는 것이 좋다. 

 

숫자형

숫자를 입력하는 다양한 방법 

 

- let billion = 100000000;

- let billion = 1e9;

 

- 1e3 === 1*1000

- 1.23e6 ===1.23 *1000000

 

- let ms = 0.000001;

- let ms =1e-6;

 

뭐 대충 이런식 

 

toString(base)

이 메서드를 사용하면 base진법으로 num을 표현한후 이를 문자형으로 변환해 변환한다. 

let num=255;

console.log(num.toString(16)); //ff

console.log(num.toString(2));  //11111111

 

어림수 구하기 

Math.floor

소수점 첫째자리에서 내림

Math.ceil

소수점 첫째자리에서 올림

Math.round

소수점 첫째자리에서 반올림

Math.trunc

소수부를 무시 

 

toFixed를 사용하면 Math.round와 유사하게 가장 가까운 값으로 올림 혹은 버림을 해준다 

let num =12.36;

console.log(num.toFixed(1)); // 12.4

 

부정확한 계산 

infinity : 숫자가 64비트 공간을 넘쳐서 표현되면 이는 infinity로 처리된다. 

정밀도 손실 : 0.1 + 0.2 ==0.3 //false 인상황, 이는 무한소수로 표현된 숫자일수도 있기 때문이다. 이를 해결할 방법은 toFixed를 사용하면 간편하게 해결이 가능하다. 

 

isNaN과 isFinite

Infinity 와 -Infinity: 그 어떤 숫자보다 혹은 큰 혹은 작은 특수 숫자 값 

NaN: 에러를 나타내는 값 

 

- isInfinite(value): 인수를 숫자로 변환하고 숫자가 일반숫자인 경우 true를 반환한다. 

 

ParseInt와 ParseFloat

+나 Number의 경우에는 피연산자가 숫자가 아니면 형 변환에 실패한다. 위 함수들은 불가능할 때 까지 문자열에서 숫자를 읽는다. 숫자를 읽는 도중 오류가 발생하면 이미 수집된 숫자를 반환한다. 

 

문자열

템플릿 리터럴 

큰따옴표와 작은따옴표는 기능상 차이가 없다. 백틱의 경우에는 이들과는 다른 차이점을 가지고 있다. ${...}로 감싸고 이를 백틱으로 감싼 문자열 중간에 넣어주면 해당 표현식을 문자열 중간에 삽입이 가능하다. 이러한 방식을 템플릿 리터럴 이라고 칭한다. 

function sun(a,b){
	return a+b;
}
alert (`1+2= ${sum(1,2)}.`;

 

또한 백틱을 사용하면 문자열을 여러줄에 걸쳐서 작성이 가능하다. 

 

태그드 템플릿 

첫번째 백틱앞에 함수 이름을 써주면 . 이함수는 백틱안의 문자열 조각이나 표현식 평가 결과를 인수로 받아 자동으로 호출하게 된다. 이런 기능을 태그드 템흘릿이라고 한다.

 

.length 

문자열의 길이는 length를 통해 알아 낼 수 있다. 종종 length()를 통해 문자열의 길이를 확인하려고 하는 경우가 있으나 이는 동작 되지 않는다. 그 이유는 length는 함수가 아니고, 숫자가 저장되는 프로퍼티이기 때문이다. 

 

특정 글자에 접근하기

- 대괄호 사용: str[pos]

- 메서드 호출: str.charAt(pos)

 

문자의 불변성 

문자열은 수정이 불가능하다. 

문자열을 수정하고 싶다면 완전히 새로운 문자열을 하나 만든 후에 이 문자열을 str에 할당하는 방법을 사용하면 된다. 

let str = "Hi";
str = 'h' + str[1];
alert(str);

 

부분 문자열 탐색 

1. str.indexOf(substr,pos)

str의 pos에서 시작해서 부분 문자열 substr이 어디에 위치하는지를 찾는 방법이다. 원하는 문자열을 찾으면 위치를 반환하고 아니면 -1을 반환한다. 

let str = 'Widget with id';
alert( str.indexOf("id") ); // 1
alert( str.indexOf('id', 2) ); // 12

 

includes, startsWith, endsWith 

str.includes(substr,pos) => str안에 substr이 있으면 true 아니면 false를 반환 

startswith는 특정 문자열로 시작하는지 

endswith는 특정 문자열로 끝나는지 확인 

 

부분문자열 추출 

- str.slice(start [,end])

- str.substring(start [,end])

- str.substr(start [, length])

 

문자열 비교 

- 소문자는 대문자보다 항상 크다 

- 발음 구별 기호가 뭍은 문자는 알파벳 순서 기준을 따르지 않는다. 

배열 

 

배열 선언 

1. let arr = new Array();

2. let arr = [ ] ; 

 

arr=['a','b','c']

arr[2]='d' //['a','b','d']

 

- length를 사용하면 배열의 요소의 개수를 알아낼 수 있다. 

- 배열의 요소에는 제약은 없다

 

pop/push shift/unshift

스택은 한쪽 끝에 요소를 더하거나 뺄수 있게 해주는 자료 구조 

pop: 스택 끝에 요소를 추출 

push: 요소를 스택 끝에 삽입 

shift: 배열의 앞요소를 제거하고 제거한 요소 반환 

unshift: 배열 앞에 요소를 추가 

 

배열의 내부 동작 원리 

배열의 대괄호를 사용해서 접근하는 방식은 객체 문법에서 왔다. 다만 배열은 키가 숫자라는 점이 다르다. 

배열은 순서가 있는 자료를 저장하는 용도로 만들어진 특수 자료구조이다. 배열 내장 메서드들은 이러한 용도에 맞게 만들어졌고 자바스크립트 엔진은 이런 특성을 고려하여 배열을 신중하게 조정하고, 처리하므로 배열을 사용할 땐 이런 목적에 맞게 사용해야 한다. 임의의 키를 사용해야한다면 일반 객체{ }가 더 적합한 자료구조일 것이다. 

 

성능 

push pop은 빠르지만 shift unshift는 느리다. 이러한 이유는 연산과정 shift는 앞의 뒤의 요소들의 위치를 모두 이동시키는 과정이 필요하기 때문이다. 

 

배열과 메서드  

요소 추가 제거 메서드

arr. push() : 맨 끝의 요소 추가 

arr. pop() : 맨 끝의 요소 제거 

arr. shift (): 맨 앞의 요소 제거

arr. unshift(): 맨 앞의 요소 추가 

 

splice 

arr.splice(index[,deleteCount, elem1, ... elemN])

deleteCount: 제거하고자 하는 요소의 개수 

elemN: 배열에 추가할 요소 

let arr = ["I", "study", "JavaScript"];

arr.splice(1, 1); // 인덱스 1부터 요소 한 개를 제거

alert( arr ); // ["I", "JavaScript"]

 

삭제하고 그 자리에 요소 대체 

let arr = ["I", "study", "JavaScript", "right", "now"];

// 처음(0) 세 개(3)의 요소를 지우고, 이 자리를 다른 요소로 대체합니다.
arr.splice(0, 3, "Let's", "dance");

alert( arr ) // now ["Let's", "dance", "right", "now"]

 

slice 

splice와 유사하지만 훨씬 간단하게 표현이 가능하다. 

arr.slice([start),[end])

start인덱스부터 end인덱스까지의 요소를 복사한 새로운 배열을 반환한다. 

 

concat

arr.concat(arg1, arg2 ...)

concat은 기존 배열의 요소를 사용해 새로운 배열을 만들거나 기존의 배열에 요소를 추가할 때 사용가능하다.

 

forEach

주어진 함수를 배열 요소 각각에 대해 실행할 수 있게 해준다. 

arr.forEach(function(item, index, array)){
	//요소에 추가할 무언가 
}

["Bilbo", "Gandalf", "Nazgul"].forEach((item, index, array) => {
  alert(`${item} is at index ${index} in ${array}`);
});

 

배열탐색 

배열내의 무언가를 찾고 싶을 때사용하는 매서드 

이건 아까 배열 파트에서 했으니깐 Pass ~ 

 

map

map은 배열 요소 전체를 대상으로 함수를 호출하고 함수 결과를 배열로 반환해준다. 

let result = arr.map(function(item, index, array){
	//요소 대신 새로운 값 반환
)};


let lengths = ["Bilbo", "Gandalf", "Nazgul"].map(item => item.length);
alert(lengths); // 5,7,6

 

sort 

sort는 배열의 요소를 정렬해준다.

 

'개발 > javascript' 카테고리의 다른 글

[JS] Color Flipper만들기  (0) 2024.06.07
[JS] 시작  (1) 2024.06.07
객체 : 기본  (0) 2024.04.04
[javascript] new 연산자와 생성자 함수  (0) 2024.03.16
[javascript]메서드와 this  (0) 2024.03.14

모던 Javascript 튜토리얼을 공부한 내용을 요약 정리하며 작성한 내용입니다

 

1. 객체

자바스크립트에는 8개의 자료형이 있는데 7개의 원시형과 객체로 구분됩니다.

객체는 {...}중괄호를 이용해 만들 수 있는데 이 안에 '키:값' 쌍으로 구성된 프로퍼티를 여러개를 넣을 수 있습니다. 키에는 문자형만 포함할 수 있고 값에는 모든 자료형이 허용됩니다. 

객체를 만드는 것에는 두가지 방법이 있는데 하나는 객체 생성자 방법이고 다른 하나는 객체 리터럴 방법이 있습니다.

let user = new Object() //객체 생성자 문법 
let user ={}; //객체 리터럴 문법

리터럴 방식의 경우에는  {...}안에 프로퍼티 형식으로 구성할 수 있습니다.

이러한 객체는 읽기와 추가, 삭제등을 할 수 있다. 

let user ={
	name: "John"
}
//읽기
console.log(user.name);//John
//추가
user.isAdmin=true;
//삭제 
delete user.age;

 

 

대괄호 표기법 

점표기법으로 작동되지 않는 띄어쓰기나 특수문자가 포함된 프로퍼티 키는 [...]를 통해 사용 가능합니다. 

 

단축 프로퍼티 

프로퍼티에서 값과 키가 같은 경우 이를 생략하여 설정할 수 있습니다. { name , age, }

 

프로퍼티 이름 제약 사항 

변수 이름으로는 for let return같은 예약어를 사용해서는 안되지만 객체에서는 상관없습니다. 

하지만 __proto__의 경우에는 특별하게 대우를 받게 됩니다. 

 

객체의 정렬 방식 

객체에서는 정수프로퍼티는 자동으로 정렬되고 그 외의 프로퍼티는 객체에 추가한 순서 그대로 정렬됩니다. 

 

2. 참조에 의한 객체 복사 

객체는 참조에 의해서 저장되고 복사 되는 점이 원시타입과의 근본적인 차이이다. 

 

객체의 동작 방식 

변수에는 객체가 그대로 저장되는 것이 아니라 객체가 저장되어 있는 메모리 주소인 객체에 대한 참조 값이 저장된다. 

객체는 메모리 어딘가에 저장되고 변수 user엔 객체를 참조할 수 있는 값이 저장된다. 

따라서 객체가 할당된 변수를 복사할 땐 객체의 참조 값이 복사되고 객체는 복사되지 않는다. 

let user = { name: "John" };

let admin = user; // 참조값을 복사함

 

 

 

 

이러한 이유에서 객체에 접근하거나 조작할 땐 여러 변수를 사용할 수 있다. 

참조에 의한 비교 

 

'개발 > javascript' 카테고리의 다른 글

[JS] 시작  (1) 2024.06.07
자료구조와 자료형  (0) 2024.04.14
[javascript] new 연산자와 생성자 함수  (0) 2024.03.16
[javascript]메서드와 this  (0) 2024.03.14
[javascript]가비지 컬랙션  (0) 2024.03.14

생성자 함수 

1. 함수 이름의 첫글자는 대문자로 시작합니다. 

2. 반드시 new연산자를 붙여 실행합니다. 

function User(name){
  this.name=name;
  this.isAdmin = false;
}

let user = new User("보라")
alert(user.name); //보라
alert(user.isAdmin);// false

내부적으로는 

1. 빈객체를 만들어서 this에 할당 

2. 함수 본문을 실행. this에 새로운 프로퍼티를 추가해 this를 수정 

3. this를 반환

하는 알고리즘이 실행됩니다. 

 

'개발 > javascript' 카테고리의 다른 글

자료구조와 자료형  (0) 2024.04.14
객체 : 기본  (0) 2024.04.04
[javascript]메서드와 this  (0) 2024.03.14
[javascript]가비지 컬랙션  (0) 2024.03.14
[javascript]async & await  (0) 2023.07.26

매서드 만들기 

let user ={
  name:"John",
  age: 30,
};

user.sayhi=function(){
  alert("안녕하세요!")
}

user.sayHi();

함수를 만들어서 sayhi에 할당을 하여 user.sayhi를 사용하게 되면 인사를 하게됩니다. 

이러한 객체 프로퍼티에 할당된 함수를 method라고 합니다. 

 

user = {
  sayHi: function() {
    alert("Hello");
  }
};


user = {
  sayHi() { 
    alert("Hello");
  }
};

이렇게도 표현이 가능합니다. 

메서드와 this 

메서드 내부에서 this키워드를 통해서 객체에 접근할 수 있습니다. 

let user ={
  name: "John",
  age: 30,
  sayHi(){
  	alert(this.name); 
  }
};
user.sayHi();

여기서 this는 현재 객체를 나타냅니다. 

this를 사용하지 않고 user를 이용해서 접근하는 것도 가능합니다. 

let user = {
  name: "John",
  age: 30,

  sayHi() {
    alert( user.name ); 
  }

};


let admin = user;
user = null; 

admin.sayHi();

하지만 위 코드 처럼 외부 변수를 사용할 경우 에러가 발생할 수 있습니다. 

 

자유로운 This 

자바스크립트의 this는 다른 언어의 것들과는 다릅니다. 

function sayHi() {
  alert( this.name );
}

이 처럼 코드를 작성해도 에러가 발생하지 않습니다. 

this 값은 런타임에 결정되고 컨텍스트에 따라 달라지게 됩니다. 

동일한 함수라도 다른 객체에서 호출되었다면 this가 참조하는 값이 달라집니다. 

 

객체 없이 호출하기 : this == undefined 

객체가 없는 경우에는 this는 undefined를 참조하게 됩니다. 

 

'개발 > javascript' 카테고리의 다른 글

객체 : 기본  (0) 2024.04.04
[javascript] new 연산자와 생성자 함수  (0) 2024.03.16
[javascript]가비지 컬랙션  (0) 2024.03.14
[javascript]async & await  (0) 2023.07.26
[javascript]Promise & 콜백지옥  (0) 2023.07.25

자바스크립트는 눈에 보이지 않는 곳에서 메모리 관리를 수행합니다. 

가비지 컬랙션 기준 

reachable: 어떻게든 접근하거나 사용할 수 있는 값을 의미합니다. 이는 메모리에서 삭제되지 않습니다. 

- 현재 함수의 지역 변수와 매개변수 

- 중첩 함수의 체인에 있는 함수에서 사용되는 변수와 매개변수 

- 전역변수 

- 기타 등등 

 

이러한 값들은 태생부터 도달 가능하기 때문에 명백한 이유없이는 삭제되지 않습니다.

이러한 값들을 루트라고 불립니다. 

 

예시 

let user = {

  name: "John"

};

 

user =null;

이렇게 될 경우 John은 도달할 수 없는 상태가 되었고 가비지 컬렉터는 John에 저장된 데이터를 삭제하고 메모리에서도 삭제하게 됩니다. 

 

참조 두개 

참조가 두개인 경우 ,

let user = {

  name : "John"

};

 

let admin =user;

 

user = null;

 

이러한 경우 John은 admin을 통해서 접근할 수 있기 때문에 여전히 도달가능한 값입니다. admin에게 다른 값으로 덮어쓰면 John은 메모리에서 삭제 될수도 있습니다. 

연결된 객체 

function marry(man, woman) {
  woman.husband = man;
  man.wife = woman;

  return {
    father: man,
    mother: woman
  }
}

let family = marry({
  name: "John"
}, {
  name: "Ann"
});

이 경우에는 모든 객체가 연결되어 있어 도달 가능한 상태 입니다. 

여기서 

delete family.father;

delete family.mother.husband;

를 통해 참조 두개를 지웁니다. 

 

이렇게 되면 John에 도달하게 되는 참조들이 사라지게 되므로 도달 가능한 상태에서 벗어나게 됩니다. 

외부로 나가는 참조는 도달 가능한 상태에 영향을 주지 않습니다. 그러므로 John에 저장된 데이터는 메모리에서 사라지게 됩니다. 

 

도달할 수 없는 섬

만약 이전의 예시에서 근원객체인 family에 null을 하게 되면

John과 Ann은 여전히 서로를 참조하고 있고 외부에서 들어오는 객체를 참조하고 있지만 family와의 연결이 사라지면 루트 객체를 참조하는 것이 사라지게 되므로 전체가 도달 할 수 없는 상태가 되고 이것들은 전부 메모리에서 사라지게 됩니다. 

 

이것이 도달할 수 없는 섬입니다. 

 

가비지 컬렉션 관련 알고리즘: mark and sweep algorithm

최적화 기법 

- incremental collection 

- idle-time collection 

'개발 > javascript' 카테고리의 다른 글

[javascript] new 연산자와 생성자 함수  (0) 2024.03.16
[javascript]메서드와 this  (0) 2024.03.14
[javascript]async & await  (0) 2023.07.26
[javascript]Promise & 콜백지옥  (0) 2023.07.25
[javascript]동기&비동기  (0) 2023.07.24

async

: promise를 더 쉽게 해주는 기능 

 

async는 옵션을 붙이듯이 붙여서 promise를 반환 

//async
function hello(){
  return "hello";
}

async function helloAsync(){
  return "hello Async";
}

helloAsync().then((res)=>{
  console.log(res);
})

await을 사용하면 그 부분만 동기적으로 사용 할 수 있다.

//async
function delay(ms){
  return new Promise((resolve)=>{
    setTimeout(resolve,ms);
  })
}

async function helloAsync(){
  await delay(3000);
  return "hellp async";
}

async function main(){
  const res =await helloAsync()
  console.log(res);
}

main();

 

'개발 > javascript' 카테고리의 다른 글

[javascript]메서드와 this  (0) 2024.03.14
[javascript]가비지 컬랙션  (0) 2024.03.14
[javascript]Promise & 콜백지옥  (0) 2023.07.25
[javascript]동기&비동기  (0) 2023.07.24
[javascript]응용  (0) 2023.07.23

+ Recent posts

티스토리툴바