코딩일상

Q1. Class는 대체로 추상화를 위해 사용됩니다. ES5 자바스크립트에서 Class는 어떻게 동작할까요? class는 동일한 항목들과 동일한 함수들을 가지고 있는 객체들을 생성하기 위해 사용된다. 객체를 만들어내기 위한 도구이다. ES5자바스크립트에서도 이 역할은 마찬가지이다. 그렇다면 객체를 만들어내는 이유는 객체에서 만들어진 인스턴스를 통해서 객체가 가진 메소드를 입맛에 맞게 사용할 수있기 때문이다. 추가로 추상화란 내부구현은 복잡한데 실제 노출되는 부분은 단순하게 보이도록 만든다는 개념이다. 이러한 추상화를 이루기 위해서 Class를 많이 사용되며 내부구현을 감추고 사람들이 필요한 것들만 보이게 만들어 줄수있게 한다. 아래 Class를 통하여 추상화의 개념을 조금 실행해보았다. 게시물 전체를 조..

package.json? package.json이란, 생성한 프로젝트의 메타정보와 이 프로젝트가 의존하고 있는(설치한) 모듈들에 대한 정보들을 json 형태로 모아놓은 파일이다. package.json 파일은 배포한 모듈 정보를 담고자 만들어졌다. pacakge.json 파일은 기본적으로 CommonJS의 명세를 충실히 따르고 있으며 JSON 형식의 파일이다. 직접 작성할 수도 있고 npm init 명령을 통해서 자동으로 생성할 수도 있다. { "name" : "test", "description" : "javascript's test programming.", "keywords" : ["util", "f", "server", "client", "browser"], "author" : "Goorm", "..

데이터의 종류 및 차이점 기본(원시)형 객체가 아닌 데이터 유형을 말한다. 기본형 데이터는 값을 그대로 할당한다. 메모리상에 고정된 크기로 저장되며 원시 데이터 값 자체를 보관하므로, 불변적이다. 기본적으로 같은 데이터는 하나의 메모리를 사용한다.(재사용) Number String Boolean null undefined Symbol(ES6때 추가) 참조형 참조 타입은 변수에 할당할때 값이 아닌 데이터의 주소를 저장한다. 배열(Array) 함수(Function) 정규표현식(RegExp) Map(ES6때 추가) Set(ES6때 추가) WeakMap(ES6때 추가) WeakSet(ES6때 추가) 이러한 차이가 생기는 이유는 메모리 할당 방식 때문이다 자세한사항은 아래 첨부 레퍼런스를 확인바랍니다. 레퍼런스 ..

들어가기전 보면 좋은글 기본형 데이터와 참조형 데이터 JavaScript 객체와 불변성이란? Immutability(변경불가성)는 객체가 생성된 이후 그 상태를 변경할 수 없는 디자인 패턴을 의미한다. Immutability은 함수형 프로그래밍의 핵심 원리이다. 불변 객체를 사용하면 복제나 비교를 위한 조작을 단순화 할 수 있고 성능 개선에도 도움이 된다. 하지만 객체가 변경 가능한 데이터를 많이 가지고 있는 경우 오히려 부적절한 경우가 있다. ES6에서는 불변 데이터 패턴(immutable data pattern)을 쉽게 구현할 수 있는 새로운 기능이 추가되었다. 불변한 값 vs 변경 가능한 값 아래 Javascript의 원시 타입(primitive data type)은 변경 불가능한 값(immutab..

들어가기 앞서 보면 좋은 글 스코프란? 클로저, 변수의 은닉화? 호이스팅이란?? Hoisting은 ”끌어올리다”라는 뜻을 가지고 있습니다. JavaSciprt에서의 Hoisting은 선언되지 않은 함수, 변수(var로 선언된), import구문을 상단으로 끌어올려 사용할 수 있게 하는 방식을 의미합니다. 호이스팅 스코프 내부 어디서든 변수선언은 최상위에 선언된것처럼 행동 호이스팅 예시 1) 변수 console.log(name) // ReferenceError: variable is not defined name이라는 변수를 선언해주지 않았기 때문에 위의 코드는 당연히 참조에러를 발생시킵니다. 위의 코드는 undefined가 출력됩니다. 자바스크립트 엔진은 내부적으로 위의 코드를 다음과 같이 해석합니다. ..

문제 let b = 1; function hi () { const a = 1; let b = 100; b++; console.log(a,b);//1번 } //console.log(a);//4번 console.log(b);//2번 hi(); console.log(b);//3번 1)콘솔에 찍힐 b 값을 예상 2)어디에서 선언된 “b”가 몇번째 라인에서 호출한 console.log에 찍혔는지 3)왜 그런지 설명해보세요. 2)주석(4번)을 풀어보고 오류가 난다면 왜 오류가 나는 지 설명하고 오류를 수정해보세요. 콘솔에 찍힐 b 의 값 1번: 1 101 2번: 1 3번: 1 1번 콘솔의 경우 위 그림과 같이 function 함수 안에 있는 변수를 기준으로 const a =1; let b =100; 에서 정의 된 ..