[React] 들어가기 전 js 빠르게 정리하기

목차

 

import / export 

import * from './app.js';

//app.js
//export는 한 파일에서 여러개 가능
export let key = "123213";
export let key2 = "sfes";

//util.js
import {key, key2} from './app.js';

console.log(key);
console.log(key2);

//이런식으로 전체 모듈을 불러올 수 있다.
import * as api from './app.js';

//이런식으로 .이용해 사용
console.log(api.key);

 

 

 

//main.html
//이런식으로 type 모듈을 지정해 주어야 한다.
<script src="util.js" type= 'module'></script>

 

default

//app2.js
//이런식으로 변수에 할당하지 않고 사용
export default "123141";

//한 파일내에서 default 두번 써주게 되면 오류 생김
export default "faefa";

//이런식으로 내가 원하는 변수에 할당해서 쓸 수 있다.
import usekey from "./app2.js";

console.log(usekey);
//123141이 출력된다

 

 

변수 이름 명명 규칙(let 사용)

let userMessage = "hello world";

//아래는 수정 불가능
const userMessage = "hello world2";

 

카멜 케이스

단어 연결 시 첫 글자(소문자)를 제외한 각 단어의 첫 글자를 대문자로 표기하는 명명 규칙.
카멜케이스는 주로 변수나 함수의 이름을 지을 때 사용한다.

 

ex) caculateThis, myName

 

파스칼 케이스

(카멜케이스와 비슷하지만) 첫 단어의 첫 글자도 대문자로 표기하는 명명 규칙.
 
파스칼케이스는 주로 클래스나 타입의 이름을 지을 때 사용된다.
파스칼케이스는 여러 단어를 조합하여 만드는 식별자에 적합하다.

 

ex) MyClass, DecreaseAccount

 

요약

카멜케이스: 변수, 함수, 메서드, 속성 등의 이름에 주로 사용.

파스칼케이스: 클래스, 타입, 인터페이스 등의 이름에 주로 사용.

 

출처: https://ccomccomhan.tistory.com/185 [[꼼꼼한 개발자] 꼼코더:티스토리]

 

function

//이런식으로 사용 가능(오버라이드)
function greet(userName, message = "hello"){
	console.log(userName);
    console.log(message);
}


greet("huaksu");
// huaksu hello 출력

greet("huaksu", "hello2");
// huaksu hello2 출력


function greet(userName, message = "hello"){
	return message + "," + userName;
}

const m = greet("huaksu");
console.log(m);
// hello, huaksu 출력



//화살표 함수
export default (username, message) =>{
	console.log(username + message);
}

 

객체

const user = {

	name: "huaksu",
    age: 24,
    greet(){
    console.log("hello");
    }

}

console.log(user.name);
user.greet();


class User{
	constructor(name, age){
	    this.name = name;
        this.age = age;
    }
    
    greet(){
    console.log('Hi!');
    }

}

const user1 = new User("huaksu", 35);
user1.greet();

 

배열

//배열의 선언
const hobbies = ['a', 'b', 'c'];


//다양한 배열 사용법

//추가
hobbies.push("d");


//인덱스 찾기
hobbies.findIndex((item)=> item === 'a');


//배열 출력 방법
hobbies.map(item => item + '!');

for(const hobby of hobbies){
	console.log(hobby);
}

 

배열 디스트럭쳐링

const [firstName, lastName] = ['huaksu', 'sin'];


const {name, age} ={
	name: "huaksu",
    age: 24,
}


//이런식으로 별칭 지정가능
const {name: userName, age} ={
	name: "huaksu",
    age: 24,
}

console.log(userName);
console.log(age);

 

스프레드 연산자

const hobbies = ['sports', 'cooking'];

const newHobbies = ['reading'];


//스프레드 연산자를 사용하면 각각 값을 가져와서 배열에 넣어줌
const mergeHobbies = [...hobbies, ...newHobbies];

//스프레드 연산자를 사용하지 않을 경우 중첩 배열이 됨

const user = {
	name: 'huaksu',
    age: 24,
}

const extendedUser = {
	isAdmin: true,
    ...user
}

 

함수를 값으로 사용하기

function handleTimeout(){
	console.log("Timed out!");
}

function handleTimeout2 = () => {
	console.log("Timed out!");
}


//함수를 다른 함수로 전달할 때 이름만 전달함 
//->함수 자체를 전달해주어야 하기 떄문
setTimeout(handleTimeout, 2000);

//이런식으로 하면 반환 값을 전달하게 됨
setTimeout(handleTimeout(), 2000);

 

함수안에 함수 사용하기

function init(){
	function greet(){
    console.log('hi');
    }
    greet();

}
//함수안에서 선언 되었기 때문에 init안에서만 호출해야함
greet();

 

참조형과 기본 값

//기존 값을 삭제하고 새로 만들어 지는 것임 -> 기존 문자열이 변환되는 것이 아님
let userMessage = 'hello';
userMessage = 'hello there';


//기존 문자열을 건드리지 않고 새로 만들어짐
userMessage = userMessage.concat('!!!');


//배열은 기존 것을 변경하여 수정하게 됨 -> 주소를 통해 참조하기 때문

//const -> 변수를 덮어쓸 수 없단는 뜻으로 메모리 주소의 값은 조작 가능
const hobbies = ["Sports, "Cooking"];
hobbies.push("working");

//따라서 아래 것은 불가
hobbies =[];