1. let과 const
1) let 변수는 중복 선언이 불가능하다.
2) let 변수의 유효범위는 {} 블록이다.
//let변수는 같은 블록에서 내에서 중복이 불가능하다.
let y = 1;
// let y = 100; //에러
//let변수의 유효범위는 {}블록이다
let z = 10;
if(true) {
let z = 100;
console.log(z); //100
}
console.log(z); //10const GENDER = "남자";
// var GENDER = "여자"; //에러
// GENDER = "여자"; //에러
const arr = ["홍길동", "이순신", "홍길자"];
// arr = ["김철수"]; //에러
arr[0] = "김철수"; //내부의 값 변경은 허용
arr.push("박영희"); //내부의 값 추가 허용
//객체에서의 수정
const P1 = {"name" : "홍길동" };
// P1 = {"name" : "이순신"}; //P1을 전부 바꾸는 코드는 에러
P1.name = "이순신"; //내부의 값의 변경은 허용
P1.age = 20; //내부의 값의 추가도 허용<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul class = "list">
<li>목록1</li>
<li>목록2</li>
<li>목록3</li>
<li>목록4</li>
</ul>
<script>
let x = 1;
// let x = 1; 중복 선언이 안됨
//let변수는 중괄호 스코프
if(true) {
let x = 10;
console.log(x); //10
}
console.log(x); //1
/*
var lis = document.querySelectorAll(".list li");
//var는 함수 스코프라서 함수에서 선언된 애들은 for문에서 i가 살아 있음(그래서 계속 눌렀을 때 4가 나옴)
//이걸 해결할 수 있는 방법은 closer을 이용하는 방법임(함수 안에서 변수의 값을 기억한다)
for(var i = 0; i < lis.length; i++) {
(function(x) {
lis[x].onclick = function(){
console.log(x);
}
})(i);
}
*/
//위와 같이 사용할 수 있음(let 변수 사용시)
let lis = document.querySelectorAll(".list li");
for(let i = 0; i < lis.length; i++){
lis[i].onclick = function(){
console.log(i);
}
}
</script>
</body>
</html> const gender = "남자";
// gender = "여자";
const arr = [1,2,3];
// arr = [1]; //배열을 통째로 변경하는 것은 불가함
arr[0] = 10; //0번째의 값을 10으로 변경한다.
arr.push(4); //4를 뒤에 추가한다.
console.log(arr);
const obj = {name : "홍길동"};
// obj = {name : "이순신"}; //객체를 통째로 변경하는 것은 불가함.
obj["name"] = "이순신"; //변경하는 건 가능함
obj["age"] = 10; //추가하는 것도 가능
console.log(obj);
2. 1) spread operator(전개 구문) : ...로 표기하면 요소들을 추출할 수 있음.
1) 반복 가능한(iterable)에 적용할 수 있는 문법입니다.
2) 배열이나 문자열 등을 아래처럼 풀어서 요소 하나 하나로 전개시킬 수 있습니다.
const arr = [1,2,3];
console.log(...arr); //num의 요소들을 추출
const str1 = 'hello';
const str2 = [...str1];
console.log(str2); // [ "h", "e", "l", "l", "o"]
//배열에서 전개구문
//배열의 추가
const num1 = [10, 20, 30, ...arr];
console.log(num1)
//배열의 중간추가
const num2 = [10, 20, ...arr, 30];
console.log(num2)
//배열의 복사
const num3 = [...arr]; //splice와 유사(복사)
console.log(num3)
//배열 연결
const num4 = [...arr, ...arr]
console.log(num4)
2. 2) 함수에서의 spread operator
const num = [1,2,3];
//함수의 전달
function sum(x, y, z) {
return x + y + z;
}
console.log( sum(...num) ); //num의 요소를 x,y,z로 전달
console.log( sum(10, ...num) ); //10, 1, 2, 3을 전달
//함수의 매개변수의 사용(가변적 매개변수) - 단 마지막에 작성해야 합니다.
function sum2(x, ...arr) {
return [x, ...arr]; //리스트 반환
}
console.log( sum2("홍길동", 1) )
console.log( sum2("홍길동", 1,2) )
console.log( sum2("홍길동", 1,2,3) )
//함수의 default매개값
function sum3(x, y = 10, z = 100) {
return x + y + z;
}
console.log( sum3(1) ) //111
console.log( sum3(1, 2) ) //103
console.log( sum3(1, 2, 3) ) //6
console.log( sum3(...[1,2] )) //1,2를 추출해서 전달 //103<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function sum(x, y, z){
return x + y + z;
}
let arr = [1, 2, 3];
//sum(arr[0], arr[1], arr[2]);
console.log( sum(...arr) );
console.log( sum(10, ...arr)); 10, 1, 2, 3 //위에 sum return에 x + y + z
//함수를 선언 시 - 가변적 매개변수(반드시 맨 마지막에 선언)
function sum2(x, ...y){ //...y, x는 안됨(맨 마지막에 선언 잊지 말기)
return [x, ...y];
}
console.log(sum2(1));
console.log(sum2(1,2));
console.log(sum2(1, 2, 3));
console.log(sum2(1, 2, 3, 4));
//함수의 default 매개변수
function sum3(x, y = 10, z = 100) {
return x + y + z;
}
console.log(sum3(1) ); //111
console.log(sum3(1, 2)); //x = 1, y = 2가 들어가서 103 결론값
console.log(sum3(1,2,3)); //6
console.log(sum3(...arr)); //6
</script>
</body>
</html>
3. destructuring assignment(구조 분해 할당)
1) 배열에서 destructuring
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr = [1, 2, 3, 4];
// let a1 = arr[0];
// let a2 = arr[1];
let [a, b, c, d] = arr;
console.log(a);
console.log(b);
console.log(c);
console.log(d);
let [a1, a2] = arr;
console.log(a1, a2); //1, 2
let [k1, , , k4] = arr;
console.log(k1, k4); //1, 4
let [y1, ...y2] = arr;
console.log(y1, y2); //1, [2,3,4] 뒤에 배열로 반환
let [...ar] = arr;
console.log(ar); //[1,2,3,4]
function useState() {
return [1, function() {}];
}
let [n1, n2] = useState();
console.log(n1, n2); //1, function
</script>
</body>
</html>
2) 객체에서 destructuring
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let obj = {"name" : "홍길동", "age" : 20};
/* console.log(obj.name);
console.log(obj["name"]); */
/* let {name} = obj; //객체니까 중괄호(name에 대한 키값)
console.log(name); */
/* let {name, age} = obj;
console.log(name, age);
let {...arr} = obj; //객체를 통째로 가지고 나옴
console.log(arr); */
let person = {
name: "홍길동",
age: 30,
job: ["js", "css"],
info: {id : "aaa123"}
}
// let {name, job}= person;
// console.log(name, job);
// let {name, job, info} = person;
// console.log(name, job, info);
//객체의 값을 다른 이름으로 가지고 나오기
let {name: aaa} = person; //name을 aaa 이름으로 가지고 나오기
console.log(aaa);
let {name: bbb, job: jjj} = person;
console.log(bbb, jjj); //name과 job의 값이 나옴
</script>
</body>
</html>
4. for of문
1) 반복 가능한 객체를 for문 안에서 반복시켜 연속된 결과값을 얻습니다.
2) foreach문에서 지원하지 않는 break, continue, return의 사용 가능
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr = ["a", "b", "c"];
// for(let i in arr){
// console.log(i); //index
// }
for(let i of arr) {
console.log(i); //value
}
for(let i of "hello world"){
console.log(i);
}
let person = [
{id : "aaa", age : 10},
{id : "bbb", age : 20}
];
//구조 분해 할당
for(let {id, age} of person) {
console.log(id);
console.log(age);
}
//객체를 반복할 수는 없음
/*
let obj = {a: 1, b: 2}; //obj is not iterable
for(let i of obj) {
console.log(i);
}
*/
</script>
</body>
</html>
5. backtick(문자열 안에서 값이 나올 수 있음)
1) 백틱 `(tap버튼 위에)을 용해서 문자열을 표현하고, 템플릿 리터럴 ${}를 이용해서 필요값을 처리
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let name = "이순신";
let age = 20;
console.log("이름은:" + name + "이고, 나이는:" + age + "입니다");
console.log(`제 이름은 ${name}이고 나이는 ${age}입니다`);
</script>
</body>
</html>
6. Arrow function(화살표 함수)
1) 화살표 함수는 기본적으로 익명 함수를 대체합니다. (호이스팅 불가)
2) 가독성이 향상됩니다.
* 문법 1
- 코드가 한줄이면 {} 생략이 가능하다.
- {}를 쓰지 않으면 기본값으로 undefined를 반환합니다.
- {}를 쓰지 않고 구문을 작성하려면 리턴문이 됩니다.
* 문법 2
- 매개변수가 1개라면, 매개 변수 자리의 ()의 생략이 가능합니다.
* 문법 3
- 객체를 반환 할 때는 ()를 묶어줍니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//기본적으로 익명 함수를 대체합니다.
/*
var a = function(){
console.log("a실행");
}
*/
//위와 완전 같음
let a = () => {
console.log("a실행");
}
a();
/*
문법1 - 코드가 한줄이면 {} 생략이 됩니다.
{}를 생락하면 자동으로 return이 붙습니다.
*/
//아래와 같음
/* let b1 = () => {
return console.log("b실행");
} */
let b1 = () => console.log("b실행");
b1();
let b2 = (a, b, c) => a + b + c;
console.log(b2(1, 2, 3));
let b3 = (a = 10) => a + 100;
console.log(b3()); //110
console.log(b3(20)); //120
/*
문법2 - 매개변수가 1개라면 () 생략이 됩니다.
*/
let c1 = a => a + 10;
console.log(c1(10)); //20
/*
문법3 - 객체를 반환할 때는 ()로 묶어줍니다.
*/
//1st
let c2 = () => {
return { key: 1, age: 20 }
};
//2nd
let c3 = () => ({ key: 1, age: 20 }) //객체를 반환할 때 쓰는 문법
console.log(c3());
//
/*
setInterval(function() {
console.log(1);
}, 1000);
setInterval(() => {
console.log(1), 1000);
}
*/
/* fetch("..").then(res => res.json())
.then */
</script>
</body>
</html>
7. 화살표 함수의 응용 forEach, filter, map
1) forEach - 반복문
array.forEach(callbackFunction(currenValue, index, array), thisArg)
- currenValue: 현재 값
- index: 현재 인덱스
- arrayt: 현재 배열
- thisArg: callbackFunction 내에서 this로 사용될 값
2) filter - 요소 개수만큼 반복하며 boolean을 이용한 새로운 list를 만듬(콜백에 리턴이 true인 값을 이용해서 새로운 배열을 반환)
array.filter(callbackFunction(currenValue, index, array), thisArg)
3) map - 실행한 결과를 가지고 새로운 배열을 만들 때 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//forEach(콜백함수, thisArg: 옵션)
//forEach( function(현재값, 인덱스, 현재 배열) {}, thisArg )
/*
let arr = ["a", "b", "c", "d"];
arr.forEach(function(value, index, arr) {
console.log("값" + value + ", 인덱스" + index + ", 배열" + arr);
});
arr.forEach(function(value) {
console.log(value);
})
arr.forEach((value, index, arr) => {
console.log(`값 ${value}, 인덱스 ${index}, 현재 배열 ${arr}`)
})
arr.forEach( value => console.log(value));
*/
//필터 함수 - 콜백에 리턴이 true인 값을 이용해서 새로운 배열을 반환
//filter (콜백(값, 인덱스, 현재 배열), thisArg)
let arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
/*
arr2.filter(function (value, index, arr) {
console.log(value, index, arr);
})
let result = arr2.filter(function (a, b, c) {
// console.log(a, b, c);
return a % 2 == 0;
})
console.log(result);
*/
// let result = arr2.filter((a) => a % 2 == 0);
// console.log(result);
//배열 요소 중에 o가 들어간 문자열만 필터링
// let arr3 = ["melon", "apple", "orange", "grape", "mango"];
// let result = arr3.filter(a => a.indexOf("o") != -1); //매개변수가 하나면 괄호 생략이 가능함
// //includes도 가능
// let result2 = arr3.filter(x => x.includes('o'));
// console.log(result);
// console.log(result2);
//map함수 - 실행한 결과를 가지고 새로운 배열을 만들 때 사용
//mpa(콜백(현재값, 인덱스, 현재 배열), thisArg)
let arr4 = [1, 3, 5, 7, 9];
// let result = arr4.map(function(a, b, c) { //현재 값, 인덱스, 배열
// return a + 1;
// })
// console.log(result);
// let result = arr4.map((a) => a + 1);
// console.log(result);
let arr3 = ["melon", "apple", "orange", "grape", "mango"];
// let result = arr3.filter(a => a.includes('o'));
// console.log(result);
// let result3 = result.map((x, y) => `o가 들어간 과일 중 ${x}는 ${y + 1}번째 입니다.`);
// console.log(result3);
// let result4 = arr3.filter(a => a.includes('o')).map((x, y) => `o가 들어간 과일 중 ${x}는 ${y + 1}번째 입니다.`);
// console.log(result4);
let result5 = arr3.filter( (x) => x.indexOf("o") != -1)
.map((x, y) => `o가 들어간 과일은 ${x}는 ${y + 1}번째`);
console.log(result5);
</script>
</body>
</html>
8. class
- 일반 html에서는 굳이 class를 사용하진 않습니다.
- react의 class 컴포넌트를 사용한다며 알아두세요.
1) 클래스의 멤버변수를 선언할 때는 키워드를 사용하지 않습니다(구형 브라우저에서는 지원 불가 할 수 있음)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
class Person {
//멤버 변수
name = "홍길동";
age = 20;
state = {a : 1};
//생성자는 js에서 반드시 1개 입니다.
//js는 this키워드를 지칭하면 멤버 변수가 자동 생성 됩니다.
constructor(addr) {
this.addr = addr;
}
//함수
func = () => {
console.log("func 실행")
}
}
//객체로 생성 - 허용 됩니다
let p = new Person();
console.log(p.name); //멤버변수 접근
console.log(p.age); //멤버변수 접근
console.log(p.state.a); //멤버변수 접근
p.func();
//생성자를 통한 생성
let p2 = new Person("서울");
console.log(p2.addr);
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
class Shape {
constructor() {
}
func = () => {
console.log("func 호출")
}
}
class Rect extends Shape {
//프로그래머가 생성자를 직접 만들게 되면 super()를 통해 연결해야 합니다.
constructor(w, h) {
super(); //부모의 생성자 연결(자바와 동일)
this.w = w; //멤버 변수에 w 저장
this.h = h;
}
//set
setW = (w) => {
this.w = w;
}
//get
getW = () => {
return this.w;
}
//set, get, static 같은 키워드들로 함수를 설정 할 수 있습니다.
}
//객체 생성
let rect = new Rect();
rect.func(); //물려 받음
//객체 생성
let rect2 = new Rect(10, 20);
console.log(rect2.w);
console.log(rect2.h);
rect2.setW(30);
rect.getW(rect2.getW());
</script>
</body>
</html>
9. module import export
* 모듈 임포트
- 모듈은 JS ES6문법에서 미리 작성해 놓은 스크립트 파일이며, 모듈 안에는 변수, 함수, 클래스 등이 정의되어 있습니다.
- ES6부터는 주요기능들을 모듈로 구성하여 사용이 가능합니다.
- 모듈을 내보내는 방법은 named export방식과 default export방식 2개가 있습니다.
- 여러 값을 내보낼 때 named export방식
- 단일 값을 내보낼 때 default export방식
- HTML5파일에서 예외적으로 module을 사용할려면 type="module" 문을 반드시 작성합니다.
- 하나의 모듈에서 하나의 객체를 이름으로 내보낼 때 단일 객체 내보내기 export default문을 사용합니다.
- Class나 함수를 내보낼떄는 세미콜론을 붙이지 않도록 권유됩니다.
* 예제 1~2(html, js)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="module">
//예제에서 module을 사용하려면 type을 반드시 적어야 됩니다.
import {name, age, info, addr, myInfo} from './index01.js';
console.log(name);
console.log(age);
info();
console.log(addr);
myInfo();
console.log("--------------------------------")
//import2 - 엘리어스 방식
import * as test from './index01.js';
console.log(test.name);
console.log(test.age);
test.info();
console.log(test.addr);
test.myInfo();
console.log("--------------------------------")
//import - 이름 붙여서 가져오기
import {name as n, age as a} from './index01.js';
console.log(n); //
console.log(a); //
</script>
</body>
</html>/*
* 모듈 익스포트, 임포트
- 모듈은 JS ES6의 미리 작성해놓은 스크립트 파일입니다.
- 변수, 함수, 클래스 등의 정의 되어 있습니다.
- 모듈을 내보내는 방식
- 여러 값을 내보낼 때 named export 방식
- 단일 값을 내보낼 때 default export 방식
*/
export const name = "이순신";
export const age = 20;
export const info = () => {
console.log("이름:" + name + ", 나이:" + age);
}
let addr = "서울시";
let myInfo = () => {
console.log(addr);
}
export {addr, myInfo};<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type = "module">
import Person from './index02.js';
const p = new Person('hong', 20);
console.log(p.getInfo());
</script>
</body>
</html>class Person {
constructor(name, age) {
this.name = name; //멤버 변수
this.age = age;
}
getInfo = () => {
return `이름 ${this.name}, 나이 ${this.age}`;
}
}
//default 구문은 반드시 1개여야 합니다.
export default Person;
