[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.isArray() 추가 - 배열 반복 방법 추가
6	ECMAScript 2015 ES6	- 변수선언 – let, const추가 - 기본 매개 변수 값 추가 - Array.find()추가 - Array.findIndex()추가
7	ECMAScript 2016	- 지수연산자 (**) 추가 - Array.prototype.includes
8	ECMAScript 2017	- async – await - 공유메모리
9	ECMAScript 2018	- rest, spread 속성 - Promise.finally() 추가

 

 

 

 

 

 

 

 

2) ES6 브라우저 지원

브라우저	버전	지원일자
Chrome	51	2016년 5월
Firefox	54	2017년 6월
Edge	14	2016년 8월
Safari	10	2016년 9월
Opera	38	2016년 6월

- 아직 ES7(2016)은 크롬과 오페라만 지원해서 ES6까지 배우는 것이 좋습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. var 변수 키워드

---

- var 키워드로 선언한 변수는 함수를 기준으로 외부에 작성시 전역변수, 내부에 작성시 지역변수로 처리됩니다.

 

 

## 문법

var 변수명 = 값;

 

 

 

 

## 중복선언

var a = 10;
var a = 20;

console.log(a);

- 중복선언해도 오류가 나진 않지만 마지막 값으로 처리되는 것을 확인할 수 있습니다.

 

 

 

 

## 전역변수, 지역변수

var a = 10; //전역변수
            
function test(){
	var b = 20; //지역변수
}

if(a == 10){
	var c = 30; //전역변수
}

test(); 

console.log(a); //호출잘됨
console.log(c); //호출잘됨 - 조건식 true
console.log(b); //에러

- if문의 코드블록에는 영향받지 않지만, 함수 내부에 선언한 것은 지역변수로 처리되서 전역에서 호출하면 오류가 납니다. 

 

 

 

 

 

 

 

 

728x90

 

 

 

 

 

 

 

 

 

 

3. let 변수 키워드

---

- let 키워드로 선언한 변수는 재선언할 수 없으며, { }을 기준으로 전역변수와 지역변수가 지정됩니다.

 

 

 

## 문법

let 변수명 = 값;

 

 

 

 

## 재선언시 오류

let a = 10;
let a = 20;

- 브라우저로 테스트하면 바로 오류가 나는 것을 확인할 수 있습니다.

 

 

 

 

 

## 재할당은 가능

let a = 10;
a = 20;

console.log(a);

- 재할당된 [20]으로 값이 처리되는 것을 확인할 수 있습니다.

 

 

 

 

 

## 전역변수와 지역변수

let a = 10; //전역변수
function test(){
	let b = 10; //지역변수
}
if(a == 10){
	let c = 10; //지역변수
}

test();

console.log(a); //호출잘됨
console.log(b); //에러
console.log(c); //에러

- 코드블록{ }이 기준이 되기 때문에 함수와 if문에 작성된 모든 것들은 지역변수가 됩니다. 그래서 두번째 호출부터 바로 에러가 발생됩니다. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

4. const 변수 키워드

---

- const로 선언한 변수는 블록 범위 버전의 변수 키워드이고, 변수의 값을 변경할 수 없습니다.

 

 

## 문법

const 변수명 = 값;

 

 

 

## 재할당도 오류

const a = 10;
a = 20;

- 재할당만 했을 뿐인데 오류가 나는 것을 확인할 수 있습니다. 

- const는 값이 바뀌면 안되는 것을 선언하면 됩니다.

- 단, 객체 { } 또는 배열로 선언했을때는 객체의 속성과 배열의 요소값을 변경할 수 있습니다.

 

 

 

 

 

## 객체선언시 const

const a = {
  test01: 10,
  test02: 'hello'
}
console.log(a.test02);

a.test02 = '안녕';
console.log(a.test02);

- 속성값은 변경이 가능한 것을 확인할 수 있습니다.

 

 

 

 

 

## 배열선언시 const

const a = [10,20,30];
console.log(a[1]);

a[1] = 50;
console.log(a[1]);

- 배열의 일부 값도 변경되는 것을 확인할 수 있습니다.

 

 

 

 

 

## 전역변수와 지역변수

const a = 10; //전역변수
function test(){
	const b = 10; //지역변수
}
if(a == 10){
	const c = 10; //지역변수
}

test();

console.log(a); //호출잘됨
console.log(b); //에러
console.log(c); //에러

- 함수와 if문의 코드블록 { } 내부에 있는 모든 변수가 지역변수로 처리되서, 전역에서 호출시 에러가 납니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

5. for문을 통한 var, let, const 비교하기

---

- for문 역시 { }이 존재합니다. 그래서 for문에에서 변수의 범위가 어디로 제한되는지에 대한 궁금점이 발생될 수 있습니다. 

- 많은 다른 언어를 배운 개발자들이 다른 언어와 자바스크립트가 for문에서의 변수 사용이 다르기 때문에 헷갈려할 수 있습니다.

 

 

 

## var를 통한 for문 처리

var i = 10; //초기값에 10이라 작성
for(var i=0;i<5;i++) {
	console.log(i); // 0 1 2 3 4 
}
console.log(i); // 5

- 보통 다른 언어를 배운 개발자들 생각에는 마지막 결과는 10이어야 합니다. 

- 하지만 자바스크립트에서는 var가 지역변수가 되는 것은 함수의 코드블록에서만 가능하기 때문에 값이 변경됩니다.

- 그래서 ES6에서는 let과 const를 추가하여 다른 언어와 비슷한 결과가 나오도록 처리했습니다. 

 

 

 

 

## let을 통한 for문처리

let i = 10; //초기값에 10이라 작성
for(let i=0;i<5;i++) {
	console.log(i); // 0 1 2 3 4 
}
console.log(i); // 10

- let의 변수 범위는 { }이기 때문에 for문에서 선언한 i는 지역변수로 처리됩니다.

- 그래서 마지막 값은 10으로 호출됩니다.