모래블로그

자바스크립트는 프로토타입 기반 언어라고 불린다. 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다. 그리고 이것은 마치 객체 지향의 상속 개념과 같이, 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있게 하는데 이러한 부모 객체를 Prototype(프로토타입) 객체 또는 줄여서 Prototype(프로토타입)이라 부른다. Prototype 객체는 생성자 함수에 의해 생성된 각각의 객체에 공유 프로퍼티를 제공하기 위해 사용한다. Prototype vs Class 자바스크립트에는 클래스라는 개념이 없지만, 프로토타입(prototype) 이라는 것이 존재한다. 자바스크립트가 프로토타입 기반 언어라고 불리는 이유이다. 클래스가 없기 때문에 기본적으로 상속 기능도 없다. 그래서 ..

1. 자바스크립트의 동기(Synchronous) 자바스크립트는 싱글 스레드 언어이기 때문에 한 번에 하나의 작업만 수행할 수 있다. 즉, 이전 작업이 완료되어야 다음 작업을 수행하는 순차적인 방식으로 진행이 되는데, 이러한 방식을 동기(Synchronous) 라고 부른다. 예를 들어, 이렇게 입력했을 때 결과가 "one", "two", "three" 가 차례대로 출력되는 것을 확인할 수 있다. 그렇다면 왜 이렇게 나올까 ? 2. 자바스크립트 엔진의 동작 원리 자바스크립트는 콜 스택(Call Stack)과 메모리 힙(Memory Heap)이라는 메모리 구조를 통해 데이터 및 코드 실행을 관리한다. 💡엔진의 주요 구성 요소 1) Memory Heap : 메모리 할당이 일어나는 곳 객체, 배열, 함수 등 참조..

구조 분해 할당(Destructuring Assignment) 구조 분해 할당 문법은 배열이나 객체의 속성을 분해하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식이다. 즉, 객체나 배열을 변수로 '분해'할 수 있게 해준다. 1. 기본 문법 // 이름과 성을 요소로 가진 배열 let arr = ["Soojin", "Park"] // 구조 분해 할당을 이용해 // firstName엔 arr[0]을 // lastName arr[1]을 할당 let [firstName, lastName] = arr; alert(firstName); // Soojin alert(lastName); // Park 위와 같이 인덱스를 이용해 배열에 접근하지 않아도 변수로 이름과 성을 사용할 수 있다. 1. 배열(arr..

Spread Operator(스프레드 연산자) ES6에는 Spread Operator 라는 새로운 기능이 추가되었다. 이 스프레드 연산자는 배열, 문자열 등 반복 가능한(iterable) 객체의 요소를 전개하거나 펼친다. 기본 문법 const arr1 = [1, 2, 3, 4, 5]; console.log(...arr1); // [ 1, 2, 3, 4, 5 ] 위 코드처럼 arr1 배열 앞 (...) 처럼 3개의 점을 이용한 문법이며, 이런 스프레드 연산자를 쓰면 arr1 배열의 원소를 풀어쓸 수 있다. 1. Spread Operator의 배열 복사 자바스크립트에서 배열을 새로운 변수에 할당하는 경우, 새로운 배열은 기존 배열을 참조한다. 따라서 새로운 배열을 변경하는 경우 원본 배열 역시 변경된다. /..

화살표 함수 (Arrow Function) ES6 문법인 화살표 함수(Arrow Function)는 function 키워드 대신 화살표(=>)를 사용하여 간단하게 함수를 표현할 수 있다. 그렇다고 모든 경우 화살표 함수를 사용할 수 있는 것은 아니다. 1. 화살표 함수 기본 문법 // 매개변수 지정 방법 () => { ... } // 매개변수가 없을 경우 a => { ... } // 매개변수가 한 개인 경우, 소괄호 생략 가능 (a,b) => { ... } // 매개변수가 여러 개인 경우, 소괄호 생략 x // 객체 반환 시 () => ({ a : 1, b : 2 }) // 객체를 반환할 때는 소괄호를 사용 2. 화살표 함수의 호출 화살표함수는 익명함수로만 사용할 수 있다. 따라서 함수를 호출하기 위해서..

일급 객체(First Class Object) 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 보통 함수에 매개변수로 넘기기, 수정하기, 변수에 대입하기와 같은 연산을 지원할 때 일급 객체라고 한다. (위키백과) 여기서 일급 은 사용할 때 다른 요소들과 아무런 차별이 없다는 것을 뜻한다. 일급 객체 조건 1. 변수나 데이터에 담을 수 있어야 한다. 2. 함수의 파라미터로 전달할 수 있어야 한다. 3. 함수의 리턴값으로 사용할 수 있어야 한다. 일급 객체는 어떤 특정 언어에만 국한되는 문법 단어가 아니고, 프로그래밍 언어론의 개념으로서 자바나 자바스크립트 외 다양한 언어가 일급 객체 개념을 가지고 있다. Javascript, Python이 일급객체 언어이고, c, pascal,..

💡호이스팅 호이스팅(hoist)의 사전적 정의 : 끌어올리기 자바스크립트에서 호이스팅이란 ? 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. 함수 내 변수 및 함수 선언을 각 해당 스코프의 최상단으로 끌어올려주는 것이다. (물리적으로 코드가 옮겨지는 것은 X) 컴파일 단계에서 코드 실행 전 함수와 변수 선언을 스캔하고, 모든 함수와 변수 선언들은 렉시컬 환경이라고 불리는 자바스크립트 데이터 구조 내의 메모리에 추가된다. 자바스크립트의 모든 선언에서는 호이스팅이 일어난다. 하지만 let, const, class를 이용한 선언문은 호이스팅이 발생하지 않는 것처럼 동작한다. var와 달리 let 키워드로 선언된 변수를 선언문 이전에 참조하면 참조 에러(ReferenceErr..

💡스코프(Scope) 선언된 변수에 접근할 수 있는 유효한 범위를 말하며, 참조 대상 식별자(변수, 함수의 이름과 같이 다른 대상과 구분하여 식별할 수 있는 이름)를 찾아내기 위한 규칙이라고도 한다. var x = 'global'; function foo () { var x = 'function scope'; console.log(x); } foo(); // ? console.log(x); // ? 위와 같이 변수 x가 중복으로 선언되었을 때, 전역에 선언된 변수 x는 어디에든 참조할 수 있다. 하지만 foo 함수 내에서 선언된 변수 x는 함수 foo 내부에서만 참조할 수 있고 함수 외부에서는 참조할 수 없다. 이러한 규칙을 스코프라고 한다. 즉, 변수가 해당 스코프에 존재하지 않는다면 사용할 수 없다...