ES6에 관하여..

들어가기 전에!

기초적인 내용, 꼭 알아야하는 내용 위주로 들어가있다. 초보 공부를 위한 '정리'목적으로 작성했다. 왜 이건 없냐 하지말라는 뜻이다. 새로운걸 계속 추가할 예정이니까!

그리고 자바스크립트의 아주 기본적인 문법은 다 안다고 가정한다! 기본문법은 어려운거 아니잖아요 ㅎㅎ

 

 

 

🌱 JavaScript란?

객체 기반의 스크립트 언어(응용 프로그램을 제어함)로, 주로 웹 브라우저의 동작에 관여한다. 웹 개발자의 혼란을 줄이고 웹개발 표준을 설정하기 위해 EcmaScript(ES)라는 표준이 설정되었고, 과거부터 현재까지 계속 버전이 발전되어 오는 중이다.

현재 ES11 이상의 버전이 나왔지만, 대부분 자바스크립트가 동작하는 크롬 등의 브라우저, 리액트, 노드 등이 ES6 위에서 돌아가므로 많은 사람들이 ES6를 준표준(?)으로 잡고 자바스크립트 학습을 한다.(괜히 어려운 최신문법 배웠다가 쓰지도 못하는 상황이 많이 발생할 수도 있으니..) 가장 대중적인 자바스크립트라고 보면 될듯!

 

그러나 높은 버전의 ES를 사용해서 웹 동작이 적용되지 않는 현상이 일어난다 해도 Babel이라는 Transpiling 도구를 이용할 수도 있다. 실제 많은 FE개발자들이 이를 이용하고 있는듯 하다.

 

 

 

 

 

🌱 Template Literal

string 처리를 쉽게 해주기 위한 방식. 다른 프로그래밍 언어에서도 그렇고 js에서도 그렇고 string을 더할 때 +연산자를 사용할 수 있지만, 이는 기본적으로 번거롭다. js에서는 브라우저에 보이는 문자열 처리가 빠르게 많이 이뤄져야 하므로 template literal이라는 방법을 사용한다. 아래 코드를 보면서 백틱+${}의 쓰임을 확인하자.

var buchu = {
    name: 'buchu',
    age: 23
};

// no Template Literal
var introduction1 = '안녕? 내 이름은 '+buchu.name+'이고 나이는 '+buchu.age+'살이야!';
// Template Literal
var introduction2 = `안녕? 내 이름은 ${buchu.name}이고 나이는 ${buchu.age}살이야!`;

// 출력값은 똑같다.
console.log(introduction1);
console.log(introduction2);

예전에 어떤 게임에서  ${username}님! 보상을 받으러 오세요! 하는 알림을 본 적이 있다. ${username}..? 뭐지?; 했었는데 이제서야 이해가 갔다. 근데 그 게임개발사에선 어떤걸 처리를 잘못 했길래 그런 오류가 난 것일까.. 아마 username 조회가 잘 안된거겠지?

 

 

 

 

 

 

🌱 Destructuring(구조 분해 할당)

어떤 struct의 내부 값에 접근하기 위해 일일이 <name>.<attribute>로 접근하기보다 한 번에 여러 원소를 변수에 할당받기 위한 방법이다. 이 때 중요한 것이, 변수 명이 struct의 내부 키값이랑 같아야 한다는 점이었다. 인터넷 찾아본대로 따라쳤다가 안돼서 난리부르스를 친 사람 올림..

const buchu = {
    name: 'buchu',
    age: 23
};

var {name,age} = buchu;

// buchu, 23 출력
console.log(name);
console.log(age);

 

 

 

 

 

🌱  map, forEach

파이썬으로 코테 공부를 하면서 정말 많이 본 map! 들어온 리스트 각각의 값에 대해서 일련의 과정을 수행할 때 많이 쓰였던 method였다. ES6에서 역시 비슷하게 쓰이는데, for문으로 index를 조회하는 대신 map과 forEach 한번에 일정 과정을 수행할 수 있게 해준다. 차이점이 있다면.. return값의 존재 여부정도? map엔 return값이 있고 forEach는 return값이 없다. map에서 무언가를 Return하면 return한 값들이 들어있는 배열이 반환된다.

var myboys = [{
    name: "jimin",
    age: 27
},{
    name: "jungkook",
    age:25
}];

// return값은 같다!
// name is jimin and age is 27.
// name is jungkook and age is 25.
myboys.map(function(person,index){
    console.log(`name is ${person.name} and age is ${person.age}.`);
});
myboys.forEach(function(person,index){
    console.log(`name is ${person.name} and age is ${person.age}.`);
});

 

 

 

 

 

 

🌱 Lambda Function(람다 함수)

처음에 학교 프로젝트로 웹개발 뚝딱댈때 람다 표현식을 썼는데, 웹개발 입문 인강에선 그러지 않아서 꽤 놀랐다. 하지만 여기서 알려주더라.. function(){}으로 표현하는 대신 ()=>{}로 표현하는 방식이다. 뭔가 예쁘고.. function을 타이핑 하지 않아도 돼서 편하다.

const getName = (name) => {
    console.log('람다 표현식입니다.');
    console.log(`이름은 ${name}입니다.`);
};

getName('buchu');