Front End/JavaScript

    불변성(__**Immutability)**__

    불변성 (Immutability)불변성 개념은 JavaScript에만 존재하는 것이 아닌 다른 언어에도 존재하는 개념이다. 말 그대로 변하지 않는 것을 의미하며, 불변 데이터는 한 번 생성되고 나면 그 뒤에는 변할 수 없다. Immutable typeJavaScript에서는 원시 타입(Boolean, String, Number, Null, undefined, Symbol)이 이에 해당된다. 이 값은 메모리영역 내에서 변경이 불가능하며 변수에 할당할 때 완전히 새로운 값이 만들어져 다시 할당된다.let name = 'foo'; let newName = name; name = 'bar'; console.log(newName); // foo console.log(name); // bar위와 같은 상황에서 na..

    원시 자료형과 참조 자료형

    원시 자료형과 참조 자료형원시 자료형 (primitive type data)객체가 아니면서 메서드(method)를 가지지 않는 Boolean, String, Number, Null, undefined, Symbol 이 해당된다. 이 값은 메모리영역 내에서 하나의 값을 담는 스택(stack)에 각각 저장되며, 변수의 이름을 통해 스택에서 호출해 값을 사용 할 수 있다.왜 “원시” 자료형일까?원시 자료형은 모두 하나의 데이터를 담고 있다. 과거에는 데이터 저장소의 용량이 제한되어 변수 하나에 데이터 용량이 제한된 하나의 원시형 자료를 담을 수밖에 없었다. 사진에서 쓰이는 언어는 옛날 컴퓨터에 사용되던 BASIC이라는 컴퓨터 언어이다. string과 number는 쉽게 확인 할 수 있지만 배열에 상응하는 데이..

    객체 지향 프로그래밍

    객체 지향 프로그래밍 (OOP, Object-oriented programming)객체 지향 vs. 절차 지향객체 지향 프로그래밍 기본 개념 (OOP Basic Concepts)Encapsulation (캡슐화)Abstraction (추상화)Inheritance (상속)Polymorphism (다형성)JavaScript가 일반적인 OOP 프로그래밍 언어와 다른 점은닉화의 한계 (private키워드)추상화 기능의 부재 (interface 키워드)메서드 호출클로저를 이용해 매번 새로운 객체 만들기클래스와 인스턴스클래스를 만드는 방법클래스 : 속성의 정의클래스 : 메서드의 정의인스턴스를 만드는 방법속성과 메서드의 차이인스턴스에서 속성과 메서드의 사용실전 예제 : 배열실습 : ES5 방식으로 작성된 클래스와 인..

    ES6 주요 문법

    JavaScript의 표준 버전, ECMAScript(ES)JavaScript 역시 표준화 된 버전이 있으며, 이는 Ecma International에서 기술 규격에 따라 정의하고 발표한다. 최신버전은 ES2019지만, ES6에서 가독성과 유지보수성을 획기적으로 향상할 수 있는 문법이 많이 출시 되었다. spread 문법(전개구문) …배열을 풀어서 인자로 전달하거나 각각의 요소로 넣을 때 사용한다.function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; sum(...numbers) // 6rest 문법(나머지 파라미터) …파라미터(매개변수)를 배열의 형태로 받을 수 있다. 파라미터의 갯수가 가변적일 때 유용하다.function sum(..

    what is 𝒕𝒉𝒊𝒔?

    this?JavaScript에서 this 바인딩화살표 함수() =>와 this의 상관관계화살표 함수는 만능이 아니다1. 메서드2. 생성자 함수3. addEventListener()의 콜백 함수this?this는 Object 내에서 해당 객체를 참조하는 키워드로, 보통 클래스를 만들 때 메소드를 호출한 객체를 참조하거나 이벤트 리스너를 호출한 DOM을 지정할 때 많이 사용한다. 전역에서 동작할 때는 전역 객체(window, global)을 참조하며, 함수 내부에서는 함수를 호출하는 방법에 따라 다르게 참조한다.JavaScript에서 this 바인딩Javascript의 this는 다른 언어와 달리 상황에 따라 다르게 바인딩 된다. 앞서 말했듯 전역 공간에서는 전역 객체를 참조하고, 메서드 호출 시 메서드 내..