자바스크립트

안녕하세요 이번 글에서는 자바스크립트에서의 이벤트루프 - (동기, 비동기) 핵심만 알려드리겠습니다. 1. 동기, 비동기란? 한 번에 코드가 한 줄씩 차례로 실행된다는 걸 동기라고 합니다.(synchronous) 오늘 배울 stack이란 공간에서 코드가 한 줄씩 실행됩니다. 반면 실행에 시간이 걸리는 코드를 제쳐두고, 실행이 바로 가능한 코드를 먼저 실행하는 방식을 비동기 라고 합니다.(asynchrounous) 자바스크립트는 동기적인 언어며, 동시에 비동기적인 코드를 처리할 수 있습니다. 이벤트루프를 배우며 위의 개념을 이해해봐요! 동기, 비동기를 위해 크게 4가지를 아셔야 합니다. 1. event loop(이벤트 루프) (stack, heap, quque) 2. 콜백함수(call back functio..

안녕하세요 이번 글에서는 자바스크립트에서의 상속 - (class) 핵심만 알려드리겠습니다. 1. 사용이유 es6에서 constructor를 구현할 때 사용합니다. function으로 구현하는 상속이랑, 기능상 큰 차이는 없고 보기 쉽게 표현해 줍니다. 2. 사용방법 class my_class{ constructor(name) { this.name = name; } }; const class1 = new my_class('kim'); class는 constructor안에 this.name을 넣어줍니다. 그리고 함수(메서드)를 넣고 싶으면 constructor 안이나 바깥 중에 함수를 넣으면 됩니다. class my_class{ constructor(name) { this.name = name; //1. c..

안녕하세요. 이번 글에서는 자바스크립트에서의 상속 - (Prototype) 핵심만 알려드리겠습니다. 1. prototype 1.1 prototype이란? 지난 시간에 constructor를 이용해 객체를 여러 개 만드는 법을 배웠는데요. 근데 constructor로 객체를 만들면, Prototype이라는 항목이 constructor안에 자동으로 생성됩니다. 간단한 예시를 들어보겠습니다. function Person(name){ this.name = name; } var person1 = new Person('kim'); console.log(Person.prototype); construcor로 객체를 만들고 prototype이란 값을 찍어보았습니다.. 이런 이상한 값이 출력됩니다. 왜 construct..

안녕하세요 이번 글에서는 자바스크립트에서의 상속 - (constructor) 핵심만 알려드리겠습니다. 1. 상속이란? 상속이란 객체지향의 핵심 개념으로, 객체의 속성을 상속받은 객체를 만들 수 있습니다. 자바스크립트에서, 상속을 구현하는 크게 3가지 방법이 있습니다. 1. constructor(생성자) 2. Prototype(프로토타입) (prototype, __proto__) 3. class(클래스) 오늘은 첫 번째로 constructor에 대해 배워보겠습니다. 2. 사용이유 객체는 reference data type이기 때문에, 복사할 때 등호 대신 전개연산자 혹은 다른 복사 방법을 사용해야 합니다. 그게 불편하다면 constructor(생성자)를 사용하여 객체를 복사할 수 있습니다. 한마디로 비슷한..

안녕하세요. 이번 글에서는 자바스크립트에서의 destructuring(구조분해 할당) 핵심만 알려드리겠습니다. 1. 사용이유 객체나 배열 안의 값들을 변수로 분해해 줍니다. 그러면 일일이 할당하지 않아도 손쉽게 값을 가져올 수 있습니다. 2. 사용방법 2.1 배열 var arr = [1, 2]; var [a, b] = arr; console.log(a); //1 console.log(b); //2 위처럼 배열이랑 모양을 같게 해서 할당하면 destructuring을 해줍니다. 그러나 값이 없으면 undefined가 할당이 되는데요 var arr = [1]; var [a, b] = arr; console.log(a); //1 console.log(b); //undefined 이렇게 값이 없는 경우를 방지하..

안녕하세요 이번 글에서는 자바스크립트에서의 arguments/rest parameter(나머지 연산자) 핵심만 알려드리겠습니다. 1. arguments 1.1 사용이유 함수에서 넘어온 파라미터 값을 한 번에 다루고 싶을 때 사용합니다. arguments 키워드를 사용하면 값들을 배열 형태로 접근이 가능합니다. function sum() { let total = 0; for (let i = 0; i < arguments.length; i++) { total += arguments[i]; } return total; } console.log(sum(1, 2, 3)); // 6 위 코드에서 파라미터에 아무 값도 넣지 않았는데, arguments 키워드를 이용해 배열 형태로 값을 가져와 사용했습니다. 1.2 단..

안녕하세요. 이번 글에서는 자바스크립트에서의 default parameter(매개변수 기본값) 핵심만 알려드리겠습니다. 1. 사용이유와 사용방법 1.1 사용이유 매개변수의 기본값을 설정할 수 있습니다. 이를 통해, 파라미터값이 제공되지 않더라도 기본값이 매개변수에 할당됩니다. 1.2 사용방법 function greet(name = "Anonymous") { console.log(`Hello, ${name}!`); } greet(); // 출력: Hello, Anonymous! greet("John"); // 출력: Hello, John! 위처럼 파라미터 값을 넣지 않더라도, name=”Anonymous”를 매개변수의 기본값으로 설정합니다. 이렇게 파라미터 선언 시, 등호로 입력하면, 파라미터가 정의되지 ..

안녕하세요 이번 글에서는 자바스크립트에서의 Spread Operator(전개 연산자) 핵심만 알려드리겠습니다. 1. 사용이유와 사용방법 1.1 사용이유 spread 뜻은 펼친다는 뜻을 가지고 있습니다. spread operator은 그냥 데이터를 펼치는 연산자 라고 생각하면 되는데요 배열, 객체, 문자열에서 데이터를 펼쳐줍니다. 1.2 사용방법 사용방법은 마침표 3개 연달면 됩니다. “…” 2. 사용 예시 (배열, 문자열) 2.1 배열 var ages = [10, 11]; console.log(ages); //[10, 11] console.log(...ages) //10, 11 배열 안에 요소들을 …을 이용해서 찍으면 괄호 안에 있는 데이터가 펼쳐 저서 나오는 걸 볼 수 있습니다. 2.2 문자열 var ..

안녕하세요 이번 글에서는 자바스크립트에서의 primitive(원시)/reference(참조) data type 핵심만 알려드리겠습니다. 1. primitive data type(원시타입) 숫자(Number), 문자열(String), 불리언(Bollean), null, undefiend, Symbol 원시 타입은 변수 간에 독립적으로 저장합니다. 즉, 한 변수의 값을 변경하더라도 다른 변수의 값은 영향을 받지 않습니다. 2. reference data type(참조타입) 객체, 배열, 함수 참조타입은 값이 저장되는 메모리 공간의 주소를 가리킵니다. 원시타입처럼 변수를 독립적으로 저장하지 않고, 자료가 어디 있는지 레퍼런스(참조)를 저장합니다. var number= [10]; 여기서 number는 [10]을..

안녕하세요 이번 글에서는 자바스크립트에서의 Template literals / Tagged template 핵심만 알려드리겠습니다. 1. Template literals 기존에는 “+” 기호로 문자열을 연결해 줘야 했습니다. var name = 'kim'; var str = "저는 " + name + " 입니다."; console.log(str); //저는 kim 입니다. 그러나 Template literals을 사용하면 backtick( ` ) 기호로 문자열을 이을 수 있습니다. backtick기호는 키보드 tab 위에 보면 있습니다. 그럼 Template literals의 2가지 장점을 볼까요? 1.1 변수를 쉽게 집어넣을 수 있음 기존에는 +기호로 변수를 넣어야 했지만 Template literal..