✏️ ES6: 2부

소개👋🏼

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

화살표 함수: 기초

화살표 함수: 단어'This'키워드

분해

이 시리즈의 시작 부분에서 ES6에 대한 링크를 배우려면 다음과 같이 하십시오. 첫 번째 섹션⬇️

✏️ ES6: 1부

우소복 비밀번호・ 2019년 11월 9일・ 7분 읽기

#javascript #beginners #tutorial #webdev

화살표 함수:기본➡️

화살표 함수는 ES6에서 함수를 작성하는 새로운 방법입니다.문법이 더욱 간단하여 코드를 더욱 명확하게 볼 수 있다.
다음은 일반적인 형식의 기본 문법입니다. 참고로 Mozilla Developer Network 에서 직접 얻을 수 있습니다. 왜냐하면 그것은 매우 좋고 명확하기 때문입니다.

(param1, param2, …, paramN) => { statements } 
(param1, param2, …, paramN) => expression
// equivalent to: => { return expression; }

// Parentheses are optional when there's only one parameter name:
(singleParam) => { statements }
singleParam => { statements }

// The parameter list for a function with no parameters should be written with a pair of parentheses.
() => { statements }

이제 우리는 기본적인 예시를 하나 봅시다.ES5에서 작성된 일반 함수부터 시작합니다.여기에서 나는 ES5Func라는 함수 성명을 작성하여name라는 매개 변수를 전달했다.그리고 간단한 문장으로 콘솔에 출력합니다.

function ES5Func(name) 
{
    console.log(`Hey ${name}!`);
}

ES5Func('Yusuf'); // Output: Hey Yusuf!

이제 위와 같은 코드를 작성했지만 ES6 Arrow 함수 문법을 사용했습니다.나는 그것을 다음과 같이 분해할 것이다.

const ES6Func = (name) => console.log(`Hey ${name}!`);
ES6Func('Yusuf');  // Output: Hey Yusuf! (same as above)

ES6Func라는 상수 값을 발표했습니다. - 새 함수

의 이름입니다.

그리고 우리는 함수에 어떤 매개 변수를 제공한다. 이 예에서 우리는 이름이 있다

참고: 매개변수가 하나만 있는 경우 필요한 경우 괄호 생략

그리고 화살표 =>의 사용을 소개했습니다. - 이것은 우리의 함수를 확정하는 시작입니다.

이 예에서 우리는 ES5의 일반적인 괄호와 같은 괄호가 없습니다.이것은 우리가 단지 한 줄의 코드만 작성했기 때문이다. 간단하게 말하자면, 한 줄의 코드만 실행할 때, 대괄호를 사용할 필요가 없기 때문이다.

다음 중 다른 예를 살펴보겠습니다.

// Method to square the number entered by the user and return the value
const squareValue = (numToSquare) => {
    console.log(`The number that is going to be squared is: ${numToSquare}`);
    return numToSquare * numToSquare;
};

let valueSquared = squareValue(5);
console.log(valueSquared); // Output: 25 (5 x 5 = 25)

두 번째 예에서, 우리가 여러 줄 코드를 작성할 때, 우리는 확실히 대괄호가 있다는 것을 주의해라.
현재 우리의 함수는 ES6 화살표 함수 문법으로 작성할 수 있지만, 우리가 고려해야 할 것은 우리가 이 문법을 사용할 때'this'값의 행위가 다르다는 것이다.다음 절에서 나는 이 점을 간단명료하게 묘사할 것이다. 비록 나는 이 점을 더욱 깊이 있게 연구할 수 있다는 것을 알고 있지만.

화살표 함수: 단어'This'키워드

일반적인 ES5 함수에 대해 모든 새로운 함수는 자신의 이 값을 정의합니다. 이 값은 함수의 호출 방식에 의해 결정됩니다. - 화살표 함수는 그렇지 않습니다!
화살표 함수는 주위 환경의 이 값을 사용합니다. 이 값은 함수 위치의 영향을 받기 때문에 어법으로 설명됩니다.
다음은 우리가 작성한 화살표 함수의 예입니다. 컨트롤러에this 속성만 표시하면 됩니다.

let exploreThisKeyword = () => console.log(this);
exploreThisKeyword();

이 함수를 실행할 때 출력은 창 대상으로 해석됩니다.이것은 현재 부모 범위가 Windows, 즉 브라우저의 전체 범위이기 때문이다.
왜 이런 상황이 발생했는지 더 설명할 수 있지만, 나는 이 문장이 너무 길어지는 것을 원하지 않는다.이 JavaScript 주제에 관심이 있으시면 추천합니다You Don't Know JS Yet: Scope & Closures.
이 절의 요점은 화살표 함수가'this'키워드에 대한 자신의 값을 만들지 않고 그 주위에서 지정한 값을 계승한다는 것이다.따라서 화살표 함수를 사용하기 시작할 때 이 점을 기억하십시오.

해체하다⛏️

분해는 데이터 구조를 구성 변수로 분해하는 과정이다.이렇게 하면 필요한 각 값을 개별적으로 추출하지 않고 여러 변수를 빠르게 정의할 수 있습니다.
만약 당신이 그룹 foo를 가지고 있다면, 이 그룹의 값을 변수에 저장하고 싶습니다.다음은 일반적인 방법의 예입니다.

// ES5 - storing values from an array into variables
let foo = ['one', 'two', 'three'];

let red = foo[0];
let yellow = foo[1];
let green = foo[2];

비록 그것은 매우 잘 일하지만, 우리가 실현해야 할 목표는 아직 매우 길다.다행히도 우리는 해구가 있다!
다음 예는 수조와 대상을 어떻게 분해하는지 보여 준다.

어레이

// ES6 - storing values from an array into variables
let foo = ['one', 'two', 'three'];

let [red, yellow, green] = foo;
console.log(red); // "one"
console.log(yellow); // "two"
console.log(green); // "three"

물체

// ES6 - storing the value of some properties of an object into variables
let o = {p: 42, q: true};
let {p, q} = o;

console.log(p); // 42
console.log(q); // true

ES6의 새로운 기능으로 데이터를 추출하는 것이 얼마나 쉬운지 보실 수 있기를 바랍니다.

결론

네 부분으로 구성된 이 시리즈의 두 번째 부분에서 나는 다음과 같은 ES6 JavaScript 개념을 소개했다.

ES6 화살표 함수: "this"키워드의 기본 구문 및 동작

분해

이 시리즈의 다음 두 부분을 계속 주목해 주십시오. 발표되면 아래에 링크를 발표할 것입니다.
이 시리즈의 다음 미발표 두 부분에 공간을 남겨주세요!
이 시리즈의 첫 부분을 읽고 싶으세요?아래를 클릭합니다

✏️ ES6: 1부

우소복 비밀번호・ 2019년 11월 9일・ 7분 읽기

#javascript #beginners #tutorial #webdev

참고: 모양이나 모양이나 JavaScript 전문가는 아닙니다.내가 이 게시물들 뒤에 있는 생각과 동기는 내가 이런 개념을 배우는 과정에서 그것들을 더욱 잘 이해하고 개발자 커뮤니티에 보답하는 데 도움을 주는 것이다.
만약 내가 공유한 정보에 어떤 근본적인 잘못이 있다면 나에게 알려주세요.우리는 모두 아직 공부하고 있다. 우리는 반드시 함께 할 수 있다.😊
화합에서 나를 찾았고, 그곳에서 나는 내가 현재 사용하고 있는 기술을 발표하였으며, 내가 컴퓨터 과학 학생으로서의 과정을 기록하였다🙂.