자바스크립트 ES6 1편

*Udemy의The Complete JavaScript Course 2020: Build Real Projects! 참고

 

1.LET, CONST

// ES5
var name5 = 'Jane Smith';
var age5 = 23;
name5 = 'Jane Miller';
console.log(name5);
// ES6
const name6 = 'Jane Smith';
let age6 = 23;
name6 = 'Jane Miller';
console.log(name6);

// LET
function varTest() {
  var x = 1;
  if (true) {
    var x = 2;  // 상위 블록과 같은 변수!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

function letTest() {
  let x = 1;
  if (true) {
    let x = 2;  // 상위 블록과 다른 변수
    console.log(x);  // 2
  }
  console.log(x);  // 1
}

// CONST
const number = 42;

try {
  number = 99;
} catch (err) {
  console.log(err);
  // expected output: TypeError: invalid assignment to const `number'
  // Note - error messages will vary depending on browser
}

console.log(number);
// expected output: 42

1.LET

 

let 구문은 블록 유효 범위를 갖는 지역 변수를 선언하며

 

선언과 동시에 임의의 값으로 초기화할 수도 있다.

 

let은 변수가 선언된 블록, 구문 또는 표현식 내에서만 유효한 변수를 선언한다.

 

이는 var 키워드가 블록 범위를 무시하고 전역 변수나 함수 지역 변수로 선언되는 것과 다른 점이다.

 

2.CONST

 

const 선언은 블록 범위의 상수를 선언합니다. 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없습니다.

 

상수는 let 문을 사용하여 정의된 변수와 마찬가지로 블록 범위(block-scope)입니다.

 

상수의 값은 재할당을 통해 바뀔 수 없고 재선언될 수 없습니다.

 

2.BLOCK & IIFE

// ES6
{
    const a = 1;
    let b = 2;
    var c = 3;
}

//console.log(a + b); // 접근 불가
console.log(c); //3

// ES5
(function() {
    var c = 3;
})();
//console.log(c); // 접근 불가

 

블록 안의 범위는 밖에서는 접근할 수 없다. 따라서 변수 a, b를 외부에서 접근하려고 하면 에러가 뜬다.

 

하지만 var의 경우 블록범위가 아닌 전역범위를 택하고 있기 때문에 외부에서도 접근할 수 있다.

 

ES5의 경우 이러한 블록 범위를 생성하기 위해서 IIFE를 생성했다.

 

3.STRINGS

let firstName = 'John';
let lastName = 'Smith';
const yearOfBirth = 1990;
function calcAge(year) {
    return 2016 - year;
}
// ES5
console.log('This is ' + firstName + ' ' + lastName + '. He was born in ' + yearOfBirth + '. Today, he is ' + calcAge(yearOfBirth) + ' years old.');

// ES6
console.log(`This is ${firstName} ${lastName}. He was born in ${yearOfBirth}. Today, he is ${calcAge(yearOfBirth)} years old.`);
const n = `${firstName} ${lastName}`;
console.log(n.startsWith('j'));
console.log(n.endsWith('Sm'));
console.log(n.includes('oh'));
console.log(`${firstName} `.repeat(5));

1.TEMPLETE LITERAL

 

템플릿 리터럴은 이중 따옴표 나 작은 따옴표 대신 백틱(` `) (grave accent) 을 이용합니다. 

 

템플릿 리터럴은 또한 플레이스 홀더를 이용하여 표현식을 넣을 수 있는데,

 

이는 $와 중괄호( $ {expression} ) 로 표기할 수 있습니다.

 

출처-https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals

Template literals

 

2.startWith

 

str.startsWith(searchString[, position])

 

startsWith() 메소드는 어떤 문자열이 특정 문자로 시작하는지 확인하여 결과를 true 혹은 false로 반환합니다.

 

startsWith 메소드로 어떤 문자열이 다른 문자열로 시작하는지 확인 할 수 있습니다. 대소문자를 구분합니다.

 

출처-https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith

String.prototype.startsWith()

3.endWith

 

str.endsWith(searchString[, length])

 

endsWith() 메서드를 사용하여 어떤 문자열에서 특정 문자열로 끝나는지를 확인할 수 있으며,

 

그 결과를 true 혹은 false로 반환한다. 

 

출처-https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith

String.prototype.endsWith()

 

4.includes

 

arr.includes(valueToFind[, fromIndex])

 

includes() 메서드는 배열이 특정 요소를 포함하고 있는지 판별하며

 

그 결과를 true 혹은 false로 반환한다. 

 

문자나 문자열을 비교할 때, includes()는 대소문자를 구분합니다.

 

출처-https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/includes

Array.prototype.includes()