[ 3D Web : Front_JavaScript ] 자바스크립트 문법 총 정리판. - [2]
∇ 자바스크립트 문법 총 정리 - [2]
목 차
1. 화살표 함수
2. 타입을 확인하자 - typeof / instanceof / Object.prototype.toString
3. Call by Value & Call by Reference
4. computed property
5. 전개 연산자
6. 비구조화(구조분해)
7. 넘버 메소드
8. 문자열 메소드
9. 배열 메소드
10. 날짜 메소드
11. 객체 메소드
12. setTimeout()
13. Promise
14. async - await
15. 클로저
1. 화살표 함수
- > ' this ' 를 가지지 않습니다.
- > arguments를 지원하지 않습니다.
- > new와 함께 호출할 수 없습니다.
- > 화살표 함수는 super가 없습니다.
※ 화살표 함수를 사용해서는 안되는 경우.
ⓐ 일반 객체의 메소드 ( this가 없기 떄문 )
ⓑ prototype 메소드 ( 마찬가지 프로토타입 객체 this참조 불가능 )
ⓒ 생성자 함수 및 new ( 화살표 함수는 prototype 프로퍼티를 가지고 있지 않다. )
ⓓ addEventListener 함수의 콜백함수 ( this가 없으니, 이벤트 타겟을 못 가져옵니다.)
ⓔ 화살표 함수는 call, apply, bind 메소드를 사용하여 this를 변경할 수 없습니다.
2. 타입을 확인하자 - typeof / instanceof / Object.prototype.toString
// typeof : 피연산자의 데이터 타입을 반환하는 연산자
typeof 5; // return 'number'
typeof 'haha'; // return 'string'
typeof {}; // return 'object'
typeof []; // return 'object'
typeof function () {}; // return 'function'
typeof null; // return 'object'
// instanceof : 개체가 특정 클래스의 인스턴스인지 여부를 나타내는 비교연산자
let arr = [1, 2, 3];
alert( arr instanceof Array ); // true
alert( arr instanceof Object ); // true - 자바스크립트에서 배열은 객체이다. 포함관계
// Object.prototype.toString : toString의 숨겨진 기능을 사용하면 확장 typeof, instanceof의 대안
let arr = [];
alert(arr); // [object Object]
let objectToString = Object.prototype.toString;
alert( objectToString.call(arr) ); // [object Array]
3. Call by Value & Call by Reference
- 변수가 가리키는 '메모리 공간' 상에 저장되어 있는 값을 복사하여 전달한다는 관점에서 볼 때,
" 자바스크립트는 항상 값에 의한 전달(Call By Value)만 존재 " 한다고 말할 수 있습니다.
= > 값이 원시값이냐, 참조값이냐의 차이만 있을 뿐.
- 원시 타입의 경우, 우리가 알고 있듯이 값이 복사되어 전달되고
- 참조 타입의 경우, 메모리 주소의 값(참조값)이 복사되어서 전달되기 때문에 두 경우 모두 동작원리는 동일합니다.
4. Computed property
- 객체의 key값을 표현식( 변수, 함수 등)을 통해 지정하는 문법입니다.
let key = 'name'
let obj = {
[`${key}`] : 'yujuck' // success
}
var a = "1111";
var s = {
[a] : 1111;
}
// >> {1111 : 1111}
var Array = [{key:1, value:10},
{key:2, value:20},
{key:3, value: 30}];
var result = Array.map(function(el){
// var obj = {};
// obj[el.key] = el.value;
// return obj;
return {[el.key] : el.value};
});
5. 전개 연산자
전개 연산자는 혼자 쓸 수 없습니다, " 펼쳐진 객체나 배열을 담을 바구니 " 가 반드시 필요합니다.
※ Tip.
- " ..." 는 전개 연산자나 나머지 매개변수로 사용됩니다.
- 함수 호출 시 사용되면, 배열을 목록으로 확장해주는 "전개 연산자"입니다.
- 함수 매개변수의 끝에 있으면, 인수 목록의 나머지를 배열로 모아주는 '나머지 매개변수'입니다.
☆ 사용 패턴.
- 인수 개수에 제한이 없는 함수를 만들 때, '나머지 매개변수'를 사용합니다.
- 많은 수의 인수를 받는 함수에 배열을 전달할 때 '전개 연산자'를 사용합니다.
const arr = [4, 5, 6];
const arrWrap = [1, 2, 3, ...arr, 7, 8, 9] //중간에 대입 가능
const arr1 = [1, 2, 3];
const arr2 = [...arr1].reverse(); //reverse는 그 배열값을 바꿔버리니까 이런식으로
/* 배열 복사 */
var arr = [1,2,3];
var copy1 = arr; // 레퍼런스 이어붙이기
var [...copy2] = arr; // 배열을 아예 복사
var copy3 = [...arr]; // 배열을 아예 복사
/* 객체 복사 */
var prevState = {
name: "yuddomack",
birth: "1996-11-01",
age: 22
};
var state = {
...prevState,
age: 23
}; // { name: 'yuddomack', birth: '1996-11-01', age: 23 }
/* 나머지 매개변수 : 파라미터 값들을 바로 진짜배열로 변환 */
// 아규먼트에 전개연산자를 쓰면 배열로 반환하는 새로운 문법이 된다.
(function a(...rest){
console.log(rest); // [1, 2, 3, 4, 5]
})(1,2,3,4,5);
/* 제너레이터 */
function* generateName() {
yield 'W';
yield 'O';
yield 'N';
yield 'I';
yield 'S';
yield 'M';
}
const genForSpread = generateName();
console.log([...genForSpread]); // ['W', 'O', 'N', 'I', 'S', 'M']
6. 비구조화(구조분해)
- 배열이나 객체의 속성을 해체하여,
" 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식 "
/* 배열 */
var [a1, a2, ...rest_a] = [1, 2, 3, 4, 5, 6, 7, 8, 9];
// a1, a2변수에 필요한 배열값을 넣어서 따로 사용할수있게 된다
/* 객체 */
var { a1, a2, ...rest_a } = { a1 : 10, a2 : 20, a3 : 30, a4 : 40 };
/* 객체 key값을 다른이름 변수로 저장 */
var { a1 : awesome_name, a2 : dumb , ...rest_a } = { a1 : 10, a2 : 20, a3 : 30, a4 : 40 };
/* 자료형 타입이 없을시 ()묶어 바로 적용 표현 가능 */
({ a, b } = { a : 10, b : 20});
/* 기본값 할당 */
var [a, b=5] = [10];
var {c = 30, d : new_name = 40} = { };
/* 문자열 */
function fullName(value) {
[this.name, this.surname] = value.split(" ");
// [this.name, this.surname] = ["Alice", "Special"];
}
};
fullName("Alice Special")
/* 반복문 */
const users = [
{name: 'kim', age: 10, addr:'kor'},
{name: 'joe', age: 20, addr:'usa'}
];
for(var {name : n, age : a} of users){
//변수 n과 a에 값을 대입하여 바로 사용 가능.
}
/* 함수 아규먼트 */
const users = [
{name: 'kim', age: 10, addr:'kor'},
{name: 'joe', age: 20, addr:'usa'},
];
(function renderUser({name, age, addr}){
})(users[0]);
users.map(({name, age, addr}) => {
//map으로 각 객체 하나씩 참조하게되고 비구조화로 {name, age, addr}에 각각 값을 변수에 대입
});
/* 클래스 */
class Student extends Person {
constructor({grade, ...rest}) {
// 부모 클래스의 생성자를 호출할 수 있습니다.
super(rest);
this.grade = grade;
}
}
const s = new Student({grade: 3, name: '윤아준', age: 19});
7. 넘버 메소드
◎ Number.isFinite()
: 유한한 수?
◎ Number.isInteger()
: 정수 ?
◎ Number.isNaN()
: nan?
◎ Number.prototype.toFixed()
: 매개변수로 지정된 소수점자리를 반올림
◎ Number.prototype.toPrecision()
: 매개변수로 지정된 전체 자릿수까지 유효하도록 나머지 자릿수를 반올림.
8. 문자열 메소드
◎ String.prototype.split(separator, limit)
: 문자열 - > 배열
◎ String.prototype.substring(star, end)
: 문자열 일부 뽑아
String.prototype.slice(start, end)
: slice는 -1 인덱스 지원
◎ String.prototype.indexOf(searchstring, fromIndex)
: 해당 문자가 있다면, 인덱스를 반환, 문자값이 있는지 찾을 때 씀
String.prototype.lastIndexOf(searchString, fromIndex)
: lastIndecOf는 마지막 기준을 조절해서 원하는 구간에서 인덱스 찾음.
◎ String.prototype.includes(searchString, position)
: indexOf 불리언 버전
9. 배열 메소드
◎ Array.from
: 유사배열, 이터러블 객체 - > 배열 변환
◎ Array.of
: 인수를 - > 배열로 변환
◎ Array.prototype.indexOf(searchElement, fromIndex)
: String의 indexOf랑 같음.
: 불리언 버전 includes()가 있음.
◎ Array.prototype.join(separator)
: 구분자 처리 한 후 문자열 반환.
: 사실상 String의 split의 반대버전
◎ Array.prototype.slice(start, end)
: 문자열 slice랑 거의 비슷
: 인수를 전달하지 않으면 배열복사가 일어남. 이를 이용해 유사배열을 변환 가능.
const arr0 = [].slice.call(arguments); // [1, 2, 3]
const arr1 = [...arguments]; // [1, 2, 3]
const arr2 = Array.from(arguments); // [1, 2, 3]
◎ Array.prototype.slice(start, deleteCount, ...items)
- 총 3가지의 기능으로 사용 가능.
1) 배열 요소 추가 ( 삭제 안하고 추가 )
2) 배열 요쇼 교체 ( 삭제하고 추가 )
3) 배열 요소 삭제 ( 추가 안하고 삭제 )
◎ Array.prototype.fill()
- 함수 인자를 배열 인수로
const arr = new Array(5).fill(); // [undefined, undefined, undefined, undefined, undefined]
// fill()을 안붙일경우 -> [empty x 5]
const arr = new Array(5).fill(5); // [5, 5, 5, 5, 5]
◎ Array.prototype.at()
- 제이쿼리 eq()같은 개념. [-1]를 at(-1) 로 쓸 수 있다.
10. 날짜 메소드
○ new.Date()
: 결과값이 Date객체로 반환, 메소드를 사용할 수 있음.
○ Date()
: new 연산자 없이 호출, 결과값이 문자열로 반환.
☆ 몇일 전, 몇일 후 날짜 계산하는 방법.
var now = new Date(); // 현재 날짜 및 시간
console.log("현재 : ", now);
var yesterday = new Date(now.setDate(now.getDate() - 1)); // 어제
console.log("어제 : ", yesterday);
var tomorrow = new Date(now.setDate(now.getDate() + 1)); // 내일
console.log("내일 : ", tomorrow);
11. 객체 메소드
Object.create()
// 주어진 프로토타입(prototype)의 객체와 속성들을 갖고 있는 새 객체를 생성합니다.
Object.assign()
// 하나 이상의 원본 객체들로부터 모든 열거가능한 속성들을 대상 객체로 복사합니다.
// 그냥 객체 = 객체 하면 주소값이 공유될 뿐이다.
Object.keys()
// 객체의 키만 담은 배열을 반환합니다. (단, 열거가능한 것만)
Object.values()
// 객체의 값만 담은 배열을 반환합니다. (단, 열거가능한 것만)
Object.getOwnPropertyNames()
// 해당 객체가 가진 모든 고유 프로퍼티의 이름을 배열에 담아 반환합니다.
Object.entries()
// [키, 값] 쌍을 담은 배열을 반환합니다.
// 보통 객체를 이차원 배열로 변환하고 Map자료형으로 만들때 사용
Object.fromEntries()
// [키, 값] 형태의 배열을 객체로 반환합니다.
child instanceof Object; // child가 객체인지 확인 true/false
typeof [] // []의 타입이 뭔지 반환 -> object
12. setTimeout()
// 중첩 스케쥴링
let timerId = setTimeout(function tick() {
timerId = setTimeout(tick, 2000); // (*)
}, 2000);
let first = 10
let second = 20
let result = 0
function add(x, y) {
return x + y
}
setTimeout(function() {
result = add(first, second)
console.log(result) // 정답은? 30(x) 40(o)
}, 1000)
first = 20
- 자바스크립트는 각각의 task를 큐에 적재해두고 순서대로 처리합니다.
- 이 때, 어떤 코드가 새로운 테스크로 적재되는지에 대한 이해가 부족하면 위와 같은 실수를 저지를 수 있습니다.
- 최초의 task는 스크립트 파일 자체입니다.
- > 첫번째 task 내에 setTimeout은 별도의 task를 생성하고 첫번째 task가 종료되길 기다립니다.
- > 첫번째 task인 스크립트의 실행이 끝나면 비로소 setTimeout의 함수를 실행할 준비를 합니다.
13. Promise
- 비동기가 언제 어디서 실행될지 모르니까, 일종의 약속을 하고 다음 함수 실행(then)을 보장하는 기법.
- 이를 통해 동기식으로 구현할 수 있지만 함수 콜백지옥을 해결했더니
then 콜백지옥이 생겨날 수 있어서 async-await을 쓰는 추세입니다.
function p() {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject(new Error('error');
}, 1000);
});
}
//원하는 시점에 프로미스 객체를 생성하고 콜백함수도 호출할 수 있다.
p()
.then(() => {
console.log('1000ms후에 fulfilled 됩니다.');
})
.catch(reason => {
console.log('1000ms후에 rejected 됩니다.', reason);
});
14. async - await
● async - await가 Promise를 완벽히 대체하는 것이 아닙니다.
● 간단히 말하자면
.then의 콜백지옥을 교체하기 위해 await을 사용하는 것입니다.
async-await을 사용하기 위한 처리.
● async 함수는 Promise 객체를 리턴합니다.
-> async함수는 내에서 await을 사용하면서 그 결과는 then으로 받아올 수 있습니다.
async function p2(){ // async을 지정해주면 Promise를 리턴하는 함수로 만들어준다.
return 'hello2'; //리턴값은 Promise{<resolved>: "hello2"} 자동 resolve해준다는걸 알 수있다.
// reject는 throw 에러를 날리면 된다.
}
p2().then((n) => console.log(n));
◎ 전혀 연관없는 비동기 함수를 여러개 받아올 경우, 순서를 지킬필요가 없기 때문에 성능을 위해 병렬 처리합니다.
let a = await getApple(); // 1초 기다리고 리턴값을 얻는다.
let b = await getBanana(); // 1초 기다리고 리턴값을 얻는다.
// 총 2초 기다려야함
// -------------------------------------------------------------------------
let getApplePromise = getApple(); // 1초 기다리고 리턴하는 함수를 실행시키고 리턴값을 변수에 넣는다.
let getBananaPromise = getBanana(); // 1초 기다리고 리턴하는 함수를 실행시키고 리턴값을 변수에 넣는다.
let a = await getApplePromise;
let b = await getBananaPromise;
// 본래라면 1초+1초 를 기다려야 하는데, 위에서 1초기다리는 함수를 한번에 불러왔기 때문에, 대충 1.001초만 기다리면 동기식으로 처리된다.
15. 클로저
◎ 함수로서의 클로저.
- 지역변수로서의 은닉.
var increase = (function() {
var counter = 0;
return function(){ // 클로저
return ++counter;
}
})();
var increase = (function(counter) { // 파라미터를 지역변수로
return function(){ // 클로저
return ++counter;
}
})(0);
increase(); // 1
◎ 클래스로서의 클로저.
- 클래스의 private 변수로서의 은닉.
function Counter() {
// 카운트를 유지하기 위한 자유 변수
// this.counter로 안했기 때문에 new 생성자로 초기화해도 이 변수는 객체에 담기지 않는다.
var counter = 0;
// 클로저
this.increase = function () {
return ++counter;
};
// 클로저
this.decrease = function () {
return --counter;
};
}
const counter = new Counter(); // counter객체는 increase decrease함수 두개만 갖게 된다.
console.log(counter.increase()); // 1
console.log(counter.decrease()); // 0