JS 필수 문법 정리

1. let & const

let과 const는 var를 대체한다.

변수를 재할당하지 않기 때문에 상수처럼 효과적으로 사용할 수 있다.

// 변수
let myName = 'Max';
console.log(myNmae);

>>>>> Max

let myName = 'Sunny'
cosole.log(myName);


>>>>>  Sunny

// 상수

const myName = 'Max';
console.log(myNmae);

const myName = 'Sunny';
console.log(myName);

// Error
>>>> Uncaught SyntaxError: Identifier 'myName' has already been declared

2. ES6 Arrow Functions

Arrow Function은 함수를 만드는 새로운 문법이다.

- 기존의 함수 작성 방식

function study(){
  console.log("열공!")
}

var study = function(){
  console.log("열공!")
}

- Arrow function으로 작성

var newStudy = () => {
  console.log("다시 열공!")
}

Arrow Function을 많이 사용하는 이유

먼저, 함수를 왜 사용하는가?

함수는 여러 기능을 하는 코드를 한 단어로 정의하고 싶을 때

즉, 재사용성을 높이려고 사용한다.

또한 입출력 기능( input과 output이 있는)을 만들 때도 사용한다.

1. 함수 본연의 기능인 입출력을 아주 직관적으로 표현한다.

var Addition = (x) => { return x + 1 }

console.log(Addition(4));
console.log(Addition(8));

2. 소괄호 생략이 가능하다. (매개변수가 단 하나라면)

var Addition = x => { return x + 1 }

console.log(Addition(4));
console.log(Addition(8));

3. 중괄호 생략이 가능하다. (함수 바디가 표현식 하나라면 중괄호와 return문을 생략할 수 있다)

var Addition = (x) =>  return x + 1;

console.log(Addition(4));
console.log(Addition(8));

4. 함수 외부에 있던 this값을 내부에서도 그대로 사용가능하다.

const sayHi = {
  name: 'Sunny',
  meet: function () {
    getName = () => {
      return `${this.name}`;
    }
    return `My name is ${getName()}`;
  }
};

sayHi.meet(); // "My name is Sunny"

3. Export & Imports

리액트는 여러 파일로 분리해 놓는 특징이 있는데, 이를 모듈이라고 한다.

이 모듈을 다른 파일로 export 하거나 import 하는 방법은 아래와 같다.

- export ( export default 는 한 모듈에 하나만 할당할 수 있다. 해당 파일에 대표 모듈이라고 할 수 있다.)

default => export default ...; 

named => export const someData = ...;

- import

// default일 경우 -> someNameOfYourChoice아라는 이름은 마음대로 지정할 수 있다.
import someNameOfYourChoice from './path/to/file.js'; 

// default가 아닌 경우 특정 모듈 이름을 지정해줘야 한다.
import { someData } from './path/to/file.js';

// 아래와 같이 as를 붙여 이름을 정할 수도 있다.
import * as upToYou from './path/to/file.js';

3. Class

 class Person {
 	constructor () {
 		this.name = 'Sunny';
 	}
 }

 const person = new Person();
 console.log(person.name); // prints 'Sunny'

4. Spread & Rest Operator

- spread : 배열을 풀어준다.

const arr = [1, 2, 3, 4, 5];

console.log(arr); // [ 1, 2, 3, 4, 5 ]
console.log(...arr); // 1, 2, 3, 4, 5
console.log(1, 2, 3, 4, 5); // 1, 2, 3, 4, 5

// 이것을 이용하여 array.concat()을 대체 할 수 있다.

const aArr = [1, 2, 3];
const bArr = [4, 5, 6];

// array.concat
console.log(aArr.concat(bArr)); // [ 1, 2, 3, 4, 5, 6 ]

// spread
console.log([...aArr, ...bArr]); // [ 1, 2, 3, 4, 5, 6 ]

- rest : spread 연산은 unpacking이라면 Rest 는 packing이다.

function func(...param) {
  console.log(param);
}

func(1, 2, 3); // [ 1, 2, 3 ]

5 Destructuring

배열에서 특정 원소 or 객채에서 특정 속성을 추출하는 편한 방법

const numbers = [1, 2, 3];
[num1, num2] = numbers;
console.log(num1, num2);

>>> 1
>>> 2

const numbers = [1, 2, 3];
[num1, , num3] = numbers;
console.log(num1, num3);

>>> 1
>>> 3

6. Primitive Type, Reference Type

const number = 1;
const num2 = numver;

console.log(num2);

>>> 1


const person = {
	name: 'Sunny'
};

const seconPerson = person;

console.log(secondPerson);

>>> [object Object] {name: 'Sunny'}

const person = {
	name: 'Sunny'
};

const seconPerson = {
	...person
};

person.name = 'Max';

console.log(secondPerson);

>>> [object Object] {name: 'Sunny'}

7. Array functions

const numbers = [1, 2, 3];
const doubleNumArray = numbers.map((num) => {
	return num * 2;
});

console.log(numbers);
console.log(doubleNumArray);

>>> [1, 2, 3]
>>> [2, 4, 6]

다음과 같은 자바스크립트 array 함수기 있다.

map() , filter() , reduce()

많은 React 개념이 배열 작업에 의존하기 때문에 학습해야한다.

참조 :

https://codingapple.com/unit/es6-3-arrow-function-why/

https://velog.io/@chlwlsdn0828/Js-Spread-%EC%97%B0%EC%82%B0%EC%9E%90-Rest-%ED%8C%8C%EB%9D%BC%EB%AF%B8%ED%84%B0

Arrow function은 function을 대체하는 신문법이 아님 - 코딩애플 온라인 강좌

0:00 Arrow function 문법 1:17 왜 쓰는지 장점 3개 정리 4:28 Arrow function 실생활 사용 예시 & this값에 대하여 ES6 문법 이후부터는 자바스크립트에서 함수를 만들 수 있는 문법이 새롭게 하나 등장했습니

codingapple.com