[Javascript] JS 이해하기
JavaScript 에 대한 이해도가 높지 않은 상태에서 참여하게 되었는데
이번에 이해한 Javascript 에 대해 새로 알게된 것들을 요약해드리겠습니다.
배열의 범위를 벗어난 인덱싱
input String의 특정 조건 충족 여부를 확인하는 boolean 함수를 작성 중 이었습니다.
str[i] 와 str[i+1] 을 비교를 하는데 str.length 만큼 반복하는 건데
만약 i가 str 의 끝에 도달했을 때 str[i+1] 을 해버리면 오류가 뜨지 않나?
알아보니 Javascript 는 index error 가 나지 않습니다.
undefined 가 떴습니다.
function isIsogram(str) {
str = str.toLowerCase();
str = str.split('');
str = str.sort();
console.log(str);
for (var i = 0; i < str.length; i++) {
if (str[i] === str[i + 1]) {
return false;
}
}
return true;
}또한 배열에 값을 아래와 같이 부여하지 못한 경우에도 undefined가 뜹니다.
const b = [1, 2, , , 5];
console.log(b[3]) // undefined2차원 배열에서는 undefined가 아닌 에러가 발생하기도 합니다.
let arr = [
[1, 2, 3, 4, 5],
[6, 7, 8, 9, 10],
[11, 12, 13, 14, 15],
];
console.log(arr[4][2]) // 1
console.log(arr[0][6]) // 21번과 2번 중 어떤게 에러가 걸릴까요?
1번이 에러가 납니다. Uncaught TypeError 가 뜨는데 이유는
자바스크립트는 [] 연산자는 좌결합성이기 때문입니다.
*좌결합성 -> 왼쪽에서 오른쪽으로 연산 수행
실행을 하면 arr[4] 는 undefined 가 뜹니다.
그 undefined 에서 undefined[2] 를 하므로 undefined는 원시자료형 이며, Array도 아닙니다.
그러므로 타입에러가 뜨게 됩니다.
그렇지만 2번은 arr[0] 은 [1,2,3,4,5] 를 띄우고
[1,2,3,4,5] 에서 index 6 을 참조하기에 undefined가 뜨는 것이죠.
클로저 Closure
Clouse 란?
- 자바스크립트 클로저는, 함수의 일급 객체 성질을 이용합니다.
- 함수가 생성될 때, 함수 내부에서 사용되는 변수들이 외부에 존재하는 그 변수들을 함수의 스코프에 저장됩니다.
- 함수와 함수가 사용하는 변수들을 저장한 공간을 클로저라 합니다.
일급 객체란, 다른 변수처럼 대상을 다룰 수 있는 것을 말합니다. JS에서는 함수는 일급 객체입니다.
클로저를 사용하는 이유는 상태를 안전하게 은닉하고 보존시키기 위해서 입니다.
그리고 이를 수정하는 방법은 특정 함수한테만 그 권한을 줍니다.
즉, 다수의 개발자와 함께 일을 할 때 실수를 방지하고 더 탄탄한 코드를 만들기 위한 코드 패턴입니다.
function createCard() {
let title= "";
let content= "";
function changeTitle(text) {
title= text
}
function changeContent(text) {
content= text
}
function print() {
console.log("TITLE -", title);
console.log("CONTENT -", content);
}
return { changeTitle, changeContent, print};
}createCard 함수 본문에 있는 title, content 변수는 외부에서 접근할 수 없습니다.
따라서 changeTitle, changeContent 함수를 통해 수정할 수 있습니다.
값을 읽을 수 있는 함수는 print 로 제공됩니다.
그리고 이 모든 함수를 객체로 묶어서 createCard 함수에서 return 합니다.
const myCard = createCard() 와 같은 형태로 인스턴스로 만들어서 사용할 수 있습니다.
Arrow Function
화살표 함수를 작성할 때 소괄호, 중괄호 리턴하는게 헷갈려서 저는 prettier 라는 좋은 툴이 자동으로 formatting 해주기 때문에 생각없이 작성했었습니다.
jsx문법에서 왜 소괄호로 리턴하는거지? 싶었는데 규이라고 합니다.
const handleSubmit = () => 3; // 괄호 없이 사용할 시 즉시 return
const handleReset = () => { 0; } // 중괄호 사용 시 return 선언 없으면 return 안합니다.
(() => {
console.log("Hello Arrow Function");
})() // 즉시 실행 함수(IIFE)
const object1 = () => { a:2 } // 함수 실행 시 undefined
const object2 = () => ({ a:2 }) // 함수 실행 시 { a: 2 }
// jsx 문법
// 한줄 입력 시 소괄호x
const Button = () => {
return <button>전송</button>;
};
// 여러개 일 때는 소괄호로 묶어서 return 하는게 국룰입니다.
// jsx는 return 뒤에 소괄호 넣는게 좋습니다.
const Button = () => {
return (
<div>
<button>전송</button>
</div>
);
};[참고 James Nelson, 2016년 8월 11일, “왜 자바스크립트의 return 문에 괄호를 사용하는가?] http://jamesknelson.com/javascript-return-parenthesis.)
arr.reduce()
array.reduce(reducer, initialValue)
array.reduce()는 주어진 배열(array)의 모든 요소 각각에 함수를 (reducer)를 적용하고,
각 요소에서 반환된 결과들을 축적하여 하나의 값으로 최종 반환합니다.
이 때 축적이 이러우지기 전의 초기값이 initialValue 입니다.
let shoppingCart = [
{
product: "자전거",
qty: 1,
price: 849.0,
},
{
product: "에어팟",
qty: 1,
price: 249.0,
},
{
product: "운동화",
qty: 1,
price: 90.99,
},
];
const reducer = (acc, { qty, price }) => {
return acc + qty * price;
};
const answer = shoppingCart.reduce(reducer, 0); // 0은 초기값, reducer 는 적용할 함수
console.log(answer) // 1188.99이벤트 루프
자바스크립트 비동기
- 자바스크립트 엔진은 비동기 처리를 제공하지 않습니다.
- 대신, 비동기 코드는 정해진 함수를 제공하여 활용할 수 있습니다.
- 이 함수들을 API(Application Programming Interface) 라 합니다.
- 비동기 API의 예시로, setTimeout, XMLHttpRequest, fetch 등의 WEB API 가 있습니다.
- node.js 의 경우 파일 처리 API fs, 암호화 API 등을 제공합니다.
비동기 처리 모델
- 비동기 코드를 처리하는 모듈은 자바스크립트 엔진 외부에 있습니다.
- 이벤트 루프(event loop), 태스크 큐(task queue), 잡 큐(job queue) 등으로 구성됩니다.
- API 모듈은 비동기 요청을 처리 후 태스크 큐에 콜백 함수를 넣습니다.
자바스크립트 엔진인 콜 스택이 비워지면, 태스크 큐의 콜백 함수를 실행합니다.
느낀점
생각보다 JS에 대한 이해도가 높지 않다는 것을 체감하였으며 바닐라JS로 웹사이트를 구현하는게 쉬우면서도 어려웠습니다.
또한 JS에 대한 이벤트 루프를 다시 공부할 수 있게되어서 좋았으며, JS에 대한 기본기를 다질 수 있어서 좋았습니다.
그리고 JS에서의 함수형 프로그래밍 데이터, 계산, 액션 이라는 개념에 대해서 접하게 되었는데
이러한 프로그래밍 패러다임을 한번 봐야겠다는 생각도 들게 되었습니다!!
