2주차에서는 알고리즘 문제를 풀었는데 28문제 중 14문제를 풀었다. 처음에는 감도 안 왔는데 문제를 풀다 보니 조금은 감이 생겼다. 문제를 빨리빨리 푸는 사람들도 있었는데 비교하니 내가 많이 부족하다는 것을 느꼈다. 하지만 어제의 나랑 비교했을 땐 조금은 성장했다고 생각한다 ㅎ
조급한 마음이 드는 건 어쩔 수 없지만 느리더라도 꾸준히 하자:)
Javascrip의 EC란?
ES는 ECMAscript의 약자이다. ECMAscript란 무엇일까? 위키백과에 따르면 ECMA 인터내셔널이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어이다. ECMA에서는 Javascript의 표준만 정하는 게 아닌 다른 표준안도 정하기 때문에 그것들과 구분하기 위해 숫자를 붙였고 이것이 262가 되었다. 즉, ECMA 262는 자바스크립트의 표준 규격이라고 생각하면 된다.
ES5? ES6? 그게 뭔데?
우리가 사용하는 언어들(한국어, 영어, 일본어, 중국어 등..)이 시간이 지나면서 발전하고 변형되듯이, 프로그래밍 언어들도 기존의 취약점을 보완하고 필요한 기능들을 추가하면서 발전하고 있다. ES도 마찬가지로 Javascript의 발전된 내용(기능 추가 및 변경사항)을 추가한 버전이라고 생각하면 된다.
ES5/ES6 문법 차이
ES6에는 클래스와 모듈 같은 복잡한 응용 프로그램을 작성하기 위한 새로운 문법이 추가되었다. 하지만 이러한 문법의 의미는 ES5의 strict mode와 같은 방법으로 정의된다.
(1) const, let 키워드 추가
let은 변수에 재할당 가능하고, const는 변수에 재선언, 재할당 모두 불가능하다.
let과 const는 block-scoped 단위로 호이스팅이 일어난다.
(2) Arrow function(화살표 함수)
함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있어 익숙해지면 편하고 간결한 코드를 작성할 수 있다.
// ES5
function myFunc(name) {
return '안녕' + name;
}
console.log(myFunc('영희'));
// 출력 => 안녕 영희// ES6 화살표 함수
const myFunc = (name) => {
return `안녕 ${name}`;
}
console.log(myFunc('영희')); // 출력 => 안녕 영희
// 또는 화살표를 사용하거나 'return' 키워드를 사용하지 않아도 된다.
const myFunc = (name) => `안녕 ${name}`;
console.log(myFunc('영희')); // 출력 => 안녕 영희또한 내장 함수(map, filter, reduce 등)와 같이 사용할 수 있다.
// ES5
const myArrary = ['진수', '영철', '영희', 5];
let arr1 = myArrary.map(function(item) {
return item;
});
console.log(arr1); // 출력 => (4) ["진수", "영철", "영희", 5]
// ES6
let arr2 = myArrary.map((item) => item);
console.log(arr2); // 출력 => (4) ["진수", "영철", "영희", 5](3) Template Literals(템플릿 리터럴)
문자열을 연결하기 위해 더하기(+) 연산자를 사용하지 않고, 백틱(`)을 사용할 수 있다.
// ES5
function myFunc1() {
return '안녕' + name + '너의 나이는' + age + '살 이다!';
}
console.log(myFunc1('영희', 22));
// 출력 => 안녕 영희 너의 나이는 22살 이다!// ES6
const myFunc = (name, age) => {
return `안녕 ${name}, 너의 나이는 ${age}살 이다!`;
};
console.log(myFunc1('영희', 22));
// 출력 => 안녕 영희, 너의 나이는 22살 이다!(4) Default Parameter(기본 매개변수)
아래의 샘플 코드를 보면 age의 값이 없어 undefined로 나왔다. 이는 javascript 함수의 매개변수가 기본적으로 undefined임을 알 수 있고, 함수 선언할 때 매개변수를 선언했지만 실제 함수를 호출하는 구간에서 매개변수에 값을 넣지 않는다고 해도 오류가 발생하지 않는다는 것을 알 수 있다.
const myFunc = (name, age) => {
return `안녕 ${name} 너의 나이는 ${age}살 이니?`;
};
console.log(myFunc1('영희'));
// 출력 => 안녕 영희 너의 나이는 undefined살 이니?EC6에서는 이 함수의 매개변수 기본값을 설정해 줄 수 있다.
//구문
function fnName(param1 = defaultValue1, ..., paramN = defaultValueN) { ... }위의 내용과 동일하게 호출하였지만 기본 매개변수에 기본값을 입력했기 때문에 age가 undefined로 나오지 않은 것을 볼 수 있다.
함수 매개변수 기본값을 사용할 때 하나 주의할 점은 매개변수가 undefined일 경우에만 작동한다는 것이다.
const myFunc = (name, age = 22) => {
return `안녕 ${name} 너의 나이는 ${age}살 이니?`;
};
console.log(myFunc1('영희'));
// 출력 => 안녕 영희 너의 나이는 22살 이니?(5) Array, Object destructing(배열 및 객체 비구조화)
비구조화 할당이 추가되었다. 비구조화 할당이란? 배열이나 객체의 속성 또는 값을 해체하여 그 값을 변수에 각각 담아 사용하는 자바스크립트 표현식이다.
비구조화를 통해 배열 또는 객체의 값을 새 변수에 더 쉽게 할당할 수 있다.
// ES5 문법
const contacts = {
famillyName: '이',
name: '영희',
age: 22
};
let famillyName = contacts.famillyName;
let name = contacts.name;
let myAge = contacts.age;
console.log(famillyName);
console.log(name);
console.log(age);
// 출력
// 이
// 영희
// 22ES5에서는 배열에서 하나씩 뽑아서 변수에 각 값을 할당해야 하는데, ES6에서는 객체의 경우 객체의 속성을 얻기 위해 값을 중괄호{ } 안에 넣으면 되고
// ES6 문법
const contacts = {
famillyName: '이',
name: '영희',
age: 22
};
let { famillyName, name, age } = contacts;
console.log(famillyName);
console.log(name);
console.log(age);
// 출력
// 이
// 영희
// 22배열의 경우 객체와 동일한 구문을 사용하는데 중괄호 { }를 대괄호 [ ]로 바꾸면 된다.
const arr = ['광희', '지수', '영철', 20];
let [value1, value2, value3] = arr;
console.log(value1);
console.log(value2);
console.log(value3);
// 출력
// 광희
// 지수
// 영철(6) import, export(가져오기 및 내보내기)
Javascript 응용 프로그램에서 import 및 export를 사용할 경우 이를 통해 별도의 재사용 가능한 구성요소를 작성할 수 있다.
export = 다른 자바스크립트 구성요소에 사용할 모듈을 내보낼 수 있고,
import = 그 모듈을 내 컴포넌트에 사용하기 위해 가져오기 를 한다.
