javascript

지난 포스팅 #1. 웹 브라우저 & HTML #2. CSS #3. JavaScript (Part1) 클로져(Closure)는 무엇이며, 어떻게/왜 사용하는지 설명해주세요. 클로저는 독립적인 변수를 가리키는 함수이다. 그리고 클로저 안에 정의된 함수는 만들어진 환경을 기억한다. 클로저를 통해 은닉화를 할 수 있으며, 콜백 함수 등을 사용할 때 발생할 수 있는 에러를 해결하는데도 유용하다. function makeFunc() { var name = "Mozilla"; function displayName() { alert(name); } return displayName; } var myFunc = makeFunc(); //myFunc변수에 displayName을 리턴함 //유효범위의 어휘적 환경을 유지 m..

지난 포스팅 : JS #7. 비동기성: 지금과 나중 지난 포스팅에서 비동기가 무엇인지, 단일 스레드 방식의 이벤트 큐가 무엇인지, 동시성 패턴 등등에 대해서 알아 보았다. 함수 안의 문은 예측 가능한 순서대로 (컴파일러 상위 수준에서) 실행되지만 함수 단위의 실행순서는 이벤트(비동기 함수 호출)에 따라 달라질 수 있다. 어떤 함수든 콜백(Callback) 역할을 한다. 왜냐하면 큐에서 대기 중인 코드가 처리되자마자 본 프로그램으로 '되돌아올' 목적지이기 때문이다. 콜백은 자바스크립트에서 비동기성을 관리하는 가장 일반적인 기법이자, 자바스크립트의 가장 기본적인 비동기 패턴이다. 물론 콜백에도 단점이 있고 이 단점을 보완하기 위해 새로운 개념들이 나오게 되었으나, 그 이전에 콜백의 실체를 정확하게 아는 것은..

자바스크립트 배열을 다룰 때 자주 사용하는 메서드들을 한 번 정리 해 보고자 한다. 실제로 지난 일주일동안 자바스크립트 기반 알고리즘 문제를 풀 때나, 프론트엔드 로직을 구현하는 기술과제를 할 때 많이 찾아보고 많이 사용했던 메서드들을 위주로 살펴보고자 한다. forEach 배열의 각 원소별로 순서대로 돌면서 함수를 실행한다. const array1 = ['a', 'b', 'c']; array1.forEach(element => console.log(element)); // expected output: "a" // expected output: "b" // expected output: "c" 참고로 forEach 메서드는 Object에서는 사용할 수 없지만 Map이나 Set 객체에서도 사용할 수가 있..

자바스크립트 관련 예상 질문은 양이 많아서 두 번에 나누어서 정리해 보려고 한다. JavaScript 이벤트 버블링(Event Bubbling), 이벤트 캡쳐링(Event Capturing)에 대해서 설명하세요. (D사 화상면접) 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 더 상위 요소들로 전달되어 가는 특성을 의미한다. 이벤트 캡처링은 이벤트 버블링과 반대로 상위 요소에서 하위 요소로 탐색하며 이벤트를 전파하는 방식이다. event delegation에 대해 설명하세요. (D사 화상면접) 특정 요소 하나하나를 개별적으로 이벤트를 부여하는 것이 아니라, 하나의 부모에 이벤트를 등록하여 부모가 이벤트를 위임하는 방식을 이벤트 위임이라고 한다. 이 방법은 동적인 요소들에 대한 처리가 수월하며 ..

자바스크립트에서 일정 시간 동안 발생하는 프로그램의 움직임을 어떻게 표현하고 나타낼 것인지에 대해 그동안 많은 연구가 있었다. 오늘은 그러한 연구의 결과 중 하나인 비동기성(Asynchrony)에 대해서 알아보고자 한다. 프로그램에서 '지금'에 해당하는 부분 그리고 '나중'에 해당하는 부분 사이의 관계가 바로 비동기 프로그래밍의 핵심이다. 자바스크립트 프로그램은 .js 파일 하나로도 작성될 수 있지만 보통은 여러 개의 덩이(chunk), 곧 '지금' 실행 중인 프로그램 덩이 하나 + '나중'에 실행할 프로그램 덩이들로 구성된다. 가장 일반적인 프로그램 덩이 단위는 함수이다. 여기서 명심해야 할 부분은 프로그램은 '지금'과 '나중' 사이에 중단되지 않으며 이 때 작업이 비동기적으로 처리되어 단지 '지금' ..

자바스크립트 객체와 클래스에 대한 포스팅에 이어 이번에는 프로토타입에 대해서 정리해 보려고 한다. [[Prototype]] 자바스크립트 객체는 [[Prototype]]이라는 내부 프로퍼티가 있고 다른 객체를 참조하는 단순 레퍼런스로 사용한다. [[Prototype]]은 어디에 쓰이는 걸까? 객체 프로퍼티를 참조할 때(myObject.a), 객체는 기본적으로 객체 자체에 해당 프로퍼티가 있는지를 찾고, 만약 있다면 그 프로퍼티를 사용한다. 하지만 만약에 myObject에 a라는 프로퍼티가 없다면 그 다음에는 이 객체의 [[Prototype]] 링크다. 두 번째 예제에서 connectObject는 anotherObject와 [[Prototype]]이 링크되었다. 분명히 connectObject.a 라는 프로..

이번 포스팅에서는 자바스크립트 클래스에 대해서 정리해 보려고 한다. 클래스 이론 클래스와 상속은 특정 형태의 코드와 구조를 형성하며 실생활 영역의 문제를 소프트웨어로 모델링 하기 위한 방법이다. 객체 지향 또는 클래스 지향 프로그래밍에서 데이터는 자신을 기반으로 하는 실행되는 작동(behavior)과 연관되므로 데이터와 작동을 함께 잘 감싸는(캡슐화) 것이 올바른 설계라고 강조한다. 예를 들어, 일련의 문자들은 보통 String이라는 단어를 나타낸다. 여기서 데이터는 문자들인데, 우리는 이 데이터를 가지고 원하는 작업을 하는 것이 관심사이므로 데이터에 적용 가능한 작동들을 모두 String 클래스의 메서드로 설계한다. 그래서 어떤 문자열이 주어지더라도 데이터와 작동이 잘 포장된 String 클래스의 인스..

이번 포스팅에서는 자바스크립트 객체에 대해서 공부한 내용을 정리해 보려고 한다. 객체 타입 객체는 선언적(Declarative, 또는 Literal) 형식과 생성자 형식, 두 가지로 정의한다. 그리고 객체는 언어 타입(Language Types)이라 불리는 7개의 주요 타입 중 하나를 가지고 있다. null undefined boolean number string object symbol(ES6에서 추가) 참고로 여기에서 단순 원시타입(Simple Primitives) 5개(string, number, boolean, null, undefined)는 객체가 아니다. 그리고 복합 원시타입(Complex Primitives)이라는 독특한 객체 하위 타입도 존재한다. 예를 들면 function 타입이 여기에 ..