자바스크립트 문법정리 4 [rest, spread]
2022. 5. 22. 02:16
자바스크립트
이 두가지 문법은 구조분해할당할때 많이사용합니다. 구조분해할당이란? 갇혀있는녀석들을 풀어줘서 사용하게끔 다시 할당하는것! 1.rest "객체에서 괄호벗기는녀석" function 함수2(...파라미터들){ console.log(파라미터들) } 함수2(1,2,3,4,5,6,7); 위 코드를 실행해보면 파라미터들이라는 변수를 출력해줍니다. 파라미터들이라는 변수는 모든 파라미터를 [] array 안에 담고 있습니다. 이게 바로 ES6 환경에서 쓸 수 있는 rest 파라미터입니다. 원하는 파라미터 왼쪽에 ... 기호를 붙여주시면 "이 자리에 오는 모든 파라미터를 [] 중괄호로 감싸준 파라미터" 라는 뜻입니다. 그래서 출력해보면 저렇게 [1,2,3,4,5,6,7]이 나오는 것이고요. 그 자리에 입력한 모든 파라미터..
자바스크립트 문법정리 3 [변수 ,Reference Data Type ]
2022. 5. 22. 02:03
자바스크립트
자바스크립트는 총 세개의 변수가있는데 그차이를 살펴보도록합시다. 변수선언방식 var 이름;//재선언 o 재할당 o 범위 function let 나이;//재선언 x 재할당 o 범위 { } const 성별= 0;//재선언 x 재할당 x 범위 { } 1.재선언 var 이름 = 1; console.log(이름) //1 var 이름 = 2 console.log(이름)//2 var같은 애들은 다시선언해줘도 따로도는 속성을 가지고있습니다. 변수이름이 같아서 헷깔리는 문제가 많이생기겠죠 그래서 나온게 let ,const 입니다 애네들은 재선언x 2.재할당 var 변수 = 1; 변수 =2; console.log(변수);//2 let 변수2 = 3; 변수2 = 5; console.log(변수2)//5 const 변수3 =..
자바스크립트 문법정리 2 [template-literals]
2022. 5. 22. 01:51
자바스크립트
1. 문자 중간 엔터키 입력이 가능합니다 자바스크립트 문자열은 문자 중간에 엔터키치시면 안됩니다. 하지만 백틱으로 문자를 만드시면 엔터키가 자유롭게 가능합니다. var 문자 = `안녕 하세요`; 2. 문자 중간에 변수를 집어넣을 때 편리합니다. 자바스크립트 문자열은 문자 중간에 변수를 넣고 싶은 경우 문자를 쪼개서 + 기호로 넣어야합니다. 하지만 백틱으로 문자를 만드시면 문자 중간에 ${변수명} 이렇게 쉽게 넣을 수 있습니다. var 이름 = '손흥민'; var 문자 = `안녕하세요 ${이름} 입니다`; 그래서 자바스크립트를 문자로 HTML을 작성하실 때도 유용합니다. var 문자 = ` ${변수명} `; HTML 템플릿 같은걸 보기쉽게 만들 수 있음! Tagged Literals ES6는 tagge..
자바스크립트 기본 총정리[진짜기본]
2022. 5. 20. 00:34
자바스크립트
js왜씀 html 변경할려고요 document.getElementById('idValue') document.getElementById('buttonIdValue').addEventListener('click').function(){ } 자료잠깐 저장하고싶으면 변수만들어서 쓰세요 다알죠? 알아요 코드 긴거 짧게 축약하고싶으면 함수만드세요 이것도알죠? 함수 다양하게 쓰려면 파라미터로 업그레이드 머릿속에 있는거 그거에요 객체는 이름을 넣어야됍니다. let 이름={이름: '킴', 나이 : 20}; 이름.나이; => 20 [1,2,3,4,5].forEach()(함수(파라미터)){ 배열에 있는 코드가 반복이댑니다 파라미터는 1도되고 2도되고 3도됍니다 느낌아시겠죠 }
addEventListener와 toggle
2022. 4. 3. 23:41
자바스크립트
const title =documet.querySelector("#hello") const title = documnet.getElementById("hello") 쿼리셀렉터와 겟으로 id가 hello인녀석을 가져오는방법 버튼을 눌렀을때 색깔이 바뀌게 하고싶은 기능을 추가하고 싶다. 여러가지 방법이 있고 이코드를 아주 짧게 줄일수 있는 기능인 toggle에 대해서 알아보자 function handleTitleClick(){ const currntColor = h1.style.color; let newColor; if (currentColor ==="blue"){ newColor = "tomato"; } else { newColor = "blue" } title.addEventListener("click"..
동기,비동기(async),event loop의 이해# java script
2022. 3. 26. 01:06
자바스크립트
1.동기와 비동기 만약 작업을 동기적으로 처리한다면 작업이 끝날 때까지 기다리는 동안 중지 상태가 되기 때문에 다른 작업을 할 수 없습니다. 그리고 작업이 끝나야 비로소 그 다음 예정된 작업을 할 수 있죠. 하지만 이를 비동기적으로 처리를 한다면 흐름이 멈추지 않기 때문에 동시에 여러 가지 작업을 처리할 수도 있고, 기다리는 과정에서 다른 함수도 호출할 수 있습니다. 동기(Synchronized)란 위에서 아래로 순차적으로 코드를써놓은 순서대로 화면에 표시되는것을 말한다. 좀더 자세하게말하면 맨처음 코드가 실행되기전까진 그아래함수가 실행되지않는다. 콘솔창에 function firstFunction() {console.log(2)} function firstFunction() {console.log(4)}..