공부기록/JavaScript

자바스크립트 스코프 개념을 정확히 알아야하는 이유는 현재 사용되는 변수가 어디에서 선언된 변수인지 정확히 알 수 있기 때문이다. 스코프는 식별자의 유효범위를 말한다. 여기서 식별자에는 변수, 함수, 매개변수 등이 있다. 스코프는 연결리스트 형태로 함수 객체 안에서 [[Scope]] 프로퍼티에 저장된다. 이렇게 관리되는 것을 스코프 체인이라고 한다. 함수가 실행되면 새로운 실행 컨텍스트가 만들어지는데 이 실행 컨텍스트는 자신이 사용할 스코프 체인을 이렇게 만든다. 현재 실행되고 있는 함수 객체의 [[Scope]] 프로퍼티를 복사 새롭게 생성된 변수 객체를 해당 체인의 제일 앞에 추가 예시 코드를 보자. const a = 1; const outer = function () { const b = 2; cons..

프로토타입의 정의 자바스크립트는 프로토타입 기반 언어이다. 프로토타입 객체를 통해 객체의 메서드와 속성들을 상속한다. 자바스크립트에서는 객체를 생성할 때 자신의 부모 객체와 연결되는 링크를 가지게 된다. 프로토타입의 이해 프로토타입을 알아보기 위해 간단한 Person 생성자를 만들어보겠습니다. function Person(name, age) { this.name = name; this.age = age; this.sayHi = function () { console.log("HI"); }; } console.dir(Person); // 1 const person1 = new Person("heeji", 100); console.dir(person1); // 2 1의 결과 2의 결과 생성된 person1 ..

클로저의 정의 주변 상태(어휘적 환경)에 대한 참조와 함께 묶인(포함된) 함수의 조합 - mdn 생성된 당시의 스코프체인을 기억하는 함수 함수가 선언될 때의 렉시컬 환경을 기억하는 함수 클로저의 이해 function makeFunc() { const name = "Mozilla"; function displayName() { console.log(name); } return displayName; } const myFunc = makeFunc(); myFunc(); 함수만 봐서는 리턴된 displayName에서는 name이라는게 없기 때문에 에러가 날 것 같이 생겼다. 하지만 클로저가 형성되어 name 변수에 대한 데이터를 가지고 있기 때문에 에러가 나지 않는다. name이 있는 어휘적 환경에 대한 참조..

일급객체 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 보통 함수에 인자로 넘기기, 수정하기, 변수에 대입하기와 같은 연산을 지원할 때 일급 객체라고 한다. 일반적으로 적용 가능한 연산이라고 하면 다음과 같은 것들이 있다. 변수에 할당될 수 있다. 다른 함수의 인자로 전달될 수 있다. 함수에서 반환될 수 있다. 일급함수 함수를 일급 객체로 취급하는 것을 말한다. 즉, 함수들이 다른 변수처럼 다루어질 때 일급 함수를 가진다고 한다. 1. 변수에 값으로서 함수를 할당할 수 있다. const foo = () => { console.log("bar"); }; foo(); 예제를 보면 변수 foo에 함수를 할당한 다음 함수를 호출할 때 해당 변수를 사용하는 것을 볼 수 있다. 2. ..

자바스크립트는 싱글 스레드 언어이기 때문에 한 번에 하나의 작업만 수행할 수 있습니다. 그럼에도 동시에 여러 작업이 실행되는 것처럼 보이는 것은 비동기 방식을 사용하고 있기 때문입니다. 이런 비동기 처리는 이벤트 루프로 이루어집니다. 동시성? 동시성은 여러 작업이 겹쳐서 실행되는 것처럼 보이게 만드는 방식입니다. 병렬성은 실제로 여러 작업이 동시에 실행되는 것을 의미합니다. 자바스크립트 이벤트 루프는 동시성 방식입니다. 이벤트 루프 이벤트 루프는 Call Stack, Macro Task Queue (Task Queue), Micro Task Queue, render queue로 이루어져 있습니다. Call Stack 함수가 실행되어 실행 컨텍스트가 생성되고 콜스택에 쌓입니다. Macro Task Queu..

싱글스레드. 자바스크립트는 싱글 스레드 언어입니다. 스레드는 뭘까요? 스레드는 프로세스 내에서 실행되는 가장 작은 실행 단위를 말합니다. 💡 프로세스란? 프로그램이 메모리에 로드되어 CPU의 실행시간을 받은 것을 의미합니다. 싱글 스레드 방식은 스레드가 한 개란 뜻으로, 한 번에 하나의 작업만 수행할 수 있다는 특징을 가지고 있습니다. 그래서 하나의 작업이 오래 걸리면 다음 작업이 오래 대기하게 되어 전체 실행 시간이 길어지는 문제가 있습니다. 아래 예시에서 볼 수 있듯이 중간에 정말 많은 연산을 진행하는 코드가 존재한다면 end가 콘솔에 찍히기까지 시간이 오래걸릴 것입니다. console.log("start"); for (let i = 0; i < 10000000000000; i++) { // 많은 연..

엘리스 AI트랙 2기 수업 정리 Event란? - HTML 요소에 대한 사건의 발생 (ex. 마우스의 움직임 등) 이벤트 타입 - 폼, 키보드, 마우스, HTML DOM 등 //마우스 클릭 이벤트 click! 이벤트 핸들러 - 이벤트가 발생했을 때 그 처리를 담당한다. - 지정된 이벤트가 발생하면, 웹 브라우저는 해당 요소에 등록된 이벤트 핸들러를 실행시킨다. let btn = document.getElementById("foo"); //버튼 function showText(){ document.getElementById("text").innerHTML = "메롱"; } // 매개변수에 이벤트이름, 이벤트 발생시 실행되는 함수 // btn에 click이라는 이벤트가 추가됨 btn.addEventListe..

엘리스 AI트랙 2기 수업 내용 정리 DOM이란? - Document Object Model - 객체 지향 모델로 구조화된 문서를 표현하는 방식을 말한다. DOM의 트리 구조 HTML의 부모자식 관계를 나타낸 것 Document Method HTML 요소를 선택하기 위한 메소드 document.getElementById() //해당 아이디의 요소 선택 document.getElementByClassName() //해당 클래스에 속한 요소 선택 document.getElementByName() //해당 name을 갖는 요소 선택 document.querySelectorAll() //해당 선택자로 선택되는 요소를 모두 선택 document.querySelector() //해당 선택자로 선택되는 요소를 1개만..

자바스크립트란? 동적인 웹사이트 제작 시 사용하는 프로그래밍 언어 IoT, 하이브리드 앱 (웹 + 모바일 앱), 서버 개발 등 다양한 곳에 활용된다. 변수 숫자로 시작하면 안된다. 최대한 자세한 변수명을 작성해야 한다. 의미가 불명확한 단어의 조합을 피해야 한다. 기본 문법 : 줄 바꿈이 있다면 세미콜론을 생략할 수 있다. (automatic semicolon insertion) var fruit; //변수 선언 fruit = "apple" //변수 초기화 var fruit = "apple"; //이렇게 합칠 수 있음 console.log(fruit); //변수 안 데이터를 콘솔에 출력 document.write(fruit); //웹페이지에 데이터를 출력 HTML과 연동하기 위해서는 아래와 같은 코드를 ..