[TIL] Javascript 톺아보기 1

오늘 공부한것 & 기억하고 싶은 내용

Javascript

• Javascript는 객체 지향적이며 비동기 프로그래밍을 지원한다.
• 동적 타입 언어로서 클라이언트 및 서버 사이드에 사용된다.

Attribute 와 Property 차이

Attribute

• HTML 요소의 특성의 정의
• 속성은 문자열로 저장되며, 대소문자를 구분하지 않는다.

Property

• Javascript 객체의 속성, 객체의 상태나 동작을 정의
• 속성은 다양한 데이터 유형(문자, 숫자, 함수 등) 가질 수 있다.

//Attribute type과 value가 속성
input type="text" value="name"

//Property value는 input의 속성
document.querySelector('input').value

콜백함수

• 다른 함수에 인자로 전달되어 특정 시점에 호출되는 함수
• 비동기 프로그래밍 및 이벤트 발생 시 특정 동작을 수행하기 위해 사용

콜백 지옥은 Promise, async/await, 함수분리, 모듈화 및 라이브러리 같은 방법을 통해 해결 할 수 있다.

Promise

• 비동기 작업의 결과를 다루기 위한 객체
• 코드를 더 효율적이고 가독성 있게 만든다.
• then(), catch(), finally() 메소드를 사용

.then(res => {
	console.log(res) //작업성공
})
.catch(err => {
	console.error(err)
})

async/await

• 비동기 작업을 더욱 간편하게 작성할 수 있게 도와주는 문법
• Promise기반으로 코드의 가독성을 향상
• async를 함수 앞에 붙이면 그 함수는 항상 Promise를 반환, await는 async 함수 내에서만 사용이 가능하며 Promise가 이행될때까지 다른 코드 실행이 일시 중단된다.
• try, catch를 사용하여 에러 처리 한다.

async function getData(){
	try{
    	const response = await fetch('https://');
      if(!response.ok){
      	throw new Error('Network response was not ok'); //정해놓은 규칙을 어긋날경우 에러처리 throw
      }
      const data = await response.json();
      console.log(data);
    }catch(error){
    	console.log('오류',error);
    }
}

Promise는 간단한 비동기 작업이나 여러 작업을 병렬로 처리할때 유용
async/await는 복잡한 비동기 작업을 동기적으로 작성하고 싶을때, 가독성을 높이고 에러 처리를 쉽게 하기 위해 주로 사용

AJAX

• 서버와 비동기적으로 데이터를 주고 받을때 사용

TDZ

• 변수가 선언되기 전의 범위, 이 범위 내에서 해당 변수를 참조할 수 없다.
• let과 const는 호이스팅이 발생하지만 TDZ덕분에 선언되기 전에는 접근 할 수 없다.

{
	console.log(x); //ReferenceError
  	let x = 5;
}

호이스팅이란 변수와 함수의 선언이 최상위로 끌어올려지는 현상, 함수 선언은 호이스팅이 이루어 지지만 변수 호이스팅은 TDZ로 인해 ReferenceError오류가 나타난다. (var의 경우에는 undefined)

함수 선언형 / 함수 표현식

• 함수선언형은 function키워드를 사용하여 함수를 선언, 코드가 실행되기전에 호이스팅이 된다.(함수 정의 전 호출 가능)
• 함수표현식은 함수를 변수에 할당하는 방식, 함수는 익명함수일 수 있고 이름이 있을 수 있다. 함수 표현식은 호이스팅이 되지 않으므로 함수가 정의 된 이후에 호출 가능

function 함수선언(){
	console.log('Hello');
}

const 함수표현 = function(){
	console.log('Hello');
}

// 익명함수 callback으로 사용
setTimeout(function(){
	console.log('Hello');
},1000)
//익명함수 즉시 실행
(function(){
	console.log('즉시 실행');
})();

익명함수는 이름이 없는 함수. 다른 함수에 인수로 전달하거나 즉시 실행하는데 사용
주로 callback으로 사용되거나 특정 작업을 수행하기 위해 즉시 실행

배운점 & 느낀점

평소 헷갈렸던 속성에 대한 정의나 Promise개념에 대해 다시한번 복습을 하게 되어 이제는 더이상 헷갈리지 않을거 같고 async/awiat를 스터디 하면서 써봐야겠다.