[코딩일기] React 시작 전, 알아두면 좋은 JS 짜잘한 지식

1.

Javascript의 '모듈'

Javascript의 작업 크기가 커지면 유지 보수를 위해 파일을 분리해서 관리하는데,

이런 분리된 파일들을 '모듈'이라고 한다.

export와 import로 모듈을 불러와서 작업한다.

(script 태그로 모듈을 불러오는 경우, type="modul" 속성을 필수로 넣는다.)

 

2.

Destructuring syntax (구조분해)

객체, 배열 데이터의 각 값을 분해, 변수에 저장하는 문법이다.

배열 데이터는 위치로 판단해 변수에 값이 담기고,

객체 데이터는 key 이름으로 담긴다.

const [array, example] = ["hello", "world"];

console.log(array, example);

const { apple, lemon: yellow } = { apple: "fruit", lemon: "fruit" };

console.log(apple, yellow);

함수에서도 인수로 객체, 배열 데이터를 받는 경우 구조분해가 가능하다.

const obj = {

firstName: "olivia",

gender: "F",

age: 26

};

const arr = [1, 2, 3];

function testObj({ firstName, gender }) {

document.getElementById("app").innerHTML = firstName + gender;

console.log(obj.age);

}

function testArr([a, b, c]) {

document.getElementById("app").innerHTML += a + b + c;

}

testObj(obj);

testArr(arr);

 

3.

함수(function)를 '값'으로 받을 때와 '함수'로 받을 때 차이

setTimeout(함수, 시간)에 경우 '함수' 기다리는 '시간'을 인수로 전달하는데,

함수를 ()가 들어간 실행된 함수로 받으면 함수의 결과 값을 받는 것이기 때문에, ()를 넣으면 안 된다.

 

See the Pen JS Refresher by mimi-miyeon (@mimi-miyeon) on CodePen.

 

4.

원시값(Primitive Value)과 참조/기준값(Reference Value)

원시값에는 숫자, 참거짓, 문자 데이터가 있다.

변수에 직접 저장되어 수정하게 되면 기존 값은 사라지고 새로운 값만 남게 된다.

참조/기준값은 객체, 배열 데이터로, 컴퓨터 메모리에 특정 주소를 받아서 저장되어 있다가

데이터를 수정하면 해당 주소로 기존 값을 불러와서 변경한다.

 

5.

화살표 함수

함수 문법을 간소하게 적는 방법

방법 1. function () {} 대신 () => {} 이렇게 쓸 수 있다. (무명함수에서만 가능. 유명함수에서는 const 함수명 = () => {} 이렇게 작성 가능)

방법 2. return 하는 코드 한 줄만 있는 경우에는 () => 리턴값 (return이라는 키워드 생략) 이렇게 짧게 작성 가능

방법 3. 매게변수가 딱 1개 있는 경우 () 생략 가능. 따라서 something => {...}

객체를 return 할 때는 (obj) => ({obj}) 중괄호를 넣어서 {} 이 괄호가 body가 시작되는 괄호가 아니고 객체를 나타낸다는 걸 알려줘야 한다.

 

6.

배열 데이터 메소드

• map()  => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
• find()  => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find
• findIndex()  => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex
• filter()  => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
• reduce()  => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce?v=b
• concat()  => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat?v=b
• slice()  => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
• splice()  => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice