웹언어/자바스크립트 - ES6 (16) 썸네일형 리스트형 [ES6강좌] 8강 반복문 - for of - 오쌤의 니가스터디 1. for of 구문 - [ for of ] 구문은 ES6부터 추가된 반복문입니다. - 공식적으로 된 설명을 보면 반복 가능한 객체의 값을 반복한다고 되어 있습니다. - array, string, map, NodeList 등을 반복할 수 있습니다. - 이 외에도 [ for in ] 구문이라고도 있죠? 그 구문과 비교해서 보도록 하겠습니다. ## for of 문법 for(let value of object){ //code } - 그러니까 결국 [ for of ]구문은 객체나 배열의 값을 반복해서 반환합니다. ## for in 문법 for(let key in object){ //code } - 하지만 [ for in ]구문은 객체나 배열의 키(key)를 반복해서 반환합니다. - 2개의 차이는 아래 예시로 .. [ES6강좌] 7강 Array객체의 메서드 추가 - 오쌤의 니가스터디 1. find() 메서드 - find() : 함수의 조건을 통과한 첫 번째 배열 요소 값을 반환하는 메서드입니다. ## 문법 find(함수명) ## 예제 - 20보다 큰 숫자 중자 중 첫번째 배열 요소를 찾음 var nums = [4,9,16,25,29]; function test(x){ //함수에 조건을 작성 return x > 20; } document.write(nums.find(test)); - 결과는 문서에 20보다 큰숫자에서 첫 번째 배열 요소인 25가 나옵니다. 2. findIndex() 메서드 - findIndex() : 함수의 조건을 통과한 첫 번째 배열 요소의 인덱스 번호를 반환하는 메서드입니다. ## 문법 findIndex(함수명); ## 예제 - 20보다 큰 숫자 중자 중 첫번째 배.. [ES6강좌] 6강 Import & Export 모듈화 - 오쌤의 니가스터디 1. 모듈화의 필요성 - 기본적으로 자바스크립트의 유효 범위는 전역으로 시작합니다. - 따라서 아래와 같이 코딩하면 js를 읽어오지만 원하는 결과를 줄 수는 없습니다. ## test01.js var a = 10; function test() { return a; } ## test02.js var a = 20; ## test.html - 모듈화란 다른 파일의 자바스크립트기능을 특정 파일에서 사용하는 것을 말합니다. - 그 이유는 다른 파일에서 변수나 함수나 객체명이 같을 수 있습니다. - 그래서 에러 혹은 값이 변경되는 큰 문제가 발생됩니다. - 자바스크립트는 준비구문을 한번 쓰지만 제이쿼리같은 경우는 준비구문을 여러번 작성해서 각각의 라이브러리가 갖고 있는 변수가 겹치지 못하게 미리 막습니다. - 자바스.. [ES6강좌] 5강 비구조화 할당(destructuring assignment) - 오쌤의 니가스터디 1. 배열의 비구조화할당(destructuring assignment) - 비구조화할당이란 배열이나 객체의 속성 혹은 값을 해체하여 그 값을 변수에 각각 담아 사용하는 자바스크립트 표현식입니다. 1) 기존 배열 값을 해체(ES6전 코드) ## 코드 //배열선언 const animalList = ['CAT', 'DOG', 'TIGER']; //각각 변수담기 const cat = animalList[0]; const dog = animalList[1]; const tiger = animalList[2]; //각각호출 console.log(cat); console.log(dog); console.log(tiger); - 배열이 갖은 값을 각각 꺼내어 쓰려면 이렇게 직접 하나하나 지정했습니다. - 작성하기 귀찮.. [ES6강좌] 4강 Class 문법추가 - 오쌤의 니가스터디 1. class 선언하기 - java에서는 클래스를 객체를 만들기 위한 설계도라고 부릅니다. - 객체를 생성하기 위한 필드와 메소드가 정의되어 있는 설계도입니다. - 인스턴스라고 하는 것은 클래스로부터 만들어진 객체입니다. 하나의 클래스는 여러개 인스턴스 생성할수있습니다. - 예시로 동일한 설계도로 여러 대의 자동차를 생산하는 것과 같은 의미입니다. - 클래스는 일종의 함수지만 function키워드 대신 class키워드를 사용한다. - 속성은 constructor()메서드 내부에 할당됩니다. - class는 사실 함수이기 때문에 함수선언식과 변수선언식으로 둘다 선언할 수 있다. 1) 함수선언식의 class문법 ## 선언 문법 class 클래스명{ constructor(){ this.속성명 = 값; } 메.. [ES6강좌] 3강 향상된 객체 리터럴(Object Literal) - 오쌤의 니가스터디 1. 향상된 객체 리터럴(Enhanced Object Literal) - 향상된 객체 리터럴이란 기존 자바스크립트에서 사용되던 객체 정의 방식을 개선한 문법입니다. - 자주 사용하던 문법을 한층 더 간결하게 작성할 수 있도록 도와줍니다. 1) 기존 객체 정의 방식 ## 문법 var 객체명 = { 속성: 값, 메서드: function(){ //메서드 명령 } } ## 예시 코드 var person = { name: '홍길동', age: 20, walk: function(){ console.log(this.name + '이 걷습니다.'); } } 2) 축약문법 ## 속성명과 속성값이 같으면 한번만 작성해도 됨 var test = { //javascript: javascript, javascript } con.. [ES6강좌] 2강 화살표함수(Arrow Function) - 오쌤의 니가스터디 ** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요. https://youtu.be/8SVWsfc1mzI 1. 화살표함수(Arrow Function) - 화살표함수란 ES6에 새롭게 나온 함수의 새로운 형태입니다. 1) 기존 함수 문법 ## 함수 선언식 function test(){ //함수 선언 - 생각만 하고 있는 상태 //코드의 집합 } test(); //함수 호출 - 코드를 실행 - 위와 같이 함수를 선언하는 부분과 호출하는 부분으로 나눠서 작성하였습니다. ## 변수 선언식 var test = function(){ //함수 선언 - 생각만 하고 있는 상태 //코드의 집합 } test(); //함수 호출 - 코드를 실행 - 위의 방식은 함수명으로 선언하는 것과 달리 변수에 담아서 처리하였습니다. .. [ES6강좌] 1강 변수키워드 const & let - 오쌤의 니가스터디 ** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요. https://youtu.be/FOgsWhJ-T_c 1. ES6소개 - 자바스크립트는 언어고, ECMAScript는 표준, 규격을 의미합니다. - ECMAScript 2015를 ES6라고 부릅니다. 1) 자바스크립트 버전 버전 이름 설명 1 ECMAScript 1(1997) 첫 버전, 초기 자바스크립트 2 ECMAScript 2(1998) 편집 상태만 변경됨 3 ECMAScript 3(1999) 우리가 흔히 말하는 자바스크립트, 정규식 추가, try / catch 추가 4 ECMAScript 4 출시되지 않음 5 ECMAScript 5(2009) ES5 - 엄격한 언어방식 추구 - JSON추가 - String.trim() 추가 - Array.isAr.. 이전 1 2 다음
