본문 바로가기

programming/javascript

 (15)
[ES6] for ~ of문 for of 문 let numbers = [1, 2, 3, 4, 5]; for(let i of numbers){console.log(i); // 1 2 3 4 5} 이처럼 ES6에는 반복을 쉽게하기 위한 일반 for문 말고도 for~of 문이 있다. 기존에 있던 for~in문과 별다른 차이는 없지만, for of 문은 배열을 다룰 때 적합하다. for~in 문에는 다음과 같은 문제점이 있다. let numbers = [1, 2, 3, 4, 5]; for(let i in numbers){console.log(i); // "0" "1" "2" "3" "4"} 문자가 되어 나온다. 그렇기에 for~in문은 객체를 순회하면서 값을 조회하는데 편하고, for~of문은 배열에 적합하다. (* for~in문으로 객체..
[ES6] 파라미터 핸들링(parameter handling) 파라미터 핸들링기본파라미터 function addNum(a, b){console.log(a + b); // NaNconsole.log(a); // 5console.log(b); // undefined} addNum(5); 위처럼 전달받을 변수는 2개인데 한개만 전달했을 경우 값의 연산이 제대로 되지 않는다. API 같은 경우 필요한 파라미터만 전달하도록 만들어져있으므로 전달받은 값이 없을 경우 기본적으로 나머지는 0 으로 처리해서 연산하도록 해야한다. 이것을 기본 파라미터 설정이라 하는데, 아래와 같이 할 수 있다. var addNum = (a = 0, b = 0 ) => { // 파라미터 기본값을 설정함.console.log(a + b); // 5console.log(a); // 5console.log..
[ES6] 화살표 함수(Arrow functions) 화살표 함수(Arrow functions) 화살표 함수는 기존의 function 표현 방식에 비해 간결하게 표현 할 수 있는 방법이다. => 연산자를 사용하고, 익명함수에만 사용할 수 있기 때문에 메서드 형식으로 쓸 수는 없다. * 익명함수: function(){ .... } var getName = function(){ console.log('Harvey');};getName(); // "Harvey" 위와 같은 ES5의 익명함수 표현식이 있는데 var getName = () => { console.log('Harvey'); };getName(); // "Harvey" 이처럼 바꿀 수 있다. var getName = () => console.log('Harvey'); getName(); // "Harv..
[ES6] 호이스팅(Hoisting) Hoisting(호이스팅) 통상적으로 컴파일러는 컴파일을 할 때 위에서 아래로 읽기 때문에 상식적으로 어떤 변수를 참조하는 처리문보다 아래에 변수를 선언하면 안 된다. 근데 JS에서는 변수가 처리문보다 밑에 있어도 에러가 뜨지 않고 변수 선언을 위로 끌어올려 읽는다. 이를 JS에서 '호이스팅' 이라한다. 변수의 호이스팅 console.log(num); // undefined var num = 3; // var 변수 선언console.log(num); // 3 첫 번째 줄에서 에러가 뜨는게 상식적으로 맞지만 JS에서는 아래에 선언한 num이 있으므로 'var num;'이 호이스팅 되어 undefined가 나오게 된다. 호이스팅은 정의는 해당되지 않고 선언만 해당되기에 저러한 결과가 나오게 된다. 그렇다고 ..
[ES6] 상수 const constC를 배울 때는 const라는 불변의 상수를 선언하는 키워드가 있었는데, JS에는 없는 듯 싶었으나 ES6에 생겼다. ES6의 const 키워드도 같은 역할을 하는 데, 이 값을 한번 선언 후에 변경하려 하면 타입에러가 발생한다. const language = 'javascript';language = 'html';console.log(language); // TypeError 배열을 상수값으로 정의하는 경우const num = [10, 20, 30]; console.log(num); // [10, 20, 30] num.push(40); // 배열 값 추가 ---------------- 1console.log(num); // [10, 20, 30, 40] num = [40]; // 배열 재정의 ..
[ES6] 변수 & 상수(let) letlet 변수는 기존 var의 문제점을 개선했는데, 그 중 하나가 변수의 유효범위, 스코프이다. 보통의 언어에서 변수는 중괄호( { } )로 구분되는 블록단위로 유효범위가 정해지는데, 이 범위가 JS는 '함수의 블록' 에서만 유효했다. ES5 if(1){ var a = 5;}console.log(a); // 5 다른언어라면 a가 로그로 찍었을 때 값이 나오지 않는게 맞다. 근데 JS 에서는 if 나 for문에서는 블록을 변수의 유효범위로 보지 않기 때문에 a가 전역변수로 선언되어 if문 밖에서도 값이 찍히게 되는 것이다. ES6if(1){ let a = 5;}console.log(a); // 레퍼런스에러가 뜨게 된다. let키워드는 if든 for든 함수든 코드 블록 ( {...} )밖에서는, 안에서 ..
[ES6] 소개 ES6(ECMAScript 6)란 최초의 상용 웹 브라우저인 넷스케이프 네비게이터에서 웹 페이지 동작을 향상시키는 역할을 하는 언어로 자바스크립트가 출시 된 이후 지속적인 표준화와 유지보수를 위해 유럽컴퓨터 제조업체 표준 기구인 ECMA에서 관리중이다. 사실 자바스크립트의 공식 명칭은 ECMAScript이다. 자바스크립트는 웹 표준언어로서 유연한 표현이 가능하고 기존에는 허술한 부분이 많았지만, 구글에서 V8이라는 자바스크립트 엔진을 발표함으로써 성능을 끌어올렸다. Server side에서 동작하는 자바스크립트 엔진인 Node.js는 V8엔진 기반이며, ES6를 사용한다. 그리고 게임개발이나 가전 디바이스 등에서도 미들웨어나 OS 환경을 구축하는 데 활용하기 때문에 산업 전반에서 자바스크립트와 같은 표준..

티스토리툴바