본문 바로가기

Language/JavaScript

[JS] 비동기 처리 - Callback, Promise, async/await 자바스크립트에는 비동기적으로 실행되는 함수들이 있다. (ex. setTimeout, AJAX를 활용한 라이브러리 함수들)비동기 함수들은 실행순서를 제어해주지 않으면 코드의 실행 순서를 예측할 수 없고 코드의 가독성도 떨어진다.비동기 함수들의 실행 순서를 제어하는 방법에는 어떤 것이 있는지 알아봤다.Callback콜백함수는 다른 코드의 인자로 넘겨주는 함수로, 콜백 함수를 넘겨받은 코드는 이 콜백함수를 실행할 제어권을 가져 적절한 시점에 콜백 함수를 실행할 수 있게 된다.콜백지옥setTimeout( function(name) { var Teletubbies = name; console.log(Teletubbies); setTimeout( function(name) { .. Language/JavaScript 2021. 7. 24.
[JS] 코어자바스크립트 ch6. 프로토타입 코어 자바스크립트 ch6 프로토타입을 읽고 정리한 글 목차  1. 프로토타입 개념 이해하기자바스크립트는 프로토타입 기반 언어이다.클래스 기반 언어에서는 상속을 사용하지만 프로토타입 기반 언어에서는 어떤 객체를 원형(prototype)으로 삼고 이를 복제함으로써 상속과 비슷한 효과를 얻는다.ES6에 class 키워드가 추가되었지만, 그렇다고 자바스크립트가 클래스 기반언어가 된 것은 아니다. 아래 그림은 생성자함수와 new를 이용해 instance를 생성할 때, 생성자와 인스턴스 관계를 가장 잘 표현한 그림이다.var instance = new Constructor();자바스크립트는 함수에 자동으로 객체인 prototype 프로퍼티를 생성해 놓는데, 해당 함수를 생성자 함수로 사용할 경우, 그로부터 생성된 .. Language/JavaScript 2021. 7. 4.
[JS] 코어자바스크립트 ch3. this 코어자바스크립트 ch3 this 를 읽고 대충 정리한 글ch3 후반부에 this 바인딩 부분은 나중에 추가할 예정... 상황에 따라 this 가 어떤 객체를 가리키는지가 다르다.전역공간에서 this전역 객체method 호출 시 method 내부에서의 this해당 method를 호출한 주체함수 호출 시 함수 내부에서의 this전역 객체(함수 내부에서 this가 전역 객체를 바라보는게 자바스크립트 설계오류라고함. 변수 선언을 통해 우회하는 방법도 있긴 있음.)콜백 함수 호출 시 그 함수 내부에서의 this콜백 함수도 함수이므로 기본적으로는 전역객체를 바라보긴 하는데,콜백 함수를 호출하는 함수가 무엇이냐에 따라 다르다.예를 들어 addEventListener 함수는 내부적으로 this 가 event targe.. Language/JavaScript 2021. 7. 3.
[JS] 화살표함수 목차Arrow Function 형태 let func = (arg1, arg2, ..., argN) => expression 인수가 하나라면 괄호 생략 가능인수가 없을 땐 괄호 생략 불가능본문이 여러줄인 경우 중괄호로 묶으면 된다. 이 경우 return 문을 명시적으로 사용해줘야함.👇 이렇게도 쓸 수 있음. 처음엔 낯선데 익숙해져야함let welcome = (age alert("안녕"), () => alert("안녕하세요");화살표 함수는 익명 함수로만 사용할 수 있다. 따라서 화살표 함수를 호출하기 위해서는 함수 표현식을 사용한다.화살표 함수는 자체 컨텍스트가 없는 짧은 코드를 담는 목적으로 만들어졌다. 아래에서 화살표 함수의 특징을 통해 이를 확인할 수 있다. 화살표 함수 특징1. 화살표 함수에는.. Language/JavaScript 2021. 7. 2.
[JS] 함수 선언문과 함수 표현식 Function Declaration함수 선언문 방식은 function 정의부만 존재하고 별도의 할당 명령이 없다.function name(parameters) {  /* expression */} 함수 내에서 선언된 지역변수는, 동일한 변수명을 가진 전역변수를 가린다.반드시 함수명이 정의되어 있어야한다. (익명함수 불가)return 문이 없는 함수와, return 지시자 하나만 있는 undefined를 반환한다.Function Expression함수 표현식은 정의한 function을 별도의 변수에 할당한다.let sayHi = function () {  alert("Hello");};위에선 sayHi라는 변수에 할당하는 구문이므로 세미콜론 ; 붙여야함 (convention)함수는 구문이기도 하면서 값이.. Language/JavaScript 2021. 5. 28.
[JS] 얕은 복사 깊은 복사 코어 자바스크립트 1장을 읽고 정리한 내용 (2)4. 얕은 복사와 깊은 복사        4-1. 불변 객체    4-2. 복사한 데이터를 변경할 때 원본 데이터의 변경 여부        4-3. 불변객체를 만드는 방법 1. 불변 객체 (immutable object)리액트 토이프로젝트를 하면서 객체의 불변성을 신경쓰지 않다가 문제가 발생한 적이 없어서 아직 중요성을 못 느끼고 있지만 (?)불변 객체는 React, Vue.js, Angular 등의 라이브러리나 프레임워크 뿐만 아니라 함수형 프로그래밍, 디자인 패턴 등에서 매우 중요한 기초가 되는 개념이라고 한다. 불변 객체의 개념이나 등장배경, 필요성에 대한 설명이 위키피디아에 잘 정리되어 있다.  불변객체 - 위키백과, 우리 모두의 백과사전위키백과, .. Language/JavaScript 2021. 5. 14.
[JS] 데이터 할당의 동작 원리와 불변값 vs 가변값 코어 자바스크립트 1장을 읽고 정리한 내용 (1) 1. 데이터 타입의 종류2. 데이터 할당의 동작 원리    2-1. 기본형의 데이터 할당    2-2. 참조형의 데이터 할당3. 불변값과 가변값    3-1. 기본형과 참조형 데이터에서 할당된 값을 변경할 때4. 얕은 복사와 깊은 복사    4-1. 불변 객체    4-2. 복사한 데이터를 변경할 때 원본 데이터의 변경 여부    4-3. 불변객체를 만드는 방법 1. 데이터 타입의 종류Primitive Type (기본형)Reference Type (참조형)둘의 차이점데이터를 할당하거나 연산할 때,- 기본형은 값이 담긴 주소값을 바로 복제하고- 참조형은 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소값을 복제한다.- 둘 다 주소의 복사가 이루어지지만, .. Language/JavaScript 2021. 5. 9.

티스토리툴바