배열의 구조분해 문법
const arr1 = ['tomato', 'kiwi', 'orange']
console.log(arr1[0])
const tomato = arr1[0]
const [a,b,c] = arr1 // arr1에 있는 애들을 분해해서 여기에 넣음
console.log(tomato)
console.log(a)
const arr2 = ['red', 'orange', 'pink', 'yellow']
const [red, orange, , yellow] = arr2 // pink만 사용하고 싶지 않을 때
console.log(red, orange, yellow)
const [v1, v2, v3, v4, v5] = arr2
console.log(v1, v2, v3, v4, v5)
// const [a1, b1] = arr2 // 맨 끝에 있는 요소들은 생략 가능
// 객체 구조 분해
const person = {
name: "John",
age: 30,
city: "New York"
};
const { name, age } = person;
console.log(name); // "John"
console.log(age); // 30
// 변수의 이름을 객체의 속성 이름과 다르게 지정할 수도 있다.
const { name: personName, age: personAge } = person;
console.log(personName); // "John"
console.log(personAge); // 30
// 함수 매개변수에서의 사용
function printPerson({ name, age }) {
console.log(`${name}은(는) ${age}살입니다.`);
}
printPerson({ name: "Alice", age: 25 }); // "Alice은(는) 25살입니다."
2. 변수 교환
// 변수 교환
let value1 = 'second'
let value2 = 'first'
let temp; // 값을 저장하기 위한 임시 변수
temp = value1 // temp = second가 저장이 된다
value1 = value2 // value1 = first (덮어씌워졌기 때문에), value2 = first
value2=temp // value1 = first, value2 = second
console.log(value1, value2)
value1 = "second";
value2 = "first";
[value2, value1] = [value1, value2];
console.log(value1, value2);
3. 객체의 구조분해 할당 문법
const obj = {
title: '제목',
content: '내용',
num: 10
}
// 값에 접근할 때는 점, 대괄호 접근법 이용
console.log(obj.title)
console.log(obj['title'])
// console.log(title)
const{num, title, content} = obj
console.log(title)
const{n1, t1, c1} = obj
console.log(n1)
const {content: c2, title: t2} =obj
console.log(t2, c2)
let obj1 = {
name: 'june',
height: 162,
friend: null,
married:false
}
let obj2 = {
name: '준',
like:['sleeping, programming'],
greeting:function(){
console.log(`안녕하세요, 저는 ${this.name}이고요...
키는 ${this.height}입니다..`)
}
}
obj2.greeting()
let me = {...obj1, ...obj2}
me.greeting()
console.log(me)
me={
...obj1,
...obj2,
gender:'Female'
}
console.log(me)
const 사람 = {
이름: "김덕구",
나이: 30,
직업: "개발자"
};
const { 이름, 나이 } = 사람;
console.log(이름); // "김덕구"
console.log(나이); // 30
변수 이름 변경
const { 이름: 성명, 나이: 연령 } = 사람;
console.log(성명); // "김덕구"
console.log(연령); // 30
중첩 객체 구조 분해
const 회사 = {
이름: "땡땡 주식회사",
주소: {
시: "서울",
구: "도봉구"
}
};
const { 주소: { 시, 구 } } = 회사;
console.log(시); // "서울"
console.log(구); // "도봉구"
👻 string
const str = 'alliehigh'
let strToArr = [...str]
let strToArr2 = str.split('')
// string to array의 method: split()
// array 새 string의 method: join()
console.log(strToArr)
/* [
'a', 'l', 'l',
'i', 'e', 'h',
'i', 'g', 'h'
] */
function test(a,b){
console.log(a)
console.log(b)
}
test(1, 2)
test('안녕')
function test2(...val){
console.log(val) // rest로 받아준 결과는 배열임
const [a,b,c, ...rest] = val // [2,3,4,5,6,7,8]
console.log(a)
console.log(b)
console.log(c)
console.log('rest', rest)
}
test2(2,3,4,5,6,7,8)
👻 매개변수 앞에 ... 을 붙여 사용한다.
👻 이를 통해 함수에 전달된 여러 개의 인수를 "배열"로 받을 수 있다.
🎈 rest 와 spread의 차이
rest는 여러 개의 요소를 "모으는" 역할을 한다.
spread는 배열이나 객체를 "펼치는" 역할을 한다.
📒 실습
// 매개변수가 몇 개가 들어오든 합해서 반환하는 함수
function addNumber(...rest){
// console.log(rest) // 배열의 합 구하기
let sum=0;
rest.forEach(function(number){
sum+=number;
})
return sum;
}
let sumResult = addNumber(1,2,3,4,5)
console.log('합한 결과 값: ',sumResult) // 15
6. class
object (객체)를 만드는 방법
object를 만들 수 있는 "틀"
정해진 틀로 같은 규격의 object를 여러 개 만들 수 있음 (재사용에 유리)
new 키워드를 이용해서 미리 만들어둔 클래스 형태의 오브젝트를 만들 수 있음 (instance화)
클래스를 사용하면 비슷한 객체를 쉽게 여러 개 만들 수 있고, 코드를 더 체계적으로 관리 할 수 있다.
// Apartment가 House에 포함되는 관계일 때 상속을 사용한다
class Apartment extends House{
constructor(name, year, window, floor, windowMaker){
super(name, year, window);
this.floor = floor;
this.windowMaker = windowMaker;
}
// 메소드 추가
getAptInfo(){
return `${this.year}년에 지어진 ${this.name}. 총 층수는 ${this.floor}층이고, 창문의 갯수는 ${this.window}개 입니다.`
}
// overriding (메소드 재정의)
// 부모 클래스의 메소드 이름을 똑같이 쓰고 싶지만 내용은 다르게 만들고 싶을 때
getWindow(){
console.log(`${this.name}의 창문은 ${this.window}개 입니다. ${this.windowMaker}에서 만들었습니다.`)
}
}
const apt1 = new Apartment('raemian', 2023, 6, 19, 'KCC')
apt1.getAge()
apt1.getWindow()
console.log(apt1.getAptInfo()) // return이므로 console.log에 넣어야 한다.
console.log(apt1)
📒 실습: Shape class 만들기
console.log('실습 Shape class 만들기')
class Shape{
constructor(width, height){
this.width = width
this.height = height
}
getArea(){
return this.width *this.height;
}
}
let rec1=new Shape(3,4);
console.log(rec1.getArea());
class Rectangel extends Shape{
constructor(width, height){
super (width, height)
}
getArea(){
return this.width * this.height
}
getSqrt(){
return Math.sqrt(this.width**2)+(this.height**2)
}
}
let sq=new Rectangel(3,4);
console.log(sq.getArea());
console.log(sq.getSqrt());
class Triangle extends Shape{
constructor(width, height){
super(width, height)
}
getArea(){
return this.width * this.height /2
}
}
let tri = new Triangle(4,4);
console.log(tri.getArea());
class Circle extends Shape{
constructor(width, height, radius){
super(width, height)
this.radius = radius
}
getArea(){
return Math.floor(Math.PI*(this.radius**2))
}
}
let cir = new Circle(5,5,3);
console.log(cir.getArea());
7. 모듈
프로그램의 기능을 독립적인 단위로 분리한 것. 코드를 여러 파일로 나누어 관리 할 수 있게 해주며, 코드의 재사용성과 유지보수성을 높여준다.
💫 ES6 모듈
항상 최상위 레벨에서 import/export 된다.
비동기 로딩 지원.
// 내보내기 (export)
// math.js
export function add(a, b) {
return a + b;
}
// 가져오기 (import)
// app.js
import { add } from './math.js';
console.log(add(2, 3)); // 5
// 브라우저에서 사용
<script type="module" src="app.js"></script>
// export default
export default function sayHi(){
console.log('하나만 있는 함수 입니다.')
}
// 해당 파일에는 export 할 개체가 하나만 있다고 알려주는 키워드
// Export default 로 내보내진 모듈을 Import 할 때에는 {} 를 사용하지 않고 불러온다.
💫 Common JS
// commonJS 방식 데이터 "따로 따로" 내보내기
exports.sayHi=function(){
console.log('hi')
}
exports.name = "harry"
// 함수 선언문이나 const 변수 등은 내보내기를 따로 할 수 없음
const colors = ['#fff', '#ddd', 'red']
const sayHi = function(){
console.log('hi module1')
}
function sayName(name){
console.log('내 이름은 '+ name)
}
class Person{
constructor(name, age){
this.name = name;
this.age = age;
}
getBornYear(){
return new Date().getFullYear() - this.age
}
}
// commonJS 방식 데이터 한 번에 내보내기
module.exports={
colors, sayHi, sayName
}
