본문 바로가기

JavaScript38

[JavaScript] Chapter 28. Array forEach forEach는 for문과 마찬가지로 반복적인 기능을 수행할 때 사용한다. 하지만 for문처럼 index와 조건식, increase를 정의하지 않아도 callback 함수를 통해 기능을 수행할 수 있다. [].forEach(callback, thisArg) const arr = [0,1,2,3,4,5,6,7,8,9,10]; arr.forEach(function(element){ console.log(element); // 0 1 2 3 4 5 6 7 8 9 10 }); // 혹은 arrow 함수 가능 arr.forEach(element => console.log(element)); arr 객체의 요소들이 callback 함수에 순서대로 호출되는 모습을 볼 수 있다. for문에 비해 좀 더 깔끔하고, 직관.. 2023. 1. 10.
[JavaScript] Chapter 27. {...} [...] 문법 (비구조화 할당/구조분해 할당) 자바스크립트의 문법에 대한 글을 검색하면 대부분 let, const 혹은 화살 함수(arrow function)에 대한 이야기가 주를 이룬다. 이번 시간에는 흔히 알려지지 않았지만 유용한 비구조화 할당 문법을 본다. 정의 모질라 문서에 의하면 '비구조화 할당(destructuring assignment) 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식(expression)' 이다. 간단하게 정리하면 배열 [], 혹은 객체 {} 안의 값을 편하게 꺼내 쓸 수 있는 문법이다. 기본 문법(배열) 배열에서의 적용은 아래와 같다 [a1, a2, ...rest_a] = [1, 2, 3, 4, 5, 6, 7, 8, 9]; console.log(a1); // 1 co.. 2023. 1. 10.
[JavaScript] Chapter 26. 변수란_2 - var, let, const의 차이 var, let, const의 차이 앞에서 발견한 var 키워드의 문제점은 크게 세 가지가 존재한다. 변수 중복 선언 가능하여, 예기치 못한 값을 반환할 수 있다. 함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 모두 전역 변수로 된다. 변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환한다. ES6에서 나온 let과 const 키워드는 위의 세 가지 문제점을 해결했다. 1. 변수 중복 선언 불가 (1) let let 키워드로는 변수 중복 선언이 불가하지만, 재할당은 가능하다. let name = 'kmj' console.log(name) // output: kmj let name = 'howdy' // output: Uncaught SyntaxError: Identifier 'na.. 2023. 1. 9.
[JavaScript] Chapter 25. 변수란_1 - 변수 선언 및 할당, 호이스팅, 스코프 자바스크립트에서 var로 변수 선언이 가능했는데, 왜 const와 let이 나왔으며 이 둘의 사용을 권장할까? 이를 정확하게 알기 위해서는, 변수의 선언 및 할당 과정, 호이스팅, 스코프를 알아야한다. 변수 먼저 자바스크립트에서 변수가 무엇인지 알아보자. 변수(variable)는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다. const myNumber = 23 // 변수명(식별자): myNumber // 해당 값의 위치(메모리 주소): 0012CCGWH80 // 변수 값(저장된 값): 23 자바스크립트는 매니지드 언어(managed language)이기 때문에 개발자가 직접 메모리를 제어하지 못한다. 따라서 개발자가 직접 메모리 주소를 통해.. 2023. 1. 9.
[JavaScript] Chapter 24. 예외처리 예외처리 exception Handling 오류 발생 시, 코드 실행 흐름 복구기능 지님 try ~ catch ~ finally 사용 구문 오류 Synatax Error 문법 오류 try ~ catch ~ finally 오류 발생 시, 중단되지 않고 지속됨 예외 처리 시에 필요한 구문 try { // 로직 } catch(e) { // 에러 발생 시, 로직 } finally { // 마지막 } try 에러 발생 시, 원상복구 시도하는 곳 catch 에러 발생 시, 코드 실행 흐름이 try에서 catch로 감 에러 정보 담고있음 (e) finally 무조건 실행되는 코드 try 종료되면 실행 try ~ finally 에러 발생하지 않은 경우 사용 try ~ catch ~ finally 에러 발생한 경우 사용.. 2022. 12. 19.
[JavaScript] Chapter 23. 모듈 모듈 하나의 파일 클래스 또는 함수들로 구성 스크립트 한 개 모듈의 필요성 개발 규모가 커지면서 모듈 시스템으로 구성 모듈 종류 AMD CommonJS UMD ES6 모듈 사용방법 export (내보내기) 변수나 함수 앞에 사용 // [exportTest.js] export function exportTest(test) { alert('{test}'); } import (가져오기) 경로 지정 하지 않으면 오류 발생 // [import.js] import {exportTest} from "./exportTest.js"; exportTest("John"); 모듈 특징 엄격 모드 (use strict) 로 실행 모듈 레벨 스코프 범위 동일한 모듈 여러 번 사용해도 한 번만 실행 *엄격 모드 일반적인 JS에서 .. 2022. 12. 19.
[JavaScript] Chapter 22. 이벤트 동작원리 이벤트 루프 싱글 스레드 기반 언어 한 번에 한 개만 작업 진행 이벤트 루프 동작 방식 Javascript Engine Heap과 Call Stack으로 구성 Heap 메모리 할당이 일어나는 공간 변수, 함수 선언 시 메모리 할당 일어남 Call Stack 코드 실행 시 쌓임 LIFO (Last In First Out) WebAPIs 브라우저에서 제공하는 API DOM, Ajax, 타이머 함수 등 Callback 함수를 Callback Queue에 넣음 Callback Queue 비동기적으로 실행된 콜백 함수 있음 ex) Ajax나 타이머 함수 실행 완료 후, 실행할 콜백함수가 보관 FIFO (First In First Out) Event Loof 이벤트 루프 틱(tick. 반복적인) 동작을 함 정리 :.. 2022. 12. 19.
[JavaScript] Chapter 21. 이벤트 다루기 이벤트 전파 이벤트 발생 시, 다른 곳으로 전파시킴 클릭 결과 : btn -> spanArea -> divArea 순으로 alert 이벤트가 실행된다. 이벤트 전파 중단 이벤트 발생 시, 다른 곳으로 전파를 중단시킴 stopPropagation 이벤트 전파를 막는 함수 크롬, 사파리, 파이어폭스 cancelBubble 이벤트 전파를 막는 함수 IE8 속성 true 클릭 preventDefault 이벤트 동작 중단 함수 링크클릭 결과 : btn -> spanArea -> divArea 순으로 alert 이벤트는 실행되지만, 네이버창으로 연결되는 이벤트는 발생하지 않는다. 이벤트 전파 이벤트 발생 시, 다른 곳으로 전파시킴 캡처링 (위 -> 아래) 버블링 (아래 -> 위. default) 이벤트 캡처링 이벤.. 2022. 12. 19.
[JavaScript] Chapter 20. 이벤트 이벤트 (Event) 시스템에서 일어나는 사건 마우스 이벤트 (mouse event) 설명 click, doubleclick 클릭 / 더블클릭 mousedown 마우스 누를 때 mouseup 눌렀던 마우스 땠을 때 mouseover 요소 위로 마우스 올렸을 때 mouseout 요소 밖으로 마우스 움직였을 때 포커스 이벤트 (focus event) 설명 focus 포커스 얻음 blur 포커스 잃음 기타 이벤트 (etc event) 설명 submit 폼 전송 resize 사이즈 조절 select 텍스트 선택 scroll 스크롤 기능 change 폼 변경 이벤트 핸들러 이벤트를 다룸 이벤트 발생 시, 실행되는 코드 이벤트를 JS에서 인식하여 사용하게 함 = 이벤트 리스너 이벤트 핸들러 표기법 on + 이벤트명.. 2022. 12. 17.
[JavaScript] Chapter 19. 클로저 클로저 (Closure) 함수와 함수가 선언된 어휘적 환경(렉시컬 환경)의 조합 => 내부함수가 외부함수 변수에 접근 가능 렉시컬 스코프 이해 function init() { // name은 init에 의해 생성된 지역 변수 var name = "Mozilla"; // displayName()은 내부 함수이며, 클로저 function displayName() { // 부모 함수에서 선언된 변수를 사용 alert(name); } displayName(); } init(); 은닉화 Information Hiding 외부로부터 데이터를 감추는 것 private로 감춤 내부적으로 사용해야하는 경우 감춤 // ex) IIFE (즉시 실행 함수) (function() { var str = "테스트"; })(); c.. 2022. 12. 17.