본문 바로가기
728x90
반응형

분류 전체보기286

[JavaScript] 자바스크립트 프로토타입 기반의 함수 Class (ES6) JavaScript 프로토타입 기반의 함수 Class안녕하세요 !오늘은 ES6에서 도입 된 Class에 대해 알아보겠습니다.들어가기 전 이야기 드리고 싶은 부분이 있습니다.JavaScript는 프로토타입 기반 객체 지향 언어입니다. 모든 객체는 각 부모 역할을 담당하는 객체와 prototype으로 연결이 되어 있다. 그렇기 때문에 class가 필요 없이도 객체 지향 프로그래밍이 가능하다. 어떤 커뮤니티에서는 JavaScript가 무슨 객체 지향 언어냐 라고 이야기를 하는 분들을 본 것 같은데 나는 그분들이 생각하는 다른 언어보다 상상 이상으로 충분한 조건을 갖추고 있는 객체 지향 언어라고 생각한다.이제 본격적으로 시작해보자.class 는 어떤 것을 제공 해주나 ?기존 prototype 기반의 상속 보다 .. 2023. 3. 10.
[JavaScript] 자바스크립트 깊은 복사(Deep Copy)와 얕은 복사(Shallow Copy) Pass-by-reference(참조에 의한 전달)객체의 타입은 객체 타입 또는 참조 타입이라한다. 참조 타입이란 객체의 모든 연산이 실제값이 아닌 참조값으로 처리됨을 의미한다. 원시 타입은 값이 한 번 정해지면 변경할 수 없다(immutable). 객체는 프로퍼티를 변경, 추가, 삭제가 가능하므로 변경 가능(mutable)한 값이라 할 수 있다.let bar = { num : 1}let foo = bar;console.log(bar.num, foo.num); // 1, 1console.log(bar === foo); // truebar.num = 2;console.log(bar.num, foo.num); // 2, 2console.log(bar === foo); // true변수 foo에 bar 값을.. 2023. 3. 10.
[JavaScript] 자바스크립트 생성자 함수에 의한 객체 생성 생성자 함수에 의한 객체 생성17.1 Object 생성자 함수new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다.빈 객체를 생성한 이후에 프로퍼티 또는 메서드를 추가하여 객체를 완성할 수 있다.// 빈 객체의 생성const person = new Object();// 프로퍼티 추가person.name = 'Lee';person.sayHello = function () { console.log('Hi! My name is ' + this.name);};console.log(person); // {name: "Lee", sayHello: f}person.sayHello(); // Hi! My name is Lee생성자 함수란 new 연산자와 함께 호출하여 객체를 생성하는 .. 2023. 3. 10.
[JavaScript] 자바스크립트 기명함수 / 익명함수 기명함수 함수선언 방식과 익명함수 함수표현 방식이 있다.function sum(x, y) { // console.log(x + y); return x + y; // return 키워드가 있는 시점은 코드가 종료되는 시점이다. // 그렇기 때문에 return 키워드 아래의 코드는 실행되지 않는다.}const a = sum(1, 3);const b = sum(4, 12);console.log(sum(5, 9));console.log(b);console.log(a + b);✅ 화살표 함수// () => {} vs function () {}const double = function (x) { return x * 2;};console.log('double :', double(7));const double.. 2023. 3. 10.
[JavaScript] 자바스크립트 함수 표현식 VS 함수 선언식 함수 선언식이란?변수 선언이 var로 시작해야하는 것처럼 함수 선언은 function으로 시작한다.선언 된 함수는 나중 사용을 위해 저장되며, call 될 때 실행된다.function foo() { return "이것은 함수입니다.";}함수는 여기서만 선언되며, 사용하려면 해당 함수 이름을 호출하면 된다.foo(); // "이것은 함수입니다." 함수 표현식이란?자바스크립트 함수는 표현식을 사용하여 정의 될 수 있으며, 함수 표현식은 변수로 저장될수 있다.var x = function (a, b) {return a * b};함수 표현식이 변수에 저장되면, 변수는 함수처럼 사용 가능해진다. 변수에 저장된 함수는 함수명이 필요 없으며, *변수 이름을 통하여 호출된다.*함수 표현식 VS 함수 선언식함.. 2023. 3. 10.
[JavaScript] 자바스크립트 함수(Function) 함수란?일련의 과정을 문(statement)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다.함수는 함수 정의(function definition)를 통해 생성한다.function add(num1, num2) { return num1 + num2;}이 때, 함수 내부로 입력을 전달받는 변수를 매개변수(parameter)라고 한다.그리고 return 을 통해 출력하고자 하는 값을 반환값(return value)이라고 한다.함수 정의만으로는 함수를 실행할 수 없다.var result = add(1, 2);console.log(result);// 결과3입력 값인 인수(argument)와 함께 함수의 실행을 명시적으로 지시해야 한다. 이를 함수 호출(function call)이라고 한다.. 2023. 3. 10.
[JavaScript] 자바스크립트 엔진 (JavaScript Engine) 원문 : 🚀⚙️ JavaScript Visualized: the JavaScript Engine기계는 어떻게 우리가 작성한 코드를 이해할 수 있을까요? 자바스크립트 개발자로서 우리는 보통 "컴파일러"를 직접 다룰 필요는 없습니다.하지만 자바스크립트 엔진의 기본적인 내용을 알고, 엔진이 어떻게 인간 친화적인 코드를 다루는지, 그리고 그 코드들을 기계가 이해할 수 있는무언가로 바꾸는 것을 아는 것은 분명 좋은 일입니다.Note : 이 게시물은 주로 Node.js, 크로미움 기반 브라우저에서 사용하는 V8 엔진을 기반으로 합니다.HTML 파서는 source가 있는 script태그를 만납니다. 이 소스의 코드는 네트워크, 캐시 혹은 설치된 서비스 워커로부터 로드됩니다.응답은 byte stream에 요청한 스크.. 2023. 3. 10.
[JavaScript] 자바스크립트 스코프(Scope) 원문 : ⚡️⛓ JavaScript Visualized: Scope스코프 체인을 위한 시간입니다 🕺이 포스트는 JS의 실행 컨텍스트에 대한 기본적인 이해를 하고 있다고 가정합니다. 곧 그에 대한 글도 작성하겠습니다.😃다음 코드를 살펴보죠!이름, 나이, 도시값 변수를 포함한 문자열을 반환하는 getPersonInfo 함수를 호출합니다.Sarah는 22살이고 샌프란시스코에 삽니다. 하지만, getPersonInfo 함수는 city를 포함하고 있지 않습니다. 🤨? 어떻게 이 함수는 city값을 알고 있을까요?먼저, 메모리 공간은 다른 컨텍스트에 대해 설정됩니다. 우리는 기본적으로 global context(브라우저의 window, 노드의 global)과우리가 호출한 getPersonInfo함수에 대한 l.. 2023. 3. 10.
[JavaScript] 자바스크립트 이벤트 루프(Event Loop) JS 엔진자바스크립트 엔진은 메모리힙과 콜스택으로 구성되어 있다.- 가장 유명한 것이 구글의 v8이다.자바스크립트는 단일 스레드(single thread) 프로그래밍 언어.- 이것은 콜스택이 하나라는 의미- 멀티가 되지않고, 하나씩 처리한다는 의미메모리힙- 메모리할당이 일어나는 곳 => 우리가 선언한 변수, 함수 등이 담겨져있다.콜스택- 코스가 실행될때 쌓이는 곳. stack 형태로 쌓인다.- stack이란? 자료구조 중 하나. 선입후출의 룰을 따른다.Web API그림에서 봤을때 JS엔진 바깥에 그려져있다.- 즉, JS엔진이 아니다는 뜻.웹 api는 브라우저에서 제공하는 api로 timeout과 ajax, DOM이 있다.콜스택에서 실행된 비동기함수는 web api에서 호출하고, web api에서는 Cal.. 2023. 3. 10.
728x90
반응형

티스토리툴바