앱개발에 쓰이는 Javascript 문법

리액트에서 많이 사용되는 javascript 문법에 대해 정리해보려고 합니다.

기존의 javascript 보다 함축적이며 간결한 문법을 사용합니다.

 

1. 화살표 함수

기존의 function 키워드를 통해 함수를 선언하였는데 화살표 함수 문법으로 간결하게 함수를 선언합니다.

let func1 = function() {
  console.log("기존 방식으로 함수 선언하기");
}

func1();


let func2 = () => {
  console.log("화살표 함수를 통해 함수 선언하기");
}

func2();

 

2. 비구조 할당

딕셔너리에 있는 값을 꺼내 변수에 담을 때, 할당 과정을 거치지 않고 딕셔너리의 키 값을 그대로 변수로 사용하도록 합니다.

let blog = {
	owner : "jungeun",
	url : "joy-it.tistory.com",
	getPost() { 
		console.log("ES6 문법 정리"); 
	}
};


// 기존 할당 방식
let owner = blog.owner
let getPost = blog.getPost()


// 비구조 할당 방식
let {owner, getPost} = blog;
// 각각 blog 객체의 owner, getPost()의 데이터가 할당된다.
// 이때 blog의 키 값과 이름이 같아야 한다.


// 함수에서 비구조 할당 방식으로 전달된 딕셔너리 값 꺼내기
let blogFunction = ({owner, url, getPost}) => {
	console.log(owner)
	console.log(url)
	console.log(getPost())
}

blogFunction(blog)

 

3. 자유로운 줄바꿈

백틱(`)을 통해 문자열에서의 줄바꿈을 자유롭게 할 수 있습니다.

또한 ${} 문법을 통해 변수 안에 변수를 넣을 수도 있습니다.

const id = "myId" ;
const url = `http://joy-it.tistory.com/login/${id}` ;


const message = ` 백틱을 통해
줄바꿈도 마음대로
사용이 가능합니다. `

 

4. 객체 리터럴

필드명과 대입할 변수명이 같을 경우, 객체(딕셔너리)를 생성할 때 사용합니다.

var name = "jungeun";
var job = "developer";


// 기존 방식
var user = {
  name: name,
  job: job
}


// 최신 방식
var user = {
  name,
  job
}

 

5. map 함수

리스트를 순회하여 값을 조회할 때 for문 대신 map을 사용해도 됩니다.

map은 리스트의 길이를 몰라도 되고 몇 번째의 값인지 순서도 알려줍니다.

let numbers = [1,2,3,4,5,6,7];


// for문
for (let i=0; i<numbers.length; i++) {
	console.log(numbers[i]);
}


// map 함수
numbers.map((value,i) => { 
	console.log(value,i) 
})

 

6. module system

특정 파일에서 정의한 값, 함수, 딕셔너리를 다른 자바스크립트 파일에서 불러 사용하는 경우가 많습니다.

이때 사용하는 개념이 모듈 시스템입니다.

 

export는 값, 함수, 딕셔너리, 자바스크립트 파일 자체를 외부로 내보내는 키워드입니다.

외부로 내보낸다는 것은 다른 곳에서도 사용할 수 있도록 한다는 의미입니다.

 

import는 자바스크립트 파일 안으로 값, 함수, 딕셔너리, 다른 자바스크립트 파일을 가져오는 키워드입니다.

내부로 가져온다는 것은 외부로 내보낸 것들을 가져와서 사용한다는 의미입니다.

 

예시)

1. squared 함수를 외부로 내보낼 수 있도록 합니다.

   math.js 파일 안에 있는 함수라고 가정합니다.

export function squared(x) {
  return x * x;
}

 

2. 같은 폴더 위치에 있는 파일에서 squared 함수를 가져오도록 합니다.

import {squared} from './math.js';
console.log(squared(2));

 

3. math.js 파일에 export default 키워드를 쓰는 squared2 함수를 만들어보겠습니다.

export default function squared2(x) {
  return x * x;

import k from './math.js';
console.log(k(2));

함수의 이름은 squared이지만 다른 파일에서 가지고 올 때는 k로 가져와서 사용했습니다.

export default로 선언한 함수는 해당 파일에서 유일해야 하며, 가져와서 사용할 때 이름을 바꿀 수 있습니다.