PracticeEveryday

왜 브라우저는 스크립트 언어를 사용했는가?! 스크립트 언어는 연극 용어에서 따온 말이다. 연극에서의 '스크립트'는 배우의 대사를 중점으로 배우의 표정, 등장과 퇴장, 무대장치을 중심으로 지시해놓은 내용을 말한다. 프로그래밍에서 '스크립트 언어'의 역할을 생각해보면 왜 스크립트라고 했는지 이해가 될 것이다. 프로그래밍의 스크립트 언어는 기존에 이미 존재하는 소프트웨어를 제어하기 위한 용도를 쓰이는 언어이다. 연극에서 스크립트가 극 안의 상황에서 배우가 어떻게 행동할 것인지 지시해놓은 것처럼, 스크립트 언어도 소프트웨어를 어떻게 실행할 지 제어한다. 컴파일러를 사용해 실행하면, 기계어로 번역이 된 채로 바로 실행할 수 있다. 하지만, 규모가 큰 프로그램이라면 컴파일에 몇 시간이 걸릴 수 있다. 그렇게 오랜 ..

Arrow Function 화살표 함수는 ES6에서 새로 추가된 기능으로 기존 함수 표현식보다 비교적 간단하게 사용 가능하다는 장점이 있다. 화살표 함수는 익명 匿 숨길 닉 名 이름 명 신분을 드러내지 않기위해 이름을 밝히지 않는 상태 함수이다. function add(a, b) { return a + b; } const add = (a, b) => { return a + b; } 일반 함수와 화살표 함수의 차이 바인딩 bind : 묶다. => 바인딩이란 함수 호출과 실제 함수를 연결하는 방법이다. => 함수를 호출하는 부분에서 실제 함수가 위치한 메모리를 연결하는 것도 바인딩이다. - 정적 바인딩 (Static Binding) 실행 시간 전에 일어남. 실행 시간에는 변하지 않는 상태로 유지 - 동적 바..

Array vs JavaScript Array Array 밀집 배열(dense: 빽빽한, 짙은, 밀집한 Array) 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료구조 배열은 각 요소가 동일한 데이터 크기를 가지며, 빈틈없이 연속적으로 이어져 있다. JavaScript Array 희소 배열(sparse: 드문, (밀도가)희박한 array) 자바스크립트의 배열은 배열이 아닌 객체(일반적인 배열의 동작을 흉내낸 특수한 객체)이다. 자바스크립트의 배열은 요소를 위한 각각의 메모리 공간은 동일한 크기를 갖지 않아도 되며 연속적으로 이어져 있지 않을 수도 있다. 객체와 배열의 차이 : 가장 명확한 차이는 값의 순서와 length 프로퍼티의 유무이다. 더보기 const arr = [1, 2, 3]; c..

원시값의 메서드 자바스크립트는 원시값(문자열, 숫자 등)을 마치 객체처럼 다룰 수 있게 해줍니다. 원시 값에서도 객체처럼 메서드를 호출 해 줄수 있습니다. 원시값 : 원시형 값입니다. 원시형의 종류는 문자(string), 숫자(number), bigint, 불린(boolean), 심볼(symbol), null, undefined형으로 총 7가지입니다. 객체 : 프로퍼티에 다양한 종류의 값을 저장할 수 있습니다. 대괄호{}를 사용하여 만들 수 있는데 자바스크립트에는 여러 종류의 객체가 있는데 함수도 객체의 일종입니다. 객체의 장점 중 하나는 함수를 프로퍼티로 저장 할 수 있다는 것입니다. 하지만 객체는 원시값보다 무겁고 내부 구조를 유지하기 위해 추가 자원을 많이 사용한다는 단점이 있습니다. 원시값을 객체..

변수의 타입 JavaScript에는 타입(Type : 형태 유형 종류)이라는 개념이 존재한다. 변수에는 다양한 타입이 있으며 타입에 따라 할 수 있는 일이 다르다! 원시 자료형 (Primitive :원시적인, 원어 Type) 객체가 아니면서 method를 가지지 않는다. 원시 자료형은 모두 '하나'의 정보 , 데이터를 담고 있다. number : 3.141592 string : 'kim' boolean : true | false undefined : 변수가 정의되지 않았거나 값이 없다. null : 의도적으로 비어있음을 표현하기 위해 null 이라는 것이 들어있다. 참조 자료형 (Reference : 참조 Type) 자바스크립트에선 원시 자료형이 아닌 모든 데이터는 참조 자료형이다. 참조형은 원시형 데이..

생성자 함수와 Ptototype 객체 ● Prototype 객체 원시 타입 : Number, String, Boolean, undefined, null 객체 (Object) : 원시 타입을 제외한 모두 (Array, Function, RegExp, Date...) 원시 타입을 제외한 모든 객체는 모두 proto 속성을 가지고 있습니다. 그리고 객체 내부의 proto 속성은 객체가 만들어지기 위한 prototype 객체를 내부적으로 참조합니다. 그리고 prototype 객체를 참조하는 객체는 해당 prototype 객체가 가지고 있는 메소드를 상속 받습니다. let arr = [1, 2, 3, 4, 5]; let sliceArr = arr.slice(0, 3); console.log(sliceArr); /..

동적 타입 언어 JavaScript Type : 어떤 부류의 형(型). 순화어는 `유형', `모양', `생김새'. 타입이란 한글로 자료형입니다. 자바스크립트는 동적 타입(Dynamic/Weak Type) 언어이다. 변수의 타입 지정(Type annotation)없이 값이 할당되는 과정에서 자동으로 변수의 타입이 결정(타입 추론, Type Inference)된다. 즉, 변수는 고정된 타입이 없다. 따라서 같은 변수에 여러 타입의 값을 자유롭게 할당할 수 있다. 정적 언어 (Statically typed language) Statically 정적으로 Static : 고정된 정적 언어란 '타입 (자료형)'을 컴파일(Compile : 엮다)시에 결정하는 것이다. 코드를 짤 때 변수에 들어갈 값의 형태를 직접 명..

Prototype 기반 언어 Prototype : 원래의 형태 또는 전형적인 예, 기초 또는 표준 JavaScript는 원형 객체로 새로운 객체를 생성하는 Prototype(원형) 기반 언어이다. 객체(客體)란 더보기 객체 : 客 손 객 體 몸 체 객지(客地)에 있는 몸. 생각과 행동의 목적물 주체에 대하여 작용의 대상이 되는 쪽 프로토타입 기반언어는 클래스 기반 언어에서 상속을 받는 것과 다르게, 객체를 원형으로 하는 복제 과정을 통해 객체의 동작 방식을 재사용 할 수 있게 한다. // 프로토 타입 기만 언어는 원형 객체를 복제하여 새로운 객체를 형성하는 언어이다. 하지만 자바스크립트는 복제가 아닌 프로토타입 링크를 통해 원형을 참조한다. 자바스크립트의 객체 더보기 자바스크립트의 객체는 원시 타입(Pr..

TypeScript 타입 1. String : 문자열 let str: string = "hi"; : (콜론) => Type Annotation 이라고 함. Annotation : 주석 2. Number : 숫자 let num: number = 10; 3. Boolean : 진위 값 (T / F) let isLoggedIn: boolean = True; 4. Object let person: object = { name: "kim", age : 28 } 5. Array : 배열 let arr: number[] = [1, 2, 3]; // 무조건 number만 안에 let arr_str: string[] = ['a', 'b', 'c']; // 무조건 string만 안에 6. Tuple : 튜플 (길이가 고정..

TypeScript (타입스크립트) 타입스크립트는 MS에서 개발하고 관리하는 오픈소스 프로그래밍 언어이다. 타입스크립트란 자바스크립트에 타입을 부여한 언어입니다. // 자바스크립트의 확장된 언어라고 볼 수 있다. 타입스크립트의 장점 1. 정적 타입 언어(static type language) static: 고정된 => 사전에 에러를 방지할 수 있다. function sum(a, b) { return a + b; } add(10, 20) add(10, "10") add("a", "b") // 이런 거 다 가능 function sum(a: number, b: number) { return a + b; } // But TS는 안됨!! 무조건 number만 들어와야 함.!! add(10, 20) // add(1..