JavaScript/JS(25)
-
[Javascript] 형변환(1) - 명시적 형변환
Javascript는 동적 타입 언어로 변수의 타입을 미리 선언할 필요가 없다. Javascript는 컴파일 과정 없이 실행과 동시에 해석하는 인터프리터 언어다. 그런 원리에서 코드가 실행되는 과정에서 상황에 따라 값의 타입이 유연하게 바뀔 수 있는 것이다. 명시적 형변환 명시적 형변환은 말 그대로 명시적으로, 즉 의도적으로 형변환을 하는 경우에 해당한다. 명시적 형변환은 주로 String, number, boolean 타입으로 이루어진다. 어떤 값의 타입을 의도적으로 변경해서 사용하겠다는 의미기 때문이다. symbol은 자주 사용되지 않고 null과 undefined는 자료형인 동시에 값이므로 필요한 경우 그 값을 할당하면 된다. 따라서 이 세 종류의 명시적 형변환을 위해 각각 String(), Num..
2021.04.09 -
[Javascript] use strict
Javascript는 꽤 오랫동안 호환성 이슈 없이 발전해 왔다. 기존의 기능을 변경하지 않으면서 새로운 기능들이 추가되었던 것이다. 덕분에 기존에 작성한 코드는 절대 망가지지 않는다는 장점이 있었다. 하지만 Javascript 창시자들이 했던 실수나 불완전한 결정이 언어 안에 그대로 박제되어 있다는 단점도 생길 수밖에 없었다. 이런 상황은 ECMAScript5(ES5)가 등장하기 전까지 지속되었다. 그러나 ES5에서는 새로운 기능이 추가되고 기존 기능 중 일부가 변경되었다. 그리고 기존 기능을 변경하였기 때문에 하위 호환성 문제가 생기게 되었다. 그리하여 변경사항 대부분은 ES5의 기본 모드에선 활성화되지 않도록 설계되었다. 대신 use strict라는 특별한 지시자를 사용해 엄격 모드(strict m..
2021.04.08 -
[Javascript] 자료형
Javascript에서 값은 항상 문자열이나 숫자영 같은 특정한 자료형에 속한다. Javascript의 변수는 자료형에 관계 없이 모든 데이터일 수 있는데, 따라서 아래와 같이 특정 변수는 어떤 순간에는 문자열일 수 있고 또 다른 순간엔 숫자가 될 수도 있는 것이다. // no error let message = "hello"; message = 123456; 위처럼 타입은 있지만 변수에 저장되는 값의 타입은 언제든지 바뀔 수 있으므로 Javascript를 동적 타입 언어라고 한다. 그러므로 변수의 타입을 미리 선언할 필요가 없고, 프로그램이 처리되는 과정에서 자동으로 파악되며 결국 같은 변수임에도 상황에 따라 값의 타입이 바뀔 수 있는 것이다. 1. 숫자형_Number type 숫자형은 정수 및 부동소..
2021.04.08 -
[Javascript] Singleton Pattern(싱글톤 패턴)
Singleton Pattern (싱글톤 패턴)은 클래스 함수의 인스턴스를 한 개로만 유지하는 것을 말한다. 즉 여러 객체가 생성되더라도 최초 생성된 객체만 사용한다. 활용 사례 express 서버를 초기화할 때 환경 설정 파일을 읽거나 aws에서 환경 변수들을 가지고 있는 객체를 만든다고 가정할 때 싱글톤 패턴을 사용하지 않을 경우 서버에 대한 환경 설정을 계속해서 새로 읽거나 업데이트는 불필요한 작업이 일어남 어떤 객체나 데이터에 대해서 단일성 즉, 최초 한 번만 생성됨을 보장하기 위해서 사용하는 패턴이 싱글톤 패턴 캐시는 기존의 데이터가 있는 것에 대해서 새로 생성하지 않고 바로 사용가능한 것인데, 싱글톤 패턴을 사용하지 않을 경우 캐시 모듈이 항상 생성(초기화)되어서 의미가 없다. 'use str..
2020.10.13 -
[Javascript] Reduce
reduce를 사용하여 array를 편집하고 수정할 수 있음 reduce 는 각각의 요소를 첫 번째부터 혹은 특정 인덱스부터 마지막까지 접근할 때 사용 각각의 배열의 요소를 for문을 통해 배열의 요소를 하나 하나씩 접근 하는 것과 동일한 효과를 볼 수 있지만 가독성, 직관성 측면에서 뛰어남 map과 filter로 두 번 해야하는 연산을 reduce를 사용하여 한 번만 사용할 수 있음 예시 소스 'use strict' const numbers = [10, 20, 30, 40]; // 0부터 시작해서 각각의 배열을 순회하며 다음 값들을 한 번씩 더해 줌 // 명시적으로 초기값을 지정하지 않으면 0부터 시작 const sum = numbers.reduce((tot, val) => tot + val) cons..
2020.10.13 -
[Javascript] Static Method
Static Method 특징 클래스의 constructor(생성자)에 접근하지 않고 바로 static method를 실행하기 때문에 클래스를 생성하지 않고 클래스 내부에 바로 접근하여 실행 가능하다. static method만 있는 클래스인 경우엔 constructor 생략이 가능하다 static method에서는 constructor(생성자)에 선언된 변수, 객체 등 어떤 자료도 접근할 수 없다 예시 소스 // static method를 호출할 클래스 선언 class test { // constructor() { // this.config = {} // } static call() { console.log('static method'); } } // const Test = new test();로 생성..
2020.09.23 -
[Javascript] Class, Class Extends
class 특징 파일을 로드할 때마다가 아닌 한 번만 읽고자 할 때 보통 환경 변수 파일에서 많이 사용함 많은 요청이 와도 클래스는 단 한 번만 생성될 수 있다 클래스 생성 예시 class Robot { //생성자, 파라미터로 초기값을 받음 constructor(name) { this.name = name } speak() { console.log(`${this.name}`); } } const r = new Robot('My name is Mr.Robot'); r.speak(); class extend (클래스 확장) extend 사용하여 클래스를 확장 super() 키워드를 통해 상위 클래스의 생성자를 호출할 수 있다. class Ai extends Robot { constructor(name) { ..
2020.09.23 -
[Javascript] Arrow Function(화살표 함수)
Arrow Funcrtion의 특징 자바에서의 람다와 유사한 문법 es6문법 중 가장 많이 쓰이는 문법으로 코드의 가독성을 높여줌 this에 대해서 다른 범위 스코프를 가지고 있어 기존의 함수에서의 this의 불편함을 근본적 해결 return 키워드 생략 가능 일반 함수 문법 function add(var1, var2) { return var1 + var2; } 화살표 함수 문법 //리턴 키워드 생략 가능 const addArrowFunction = (var1, var2) => var1 + var2 console.log(addArrowFunction(1, 2)); 기존 함수에서의 this 사용 일반함수의 경우 this로 받게 된다면 해당하는 범위가 prototype의 this가 아닌 function 내부..
2020.09.22