✏️ ES6: 첫 번째 섹션

소개하다.👋🏼

네 부분으로 구성된 시리즈의 첫 번째 부분에 오신 것을 환영합니다. 여기서 저는 제가 현재 배우고 있는 개념을 기록하여 자바스크립트 언어를 더 잘 이해하는 여행의 일부분으로 삼겠습니다.
이 섹션에서는 다음 항목을 설명합니다.

Let 및 Const 변수 선언

막히고 함수 표현식 즉시 호출

ES6의 문자열

일단 내가 다음 부분을 쓰고 발표하면, 나는 그것들을 이 줄 아래로 연결할 것이다.
[다음 부분을 적어서 발표하기 전까지는 여백이 없었다.]

Let 및 Const가 포함된 변수 선언📦

ES6에서는 다음 키워드를 사용하여 변수를 선언하는 새로운 방법인 "let"및 "const"두 가지가 있습니다.

ES6에서 변수 정의

// Two methods of declaring variables
let counter = 0;
const name = 'Yusuf';

console.log(counter); // Output: 0
console.log(name); // Output: Yusuf

실제로 위의 두 문장은 같은 일을 할 것이다. 예를 들어 두 개의 새로운 변수,counter와name을 정의하고 그것을 어떤 값으로 설정하는 것이다.

그럼'let'과'const'는 어떤 차이가 있나요?

"let"과 "const"의 주요 차이점은 다음과 같습니다.

"let": JavaScript 응용 프로그램의 전체 라이프 사이클에서 변경될 수 있는 값입니다.

"const": 프로그램에서 언제든지 변경할 수 없는 값입니다.이것들은 "상수"값으로 여겨질 수 있습니다.**

**평에서 좋은 의견을 제시해 주셔서 감사합니다. 상수 구조 자체(예를 들어 그룹 요소)에 포함된 값을 변경할 수 있지만 전체 변수 자체(예를 들어 전체 그룹 내용을 바꾸는 것)를 변경할 수 없습니다.그의 의견은 다음과 같다.
의견을 찾을 수 없습니다.
다음은 const에 대한 또 다른 좋은 설명입니다.
의견을 찾을 수 없습니다.
위에서 정의한 계수기와 명칭 변수의 예를 돌이켜 보면, 우리는let을 계수기로 하고,const를 명칭으로 한다.이것은 일리가 있는 것이지, 그렇지?

계수기: 이것은 프로그램에서 점차적으로 증가하거나 감소할 수 있기 때문에 이 변수에let을 사용하는 것이 적합합니다.

이름: 대부분의 경우 한 사람이 자신의 이름을 변경할 수 없기 때문에 const로 정의하기를 원하기 때문에 변경할 수 없습니다.

실제로 const로 정의된 변수의 값을 바꾸려고 하면 귀여운 오류가 발생합니다.

const name = 'Yusuf';
// Attempting to re-assign the value of name throws an error
name = 'new name!';
console.log(name);

이 기능은 개발자로 하여금 하나의 값으로 변수를 정의하고 저장할 수 있게 한다. 자바스크립트가 이것에 대해 크게 놀라지 않도록 하면, 그들은 변수를 의도적이거나 무의식적으로 변경할 수 없다는 것을 안다.나는 매우 좋다고 생각한다.

변수 선언: 함수 범위 및 블록 범위🔍

let과 const가 도입됨에 따라 JavaScript 엔진은 일반적으로 ES5에서 var 키워드로 변수를 선언할 때와 다르게 이러한 변수에 액세스합니다.
우리는let과const 변수를 블록 작용역으로 설명하고 var을 함수 작용역으로 정의할 수 있습니다.범위는 특정 값에 접근할 수 있는 공간으로 여겨질 수 있다.

블록 범위: 이 범위에 정의된 변수는

에 정의된 블록에서만 사용할 수 있습니다.

함수 작용역: 이 작용역에서 정의된 변수는 정의된 전체 함수에서 사용할 수 있으며 심지어 다른 내부 작용역에서도 사용할 수 있다

다음은 두 역할 영역의 간단한 예이며 그 뒤에 설명되어 있습니다.

// ES5: 'var'
function testingScopesOne()
{
    var num =  1;

    // Creating a new Block Scope
    {
        var num =  2;

        // Output: 2
        console.log(num);
    }

// Output: 2
console.log(num);
}

// ES6: 'let'
function testingScopesTwo()
{
    let num =  1;
    // Creating a new Block Scope

    {
        let num =  2;

        // Output: 2
        console.log(num);
    }

    // Output: 1
    console.log(num);
}

testingScopesOne();
testingScopesTwo();

코드 해석👀

위에서 나는 두 가지 함수를 정의하고 실행했다. 그것이 바로 테스트 스코프 원과 테스트 스코프 Two이다.
각 함수에서 수행한 작업, 결과, 그리고 이것이 함수 범위 및 블록 범위의 개념과 어떻게 연관되는지 설명하려고 합니다.

함수마다 나는num이라는 변수를 정의하여 1을 부여했다.그것들 사이의 차이는 내가 테스트스코프원에서var을 사용하고TestingScopesWO에서let을 사용한다는 데 있다

변수를 정의하고 값을 부여한 후에 괄호 {...}를 사용하여 새 블록을 만들었습니다.

새로 만든 블록 범위 내에서 같은 이름의 변수num을 만들고 새 값 2를 지정했습니다.

testingScopesOne: var을 사용하고 현재 블록 범위 내에서 값을 출력합니다.

testingScopesTwo: let을 사용하여 값을 출력합니다.

양자의 출력 값은 모두 2이며 이것은 예상 값이다.그러나 블록 범위를 벗어나면 출력문에서 다른 결과를 얻을 수 있습니다.

블록 범위를 벗어난 후, 나는testingScopesOne과testingScopesTwo에서'num'의 값을 다시 출력했다.

TestingScopesOne 출력은 2이고 TestingScopesTwo 결과는 1입니다. 이것은 우리가 시작할 때 할당한 초기 값입니다.

왜 이러지?😮

testingScopesOne 함수는 함수 범위의 개념을 보여 줍니다.
설명: 우리는 var을 사용하여 변수num을 정의하여 값을 부여한 다음 함수의 다른 범위 내에서 다시 값을 부여합니다.이 새 값 2는 초기 값 1을 덮어씁니다. var을 사용하여 정의한 변수 범위가 함수 범위임을 나타냅니다.
한편, testingScopesTwo 함수는 블록 역할 영역의 개념을 보여 준다.
설명: 우리는let을 사용하여 변수num을 정의한 다음에 함수의 다른 역할 영역에서num에 다른 값을 할당했다(2). 반대로 이 새 값은testingScopesOne처럼 저장되지 않았기 때문에 이 역할 영역 이외의 함수 끝에 값을 출력할 때 이 값은 1로 유지된다.
블록 범위 내에서 변수num을 다시 설명할 때, 이름이 우리가 설명한 초기 변수 (num) 와 일치하지만, 새로운 변수를 만들었기 때문입니다.따라서 이것은 블록 작용역의 개념을 설명하는데 그 중에서let을 사용하는 모든 변수 정의는 블록 작용역이 정의한 현재 블록 작용역에만 귀속된다.

블록과 즉시 호출된 함수 표현식🏃🏽

블록은 괄호 세트에 포함된 코드입니다.

{
    // Some code
}

블록은 보통if,for,else 등 구조를 제어하는 데 사용되지만 이러한 구조에 국한되지 않는다.
ES6에서 우리는 블록의 개념을 사용하여 즉시 호출 함수 표현식(IIFE)을 작성하는 방식을 간소화할 수 있다.

무엇이 생활입니까?

생명은 직접 수행하는 기능입니다(🏃🏽) 정의에 따르면 JavaScript 엔진은 이것이 즉시 실행해야 하는 함수라고 생각합니다.
iLife의 가장 중요한 점은 사용 및 정의된 모든 데이터를 캡슐화하는 것입니다.이 데이터가 공개적으로 정의되지 않는 한 IIFE 내부에서 어떤 내용도 접근할 수 없다는 뜻이다.이렇게 하면 IIFE를 실행할 때 새 역할 영역이 만들어지고 이 역할 영역은 주부 역할 영역과 분리됩니다.

IIFES: ES5 및 ES6

ES5에서 우리는 다음과 같은 일을 해서 생활을 창조해야 한다.

성명 익명 함수

이 함수를 괄호로 묶음

괄호

에 괄호 쌍 추가
일이 많죠?이 건물이 결국 얼마나 어지러워 보였는지는 말할 것도 없다.
다행히도 ES6에서 우리는 한 쌍의 괄호 안에 코드를 작성하기만 하면 된다.이렇게

// ES5 IIFE
(function() {
    // Code
})();

// ES6 IIFE
{ 
    // Code
}

ES6 생활: 예

다음은 간단한 예입니다. IIFE를 정의하고 변수 myName을 설명합니다.
IIFE에서 이 변수에 접근하면 정상적으로 작동할 수 있지만 IIFE 외부에서 접근하려고 하면 오류가 발생합니다.

{
    const myName = 'Yusuf';
    console.log(myName); // Output: Yusuf
}
console.log(myName); // Error: myName is not defined

ES6의 문자열🧵

ES6에서는 문자열을 조작하고 상호작용하는 방식이 훨씬 낫다.
이것은 아마도 내가 가장 좋아하는 ES6 특성 중의 하나일 것이다.그게 바로...문자열 텍스트.

문자열 문자

한 사람의 이름과 같은 변수를 포함하는 문자열을 출력하고 싶을 때가 언제였는지 기억하십니까?이 작업을 수행하려면 다음을 수행해야 합니다.

// ES5 Strings
console.log('Hello' + name + ', welcome to this application!');

문자열 문자에 대해 변수 사이에 + 연산자를 추가하고 변수마다 시작/끝 문자열을 추가하는 어색함은 이미 사라졌다🥳! 다음과 같은 콘솔 로그를 사용할 수 있습니다.

// ES6 String Literals
console.log(`Hello ${name}, welcome to this application!`);

현저한 차이점:

일반 따옴표 대신 체크 표시

다음 구문을 사용하여 변수를 입력합니다. ${...},어디표시할 변수를 나타냅니다

.
${...} 에 다른 간단한 JavaScript 코드 세그먼트를 입력할 수도 있습니다.구조, 예를 들어 함수에 대한 호출.이 함수는 표시하고 싶은 값을 되돌려줄 수 있습니다. 이 경우 문자열에 직접 입력할 수 있습니다.

function returnName()
{
    return 'Yusuf';
}

console.log(`Hello ${returnName()}, welcome to this application!`);
// Output: Hello Yusuf, welcome to this application!

ES6 문자열 메서드

ES6는 문자열 문자 외에도 문자열에 사용할 수 있는 새로운 함수를 제공합니다.다음은 각 방법에 대한 간단한 설명입니다.

// Method Name: startsWith
console.log('coffee'.startsWith('cof'));
// Output: true

// Method Name: endsWith
console.log('coffee'.endsWith('ee'));
// Output: true

// Method Name: includes
console.log('coffee'.includes('offe'));
// Output: true

// Method Name: repeat
console.log('hey '.repeat(4));
// Output: hey hey hey hey

결론

이 네 부분으로 구성된 시리즈의 첫 번째 부분에서는 다음과 같은 ES6 JavaScript 개념을 설명합니다.

let과const로 변수를 정의하고 var

을 사용한 것과 비교

작용역을 간략하게 소개했지만 완전한 문장으로서 우리는 그것에 대해 더 많은 소개를 할 수 있다!

는 즉각 호출되는 함수 표현식과 블록

을 어떻게 사용하는지 소개했다.

ES6 문자열 조작과 관련된 새로운 방법

이 시리즈의 다음 세 부분을 계속 주목해 주십시오. 일단 발표되면, 저는 아래에서 링크를 발표할 것입니다.
이 시리즈의 다음 미발표 세 부분에 공간을 남겨 두세요!
참고: 모양이나 형식에 관계없이 저는 JavaScript 분야의 전문가가 아닙니다.제가 이 게시물 뒤에 있는 생각과 동기는 제가 이런 개념을 배우는 동시에 이 개념을 더 잘 이해하도록 도와주고 개발 커뮤니티에 보답하려고 하는 것입니다.
만약 내가 공유한 정보에 어떤 근본적인 문제가 있다면 나에게 알려주세요.우리는 모두 아직 공부하고 있으니, 우리는 당연히 함께 공부할 수 있다.😊
화상에서 나를 찾았고, 나는 그곳에서 내가 현재 일하고 있는 기술에 대해 발표하였으며, 컴퓨터 과학 학생으로서의 나의 여정을 기록하였다🙂.