YUN BLOG

정규식 메서드

위의 정규표현식을 가지고 이메일이나 전화번호 매칭 필터링을 하기위해선 자바스크립트 정규식 메서드를 이용하여 패턴을 검사하고, 매칭되는 문자열을 추출, 변환한다.

// 정규표현식을 담은 변수
const regex = /apple/; // apple 이라는 단어가 있는지 필터링

// "문자열"이 "정규표현식"과 매칭되면 true, 아니면 false반환
regex.test("Hello banana and apple hahahaha"); // true

// "문자열"에서 "정규표현식"에 매칭되는 항목들을 배열로 반환
const txt = "Hello banana and apple hahahaha";
txt.match(regex); // ['apple']

// "정규표현식"에 매칭되는 항목을 "대체문자열"로 변환
txt.replace(regex, "watermelon"); // 'Hello banana and watermelon hahahaha'Copy

정규표현식 샘플 코드

정규식 실무 예제

아이디 사용 검사

• 알파벳 대소문자 또는 숫자로 시작하고 끝나며 4 ~10자리인지 검사

const id = 'abc123';

// 알파벳 대소문자 또는 숫자로 시작하고 끝나며 4 ~10자리인지 검사
// {4,10}: 4 ~ 10자리
const regexr = /^[A-Za-z0-9]{4,10}$/;Copy

핸드폰 번호 형식

const cellphone = '010-1234-5678';

const regexr = /^\d{3}-\d{3,4}-\d{4}$/;Copy

​

웹사이트 주소 형식

• http:// 나 https://로 시작하고, 알파벳, 어더스코어(_), 하이픈(-), dot(.)으로 이루어져 있는 정규식

const text = 
`http://dogumaster.com http://google.com 010-1111-2222 02-333-7777 curryyou@aaa.com`; 

text.match(/https?:\/\/[\w\-\.]+/g); // ["http://dogumaster.com", "http://google.com"]
/*
1) http => 로 시작하고,
2) s? => 다음에 s는 없거나, 있고,
3) \/\/ => 다음에 특수기호 // 가 오고
4) [\w\-\.]+ => \w(영문자, 언더스코어), 하이픈, 쩜 으로 이루어진 문자열이 한개 이상(+) 있다.
5) g => 매칭되는걸 모두 다 찾는다.(플래그)
*/Copy

전화번호 형식

• 유선번호라면 02-111-2222 형식이고, 핸드폰번호라면 010-1111-2222 형식을 모두 포함하는 정규식 (숫자의 갯수가 다름)

const text = 
`http://dogumaster.com http://google.com 010-1111-2222 02-333-7777 curryyou@aaa.com`; 

text.match(/\d{2,3}-\d{3,4}-\d{4}/g); // [ '010-1111-2222', '02-333-7777' ]
/*
1) \d{2,3} => 숫자 2~3개로 시작하고,
2) \- => 다음에 하이픈(-)이 오고
3) \d{3, 4} => 다음에 숫자가 3~4개 오고,
4) \- => 다음에 하이픈(-)이 오고,
5) \d{4} => 다음에 숫자가 4개 온다.
6) g => 매칭되는걸 모두 다 찾는다(플래그)
*/Copy

이메일주소 형식

• xxx@xxxx.com 등의 형식

const text = `http://dogumaster.com http://google.com 010-1111-2222 02-333-7777 curryyou@aaa.com`; 

text.match(/[\w\-\.]+\@[\w\-\.]+/g); // [ 'curryyou@aaa.com' ]Copy

// 좀더 엄격한 검사가 필요하다면, 상황에 맞게 수정해서 사용면 된다.
const email = 'ungmo2@gmail.com';

const regexr = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/;Copy

참고문헌

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%A0%95%EA%B7%9C%EC%8B%9D-RegExp-%EB%88%84%EA%B5%AC%EB%82%98-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-%EC%89%BD%EA%B2%8C-%EC%A0%95%EB%A6%AC

• parameter
• argument
• 매개변수
• 전달인자
• 변수
• 값
• 인자
• 인수

💡 argument = 전달인자 = 값

plusNumber(1,2);

// 전달인자 1, 2

함수를 호출할 때 값을 전달한다고 해서 전달인자라고도 부른다.
매개변수와 달리 전달인자는 고정되어 있지 않고, 호출할 때마다 수시로 변하는 값(Value)이기 때문에 변수가 아닌 값(Value)으로 정의한다. 인수라고도 한다.

💡 parameter = 매개변수 = 변수

function plusNumber(a,b) {
  return a+b;
}

// 매개변수 a, b 

함수 내부에 있는 인자로써, 특정한 값으로 정해져 있는 것이 아니라, 함수가 호출하면서 건네준 argument의 값이 변수 ( Variable )에 담기게 된다.

들어오는 인자가 매개체 역할을 하기 때문에 매개변수라고도 하며
영문으로 parameter 라고 한다.

💡 인수 ? 인자 ?

argument는 인수라고 부르고 parameter를 인자라고 부르는게 맞다고 한다.

그러나 확실하진 않지만 명확하게 구분해서 쓰기보다는 그렇게 주고 받는 것들의 대명사격으로 믹스해서 많이 사용하고 있는 것 같다.

parameter(변수)는 '수'자로돌림하고,
argument는(전달인자) '자'자로 돌림하면 좋았을텐데 말이다.
번역의 문제인지 조금 헷갈리지만 결국에 맥락은 같으니까 
크게 중요한 것 같지는 않다는 결론.....이지만 검색 한 번더 해봤다.

Reference

인수(arguments) 객체 사용하기 | MDN

아래 두번째 줄과 같이 multiply 함수가 오직 한 개의 인수만 있다면 b를 1로 설정하는 방식을 사용하곤 했습니다.

function multiply(a, b) {
  return a * b
}

multiply(5)     // NaN !

어떤 개수의 인수도 이 함수로 넘겨줄 수 있고, 이 함수는 각각의 인수를 하나의 문자열 "리스트" 로 연결합니다. :

myConcat("; ", "elephant", "giraffe", "lion", "cheetah");

함수 - JavaScript | MDN

다음 예는 첫 번째 인자로로 함수를, 두 번째 인자로 배열을 받는 map 함수를 보여줍니다.

function map(f,a) {
  var result = [], // Create a new Array
      i;
  for (i = 0; i != a.length; i++)
    result[i] = f(a[i]);
  return result;
}

배열

배열은 자바스크립트 객체의 특별한 형태이다. 즉 C나 자바의 배열과 같은 기능을 하는 객체이지만 이들과는 다르게 굳이 크기를 지정하지 않아도 되며, 어떤 위치에 어떤 타입의 데이터를 저장하더라도 에러가 발생하지 않는다.

자바스크립트 배열은 어떤 타입이던지 상관없이 그 타입의 데이터를 연속된 공간에 저장하는 자료구조로 각 데이터 저장 위치는 인덱스를 부여해서 접근할 수 있다.

배열 리터럴

배열을 사용하기 위해서는 Array() 를 이용하는 방법도 있지만 포스팅에서는 자주 이용되는 배열리터럴에 대해 알아보겠다.

배열 리터럴은 자바스크립트에서 새로운 배열을 만드는 데 사용하는 표기법이다. 객체 리터럴이 중괄호 ( { } ) 를 이요한 

표기법이었다면, 배열 리터럴은 대괄호 ( [] )를 사용한다.

배열 리터럴을 통한 배열 생성 및 접근 방법

let colorArr = ['red', 'orange', 'yellow', 'green'];
console.log(colorArr[0]);
console.log(colorArr[1]);
console.log(colorArr[2]);
console.log(colorArr[3]);

// 배열 접근 방법 : 배열변수[인덱스]

// 출력
red
orange
yellow
green

배열은 배열내의 항목에 접근하기 위해서는 항목마다 인덱스가 부여되어 있기 떄문에 인덱스(0,1,2,3...)를 통해서 접근 가능하며 인덱스는 0부터 시작한다. 그리고 마지막 배열의 인덱스는 배열의 항목수 -1 이 된다. 위 코드에서 항목수가 4개이므로 4-1 를 하면 마지막 인덱스는 3이다. 이는 배열 인덱스는 0부터 시작하기 때문이다.

그릭 ㅗ앞 코드처럼 대괄호 내에 접근하고자 하는 원소에 배열 항목내의 위치가 인덱스값을 넣어서 접근한다. 또한 앞서 말한 배열의 항목은 일반적으로 항목이라고 하지 않고 원소라고 한다.

배열의 필요성

배열을 사용하는 이유 중에는

- 중복된 변수 선언을 줄이기 위해 사용.

- 반복문을 이용해서 요소들을 쉽게 처리하기 위해 사용

- 코드 절감 효과 

에를 들어, 학생들의 전체 평균을 구하는 로직이 필요하다고 가정해보자 

다음은 배열을 사용하지 않았을때 코드이다.

let score1 = 50,
    score2 = 90,
    score3 = 30,
    score4 = 70;

let sum = 0;
sum = score1;
sum += score2;
sum += score3;
sum += score4;

console.log(sum);



// += 더하기 할당 연산자

다음은 배열과 반복문을 이요하여 처리한 코드이다.

let score = [50,90,30,70],
    sum = 0;

for (let i = 0; i < score.length; i++) {
	console.log(sum)
    sum += score[i];
}
console.log(sum);


// 출력
50
140
170
240

자바스크립트의 모든 배열에는 length 프로퍼티가 있으며 length 프로퍼티는 배열의 원소 개수를 나타낸다.

(실제로 배열에 존재하는 원소 개수와 일치하는 것은 아니다. )

score.length 값은 4라는 것을 확인할 수 있다. 즉 length 프로퍼티는 배열 내의 가장 큰 인덱스에 1을 더한 값이다.

위에 코드에 배열의 가장 큰 인덱스는 3이므로 3+1로 length 프로퍼티가 4가 되는 것이다. 반대로 얘기하자면 length 프로퍼티에서 1을 빼게 되면 배열의 마지막 인덱스가 되는 것이다. 앞서 배열 리터럴에 설명했던 내용과 같다.

다차원 배열

2차원 배열이상을 다차원 배열이라 한다.

2차원 배열은 수학의 행렬과 같은 자료 구조로 이루어져 있다.

프로그래밍에서의 배열은 1차원 배열을 이요해서 2차원 배열을 구현한다.

다음의 코드를 통해 알아보자 

let arr1 = [1,true,'javaScript']; // 1차원 배열

let arr2 = [1, [true, false], [['자바스크립트','스터디'], {prop: '다차원 배열'}]]; // 2차원 배열(다차원 배열)

console.log(arr2[0]); // 1 출력
console.log(arr2[1][0]); // 1번째 배열 인덱스에 있는 0번째 인덱스에 접근 : true 출력
console.log(arr2[1][1]); // 1번째 배열 인덱스에 있는 1번째 인덱스에 접근 : false 출력
console.log(arr2[2][0][0]); // 2번째 배열 인덱스에 있는 0번째 배열의 0번째 인덱스에 접근 : 자바스크립트 출력
console.log(arr2[2][1]); // 2번째 배열 인덱스에 있는 1번째 배열인덱스에 접근 : Object {prop: "다차원 배열"} 출력
console.log(arr2[2][1].prop); // 다차원 배열 출력

// 출력
1
true
false
자바스크립트
{prop: '다차원 배열'}
다차원 배열
undefined

다차원 배열을 반복문을 이용해 원소를 출력해보겠다.

let arr = [[1,2], [true, false], ['자바스크립트','스터디']];

for (let j = 0; j < arr.length; j++) {
    for (let k = 0; k < arr[j].length; k++) {
        console.log('arr2[' + j + ']' + '[' + k + '] = ' + arr[j][k] );
    }
}

// 출력
arr2[0][0] = 1
arr2[0][1] = 2
arr2[1][0] = true
arr2[1][1] = false
arr2[2][0] = 자바스크립트
arr2[2][1] = 스터디
undefined

참고 : https://webclub.tistory.com/168?category=501058

⚡️ JavaScript 객체(Object)란 무엇인가?

JavaScript는 객체기반의 스크립트 언어이다.  JavaScript를 이루고 있는 거의 모든 것은 객체로,

객체란 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입으로 Key / Value pair를 저장할 수 있는 구조이다.

객체는 JS언어만이 가지고 있는 특징의 기초를 이루는 자료형으로 , 많은 기능을 내장하고 있다.

객체 리터럴 

객체는 한꺼번에 여러 값을 담을 수 있는 통(container) 와 같은 자료구조(Data structure)이다.

객체안에는 이름 - 값 쌍 (key - value vair) 이 저장되는데, 이를 객체의 속성(property)라고 한다.

// Object literal { key : value }
// new object()
// object.. create();
// key - 문자, 숫자, 문자열, 심볼
// value - 원시값, 객체 (함수)

아래 코드를 보면서 객체 리터럴을 이용해 객체를 생성할 수 있다.

let apple = {
    name  : 'apple',   // 속성 이름 - 'name' , 속성 값 - 'apple'
    'hello-bye': '🥰', // 속성 이름 - 'hello-bye' , 속성 값 🥰
    ['hello-bye1']: '😍',
    
// 출력 { name: 'apple', 'hello-bye': '🥰', 'hello-bye1': '😍' }

객체의 특징

• 객체는 변수다. 그러나 객체에는 많은 값이 포함될 수 있다(자바스크립트 변수처럼 단일 값을 포함 할 수 있다.)
• 객체는 중괄호 표기를 이용해 만들 수 있다.
• 객체는 각각의 key / value에 대해 정보를 나열할 수 있다.
• key는 문자열 또는 기호여야 한다.
• value는 모든 유형이 될 수 있다.
• 객체는 한 쌍의 key/value 뒤에 쉼표를 이용해 그 뒤에 오는 key/value와 구분해주어야 한다.
• 객체에서 명명된 값을 프로퍼티스(Properties)라고 한다.
• 변수는 예약어의 이름을 가질 수 없지만 객체는 어떠한 이름이어도 상관없다.
• 객체 변수를 복사하면 참조가 복사되고 객체가 복제되지 않는다.

let user01 = {name : "yuns" };
let admin = user01; // copy the reference

객체의 종류 

• 배열
• 함수
• 객체
• 날짜
• 수학
• 정규표현식
• Boolean 은 객체일 수 있다. (new 키워드로 정의된 경우)
• 숫자는 객체가 될 수 있다. (new 키워드로 정의된 경우)
• 문자열은 객체가 될 수 있다. (new 키워드로 정의된 경우)

객체가 아닌 기본 데이터 유형

• String
• number
• boolean
• null
• undefined

JavaScript 객체 구성

1. java Script 내장 객체(built-in Object)

JavaScript 엔진이 구동되는 시점에서 바로 제공되고 JS(JavaScript)코드 어디에서든지 사용가능하다.

아래 내장 객체들 외에 많은 내장 객체들이 있다.

• Global
• Object
• String
• Number
• Boolean
• Date
• Array
• Math

2. 브라우저 내장 객체 (Native Object)

브라우저 내장 객체 또한 JS(JavaScript)가 구동되는 시점에서 바로 사용이 가능한 객체들이며 내장 객체이다.

하지만 브라우저마다 브라우저 내장 객체를 사용함에 있어 구성을 달리하는 경우가 있기 때문에

JavaScript 내장 객체와 분류해 두었다. 하지만 브라우저 내장 객체는 브라우저, 즉 JavaScript 엔진을 구동하는것에서

빌드되는 객체들이다. 예시로 BOM 과 DOM 이 있다. 이 객체들은 자바스크립트 내장객체가 구성된 후에 구성이 된다.

• 브라우저 객체 모델(BOM)
• 문서 객체 모델 (DOM)

3. 사용자 정의 객체 (Host Object)

사용자가 생성한 객체들로 생성자 함수 또는 객체 리털을 통해 사용자 객체를 정의하고 확장시킨 객체들이기 때문에 내장 객체들이

구성된 이후에 구성되어 진다.

프로퍼티(Property)

프로퍼티 객체의 속성을 나타내는 접근 가능한 이름과 활용 가능한 값을 가지는 특별한 형태다. 특정 객체가 가지고 있는 정보를 품고 있어

그 객체가 가진 정보에 직접적으로 접근할 수 있게 해준다.

- Key : 빈 문자열 포함한 모든 문자열 또는 Symbole 값

-value : 모든 값 

let apple = {   // apple 객체 생성 
    name  : 'apple',
    'hello-bye': '🥰', // name에 'apple 와 helloby 🥰 할당
    
    ['hello-bye1']: '😍', 

};
console.log(apple);

key에 문자열이나 symbol 이외 값을 지정하면 암묵적으로 타입이 변환되어 문자열이 되고 이미 존재하는

프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓴다. 배열과는 달리 객체는 프로퍼티를 열거할 때 순서를 보장하지 않는다.

프로퍼티 추가 시 , 중의해야할 점

1. 프로퍼티 값을 할당하지 않으면 

JavaScript에 사용되는 변수는 값을 할당하지 않고 선언만 하면 자동적으로 undefined를 할당한다.

하지만 객체의 정보를 담고 있어야 할 요소가 그 어떤 정보도 할당받지 않았다면 객체로서 필요가 없기 때문에

프로퍼티를 추가하면서 값을 할당하지 않으면 Syntax error 에러가 뜬다.

1. 프로퍼티 값을 할당하지 않으면 

JavaScript 프로퍼티 undefined 나 null 을 할당한다고 삭제되지 않기 때문에 반드시 delete 라는 keyword를 사용해 프로퍼티를 삭제해주어야 한다.

delete apple.emoji;
console.log(apple);

3. 프로퍼티 key로 예약어를 사용하는 경우

예약어를 프로퍼티 키로 사용해도 에러가 발생하지 않지만 예상치 못한 에러가 발생할 수 있어서

예약어를 프로퍼티 키로 사용해서는 안된다.

메소드

메소드 : 객체가 가지고 있는 동작이며 객체 내의 함수를 메소드라 부른다.

메소드와 함수의 차이점

메소드는 객체가 가지고 있는 동작이기 때문에 메소드를 수행하기 위해서는 객체를 통해서 해당 메소드를 수행해야 하며 그 동작을 수행하는 주체는 객체이다.

객체 생성 방법

1. 객체 리터럴을 사용해 단일 객체를 정의하고 만든다.

객체 리터럴 : 중괄호안에 Key : value 의 목록

let apple = {
    name : 'apple',
    color : 'red',
    display : '🍎',
};

객체 리터럴을 사용하면 한 명령문에서 객체를 정의하고 만들 수 있다.

2. new 키워드를 사용해 단일 객체를 정의하고 만든다.

let apple = new Object();
apple.name = 'apple';
apple.color = 'red';
apple.display = '🍎';

console.log(apple);

// 출력 : { name: 'apple', color: 'red', display: '🍎' }

가독성 , 단순성 및 실행 속도를 위해서라면 위에 만들었던 첫번째 방법을 사용하는 것을 권장한다.

객체 접근 방법

const YUN BLOG = {
    name : "Yun sung joog",
    age : 29,
    adress : '경기도 
};

let myName = YUNBLOG.name;
let myAge = YUNBLOG.age;

console.log(myName); // 결과 : Yun sung joong
console.log(myAge); // 결과 : 29

아래와 같은 방법으로도 할 수 있다.

const YUNBLOG = {
    name : "Yun sung joog",
    age : 29,
    adress : '경기도 성남'
};

let myName = YUNBLOG['name'];
let myAge = YUNBLOG['age'];

console.log(myName);
console.log(myAge);

객체에 Key / Value 추가 방법

const YUNBLOG = {
    name : "Yun sung joog",
};

console.log(YUNBLOG.name); // 결과 : 'Yun sung joong'
console.log(YUNBLOG.age); //undefined ( 존재하지 않은 key 와 value )

// 추가방법
YUNBLOG.age = 29;


console.log(YUNBLOG.age) // 29

console.log(YUNBLOG);  // { name: 'Yun sung joog', age: 29 }

객체 Key / Value 수정방법

const YUNBLOG = {
    name : "Yun sung joog",
    age : 29
};

console.log(YUNBLOG.name); // 'Yun sung joong'
console.log(YUNBLOG.age); // 29

// 수정방법
YUNBLOG.age = 30;  // 또는 YUNBLOG['age'] = 30;

console.log(YUNBLOG.age); // 30

객체 Key / Value 삭제방법

const YUNBLOG = {
    name : "Yun sung joog",
    age : 29
};

console.log(YUNBLOG.name); // 'Yun sung joong'
console.log(YUNBLOG.age); // 29

// 삭제방법
delete YUNBLOG.age;

console.log(YUNBLOG.age); // undefined (더 이상 존재하지 않는 key 와 Value)

참고사이트

JS(JavaScript)의 함수는 일급 객체이다.

일급객체 함수( first-class object) : 함수의 매게변수로 전달/ 함수의 반환값 / 할당 명령문 / 동일 비교 대상함수가 일반 객체처럼 모든 연산이 가능하다.

특징정리 

1. 변수나 데이터안에 담길 수 있다.
2. 매게변수로 전달 할 수 있다
3. 반환 값으로 사용할 수 있다
4. 실행도중에 생성될 수 있다.

콜백(Callback) 함수란 ?

JavaScript 콜백 함수란 이름 그대로 나중에 호출되는 함수를 말한다.

문법적 특징이 따로 존재하는게 아닌 자바스크립트 함수일 뿐이다.

MDN 정의해 놓은것을 보면 콜백 함수는 다른 함수에 인자로 전달되는 함수이며, 외부 함수 내에서 일종의 루틴 또는 

동작을 실행하기 위해 호출된다.

Callback 함수 🆚 비동기 함수 

콜백과 비동기함수는 결론적으로 다르다.

자바스크립트에서 비동기적으로 프로그래밍하기 위해 콜백함수를 사용하는 것이지

콜백함수가 비동기라 콜백함수를 사용하는 것이 아니다. 그렇다면 우리는 언제 비동기 함수가 필요한 것일까 ?

비동기함수 테크닉의 사용 예)

• 사용자 이벤트 처리
• 네트워크 응답처리
• 파일 읽고 쓰는 등 파일 시스템의 작업
• 의도적으로 시간을 지연하는 기능 ( 알람 )

콜백(callback) 만들어 보기

(1)

// 외부로부터 주어지는 함수를 콜백 함수의 레퍼런스를 외부로부터 전달받아서 함수를 호출한다.
const add = (a,b) => a+b;
const multiply = (a,b)=> a*b;

calculator(1,1, add);  // 2
calculator(1,3, multiply);  // 3

(2)

function checkYun(count, link, good) {
  count < 5 ? link() : good();
}

function linkYun() {
  console.log('1일 5케이시럽은 기본이다. 아래 링크를 통해 케이시럽을 시청해보자');
  console.log('https://www.youtube.com/watch?v=Ib_uJph0D0k');
}

function goodYun() {
  console.log('오늘 할당량은 모두 채우셨습니다');
}

checkYun(5, linkYun , goodYun);

// 5로 되어있기 때문에 '오늘 할당량은 모두 채우셨습니다' 뜬다.

checkYun , linkYun , goodYun 총 3가지 함수를 선언해서

chekYun 함수를 호출할때 매개변수 count에 숫자값을, link 와 good에 각각 linkYun 과 goodYun함수를 전달 했다.

여기서 checkYun함수가 먼저 호출되고, 매개변수로 들어온 count의 값에 따라 

linkYun & goodYun 두 함수 중 전달된 값에 맞게 호출된다.

콜백함수 사용이유

Javascript는 싱글스레드 , 논블로킹 I/O 의 성격을 지니고 있기 때문이다.

순차적으로 진행하면 원하는 작업순서가 뒤로 밀려나는 경우가 생긴다. 따라서 우리가 원하는 결과를 얻지 못하게된다.

함수들이 호출되는 순서가 정해져 있기 때문에 

이런 난감한 상황을 해결하기 위해 callback 함수를 이용한다. 

※ 싱글 스레드 : 

- 하나의 프로세스에서 하나의 스레드 실행 

- 하나의 레지스터와 스택으로 표현 

1) 싱글 스레드의 장점 

- 자원 접근에 대한 동기화를 신경 ❌ 

ㄴ여러개 스레드가 공유된 자원을 사용할 경우엔 각 스레드가 원하는 결과를 얻게 하려면 공용 자원에 대한 접근이 통제되어야 하고 ,

이 작업은 개발자에게 많은 노력을 요구하며 비용을 발생키는데 , 단일 스레드 모델에서는 이러한 작업이 필요없다.

- 작업전환 작업을 요구 ❌ : 작업전환은 여러 개의 프로세스가 하나의 프로세스를 공유할 때 발생하는 작업으로 많은 비용을 필요로 한다.

2)싱글 스레드의 단점 

- 여러 개의 CPU를 활용하지 못한다. 프로세서를 최대한 활용하게 하려면 cluster 모듈을 사용하거나, 외부에 여러 개의 프로그램 인스턴스를 실행시키는 방법을 사용한다.

- 두 개의 작업을 하나의 스레드로 처리하는 경우 또는 두 개의 스레드로 처리하는 경우를 가정했을 때 , 후자의 경우 짧은 시간 동안 2개의 스레드가 번갈아가면서 작업을 수행한다. 그래서 동시에 작업이 처리되는 것 같이 느끼게 된다.

- 두개의 스레드로 작업한 시간이 싱글스레드로 작업한 시간보다 더 걸릴 수 있는데, 그 이유는 스레드 간의 작업전환에 시간이 걸릴 수 있기 때문이다.

따라서 단순히 CPU만을 사용하는 계산작업이라면 , 오히려 멀티스레드보다 싱글스레드로 프로그래밍하는 것이 더 효율적이다.

return(expression - )

return 명령문은 함수 실행을 종료하고 주어진 값을 함수 호출 지점으로 반환한다.

1. return을 만나면 함수는 종료(중지)된다.

 (1) 함수안에서 return 명령어에 도달하면 함수의 실행은 그 지점에서 중단된다.

 (2) return을 함수 중간에 하게 되면 함수가 종료된다.

- 그 뒤에 코드에는 도달 불가능

- 조건이 맞지 않는 경우 함수 도입부분에서 함수를 일찍 종료한다.

2. 값을 제공할 경우 그 값을 반환 ( 반환 값을 얻기위해 사용)

3. return을 '명령어'라고도 하고 '예약어'라고도 한다.

4. 함수내부의 return 키워드를 생략 가능하다. 보이지 않는 값은 반환되고 있다.

5. return을 명시적으로 하지 않으면 자동으로 undefined로 반환된다.

// return을 명시적으로 하지 않으면 자동으로 undefined이 반환됨 
function add(a, b) { 
    //return a + b;
    return undefined;
}

const result = add(1,2)
console.log(result);

function print(num) { 
    if(num < 0 ) {
        return; // return은 undefired;
        // retun 을 사용하면 원하는 조건이 아닐때 일찍 함수를 종료한다.
    }
    
    console.log(num);
}
const outcome =  print('text')
console.log(outcome);

JavaScript 3가지 변수 지정방법

var a = 5; // window.a === 5
const b = 10; // window.b === 10
let c = 15; // window.c === 15
d = 20; // window.d === 20

var , let , const 의 차이 

var 와 let, const의 차이는 var는 function scoped 에 포함되고 , let , const 는 block scoped에 포함된다는 차이가 있다.

var 는 같은 이름의 변수를 재 선언할 수 있지만 , let 과 const 로 선언한 변수는 같은 block scoped 내에서는 재선언 할 수 없다.

let 과 const 의 차이 

const : 변수 선언한 이후 값을 변경할 수 없다.

let : 값을 변경할 수 있다.

위와 같이 a = 1 을 지정하면 메모리의 공간에 원시값을 설정하고 메모리의 위치 값을 전달한다.

Javascript 에서의 메모리 공간은 Stack, Heap, Static 공간으로 나뉘어 저장되는데, 변수 중 참조타입은 Heap 공간에 할당한다.

스코프 (Scope)

Javascript의 global로 지정한 변수는 window (BOM) 전역 스코프에 포함된다.

다른 스코프에서 값을 찾는데 없다면, 스코프 체이닝이 일어나면서, window 스코프까지 참조하게 되는데

let a = 5;
function () {
    console.log(a); // 5
}

만약 함수 내에서 변수 선언 이전에 값을 호출하려고 하고, 변수를 선언한다면 , 전역 변수로 같은 이름의 변수가 있다고해도 

해당 값을 얻을 수 없는데 이를 호스팅이라 한다. 이는 실행 컨텍스트 내에의 변수 참조하려고 하지만 아직 값이 할당하지 않았기 때문이다.

function() {
	console.log(a); // undefind
    let a = 1;
    console.log(a); // 1 
    }

원시 타입과 참조 타입

Javascript 는 원시 타입(primitive type) 과 참조 타입 (reference type) 이 존재한다.

원시 타입 : Number, String, Boolean, null, undefined 

Symbol 데이터 형은 원시 타입이다.

참조 타입 : Object, Array, Function 은 이다.

참조 타입은 (메모리의) 위치 값을 공유하기 때문에 참조하고 있는 모든 변수들이 값이 변경된것 처럼 보인다.

변수복사

원시 타입 : 변수 복사는 원시 값을 새로 생성하여 , 독립적인 값을 가진다.

참조 타입 : 변수 복사는 참조 값을 복사해 변수에 할당

변수의 Property 을 변경하면 , 원본 변수의 값도 변경되는데, 이런 문제를 앝은 복사하고 , 이때 깊은 복사를 통해 새로운 객체를 생성해 문제를 해결 할 수 있다.

var a = 1;
var b = a;
a = 2
console.log(a,b); // 2, 1
var a = {
	value : 1
    
}
var b = a
a.value = 2;
console.log(a.value, b.value); // 1, 1

프로토 타입

모든 변수의 프로토 타입은 최종적으로 Object Prototype 을 가르키는데

Var a = 1 는 원시값 1을 가지게 된다.

a 는 Number Prototype 을 참조하고 , Numver Prototype은 Object Prototype을 가리키는데, 이 때문에

변수 a 는 Object Prototype의 Method를 사용할 수 있다.

var a = 1;
Object.prototype.b = 2
console.log(a.b) 

// 2

타입 확인

typeof 를 이용해서 원시타입을 확인 할 수 있고 instanceof 를 이용해 참조타입 확인 할 수 있다.

let obj = {}
typeof obj === "object"
obj instanceof Object

let arr = []
typeof arr === "object"
arr instanceof Array

let fn = function() {}
typeof fn === "function"
fn instanceof Function

let cl = new fn();
typeof cl === "object"
cl instanceof fn

let nil = null
typeof nil === "object"

let un = "undefined"
typeof un === "undefined"

let sym = Symbol('symbol');
typeof sys === "symbol"

Number 

JavaScript 에서 숫자는 number 타입으로 구분되며, 메모리 IEEE-754 형식으로 이용해서 저장한다.

IEEE-754 형태는 부호, 지수, 가수로 이루어 져 있으며, Javascript 에서는 32비트까지 표현이 가능하다.

Number 는 35 이나 -9.13 와 같은 숫자를 표현하고 다룰 때 사용하는 원시 래퍼 객체이다.

Number 생성하는 숫자를 다루기 위해 상수와 메소드를 가지고 있다. 다른 타입의 값은 Number() 함수를 사용하여 숫자로 바꿀 수 있다.

JavaScript Number 타입은 Java 혹은 C#의 double 타입처럼 분수 값을 나타낼 수 있지만 저장할 수 있는 값에는 몇 가지 제한이 있다.

Number 는 소수점 이하 17자리 정도만 유지하며 산술은 반올림 의 대상이 된다. Number  가 가질 수 있는 가장 큰 값은 1.8E308 이다.

그보다 더 큰 값은 1.8E308 이다. 그보다 더 큰 값은 특별한 Number 상수인 Infinity 으로 대체된다.

부동소수점

Javascript 에서 소수를 정의하기 위해서는. 뒤에 숫자만 존재하면 가능하지만, 숫자가 없다면 무시되고 정수로 표현된다.

소수는 정수를 포함한 32비트 까지 표현이 가능하다. 그 이상은 반올림 처리된다.

console.log( 1.0 );
// 1

console.log( 1. );
// 1

console.log( .1 );
// 1

console.log( 1.11111111111111111111111111111111111 );
// 1.1111111111111112

console.log( 1111111.11111111111111111111111 );
// 1111111.111111111

Javascript 에서 소수 연산은 정확하지 않다. 그래서 다른 여러 방법으로 소수 연산을 처리하고 있다.

console.log( 0.1 + + 0 .2 );
// 0.30000000000000004

console.log(0.2 + 0.3);
// 0.5

지수 표기법

너무 큰 숫자는 exponet 표기법을 사용해 표현할 수 있다.

이때 e 는 대소문자를 가리지 않는다. e 앞의 숫자를 소수로 작성 할 수 도 있다.

소수는 e뒤에 -를 붙힘으로 표현할 수 있다.

console.log( 1.145E+5 );
// 114500
console.log( 1.145e-5 );
// 0.00001145

console.log( 1e50 );
// 100000000000000000000

console.log( 1e11 );
// 100000000000

console.log( 1e608 );
// Infinity

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
view raw

참고 영상 

진법

Javascript 의 number 는 기본적으로 10진법으로 표현된다.

8진법과 16진법으로 10진법 수를 만들 수 있다.

8진법은 0부터 시작한다.16진법은 0x부터 시작한다.

만약 범위를 넘어가는 숫자가 입력된다면 10진법으로 처리된다.

parseInt  함수는 특정 진수의 문자열을 10지넙ㅂ으로 변환할 수 있으며, 32진법까지 가능하다.

반환할 수 없다면 NAN을 반환한다.

// 8진법
console.log( 077 );
console.log( parseInt(77, 8) );
// 63
console.log( 087 );
// 87

// 16진법
console.log( 0xFF );
console.log( parseInt('ff', 16) );
// 255
console.log( 0xfg );
// SyntaxError

console.log( parseInt('V', 32) );
// 31
console.log( parseInt('W', 32) );
// NaN

NaN

컴퓨터 연산에서 NaN ( Not a Number) 은 연산 과정에서 잘못된 입력을 받았음을 나타내는 기호이다.

주로 Math 개체의 메서드 나 연산 과정에서 잘못된 입력을 받을 때 반환된다.

NaN typeof 는 number 이다.

Javascript 에서 숫자선언

Javascript 에서 문자를 숫자로 변환하는 방법에는 리터럴 , 전역 Number 객체, Number 생성자 가 있다.

let a = 10;  
// 10
let b = new Number(10).valueOf();
// 10
let c = Number(10);
// 10

Number 변환

Javascript 에서 문자를 숫자로 변환하는 방법에는 리터럴 , 전역 Number 객체, Number 생성자, parseInt 메서드가 있다.

Number 객체는 온전한 숫자 형태의 문자열 과 Boolean 을 숫자로 반환 할 수 있다.

parseInt 메서드는 숫자로 시작하는 문자열을 숫자로 변환 할 수 있지만 Boolean는 변환할 수 없다.

console.log( new Number('10').valueOf() );
console.log( Number('10') );
console.log( parseInt('10') );
// 10

console.log( new Number('a10').valueOf() );
console.log( Number('a10') );
console.log( parseInt('a10') );
// NaN

console.log( new Number('10a20').valueOf() );
console.log( Number('10a20') );
// NaN

console.log( parseInt('10a20') );
// 10

console.log( new Number('').valueOf() );
console.log( Number('') );
// 0
console.log( parseInt('') );
// NaN

console.log( new Number(null).valueOf() );
console.log( Number(null) );
// 0
console.log( parseInt(null) );
// NaN