ordo_92.log

JS의 모듈 생태계

Sun, 18 Oct 2020 16:53:19 GMT

자바스크립트의 코드 확장성을 위해서 모듈화는 필수적이다. Node.js와 같은 런타임 매니징 개념 또한 모듈화 작업때문에 가능하다.

일반적으로 CommonJS, AMD , UMD와 같은 개념들이 있는데, 개인적인 인사이트로는 Common JS가 선두주자인 것 처럼 느껴진다.

타인의 코드를 내 것으로 가져와서 사용할 때는, 불가피하게 변수간의 중복이 있거나, 충돌이 있을 수 있다. AMD, UMD, CommonJS 와 같은 기술은 결국 이러한 문제점을 해결하기 위한 고안의 시도이기도 하다.

지금 이 글에서는 이러한 기술들의 실 사용보다는 개념을 작성하고 싶다.

CommonJS

CommonJS는 노드에서 채택한 방식이다. require 함수로 매개변수를 호출해서, module.export 객체로 그 값을 받아와, 모듈 접근을 한다. CommonJS는 서버사이드에서 수요가 많다. 애초에 서버사이드 작업을 위해 작업되었기 때문이다.

AMD

AMD는 Asynchronous Module Definition의 약자이다, 직역하면 비동기적 모듈 선언 이라는 뜻이다. 그렇기에 AMD에서의 모듈 명세는 이름처럼 비동기 모듈을 표준안으로 삼고 있다.

Define()

AMD 방식의 특징은 define()함수가 있다는 점이다. 브라우저 환경에서 JS는 파일 스코프가 정의되어있지 않으며, 스코프를 제한한다. 이로 인해 지역 변수와 전역 변수의 분리가 가능하다.

사용에서는 코드의 define에 인자 값을 넣은 후, 두 번째 인자에서 콜백 함수 값으로 매개변수를 받는다. 이러한 방식은 비사용과 사용의 차이를 구분지어 관리하기에 접근 관리성에서 유용하다. AMD는 브라우저에서의 사용에서 CommonJS와 사용방식에서의 방향성이 서로 달라 분리되어 나왔다. 브라우저에서의 사용은 AMD의 사용 방식이 많은 것 같다.

Node.js

Wed, 30 Sep 2020 17:37:12 GMT

Node.js는 무엇인가?

Node.js는 웹 브라우저 환경에서만 구동 가능했던 종속적이며, 고립적인 언어의 특성을 브라우저 외의 환경에서 실행 가능하도록 런타임 환경을 조성해준다. 크롬 V8 엔진을 기반으로 다양한 운영체제에서 사용가능하게 해주는 것을 의미한다.

일반적으로 Node.js는 서버사이드 용도의 언어처럼 여겨지기도 하지만, 정확히는 자바스크립트 런타임 환경 그 자체이다. 예를들어 express 프레임워크 통해 서버사이드 통신이 가능하다고 하면 이것은 맞는 말이다.

다시 말해 자바스크립트 환경을 구축해주며, 자바스크립트 언어를 다양한 용도로 사용 가능하게끔 도와준다. 패키지 생태계인 npm은 오픈 소스 라이브러리로써, 서버사이드, 데이터 사이드, 매니징 등 다양한 용도로 시너지를 제공해준다.

생산성에서의 강점

그렇다면 자바스크립트 런타임에서 다양한 파트의 어플리케이션 개발을 진행하면 얻는 장점이 무엇일까?

먼저 동일한 프로그래밍언어와, 환경 제약의 장벽이 크게 사라지기에, 프론트 엔드 개발자의 풀스택 개발이 수월해진다. 프론트엔드 개발에 대한 접근을 하는 자바스크립트 개발자들이 비교적 백엔드 환경에 접근성이 수월하다.

또한 JSON 데이터 표현식을 사용하며, 데이터 관리 표준에 더욱 가깝게 유지할 수 있다는 점이다. DB 용도로 사용하여도, 데이터 처리 일괄과정이 같은 형식이기에 일관성을 갖는다. 또한 이는 코드의 길이를 줄여준다.

난이도가 있는 비동기 프로그램 또한, 사용하기에 Node.js에서는 더욱 용이하다. 콜백함수를 이용한 비동기 처리를 하지 않아도 된다.

단일 쓰레드 모델을 사용하여, 멀티스레드의 이슈인 동기화, 교착상태에 대한 리스크 고착을 제거한다.

DOM Tree

Wed, 30 Sep 2020 08:06:20 GMT

개요

DOM은 Document object model의 준말이며, 문서 객체 모델은 HTML,XML 서식값의 시각 인터페이스화된 구조이다.

DOM은 문서 [ 코드 나열 ]의 BOM [ Browser object model ] 부속 값이며, 브라우저 엔진에 의해 ,프로그래밍 언어가 DOM 구조 자신 자체에 접근 방법을 제공하고, [ 문서 구조, 스타일, 내용 ] 등을 변경할 수 있게 돕는다.

DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다.

쉽게 말해, DOM 개념이 있기에, 페이지를 표현하는 것이 목적이 아닌 자바스크립트로도, 페이지 표현이 가능해진다. 이는 다이나믹하다.


let paragraphs = document.getElementsByTagName("P");

// 스크립트의 제어를 통해 HTML 문서의 P 태그 리스트에 접근 가능하도록 변수 선언

// paragraphs[0] is the first  element
// paragraphs[1] is the second  element, etc.


alert(paragraphs[0].nodeName); // HTML 문서에 작성된 첫 번째 자식값의 태그 네임을 보여줌 

// source from MDN

DOM에 접근하기

1.스크립트 태그를 이용하여 작성하거나, 페이지 로드 스크립트로 초기화 시부터 문서 자체를 조작 가능 2.문서 내의 요소 값들을 직접 얻는 API들을 통해 조작 가능

하단 MDN의 예제를 보면, 자바스크립트를 이용하여 페이지 로드할 때, 'welcome to my home page!'라는 팝업창을 줄 수 있다.



//onload 함수를 통해, 문서를 로드하여 인터랙션 값을 사용자에게 준다

//=> MDN

아래의 자바스크립트는 문서가 로드될 때(모든 DOM을 사용할 수 있게 되는 때임) 실행되는 함수를 정의하였다. 이 함수는 새로운 H1 element 를 생성하고, element 에 text 를 추가하며, H1 을 이 문서의 트리에 추가한다.

Class

Sat, 19 Sep 2020 06:20:31 GMT

자바스크립트에서 객체를 다루는 것은 , 원론적인 객체, 함수 뿐이 아닌 'Class' 역시 존재한다. 자바스크립트에서의 클래스는 ES5와 의미, 문법이 다르며, 프로토타입을 이용해서 만들어졌다.

Class?

MDN : Class는 함수로써 존재한다. 그러므로 표현식과 선언 두 가지를 함께 갖는다.

함수는 선언 및 할당 단계에서 'new'를 붙임으로써, 함수의 역할을 객체의 지칭자로써 그 역할을 다르게끔 해준다.

Class 객체에서는 Constructor가 그 역할과 유사하다. Class로 생성된 객체 내에서 존재하는 특수한 메소드이며, 이 메소드는 클래스당 한 개씩 존재한다. Constructor가 여러개 존재하면 그것은 구문 에러를 발생시킨다. 참고로 Constructor는 '건설자'라는 뜻이다.

선언에서의 특징

함수 선언과 크게 다른 점은 클래스 선언은 호이스팅이 일어나지 않는다. 그렇기에 선언이 된 후 , 재정의 , 호출을 하여야한다.

const p = new Rectangle(); // ReferenceError

class Rectangle {}

// => MDN , 할당이 선언보다 위에있다.

표현식에서의 특징

Class는 그 표현식이 이름을 갖거나, 갖지 않을 수 있다.


// unnamed
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
//output : "Rectangle"


// named
let Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
//output: "Rectangle2"

// => MDN , 무명 클래스를 할당받은 Rectangle 변수를 호출하면, 그 프로퍼티인 name은 그대로 물려받아 Rectangle을 갖는다. 반면 유명 클래스 Rectangle2를 할당받은 변수 Rectangle의 name 프로퍼티를 호출한다면, Rectangle2가 나온다.

Getter,Setter

Class에서는 Getter, Setter를 이용하여, 클래스 내부의 값을 논리적으로 변환하여, 특정 파라미터에 논리를 부여할 수 있다. 또는 값의 형을 새로이 추가할 수 있다.


// test getter and setters

class Person { // named class 선언
  constructor(name, interests, age) {
    //params 표현
    this.name = name;
    this.interests = interests;
    this.age = age;
  }

  get age() {

    // return this.age; ,콜스택 무한반복을 방지하기 위해 변수의 이름을 다르게 설정

    return this._age;
  }
  // get이라는 키워드를 이용해서 값을 리턴 , 따라서 return this.age;
  // getter 정의 순간 . this.age 메모리에 올라가있는 데이터를 읽어오지 않고, getter를 호출



  set age(value) {

    //this.age = value;   , 콜스택 무한반복을 방지하기 위해 변수의 이름을 다르게 설정


    this._age = value < 0 ? 0 : value;
  }
  // set이라는 키워드를 이용해서 값을 설정
  // setter 정의 순간 . 할당되는 age의 메모리 상 데이터값을 가져오지않고, setter를 호출

}

const yeonkor = new Person(`Yeonkor`, `workout`, `-19`);

console.log(yeonkor.age);

//=> 0;

extends를 통한 클래스 상속(sub classing)

extends 키워드는 클래스 선언이나 클래스 표현식에서 다른 클래스의 자식 클래스를 생성하기 위해 사용된다.자식 클래스에 constructor가 있다면, "this"를 사용하기 전에 가장 먼저 super 키워드를 사용하여 부모 클래스의 함수값을 가져온다.


class Ordo { //부모 클래스 생성
  constructor(inyears) {
    this.inyears = inyears; 
  }

  wishes() {
    console.log(`${this.inyears} , i will take it `);
  }
}

class Years extends Ordo { // Ordo클래스의 자식 클래스 Years 생성 

  constructor(inyears) { 
    super(inyears); // Super를 통해 부모 클래스의 파라미터를 받아옴, inyears 파라미터를 통해, 부모 클래스의 생성자 호출 
  }

  wishes() {
    console.log(` in ${this.inyears}, years who makes results is Yeonkor`);
  }
}

let y = new Years(5);

// 부모 클래스의 constructor에 할당된 this.inyears가 자식 클래스로 그대로 전달

y.wishes();

// => in 5, years who makes results is Yeonkor

객체 (Object)

Thu, 17 Sep 2020 16:23:42 GMT

객체와 객체 리터럴

객체는 유사의 데이터와 함수의 단일 또는 집합 모음이다. 데이터들 과 함수 중 객체에 속해 있는 것을, 각각 프로퍼티와 메소드라고 지칭한다. 아래에서 더욱 자세한 풀이가 나온다.


let objTest = {}; // 새로운 객체 선언

objTest = { // 객체 값을 새로이 할당
  name: `yeonkor`,
  age: 28,
  sex: `male`,
  interests: [`learning new`, `workout`],
  profile: function () {
    console.log(`${this.name} is ${this.age} years old `);
  }, // 템플릿 리터럴 사용 , 프로퍼티의 값으로 함수를 할당
  greeting: function () {
    console.log(`Hi ! I,m ${this.name} .`);
  },
};

객체는 Key, Value라는 쌍의 값으로 이루어져있다. 객체 안에서 갖게되는 변수들을 Key , 즉 프로퍼티라고 부르며 여기에 담기는 값들은 어떠한 값도 될 수 있다. 상단의 예제에서는, 문자열, 숫자, 배열, 함수들이 그 값으로 담겨 있다. 심지어 객체의 값으로 또 다른 객체를 담을 수도 있다. 객체의 값으로 함수를 갖게 될 때, 우리는 그것을 메소드로 지칭한다.

Object : { 
  A /* key 값 */ : 'A value', 
  B /* key 값 */ : function(){ 
        alert(`B value`); // 값이 함수일경우 메소드
}

 //  => 이러한 객체를 객체 리터럴이라고 부른다.

점 표기법

객체의 내부는 캡슐화 되어있다. 우리는 이에 접근하려면 점 표기법을 이용해 접근한다. 그 후 접근항목을 기입한다. 그 종류는 어떠한 것이든 가능하다.


objTest.name;
objTest.age;
objTest.sex;
objTest.greeting;

괄호 표기법

프로퍼티에 접근법으로, 점 표기가 아닌 괄호 표기도 존재한다.

// 점 표기법
objTest.name
objTest.interests[1]
objTest.prifle

// 괄호 표기법
objTest[`name`]
objTest[`interests[1]`]
objTest[`profile`]

// => 둘은 같은 값을 갖는다.

객체 멤버 설정

또한 객체의 값을 새로 설정(갱신 또는 할당의 의미)또한 가능하다.

objTest[`name`] = `yeonkorKim`  // name 설정
objTest[`interests[1]`] = `prototyping` // interests의 2번째 인덱스 설정
objTest[`profile`] = function(){ 
  console.log(`ERROR!!`); // 로그 값 설정
}

'this'

this 키워드는 지금 동작하고 있는 코드를 가지고 있는 객체를 가리킨다. 위의 예제에서 this 는 objTest 객체와 동일하다. this는 모 객체의 인자 값이 달라지는 새로운 초기화에서도, 지칭되는 그 값이 정확하게끔 도와준다.


  profile: function () {
    console.log(`${this.name} is ${this.age} years old `);
  }, //  objTest의 메소드인 profile에서 사용되고 있는 this는 원 객체인 objTest와 동일하다.
  greeting: function () {
    console.log(`Hi ! I,m ${this.name} .`); // greeting 메소드 또한, objTest에서 속해서 실행되므로 this는 objTest이다.
  },
};

호이스팅 (Hoisting)

Tue, 15 Sep 2020 15:09:24 GMT

Reference => ** gmlwjd9405 - github 참조 //

개념

호이스팅이란 일반적으로, var 변수와 함수선언문에서 선언 자체가, 코드의 최상단으로 위치하는 것으로 생각되지만, 좀더 명확하게 말해서, 유효한 블록 스코프내의 할당이 아닌 선언 그 자체만을 최상위로 이끌어 올린 후 필요할 때마다 사용하는 것을 말한다.

*1. 코드의 가독성과 유지보수를 위해 호이스팅이 일어나지 않도록 한다. *2. 호이스팅을 제대로 모르더라도 함수와 변수를 가급적 코드 상단부에서 선언하면, 호이스팅으로 인한 스코프 꼬임 현상은 방지할 수 있다. 3. let/const를 사용한다.

호이스팅의 대상


=> var 변수 선언, 함수선언문
=> 할당이, 아닌 선언 자체만 끌어올려짐
=> let /const 변수 선언, 함수표현식은 호이스팅 발생 X // 블록 스코프가 명확하기 때문


 console.log("martion");

  var thanks = "github"; // var 변수 
  let fastfive = "tommorow"; // let 변수 

/** --- JS Parser 내부의 호이스팅(Hoisting)의 결과 - 위와 동일 --- */

  var thanks; // 실질적으로 변수 thanks가 선언이 끌어올려짐

console.log("martion");
  thanks = "github"; // "할당" , 선언은 맨 처음에 이루어짐
  let fastfive = "tommorow"; // [Hoisting] 발생 X

hoist(); // 함수 호출
gravity(); // 함수 호출 

function hoist(){
   console.log("done");
}  // 함수 선언문


var grafity = function(){
     console.log("you can't hoist");
 } // 함수 표현식

=> 결과값 , hoist() : "done"  / grafity() : Error 


// 렌더 과정 풀이

var grafity; // 함수의 변수값 선언이 호이스팅됨

function hoist(){
   console.log("done");
}  // 함수 선언문자체가 호이스팅됨

hosit(); // "done" 출력
grafvity(); // Error

grafity = function(){
     console.log("you can't hoist");
 } // 함수 값 할당

 => 결과적으로 위 값과 동일하다

호이스팅의 우선순위

변수 선언은, 함수선언보다 높이 이끌어진다, 기본적으로 렌더 순서를 확인한다면, *변수 선언 -> 함수 선언 -> 변수 할당 *순으로 확인한다.


// 나열 전

var target1 = "boy";

function target1() {
  console.log("girl");
}

function target2() {
  console.log("baby");
}

var target2 = "position";

console.log(target1); //expected => "boy"
console.log(target2); //expected => "position"

// 순서 나열 후

var target1 // 선언 및 할당된 것을 분리해서 선언만 가져옴
var target2 // 선언 및 할당된 것을 분리해서 선언만 가져옴

function target1() {
  console.log("girl");
              }  // 함수 선언문 호이스팅

function target2() {
  console.log("baby");
              } // // 함수 선언문 호이스팅


target1 = "boy"; //  값 할당
target2 = "position"; // 값 할당

console.log(target1); //expected => "boy"
console.log(target2); //expected => "position"

startsWith , endsWith, includes

Mon, 14 Sep 2020 17:06:06 GMT

String 기반 메소드들로써, 문자열 값을 판단하여 , 정렬 후 불러올때 용이하다. 불리언 값을 반환한다.

1.startWith()

startsWith() 메소드는 어떤 문자열이** 특정 문자로 시작하는지** 확인하여 결과를 true 혹은 false로 반환한다.

*구문 : * str.startsWith(searchString[, position])


//  startsWith

let wolves = `where can i watch the raised by wolves?`; // length : 39

console.log(wolves.startsWith('where can i'));  // true
console.log(wolves.startsWith('by'));     // false
console.log(wolves.startsWith('watch', 12)); // true , 공백도 간격으로 카운트 해야한다.

2.endsWith()

The endsWith() 메서드를 사용하여 어떤 문자열에서** 특정 문자열로 끝나는지를** 확인할 수 있으며, 그 결과를 true 혹은 false로 반환한다.

*구문 : * str.endsWith(searchString[, length])


//  endsWith

let wolves = `where can i watch the raised by wolves?`; // length : 39

console.log(wolves.endsWith('wolves?'));  // true
console.log(wolves.endsWith('i'));     // false
console.log(wolves.endsWith('raised', 28)); // true , raised의 끝나는 자릿수

3.includes()

includes() 메서드는 하나의 문자열이 다른 문자열에 포함되어 있는지를 판별하고, 결과를 true 또는 false 로 반환한다.

구문 : str.includes(searchString[, position])


//  includes

let wolves = `where can i watch the raised by wolves?`; // length : 39

var str = 'To be, or not to be, that is the question.';

console.log(wolves.includes('i watch the'));       // true
console.log(wolves.includes('wolves?'));    // true
console.log(wolves.includes('where Can i')); // false , 메소드가 대소문자를 구분함
console.log(wolves.includes('watch the', 1));    // false , 시작점이 맞지 않음
console.log(wolves.includes('By'));       // false , 대소문자 구분

ES6의 템플릿 리터럴

Mon, 14 Sep 2020 16:25:35 GMT

자바스크립트가 ES6로 넘어오며, '템플릿 리터럴'이라는 내장 표현식을 허용하는, 새로운 문자열 표기법을 도입하였다.

템플릿 리터럴은 일반 문자열과 비슷해 보이지만, ‘(Quotes) 또는 “pair Quotes" 같은 문자 대신 ` 그레이브 액센트 (grave accent)라는 문자를 사용한다. 이는 코드 작성환경에서 바라보는 코드 입력값의 형태와, 실제 렌더 적용되어지는 그 결과 값을 최대한 시각적으로 같게끔 도와준다.(이전 버전보다 상대적으로)


구문  : 
`string text` // 백틱으로 시작해서 백틱으로 닫기

`string text line 1
 string text line 2`  // 템플릿 리터럴로 시작으로 코드작성을 한다면, 동일하게 줄바꿈이 마크업에서 적용된다.

`string text ${expression} string text` // 템플릿 리터럴내에서는 ${variable..}(중괄호)로 변수를 표기할 수 있으며, 내부 자체적으로 값을 지닌다. (String Interpolation , 문자열 인터폴레이션 , 이 값은 문자열로 변환된다.)

tag `string text ${expression} string text` // 태그 함수를 이용하여, 템플릿 리터럴의 논리값을 파싱해올 수 있다. 여기선 다루지 않겠다.

템플릿 리터럴이 아닌경우, 공백을 표현하거나 (\ , 이스케이프 시퀀서 ) ,줄바꿈을 표현하는 경우 (\n)의 방식과 개념이 다르다. 앞서 말한것처럼 직관적인 코드 에딧 환경과 렌더 작업물에서의 값을 최대한 닮아있는 형태이다. 따라서 줄바꿈을 템플릿 리터럴 내부에서 진행할 경우, 멀티라인으로 코드를 작성해주면 된다.

console.log("World war 1\n"+
"World war 2");

=>

 `World war 1
  World war 2`


const compLists = `
  1
  2
  3
  4
`; 

// 직관적인 마크업 제공

console.log(compLists);

변수의 형 변환

Mon, 14 Sep 2020 04:18:06 GMT

자바스크립트는 다른 언어들과 달리 변수의 타입을 따로 지정하지 않는다. 그렇기에 변수에 어떤 값이 담기냐에 따라 그 타입을 인지해줄뿐이다. (물론 이를 보완한 타입스크립트가 추후에 등장한다.) 그러나 자바스크립트에선, 일반적인 변수 선언을 해준 뒤, 별도의 방법으로 형 변환을 진행해주면된다.

문자형 -> 숫자형

let polygons = parseInt("12"); // 문자를 정수형으로 변환
let demisoda = parseFloat("124.00"); // 문자를 실수형으로 변환
let avant = Number("133"); // 문자를 정수&실수형으로 변환

let onfire = "chuck12"
let dunkirk = "chuck1.2"

let a = parseInt(onfire); // NaN , 출력시 숫자값만을 담고 있지않은 문자열은 숫자로 변환될 수 없음
let b = parseInt(dunkirk); // NaN , 위와 동일
let c = parseFloat(onfire); // NaN , 위와 동일
let d = parseFloat(dunkirk); // NaN , 위와 동일
let e = Number(onfire); // NaN , 위와 동일
let f = Number(dunkirk); // NaN , 위와 동일

숫자형 -> 문자형

let goyard = String(21); // "21" 
let tenet = 442.toString(); // "442"
let wakizaka = 123.toString(2); //  "1111011" , 2진법 변환
let sussex = 123.toString(16); // "7b" , 16진법 변환
let belfast = 123.0.toFixed(1); // 123.0  // 실수형 데이터의 부동소수점 지정 , 1번째까지
let wales = 123.0.toFixed(2); // 123.00

reduce,map,filter

Sun, 13 Sep 2020 17:24:27 GMT

Reduce,map,filter는 배열 기반 메소드들로써, 그 사용 빈도가 빈번하고, 필수적인 이해도와, 숙련도가 요구되어진다.

1.reduce()

reduce() 메소드는 배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수와 초기값으로 메소드를 실행하고, 하나의 결과값을 반환한다.

*구문 : *arr.reduce(callback[, initialValue]) //리듀서 함수인 콜백함수는 4개의 파라미터로 이루어져있다. -> 누산기accumulator (acc) 현재 값 (cur) 현재 인덱스 (idx) 원본 배열 (src)

let olymicRank = [
  { country: "England", rank: 5 },

  { country: "USA", rank: 1 },

  { country: "Russia", rank: 2 },

  { country: "Republic of Korea", rank: 6 },
]; // 배열 정의

let totalPoint = olymicRank.reduce(function (acc, value) { //주로 누산기 , 현재값만을 파라미터로 넣어준다.
  console.log(acc);
  return acc + value.country;
}, 0); // 마지막에 초기값을 넣어준다.

console.log(totalPoint);

/*
//순서대로 누산값 출력

0
5
6
8
14 <-- totalPoint 값

*/

2.map()

map() 메소드는 배열 내의 모든 요소 각각에 대하여 정한 논리값을 적용시킨 후 새로운 배열에 그 값을 반환한다.

구문 :arr.map(callback(currentValue[, index[, array]])[, thisArg])

let historyMine = [
  { age: 1, location: "서대문구 남가좌동" },

  { age: 4, location: "양천구 신길동" },

  { age: 5, location: "안양시 인덕원" },

  { age: 7, location: "남동구 간석동" },

  { age: 10, location: "성북구 안암동" },

  { age: 12, location: "종로구 혜화동" },
]; // 배열 정의

let sumMine = historyMine.map(function (move) { // 배열의 요소 값을 참조할 수 있는 move 매개변수 생성
  return move.age + 12 + ", " + move.location; // 각각의 인자 값에 12를 더한 후, 지명과 함께 새 배열 submine에 담는다.
});

console.log(sumMine); // map() 메소드로 새로 담긴 subMine 배열

// =>(6) ["13, 서대문구 남가좌동", "16, 양천구 신길동", "17, 안양시 인덕원", "19, 남동구 간석동", "22, 성북구 안암동", "24, 종로구 혜화동"]

3.filter()

filter() 메소드는 피함수에게 주어진 조건을 만족시키는 요소들만을 찾아, 새로이 그 값들만을 담아주는 배열을 생성케합니다.

구문 : arr.filter(callback(element[, index[, array]])[, thisArg])

let arabics = [1, 23, 25, 45, 31, 22, 48, 85, 66, 12, 57, 9, 5, 47, 16, 77];

// 1이상 100미만의 임의의 요소 배열인 arabics 정의

let numbers = arabics.filter((num) => 19 < num && num < 55);

// 19이상이며 55이하인 값들만을 담아주는 numbers 배열 생성

console.log(numbers);

// =>(7) [23, 25, 45, 31, 22, 48, 47]

값의 여러 결합 형태 및 방식

Sun, 13 Sep 2020 14:39:43 GMT

자바스크립트에서 문자열,숫자,공백문자 또는 undefined,NaN과 같은 특수한 미명시된 값들은 서로 간의 타입이 달라도 결합이 가능하며, 그 규율은 이미 정해져있다



let str = "Port" + "Baby" // + 연산자를 통한 문자열간의 조합 , console.log(str) => PortBaby

let porche = "Suddenly, "
let venz = porche + "He came out" // console.log(venz) => "Suddenly, He came out"

let demiglass = "i guess we visit the Mars in about " + 2 + 0 + " years" // console.log(demiglass) => "i guess we visit the Mars in about 20 years"
// 2 + 0이 2가 아닌 20으로 출력이되었다. 결합을 문자열 간의 결합과 같은 맥락으로 붙인 후 숫자형으로 출력한다.

let dona = 1 + 2 // consoe.log(dona) => 3 , 숫자열만이 존재하고 , 그 간의 결합은 일반적인 사칙연산이 적용된다.

let avant;
var garde = '';

console.log('why' + avant); // => whyundefined , 값이 담기지 않은 선언만 된 변수는 그 값이 undefined
console.log('do not' + garde); // => do not


let dan ; 
let blindside = '';

console.log(12 + dan); // => NaN 
console.log(12 + blindside); // 12 , 공백값과의 결합은 무난히 숫자로 출력된다.

join() 메소드를 이용하면, 각 배열의 값을 하나의 문자열로 결합할 수 있다.

let defaultArray = ['The ', 'queen ', 'save ', 'us '];
let kingdom = defaultArray.join('');

console.log(kingdom);

연산자

Fri, 11 Sep 2020 17:58:01 GMT

1. 산술 연산자

산술 연산자는 숫자를 먼저 , 피연산자로 받은 후 그 값에 따른, 하나의 숫자 값을 반환한다.

덧셈 ( + )


// Number + Number -> 합
1 + 2 // 3

// Boolean + Number -> 합
true + 1 // 2

// Boolean + Boolean -> 합 
false + false // 0 , false는 0 의 값을 갖는다.

// Number + String -> 연결
5 + "foo" // "5foo" , 문자와 숫자의 결합은, 숫자를 문자열로 바꾼다.

// String + Boolean -> 연결
"foo" + false // "foofalse" , 문자열과의 만남은 불리언타입 역시 문자열로 변환된다.

// String + String -> 연결
"foo" + "bar" // "foobar"

//

뺄셈 ( - )


5 - 3 // 2
3 - 5 // -2 
"foo" - 3 // NaN , 덧셈과 다르게 다른 타입끼리의 감산 연산은 그 결과가 NaN이 출력된다.
true - 3 // -2 , 불리언타입의 연산은 가능하다.

나눗셈 ( / )


1 / 2      // JavaScript에선 0.5 
// (양쪽 피연산자 모두 명시적인 부동소수점 숫자가 아님)

1.0 / 2.0  //   0.5 -> 정확한 값 산출을 위해선 명확한 부동소숫점을 쓰도록 버릇들이는게 좋을 것 같다.

2.0 / 0    // JavaScript에서 Infinity
2.0 / 0.0  // 동일하게 Infinity
2.0 / -0.0 // JavaScript에서 -Infinity

곱셈 ( * )

2 * 2 // 4
-2 * 2 // -4
Infinity * 0 // NaN 
Infinity * Infinity // Infinity
"foo" * 2 // NaN , 문자열과 숫자의 처리 결과값

나머지 ( % )


12 % 5 // 2 
-1 % 2 // -1
NaN % 2 // NaN
1 % 2 // 1
2 % 3 // 2
-4 % 2 // -0 , 음의 0값이다. 이 부분이 독특하다.
5.5 % 2 // 1.5

거듭제곱 ( ** )

좌항 피연산자를 밑, 우항 피연산자를 지수로 값을 생성한다. 연산자는 우결합성을 가집니다.

2 ** 3 // 8
3 ** 2 // 9
3 ** 2.5 // 15.588457268119896
10 ** -1 // 0.1
NaN ** 2 // NaN

2 ** 3 ** 2 // 512
2 ** (3 ** 2) // 512
(2 ** 3) ** 2 // 64

2. 증가 연산자(++)

단항 연산자이며 피연산자값에 1을 더합니다. 만약 연산자를 피연산자 앞(++x)에 사용하면, 피연산자에 1을 더한 값을 반환합니다. 만약 연산자를 피연산자 뒤(x++)에 사용하면, 피연산자에 1을 더하기 전 값을 반환합니다.


// 접미사 

let suffix = 31;
plusfix = suffix++; // plusfix = 31, suffix = 32

// 접두사

let prefix = 45;
adfix = ++prefix; // prefix = 46 , adfix = 46

3. 감소 연산자(--)

단항 연산자입니다. 피연산자로 부터 1을 뺍니다. 반환값은 증가 연산자와 유사합니다.


// 접미사 

let suffix = 12;
minusfix = suffix--; // minusfix = 12, suffix = 11

// 접두사

let prefix = 34;
delfix = --prefix; // delfix = 33, prefix = 33

4. 복합 대입 연산자

연산과 대입이 복합적으로 이루어지는 연산자입니다.

두 줄이상의 코드를 깔끔하게 정리할 수 있으며, 일반적인 수학에서의 사칙 연산과 그 연산자의 의미가 프로그래밍에서는 이 연산자부터 본격적으로 다르다는 것을 느꼈습니다.

종류에는* '+=', '-=', '=', '/=', '%='**가 있습니다.

A = 14;
B = 12;

// 실제 코드처리는 동기적으로 나열하지 않고, 일회씩 처리하여 결과를 옮겨왔습니다.

result1 = A += B; // A = 26 , A = A + B
result2 = A -= B; // A = 2  , A = A - B
result3 = A *= B; // A = 168  , A = A * B
result4 = A /= B; // A = 1.1666666666666667 , A = A / B
result5 = A %= B; // A = 2 ,  A = A % B

5. 비교 연산자

JS는 엄격비교, 형변환 비교를 따른다. 엄격 비교 (===)는 피연산자들끼리 같은 자료형과 내용이 일치해야 참이다. 추상비교 (==)는 두 피연산자를 같은 자료형으로 일치시킨 후 , 내용을 비교한다.

문자열 ->

같은 문자 시퀀스, 같은 길이,같은 위치에 같은 문자라면 일치한다.

숫자 ->

같은 숫자 값이면 일치한다. NaN은 자기 자신을 포함한 그 무엇과도 동등하지 않습니다. +0과 -0은 서로 일치한다.

불리언 ->

두 피연산자의 값이 true거나 false이면 일치한다.

객체 ->

객체가 서로 다르다면 ( key,value ) , 그 객체는 동일하지 않다.

Null & undifined ->

null과 undefined는 스스로와 일치하고, 동등하다.

6. 논리 연산자

논리 연산자는 불리언 타입의 값 [ 논리의 참,거짓 ]을 반환한다. 하지만 예외로, &&과 [논리 AND ] || [논리 OR ] 연산자는 피연산자의 한 가지 값을 반환한다. 그러므로 불리언 외의 다른 값과 함께 사용하면 불리언 값이 아닌 것을 반환할 수 있다.

논리 AND (&&)

a1 = true  && true       // t && t returns true
a2 = true  && false      // t && f returns false
a3 = false && true       // f && t returns false
a4 = false && (3 == 4)   // f && f returns false
a5 = 'Cat' && 'Dog'      // t && t returns "Dog" , 'string' 값은 true이다.
a6 = false && 'Cat'      // f && t returns false
a7 = 'Cat' && false      // t && f returns false
a8 = ''    && false      // f && f returns "" , ''는 false 값이다.
a9 = false && ''         // f && f returns false

논리 OR (||)

o1 = true  || true       // t || t returns true
o2 = false || true       // f || t returns true
o3 = true  || false      // t || f returns true
o4 = false || (3 == 4)   // f || f returns false
o5 = 'Cat' || 'Dog'      // t || t returns "Cat"
o6 = false || 'Cat'      // f || t returns "Cat"
o7 = 'Cat' || false      // t || f returns "Cat"
o8 = ''    || false      // f || f returns false
o9 = false || ''         // f || f returns ""
o10 = false || varObject // f || object returns varObject

논리 NOT (!)

n1 = !true               // !t returns false
n2 = !false              // !f returns true
n3 = !''                 // !f returns true
n4 = !'Cat'              // !t returns false

7. 연산자 우선순위

연산자를 실행하는 순서이다. 우선순위가 높은 연산자가 먼저 실행됩니다. 각 연산자마다 고유한 우선순위가 있으며, 다항 연산에, 동일한 우선순위의 연산자가 두 종류 존재할 경우, 연산자의 결합성에 따라 우선순위가 달라진다.

우선순위 표 참조 : 연산자 우선순위 - MDN

수형 표현 (Math expression) - JS

Thu, 10 Sep 2020 11:31:36 GMT

1.타입

자바스크립트는 수에 대해서 관용적인 언어이다.

수를 선언할 때, 타입을 따로 선언하지 않으며, Number라는 타입 하나로 정리되며, 모든 수는 동일한 방식으로 처리되며, 선언에 담기는 값에따라 자바스크립트 엔진은 그 타입을 인지할 뿐이다.

이는 자바스크립트가 갖는 장점이 될 수도 있다고 생각한다.

메모리에 IEEE - 754 형식을 이용해서 저장한다.이 형식에 의해 - (2⁵³ - 1) 부터 2⁵³ - 1 까지는 정확히 IEEE - 754 로 표현될 수 있지만, 그 초과와 이하 는 IEEE - 754 로 직접 표현될 수 없으며 가까운 수나 0 으로 반올림 한다.

JS는 모든 숫자값을 64 비트 부동소수점으로 관리한다.java에서 integer, float 등으로 정수와 실수 타입을 구분하던것과는 달리 모든 숫자를 double 타입으로 저장하는것과 같다.

결론적으로 자바스크립트는 내부적으로 명확히는 정수형이 없고 실수형으로 엄격히 존재한다.

2.수의 표현

*정수(Integers): 자연수, 음의 정수 및 0으로 이루어진 모든 수들이다.

*부동소수점 방식(floats): [ 14.2 ] , [ 1.212121312 ]와 같이 소수점,소수 자릿수가 존재한다. Javascript 에서 소수를 정의하기 위해서는. 소숫점이 수 안에 존재하면 소수로 인식된다. 소수점이 없다면 이는 간략히 정수로 표현된다. [ 자바스크립트 엔진이 참 능동적이다 ]

소수는 정수를 포함한 32 비트 까지 표현이 가능하다. 그 이상은 반올림 처리된다.Javascript 에서 소수 연산은 정확하지 않다.다른 여러 방법으로 소수 연산을 처리하고 있다.

=> console.log(0.1 + 0.2); // 0.30000000000000004

var a = Number.MAX_SAFE_INTEGER || 9007199254740991;
var b = a + 1
console.log(Number.isSafeInteger(a));
// true;
console.log(Number.isSafeInteger(b));
// false


var c = 18437736874454810627;
console.log(c);
// 18437736874454810000

10진수 -> 16진수 

var dec = 123;
var hex = dec.toString(16); // === "7b"

* 10진수 -> 2진수

var dec = 123;
var bin = dec.toString(2); // === "1111011"


* 16진수 -> 10진수

var hex = "7b";
var dec = parseInt(hex, 16); // === "123"

* 16진수 -> 2진수 (* 10진수로 바꿨다가 다시 2진수로 바꾼다)

var hex = "7b";
var bin = parseInt(hex, 16).toString(2); // === "1111011"


* 2진수 -> 10진수

var bin = "1111011";
var dec = parseInt(bin, 2); // === "123"

* 2진수 -> 16진수 (* 10진수로 바꿨다가 다시 2진수로 바꾼다)

var bin = "1111011";
var hex = parseInt(bin, 2).toString(16); // === "7b"

출처: https://unikys.tistory.com/334 [All-round programmer]

3.특수 표기

*지수표기법

너무 큰 숫자는 exponent 표기법을 사용하여 표현할 수 있다. 이때 e 는 대소문자를 가리지 않는다. e 앞의 숫자를 뒤에 있는 숫자 만큼 10 으로 곱한다. 앞의 숫자를 소수로 작성 할 수도 있다. 소수는 e 뒤에 - 를 붙힘으로 표현할 수 있다.

console.log(1.123E+5);
// 112300
console.log(1.123e-5);
// 0.00001123

console.log(1e20);
// 100000000000000000000

console.log(1e21);
// 1e+21

console.log(1e308);
// 1e+308

console.log(1e309);
// Infinity

*무한대 (Infinity)

Javascript 에서는 모든 숫자를 표현할 수 없다.때문에 표현할 수 있는 범위를 넘어가면, Infinity 로 표현한다. Number.MAX_VALUE 와 Number.MIN_VALUE 으로 범위를 알 수 있다. Number.POSITIVE_INFINITY 와 Number.NEGATIVE_INFINITY 으로 무한대 값을 가져올 수 있다.

console.log(Number.MAX_VALUE);
// 1.7976931348623157e+308

console.log(Number.MIN_VALUE);
// 5e-324

console.log(Infinity);
console.log(Number.POSITIVE_INFINITY);
// Infinity

console.log(-Infinity);
console.log(Number.NEGATIVE_INFINITY);
// -Infinity

Function, return type과, void의 유무에 대하여

Wed, 09 Sep 2020 17:18:11 GMT

일반적으로, 함수는 함수 외부의 경우엔 코드에 의해 호출될 수 있는 하위의 논리 구조(프로그램)이다.

[1] Return Type

프로그램 그 자체처럼, 함수는 일련의 구문으로 구성되어있다. 값은 함수에 전달될 수 있고 함수는 값을 반환하는 것이 기본이다. 그래서인지 함수는 값 그 자체이다.

function numberSum(a,b)

{ 
   return a+b;
}


console.log(numberSum(3,3)); //numberSum(3,3) 은 6으로 출력된다.

JavaScript에서 모든 함수는 'Function'객체다. 논리구조를 지니는 일반적인 함수도, 재귀함수도, 내부함수도, 생성자 역시 마찬가지다.

new 키워드로 호출되는 생성자의 경우에, 기본값은 자신의 this 매개변수 값인 것이 특징이다. ( = 생성자의 경우 ! )

기본값 이외의 값을 반환하려면, 함수는 반환할 값을 지정하는 특정 명시의 return 문이 있어야한다. return 문이 없는 함수는 기본값을 반환한다.

다른 모든 함수의 경우, 기본 반환값은 undefined이다. 함수 호출의 매개변수는 함수의 인수이며, 인수는 함수에 값으로 전달된다. 함수가 인수값을 바꾸면, 이 변화는 전역 또는 호출한 함수에 반영되지 않는다.

function A(){

   this.value = 34;
   console.log(this.value);
   // return 생략

}

A(); // 함수호출시 자동으로 value 34가 출력



function B(){

   return;
   // return 생략

}


B(); // Undefined ;

[2] Void

void는 값을 생성하는 표현식을 평가해서 undefined를 반환한다.

/피연산자가 숫자
console.log(void 92); // => undefined  

//피연산자가 문자열
console.log(void "CTO가 되는 중"); // => undefined

var x = 32;
void x++; // 피연산자 선 평가 후 변수의 값이 증가
console.log(x); // => 33
console.log(void(x)); // => undefined

오직 undefined 원시값을 얻기 위해 void 0 또는 void(0)처럼 사용하는 경우도 볼 수 있다. 이런 경우 전역 undefined를 대신 사용 가능하다.

void 연산자의 우선순위도 유념해야한다. 그룹 연산자(괄호)를 사용하면 void 연산자를 사용한 식의 평가 과정을 더 명확하게 보일 수 있다.


 void 14 == '14'; // undefined == '14', false
void (33 == '33'); // void true, undefined

즉시 실행 함수 표현식(IIFE)을 사용할 때 void를 사용하면 function 키워드를 선언문이 아니라 표현식처럼 간주하도록 강제할 수 있다.

void function iife() {
    var bar = function () {};
    var baz = function () {};
    var foo = function () {
        bar();
        baz();
     };
    var biz = function () {};

    foo();
    biz();
}();

Let, Const 선언의 차이

Wed, 09 Sep 2020 16:36:14 GMT

Let과 const는 자바스크립트에서 등장한 기존의 var 변수 선언을 대체할 수 있는 종류들로써, ES6에서 새로이 등장한 선언 가능한 변수들이다.

[1] let

구문은 블록 유효 범위를 갖는 지역 변수를 선언 하며, 선언과 동시에 임의의 값으로 초기화할 수도 있다.

let은 전역 객체의 속성 값을 생성하지 않는다. let 으로 선언된 변수는 변수가 선언된 블록 내에서만 유효하며, 당연하지만 하위 블록에서도 유효하다. 추가로 프로그램이나 함수의 최상위에서는 let과 var은 서로 다르게 행동한다. 따라서 아래 코드에서 this의 속성값으로 testVar와 testLet을 호출했을때의 결과는 다음과 같을 것 이다.

var testVar = 'global'; 
let testLet = 'global';

console.log(this.testVar); //"global" 전역 객체의 속성 x를 생성
console.log(this.testLet);// undefined 전역 객체의 속성 y를 생성하지 않음

상위 스코프에서 하위 스코프로의 변수로써 유효함을 갖는다는 것은 let 과 var가 갖는 유사점이지만, var는 함수 블록 이외의 블록은 무시하고 선언된다는 점이 다르다.

따라서 let은 속한 블럭에 따라 그 유효범위가 명확히 구분지어지기 때문에 [1] 유동성을 갖어야 하거나, [2] 스코프에 따른 변수의 의미를 명확히 구분짓기 위해선 let을 사용하는 것이 더 좋을 것 같다.

function varTest() {
  var x = 1;
  if (true) {
    var x = 2;  // 상위 블록과 같은 변수!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

function letTest() {
  let x = 1;
  if (true) {
    let x = 2;  // 상위 블록과 다른 변수
    console.log(x);  // 2
  }
  console.log(x);  // 1
}

function vartest()

[2] Const

const 선언은 블록 범위의 상수 를 선언한다. 상수는 let 문을 사용하여 정의된 변수와 마찬가지로 블록 범위(block-scope)의 데이터 타입이다. 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없는 것이 가장 큰 특징이다.

const number = 42;

try {
  number = 99;
} catch (err) {
  console.log(err);
  // expected output: TypeError: invalid assignment to const `number'
  // Note - error messages will vary depending on browser
}

console.log(number);
// expected output: 42