[Vanilla JS]study 11일차

Notice

Recent Posts

Recent Comments

Link

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

단비의 코딩 공부 blog

[Vanilla JS]study 11일차 - ES6 본문

javascript&jquery

[Vanilla JS]study 11일차 - ES6

황굽달 2023. 3. 13. 14:33

1. var 키워드

<!DOCTYPE html>

<head>

</head>

<body>

//var : 변수를 선언하는 키워드

//1. 재선언 허용

var cup = '물';

var cup = '콜라'; //에러가 없음

//2. 지역변수랑 전역변수를 함수를 기준으로 처리

var a = 10; //전역변수

function test(){

var b = 20; //지역변수

}

if(a == 10){

var c = 30; //전역변수

}

</script>

</body>

</html>

2. let 키워드

<!DOCTYPE html>

<head>

</head>

<body>

//let : 변수를 선언하는 키워드

//1. 재선언시 에러

let cub = '물';

//let cub = '콜라';

//2. 전역변수와 지역변수의 기준은 {}코드블록

let a = 10; //전역변수

console.log(a); //호출잘됨

if(a == 10){

var b = 20; //전역변수

let c = 30; //지역변수

}

console.log(b); //호출잘됨

console.log(c); //에러발생

</script>

</body>

</html>

3. const 키워드

<!DOCTYPE html>

<head>

</head>

<body>

//const : 변수를 선언하는 키워드

//1. 재선언, 재할당 안됨

let a = 10;

a = 20; //재선언, 재할당 가능

const b = 20;

//b = 30; //재선언, 재할당 안됨 - 에러발생

//2. 전역변수/지역변수 - 코드블록 기준

//3. 객체/배열의 값은 변경가능

const c = {

test01 : 10,

test02 : 'hello'

}

c.test02 = '안녕하세요';

</script>

</body>

</html>

4. 반복문을통한 var와let비교

<!DOCTYPE html>

<head>

</head>

<body>

//1. var를 통한 for문 처리

var i = 10; //전역변수

for(var i=0;i<5;i++){ //전역번수가 재 선언됨

console.log(i); //0 1 2 3 4

}

console.log(i); //5 - 개발자들이 이해가 안되는 상황

console.log('===================');

//2. let을 통한 for문 처리

let j = 10; //전역변수

for(let j=0;j<5;j++){ //지역변수

console.log(j); //지역변수값을 호출

}

console.log(j); //전역변수값을 호출

</script>

</body>

</html>

5. 기존함수문법

<!DOCTYPE html>

<head>

</head>

<body>

function test01(){ //함수선언 - 생각만 하고 있는 상태

alert('테스트01');

}

test01(); //함수호출 - 코드블록 내부의 코드 실행

let test02 = function(){ //함수선언

alert('테스트02');

}

test02();

</script>

</body>

</html>

6. 화살표 함수

<!DOCTYPE html>

<head>

</head>

<body>

//화살표 함수 : function 키워드 생략하고 [=>]를 사용한 함수

let test = () => { //함수선언

alert('테스트');

}

test();

</script>

</body>

</html>

7. 화살표 함수 문법

<!DOCTYPE html>

<head>

</head>

<body>

//화살표 함수 : function 키워드 생략하고 [=>]를 사용한 함수

//화살표 함수는 표현식의 개수, 매개변수의 유무에 따라서 문법이 조금씩 다름

//1. 표현식(명령문)이 한개인 경우 - { }을 생략할 수 있음

test01 = () => alert('테스트1');

test01(); //호출

//2. 표현식이 여러 개인 경우 - { }를 꼭 작성

test02 = () => {

let a = 10;

let b = 10;

alert(a + b);

}

test02();

//3. 매개변수가 한개인 경우 - ()를 생략해도 됨

test03 = x => {

return x * x;

}

alert(test03(5));

//4. 매개변수가 여러 개인 경우 - ()를 반드시 작성

test04 = (x, y) => {

return x + y;

}

alert(test04(10,5));

</script>

</body>

</html>

8. this바인딩변화

<!DOCTYPE html>

<head>

</head>

<body>

//this : 객체를 참조할때 사용하는 키워드

//1. 혼자 써있다면 전역 객체를 의미 - Window

//초기실행 - 전역

let x = this;

console.log(x);

//2. 함수에서 this - 전역 객체를 의미 - Window

function test01(){

return this;

}

console.log(test01());

//3. 객체의 메서드에서의 this

//this : 소유하고 있는 해당 객체

let person = {

userName: '홍길동',

walk: function(){

alert(this.userName + '은 일어나주세요.');

}

//4. 이벤트 코드블럭 내부에서의 this : 이벤트를 받고 있는 객체

</script>

</body>

</html>

9. 일반함수의 this

<!DOCTYPE html>

<head>

</head>

<body>

var btn = document.getElementById('btn');

var text = document.getElementById('text');

//함수선언 this담기

var test = function(){

text.innerHTML = this;

}

//초기실행 - 전역호출 - 소유자가 window

window.addEventListener('load', test);

//버튼을 클릭했을 때 - 소유자가 이벤트를 갖고 있는 문서객체

btn.addEventListener('click', test);

</script>

</body>

</html>

10. 화살표함수의this

<!DOCTYPE html>

<head>

</head>

<body>

var btn = document.getElementById('btn');

var text = document.getElementById('text');

//함수선언 this담기

test = () =>{

text.innerHTML = this;

}

//초기실행 - 전역호출 - 소유자가 window

window.addEventListener('load', test);

//버튼을 클릭했을 때 - 소유자가 window

btn.addEventListener('click', test);

</script>

</body>

</html>

11. 매개변수의 기본값처리

<!DOCTYPE html>

<head>

</head>

<body>

//더하기 연산 함수선언

function test(x,y){

return x + y;

}

alert(test()); //매개변수 생략 - 값이 없을 뿐 결과는 실행

//더하기 연산 함수 선언 - 기본값 처리

function test02(x=0,y=0){

return x + y;

}

alert(test02());

alert(test02(10,5));

alert(test02(10));

</script>

</body>

</html>

12. 변수 호이스팅

<!DOCTYPE html>

<head>

</head>

<body>

//Hoisting(호이스팅) : 선언을 맨 위로 이동하는 JS의 기본 동작

x = 5; //할당을 먼저 처리

alert(x);

var x; // 나중에 써도 선언을 맨위로 올림

// let 과 const는 아예 호이스팅이 안됨 - 에러

</script>

</body>

</html>

13. 함수 호이스팅

<!DOCTYPE html>

<head>

</head>

<body>

//Hoisting(호이스팅) : 선언을 맨 위로 이동하는 JS의 기본 동작

test();

//표현식이 복잡하면 hoisting처리를 해주지 않음

function test(){

alert('테스트');

}

</script>

</body>

</html>

14. 기존객체 정의 방식

<!DOCTYPE html>

<head>

</head>

<body>

var person = {

userName: '홍길동',

age:20,

walk: function(){

alert(this.userName + '이 걷습니다.');

}

</script>

</body>

</html>

15. 속성 축약문법

<!DOCTYPE html>

<head>

</head>

<body>

let javascript = '컴퓨터 언어다';

//속성명과 속성값이 같으면 한번만 작성가능

var test = {

//javascript: javascript

javascript

}

</script>

</body>

</html>

16. 메서드 function생략

<!DOCTYPE html>

<head>

</head>

<body>

var test = {

walk: function(){

}

//function없이 메서드 선언 가능

walk(){

alert('걷고있습니다.');

}

test.walk();

</script>

</body>

</html>

17. 기존배열값 해체

<!DOCTYPE html>

<head>

</head>

<body>

//비구조화할당(descructuring assignment) : 배열이나 객체의 속성 혹은 값을 해체해서 그 값을 각각의 변수에 담아 사용하는 자바스크립트 표현식

//ES6이전의 해체방식

const animalList = ['cat', 'dog', 'tiger'];

//각각 변수에 담기

const cat = animalList[0];

const dog = animalList[1];

const tiger = animalList[2];

alert(cat);

alert(dog);

alert(tiger);

</script>

</body>

</html>

18. 비구조화할당-배열방식

<!DOCTYPE html>

<head>

</head>

<body>

//비구조화할당(descructuring assignment) : 배열이나 객체의 속성 혹은 값을 해체해서 그 값을 각각의 변수에 담아 사용하는 자바스크립트 표현식

//문법

//변수키워드 [변수명, 변수명, ...] = [값, 값, ...];

//ES6이후의 해체방식

const [cat, dog, tiger] = ['cat', 'dog', 'tiger'];

alert(cat);

alert(dog);

alert(tiger);

</script>

</body>

</html>

19. 스프레드오퍼레이터

<!DOCTYPE html>

<head>

</head>

<body>

//스프레드 오퍼레이터 : 펼침연산자 - ...

//특정 객체나 배열의 값을 복제할때 사용

var array = [10,20,30];

var newArray = [...array,40,50,60];

alert(newArray);

</script>

</body>

</html>

20. 나머지 패턴 코드

<!DOCTYPE html>

<head>

</head>

<body>

//비구조화할당

const animalList = ['cat','dog','tiger'];

const [cat,...restAnimal] = animalList;

alert(cat);

alert(restAnimal); //dog, tiger만 따로 분리

</script>

</body>

</html>

21. 비구조화할당 기본값지정

<!DOCTYPE html>

<head>

</head>

<body>

//비구조화할당

const [cat, dog, tiger, monkey = 'monkey'] = ['cat','dog','tiger'];

alert(cat);

alert(monkey);

</script>

</body>

</html>

22. 기존배열값을 변수에한번에 할당

<!DOCTYPE html>

<head>

</head>

<body>

const animalList = ['cat','dog','tiger'];

const [cat, dog, tiger] = animalList;

</script>

</body>

</html>

23. 기존객체값 해체

<!DOCTYPE html>

<head>

</head>

<body>

//비구조화 할당

//ES6이전 객체값 해체 코드

const animals = {

cat: 'CAT',

dog: 'DOG',

tiger: 'TIGER'

}

//속성호출 : 객체명.속성명

const cat = animals.cat;

const dog = animals.dog;

const tiger = animals.tiger;

//출력

alert(cat);

alert(dog);

alert(tiger);

</script>

</body>

</html>

24. 객체의 비구조화 할당

<!DOCTYPE html>

<head>

</head>

<body>

//비구조화 할당

변수키워드 {변수명, 변수명, ...} = {

속성명: 값,

...

}

const {cat, dog, tiger} = {

cat: 'CAT',

dog: 'DOG',

tiger: 'TIGER'

}

//출력

alert(cat);

alert(dog);

alert(tiger);

</script>

</body>

</html>

25. 객체 나머지 패턴

<!DOCTYPE html>

<head>

</head>

<body>

//비구조화 할당

변수키워드 {변수명, 변수명, ...} = {

속성명: 값,

...

}

const {cat, ...animals} = {

cat: 'CAT',

dog: 'DOG',

tiger: 'TIGER'

}

//출력

console.log(cat); //cat만 나타남

console.log(animals); //cat은 빠진상태로 표출됨

</script>

</body>

</html>

26. 기본값지정

<!DOCTYPE html>

<head>

</head>

<body>

//비구조화 할당

변수키워드 {변수명, 변수명, ...} = {

속성명: 값,

...

}

const {cat, dog, tiger, monkey = 'monkey'} = {

cat: 'CAT',

dog: 'DOG',

tiger: 'TIGER'

}

//출력

console.log(cat); //cat만 나타남

console.log(monkey);

</script>

</body>

</html>

27. 기존객체값을 변수에 한번에 할당

<!DOCTYPE html>

<head>

</head>

<body>

//비구조화 할당

변수키워드 {변수명, 변수명, ...} = {

속성명: 값,

...

}

const animals = {

cat: 'CAT',

dog: 'DOG',

tiger: 'TIGER'

}

const {cat, dog, tiger} = animals;

//출력

console.log(cat);

</script>

</body>

</html>

* 자바스크립트 소개
1. 명칭
    1) 자바스크립트 : 언어이름
    2) ECMAScript : 표준, 규격
2. 자바스크립트버전
    1) ECMAScript 1(1997) : 첫버전
    2) ECMAScript 2(1998) : 편집 상태만 변경
    3) ECMAScript 3(1999) : 우리가 흔히 말하는 자바스크립트, 정규식 추가, try/catch 추가
    4) ECMAScript 5(2009) : ES5
        - 엄격한 언어방식 추구
        - JSON 추가
        - String.trim() / Array.isArray() 등 추가
        - 배열 반복 방법 추가
    5) ECMAScript 2015 - ES6
        - 변수 선언 키워드 추가
        - 화살표함수 추가
        - 기본 매개변수 추가
        - 배열 메서드 추가
    6) ECMAScript 2016 - ES7
    7) ECMAScript 2017 - ES8
    8) ECMAScript 2018 - ES9

저작자표시

'javascript&jquery' 카테고리의 다른 글

[Vanilla JS]study 13일차 - 웹 컨텐츠 제작 - 드롭 다운 메뉴 (0)	2023.03.21
[Vanilla JS]study 12일차 - ES6 2 (0)	2023.03.16
[Vanilla JS]study 10일차 - DOM2 (0)	2023.03.10
[Vanilla JS]study 9일차 - DOM (0)	2023.03.06
[Vanilla JS]study 8일차 - BOM (1)	2023.01.27

'javascript&jquery' Related Articles

단비의 코딩 공부 blog

[Vanilla JS]study 11일차 - ES6 본문

[Vanilla JS]study 11일차 - ES6

'javascript&jquery' 카테고리의 다른 글

티스토리툴바