본문 바로가기

JS30

구조 분해 할당 목차1. 구조 분해 할당이란?2. 사용법1. 구조 분해 할당이란?객체의 속성을 분해하여 변수에 담는 표현식객테의 데이터 전부가 아닌 일부만 필요로할 때 사용된다. 2. 사용문법1) 배열분해배열 분해는 각각의 요소를 담을 변수가 필요한데 대괄호([])안에 각 요소를 담을 변수의 이름을 지정해준다. 변수의 위치에 따라 요소 첫번째부터 순서대로 데이터가 할당되며 배열의 갯수가 요소의 갯수보다 남은 요소는 할당되지 않고 변수가 더 많으면 남은 변수에는 undefined로 초기화된다.  변수예약어 배열명 = [요소1,요소2,요소3];변수예약어 [아이템1,아이템2,아이템] = 배열명;ex)const numberList = [1,2,3,4,5];const [num1,num2,num3] = numerList;/* .. 2024. 4. 28.
HTML요소를 동적으로 다룬다고? DOM 목차1. DOM이란?2. 요소를 다루는 방법3. 동적으로 요소를 사용하는 이유 1. DOM이란?인터넷을 통해 여러 사이트를 들어가보면 해당 사이트에 따라 여러 이벤트나 공지사항이 슬라이드로 움직이거나 선택되는 메뉴에 따라 다른 서브 메뉴가 나타난다. 이러한 신기한 동작들을 어떻게 하는 것일까? js를 사용하면 이러한 요소들을 동적으로 움직이게 할 수 있는데 이렇게 브라우저에 움직이거나 움직일 수 있는 요소들을  DOM(Document Object Model)이라고 하며 움직이게 하는 행위를 DOM 조작이라고 한다. 2. 요소를 다루는 방법js에서 DOM을 다루는 방법은 여러가지가 있다. 이제 방법을 알아보도록 하자1) 요소(태그) 생성하기document객체를 통해 새로운 요소를 생성할 수 있다.docum.. 2024. 4. 27.
원시타입vs참조타입 목차1. 원시타입2. 참조타입 자바 스크립트에서는 데이터를 다룬다. 데이터의 유형들이 많은데 어떤 타입들이 있는지 알아보자. 1. 원시타입값을 참조하는 데이터 타입으로 데이터가 할당된 변수를 통해 다른 변수에 값을 복사할 때 새로운 메모리 공간에 값을 할당받는다.string연속된 문자들을 나열한 문자열 데이터number제한범위가 존재하는 숫자형 데이터gibint제한범위가 큰 숫자형 데이터boolean참(true)과 거짓(false)을 나타내는 데이터, 비교와 논리연산의 결과로도 사용undefined데이터가 할당되지 않았을 때 자동적으로 할당 데이터가 없다는 것을 표시하는 타입nullundefined와 유사하지만 의도적으로 할당 데이터가 없다는 것을 표시하는 타입 2.참조타입데이터를 담는 데이터의 주소를 .. 2024. 4. 26.
동적언어를 정적으로 사용하기! 타입스크립트 목차1. 타입스크립트2. 문법3. 파일변환1. 타입스크립트자바스크립트에서 타입검사가 추가된 언어기존의 자바 스크립트의 경우에는 동적인 언어로 변수에 할당하는 데이터가 어떤 타입이든 상관이 없었다. 하지만 이는 여러 문제를 야기할 수 있어 변수에 정적인 타입을 지정하여 실행하기 전 타입 검사를 통해 동적 언어에서 발생할 수 있는 문제를 해결할 수 있었다.2. 문법문법 자체는 자바 스크립트와 크게 다르지 않다. 다만 변수나 함수명 뒤에 데이터나 함수의 반환 데이터에 대한 타입을 지정하여야 한다.//변수변수예약어 변수명 : 타입 = 값;ex) let num : number= 10;//함수함수예약어 함수명(매개변수1:타입,매개변수2:타입):반환타입{ //실행할 코드}function fn(num1:numbe.. 2024. 4. 25.

티스토리툴바