최신 JavaScript 문법

양효빈·2023년 3월 16일
0

javascript

목록 보기
2/7

var → const & let

const는 한 번 선언하면 값을 바꿀 수 없는 상수

같은 스코프(중괄호) 내에서 중복된 이름을 가질 수 없음

let은 선언과 변경이 자유로운 변수

//!Past
var a;
var b = 1

//*Now
const c = 2;
let d = 3;
d = 4;

Array 메소드

  • forEach : 배열의 요소를 이용해 순차적으로 함수를 실행 현재값, 인덱스, forEach를 호출한 배열을 매개변수로 받음. 따로 return할 필요가 없다.
//Past
var a = [0,1,2,3,4,5];
for (var i =0; i < a.length; i++) {
	var item = a[i];
	console.log(item);
}
  • map : 배열의 요소를 이용해 순차적으로 함수를 실행해 새로운 배열 반환하는 매서드 현재 값, 인덱스 , map을 호출한 배열을 매개변수로 받음, return 해줘야함
//Past
var c = [0,1,2,3,4,5];
var newC = [];
for (var i =0; i <a.length; i++) {
	var item = c[i];
	newC.push(item * 2);
}
  • filter : 조건을 통과하는 요소를 모아 새로운 배열로 반환 현재값, 인덱스, map을 호출한 배열이 매개변수
    flase를 return 할 경우 새로운 배열에서 제외되고 true를 리턴할 경우 새로운 배열에 추가
//Past

var c = [0,1,2,3,4,5];
var NewC = [];
for (var i = 0; i < a.length; i++) {
	var item = c[i];
	if (item > 3) {
		newC.push(item);
	}
}

reduce, slice, splice, find, indexOf

Arrow function

화살표함수 : function 표현보다 구문이 짧은 함수 표현.

//* arrow function
const c = (x,y) => {
	console.log(x,y);
};
c(5,6);

const d = (x, y) => console.log(x,y);
d(7,8);

Destructuring assignment

구조분해할당 : 객체나 배열을 해체하여 개별 변수에 담을 수 있게 하는 표현식

//Past
var a = { x:1, y:2, z:3};
var x = a.x;
var y = a.y;
var z = a.z;

Array

//Past
var c = [1,2,3];
var c0 = c[0];
var c1 = c[1];
var c2 = c[2];

Shorthand property names

단축 속성명 : 새로운 객체 선언 간편하게 할 수 있음

새로 선언하는 object에 key값과 동일한 변수명을 가진 변수를 할당할 경우 value값 생략 가능

const username = "김레이서";
const age = 21;
const school = "엘리스";

//!Past
var person1 = { username: username, age: age, school: school };

//* Now
const person2 = { username, age, school };

Spread Syntax

전개구문 : 배열이나 객체 전개할때 사용

기본적으로 배열이나 객체에 …을 붙여 사용

//Array

const numbers = [1,2,3];

//*1
function getSum(...n) { //개수 상관없이 배열을 다 받아줘
	let sum = 0;
	n.forEach((item) => {
		sum += item; //숫자들의 합을 구해서 return
	});
	return sum;
}

//*2
getSum(...numbers); //numbers의 매개변수를 전개해서 넘겨줘

//*3
const newNumbers = [0,...numbers, 4,5,6]; //새로운 배열 선언 예시

두 객체 합성할때 겹치는 key가 있을 경우 나중에 오는 값이 들어감

//객체

const user = { name: "김레이서", age:23, school: "엘리스" };
// *4
const newUser = { ...user, grade:3, age:24};

Template literals

표현식을 허용하는 문자열 리터럴

``(back quote)로 감싸 문자열을 표현

표현식 사용할때는 ${}로 표기

// !Past
const text 1 = "Hello" + name;

// *Now
const text2 = `Hello ${name}`;

Optional chaining

객체나 변수에 연결된 다른 속성 참조할 때 유효한 속성인지 검사하지 않고 값을 읽을 수 있게 해줌

유효한 속성이 아닐 경우 undefined 반환

배열의 경우 array?.[index] 사용

//!Past
var x;
if(a && a.b && a.b.c) {
	x=a.b.c;
}

//*Now
const y = a?.b?.c;
profile
코딩하는 디자이너

0개의 댓글