JavaScript ES6
-
함수 업그레이드JavaScript ES6 2022. 5. 11. 09:40
보통 함수는 아래와 같이 쓴다. function 더하기(a, b) { console.log(a+b); } 더하기(1, 2); //더하기(1) 근데 자바스크립트는 파라미터가 2개일 때, 1개만 써도 에러가 나지 않는다. 여기서 default 파라미터를 설정할 수 있다. function 더하기(a, b = 10) { console.log(a+b); } 더하기(1) 파라미터 선언에서 미리 할당을 해버리면 b의 기본값이 10으로 고정된다. 즉, b자리에 파라미터를 안넣었을 때 작동한다. default 파라미턴 b=10 , b=2*a 이런 식으로 연산도 가능하다. 그리고 함수도 입력가능하다고 한다. 이제, 함수의 arguments를 알아보자. function 함수(a,b,c) { console.log(argume..
-
...spread operatorJavaScript ES6 2022. 5. 10. 13:49
var 어레이 = ['hello', 'world']; // 1.Array에 붙이면 대괄호를 제거해준다. ...어레이 출력하면 hello world 이렇게나옴 var 문자 = 'hello'; // 2.문자에 붙이면 대괄호를 제거해준거처럼 보임 ...문자 출력하면 h e l l o 이렇게나옴 var a = [1,2,3]; var b = [4,5]; var c = [...a]; //c는 [1,2,3] 이렇게 됨 즉, 합치거나 복사를 할 수 있음 ...a,...bㅎ면 [1,2,3,4,5] 가 나옴. // 쓸곳 // 보통 딥카피함 어레이는 등호로 복사를 하면 두개가 완전히 같은 값을 공유한다. // 그래서 b에 a를 복사하려면 b = [...a] 이렇게 복사해야함 var o1 = { a : 1, b : 2 }; ..
-
literalsJavaScript ES6 2022. 5. 9. 20:42
template literals란 문자열인데 문자열을 다르게 제작할 수 있는 방법을 뜻한다. var 문자 = `손흥민`;//backtick을 이용함 // 1.엔터키가능 // 2.중간중간 변수 넣기 쉬움 문자 중간에 ${변수} 이렇게 가능 이렇게 일반적으로 ''에 문자를 넣는게 아니라 `` backtick에 문자를 넣을 수 있다. 길어질때 엔터키를 써서 구분할 수 있고, 중간에 ${변수} 이렇게 써서 변수를 넣을 수 있다. tagged literal에 대해 알아보자. //tagged literals var 변수 = '손흥민'; function 해체분석기(문자들, 변수들){ console.log(문자들); console.log(변수들); } 해체분석기`안녕하세요 ${변수} 입니다`; //이렇게 함수 뒤에 문..
-
변수에 대한 정리JavaScript ES6 2022. 5. 6. 13:47
변수란 //var 변수이름 = 저장할 값 var 이름 = 'Kim'; //사용 이름 이렇게 사용하며, 자료를 저장하는 임시공간을 의미한다. ES6이 되면서 let과 const가 생겨났다. 선언, 할당, 범위에서 차이가 있는데, 재선언이란 var 이름 ~ 을 쓰고 또, var 이름 ~ 을 쓰는 것이다. 재할당이란 var 이름 ~ 을 쓰고, 밑에서 이름 = ~을 쓰는 것이다. var 은 재선언가능 / 재할당가능 / 범위function안에서만 존재 let 은 재선언불가능 / 재할당가능 / 범위 { }안에서만 존재 const 은 재선언불가능 / 재할당불가능 / 범위 { }안에서만 존재 그래서 const는 변하지 않는 값을 넣으면 좋다. 그리고 오브젝트 내부 값은 변경해도 에러가 나지 않는다. 이건 재할당으로 취..
-
Arrow functionJavaScript ES6 2022. 5. 6. 13:32
함수를 만드는 방법은 두가지가 있다. //1. function 함수() { } //2. var 함수 = function() { } //사용 함수() Arrow function을 사용하면 좀더 편리하게 만들 수 있다. var 함수 = () => { } 이렇게 사용한다. 함수는 입출력 기계를 만들거나 / 코드들을 기능으로 묶고 싶을 때 만든다. Arrow function의 장점은 파라미터가 하나거나 return 코드가 한줄이면 중괄호를 생략할 수 있어서 간략하게 사용할 수 있다. 이제 사용법 예시를 들어보자. 1. forEach 콜백함수 [1,2,3,4].forEach((a)=>{ console.log(a) }) 2. 이벤트리스너 document.getElementById('버튼').addEventListe..
-
this 키워드JavaScript ES6 2022. 5. 4. 08:35
this키워드를 함수와 Object에서 사용해보자. 먼저, this의 뜻을 알아보자. 1. this는 {window}를 뜻한다. (그냥 쓰거나 일반 함수에서 this를 사용했을 때) window는 기본 함수들의 수납공간이다. 만약 자바스크립트 상단에, 'use strict'이런게 있다면 자바스크립트를 엄격하게 실행하게 된다. 그러면 변수 선언시 var을 꼭 써야한다던가 이렇게 바뀐다. 여기서, 일반함수 내에 this를 사용하면 undefined가 나온다. (strict mode + 일반함수) 2. this를 오브젝트 안에서의 함수에서 사용할 때 즉, var 오브젝트 = { 함수 : function() { console.log(this) } } 이렇게 사용하면, this 는 나를 포함하고 있는 오브젝트를 ..