모카의 촉촉한 개발 로그

Closure 란? 다른 함수 내부에 정의된 함수(innerFunction)가 있는 경우 외부 함수(outerFunction)가 실행을 완료하고 해당 변수가 해당 함수 외부에서 더 이상 액세스할 수 없는 경우에도 해당 내부 함수는 외부 함수의 변수 및 범위에 액세스할 수 있다. function outerFunction(outerVariable) { return function innerFunction(innerVariable) { console.log('Outer function: ' + outerVariable); console.log('Inner function: ' + innerVariable); } } const newFunction = outerFunction('outside'); console..

프로토타입[Prototype] let user = { name: 'John', age: 45, email: 'john@example.com' } console.log(user.name); console.log(user.hasOwnProperty('email')); 위 코드에서 user라는 객체에는 hasOwnProperty라는 메서드가 없지만 사용이 가능하다. 그럼 hasOwnProperty는 어디서 온걸까 ? 위 사진과 같이 모든 객체는 global Object prototype을 가진다. 그렇다면 prototype은 무엇일까 ? 프로토타입은 자바스크립트 객체가 다른 객체로부터 메서드와 속성을 상속받는 메커니즘을 말한다. 이것을 프로토타입 체인(prototype chain)이라고도 말한다. 위에서 보듯..

HTML을 이용해서 화면에 UI를 표현하기 브라우저에서 UI를 볼 수 있는 것은 브라우저가 HTML 을 분석해서 그 결과로 보여주는 것이다. 이 HTML은 요소(Element)들로 구성되어 있다. 돔 이란? (Document Object Model) - 돔은 메모리에 웹 페이지 문서 구조를 트리구조로 표현해서 웹 브라우저가 HTML 페이지를 인식하게 해준다. - 위에서 보는 웹 페이지를 이루는 요소들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다. window.document. //Document Object Model(DOM) 돔 조작 위에 보이는 DOM 트리를 DOM 에서 제공해주는 API를 이용해서 조작할 수 있다. 이 API를 이용해서 DOM 구조에 접근하거나 ..

window Object window 객체는 브라우저에 의해 자동으로 생성되며 웹 브라우저의 창(window)을 나타낸다. 또한 window 은 브라우저의 객체이지 javascript의 객체가 아니다. 1. 브라우저의 창에 대한 정보를 알 수 있고, 이 창을 제어하고 할 수도 있다. 2. 또한 var 키워드로 변수를 선언하거나 함수를 선언하면 이 window 객체의 프로퍼티가 된다. 대표적인 window Object 사용 예시 // Alert alert('Hello World!'); // Prompt const input = prompt(); alert(input); // Confirm if (confirm('Yes or No')) { console.log('YES'); } else { console.l..

자바스크립트는 싱글스레드이지만 논블로킹으로 동작 자바스크립트는 비동기 처럼 사용할 수 있지만, 브라우저api나 Node api(settimeout..)의 도움을 받아서 비동기처럼 사용할 수 있다. 동기 방식 자바스크립트는 코드가 작성된 순서대로 작업을 처리한다. 이전 작업이 진행 중일 떄는 다음 작업을 수행하지 않고 기다린다. 먼저 작성된 코드를 먼저 다 실행하고 나서 뒤에 작성된 코드를 실행한다. 동기적 처리의 단점은 하나의 작업이 너무 오래 걸릴 시, 모든 작업이 오래 걸리는 하나의 작업이 종료되기 전까지 올 스탑 되기 때문에, 전반적인 흐름이 느려진다. ex) 웹사이트에서 버튼 하나를 눌렀지만 이전 다른 작업이 다 처리 되지 않아 30초 후에 버튼이 클리이 되면 속이 터진다. 멀티 쓰레드 코드를 실..

비구조할당 1) 객체 비구조화 할당 const person = { name: "John Doe", age: 30, address: { city: "Seoul", country: "South Korea", }, }; // 객체 비구조화 할당을 사용하여 person 객체의 속성을 변수에 할당합니다. const { name, age } = person; // 변수 사용 console.log(name); // "John Doe" console.log(age); // 30 // 객체 안의 객체 비구조화 할당 const { address: { city } } = person; // 변수 사용 console.log(city); // "Seoul" // 별칭 사용 const { name: firstName } = pe..

함수 선언식 function getArea(width,height) { let area=width*height; return area; } 함수 외부에서 선언된 변수는 함수 내부에서 접근이 가능하지만 함수 내부에서 선언된 변수는 함수 외부에서 접근이 불가능하다. 함수표현식 let hello =function() { return "안녕하세요~~" } const helloText= hello(); console.log(helloText); console.log(hello()); 함수도 '값' 이다. 즉, 이름을 지정 안하고 바로 값에 대입해서 사용할 수 있다. 화살표 함수 let hello =() => { return "안녕하세요~~" } const helloText= hello(); console.log(..

for : 코드를 여러번 반복한다. for (let i = 0; i < 10; i++) { if (i === 3) { console.log('It is 3'); continue; } if( i === 5) { console.log('5 Stop the loop'); break; } console.log('Number ' + i); } for (statement 1; statement 2; statement 3) statement 1 : 루프가 시작되기전 실행 statement 2 : 루프 실행을 위한 조건 statement 3 : 루프 실행된 후 실행 for /in : 객체의 속성(property)을 따라 반복한다. const user = { name: 'Han', province: '경기도', city..

원시 타입에 대한 값을 저장하기 위해 Call Stak 메모리 공간을 사용하지만 참조 타입의 경우 데이터 타입이 정해지지 않고 Heap이라는 별도의 메모리 공간을 사용한다. 참조타입은 Call Stack에 개체 및 배열 값이 아닌 Heap 메모리 참조 ID를 값으로 저장한다. 자바스크립트는 동적 타입이다. let foo=42 /number foo='bar' // string foo=true // boolean JavaScript는 느슨한 타입(loosely typed)의 동적(dynamic) 언어이다. JavaScript의 변수는 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당 (및 재할당) 가능하다. - 같은 변수가 여러개의 타입을 가질 수 있다. - 타입을 명시하지 않아도 된다. - 대부..

1 ) 변수 선언 방식 var : 중복 선언과 재할당이 가능하다. - 아래와 같이 중복 선언과 재할당이 가능하며 마지막에 할당된 값이 변수에 저장된다. - 자율성은 생기지만 소스 코드가 복잡해질 경우 기존 선언해둔 변수를 잊고 다시 선언하거나 재할당을 해서 어떤 부분에서 값이 변경되는지 파악하기 힘들어 지게 된다. 그래서 let과 const가 생긴 이후 var는 사용하지 않는다. var greeting = 'hello'; console.log(greeting); var greeting = 'hi'; console.log(greeting); greeting = 'how are you?'; console.log(greeting); let(ES6) : 중복 선언은 불가하며, 재할당은 가능하다. let gree..