[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]) // undefined

2차원 배열에서는 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]) // 2

1번과 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에서의 함수형 프로그래밍 데이터, 계산, 액션 이라는 개념에 대해서 접하게 되었는데 

이러한 프로그래밍 패러다임을 한번 봐야겠다는 생각도 들게 되었습니다!!