JS 주요 문법 정리

김민경·2023년 1월 23일

js react.js

FE(WEB) - React

목록 보기

2/13

var, let, const

let은 변수 정의
const는 상수 정의

var는 더 이상 쓰이지 않는다!

화살표 함수

// 기존 함수 정의 방식
function callMe(name) {
	console.log(name);
}

const callMe = function(name) {
	console.log(name);
}

// 화살표 함수
const callMe = (name) => {
	console.log(name);
}

// 화살표 함수 - arguments가 없는 경우
const callMe = () => { 
    console.log('Max!');
}

// 화살표 함수 - 하나의 argument만 있는 경우
// 괄효 생략 가능
const callMe = name => { 
    console.log(name);
}

// 화살표 함수 - 바로 value를 return하는 경우
const returnMe = name => name

export와 import

export default ...;
import someNameOfYourChoice from './path/to/file.js';

export const someData = ...;
import { someData } from './path/to/file.js';
import * as upToYou from './path/to/file.js';
upToYou는 모든 exported 변수/함수를 하나의 자바스크립트 객체에 모읍니다

classes

class Person {

	// constructor () {
    //     this.name = 'Max';
    // }
    
    name = 'Max';
    
    printMyName () {
        console.log(this.name); // this is required to refer to the class!
    }
        
    // 또는 화살표 함수로도 가능
    // this키워드가 reference를 변경하지 않는다!
    // printMyName = () => {
    //     console.log(this.name);
    // }
    }
}

const person = new Person();
person.printMyName()

클래스 상속

class Human {
    species = 'human';
}
 
class Person extends Human {
    name = 'Max';
    printMyName = () => {
        console.log(this.name);
    }
}
 
const person = new Person();
person.printMyName();
console.log(person.species); // prints 'human'

spread operator

sperad operator는 배열과 객체(참조 자료형)를 복제(얕은 복사)하는데 매우 유용하다!

const oldObject = {
    name: 'Max'
};
const newObject = {
    ...oldObject,
    age: 28
};

destructuring

배열에서 예시

const array = [1, 2, 3];
const [a, b] = array;
console.log(a); // prints 1
console.log(b); // prints 2
console.log(array); // prints [1, 2, 3]

객체의 예시

onst myObj = {
    name: 'Max',
    age: 28
}
const {name} = myObj;
console.log(name); // prints 'Max'
console.log(age); // prints undefined
console.log(myObj); // prints {name: 'Max', age: 28}

인자를 가진 함수를 작업할 때 매우 유용하다!

const printName = ({name}) => {
    console.log(name);
}
printName({name: 'Max', age: 28}); // prints 'Max')

리액트에서 배열을 다룰 때 많이 사용하는 메서드들

김민경

🏛️❄💻😻🏠

이전 포스트

React.js란?

다음 포스트