본문 바로가기
웹(Web)/HTML&CSS&JS

JS Essential (1)

by 공.대.남 2023. 2. 10.
반응형

안녕하세요! 공대남입니다! 

오늘은 JS 문법에 대해 알아보겠습니다.

  • 1. 삼항연산자
조건문 ? (조건이 참일 때 실행될 코드) : (조건이 거짓일 때 실행될 코드)
  • == : 같다
  • === : (단순히 값이 아니라 자료형까지) 같다
  • 화살표함수
let sum = (a, b) => a + b;

/*
let sum = function(a, b) {
	return a + b;
}; 와 동일합니다!
*/

 

  • 얕은 복사 깊은 복사
let user1 = {
	name: 'Kim'
};
//얕은복사
let user2 = user1;
console.log(user2); // {name: 'Kim'}

user1.name = '유저1 수정'
console.log(user2); // {name: '유저1 수정'}
//깊은복사
let user2 = Object.assign({}, user1);
console.log(user2); // {name: 'Kim'}
  • pop, push, shift, unshift
  • 배열은 for in 보다 for of 가 10배이상 빠름
let fruits = ["사과", "바나나", "배"];

for (let fruit of fruits) {
  alert(fruit);
}
  • 객체를 배열로 변환 object.keys, values, entries
let scores = {
    Kim: {math: 50, english: 70},
    Park: {math: 70, english: 60},
    Lee: {math: 80, english: 50}
  }
let score= Object.values(scores)

let sum = score.reduce((sum, current) => sum+current.english,0);
  • 스프레드와 레스트 문법 (Spread, Rest)
//spread
let user = {
	name: 'Kim',
	age: 20
};

let busanUser = {
	...user, // name: 'Kim', age: 20
	city: 'Busan'
};

let seoulUser = {
	...user,
	city: 'Seoul'
};

//rest
let seoulUser = {
	name: 'Kim',
	age: 20,
	city: 'Seoul'
};
const {city, ...user} = seoulUser;
console.log(city); // Seoul
console.log(user); // {name: 'Kim', age: 20}

  • spread , rest 응용
const sum = (...num) => {
	return num;
}
let result = sum(1, 2, 3, 4, 5);
console.log(result); // [1, 2, 3, 4, 5]

//spread 응
const sum = (...num) => {
	return num.reduce((sum, current) => sum + current, 0);
}
let numbers = [1, 2, 3, 4, 5];
let result = sum(...numbers); // 배열 형태가 아니라, 숫자들이 들어감 1, 2, 3, 4, 5
console.log(result); // 15
728x90
반응형

'웹(Web) > HTML&CSS&JS' 카테고리의 다른 글

JS Essential (3)  (0) 2023.02.10
JS Essential (2)  (0) 2023.02.10
html&css  (0) 2022.05.15
HTML&CSS란?  (0) 2019.10.10

댓글