[코딩애플] JavaScript ES6 강의 정리 (Part1 7강 ~ 8강)

이언덕·2024년 6월 4일

코딩애플

목록 보기
27/37
post-thumbnail

7강 / this & arrow function 연습문제 해설

6강에 해설과 답 모두 있기 때문에 6강을 참고하자!
6강 this & arrow function 연습문제




8강 / 변수 신문법 총정리 1. var let const와 선언,할당,범위

다시는 문법책 안봐도 될 정도로 변수문법을 정리해보자.

옛날 자바스크립트 변수는 이렇게 쓴다!

var 이름 = 'Kim';
var 이름

이름 = 'kim'

변수는 자료를 임시로 저장하는 공간이다.
1. var이라는 키워드 오른쪽에 작명을 하고, 변수에 저장할 자료를 등호로 집어넣어주면 된다.
2. object, array, function 등 모든 자료들을 담을 수 있다.
3. 그리고 var 이름이라는 부분은 선언이름 = Kim 이라는 부분은 값 할당이라고 전문 용어로 표현한다. 보통 변수만들 땐 두개를 동시에 사용한다.
4. 그리고 변수를 만들 땐 var, let, const라는 3개 키워드를 이용가능하다.

3개 키워드마다 특징이 있다. 변수의 선언, 할당, 범위에서 차이가 좀 있는데 이 부분에 대해서 알아보자.

JS기초 Level2에서 미리 다루어봤기 때문에 복습할 겸 다시 보고 온 뒤 이 부분을 보도록 하자!
JS기초 Level2 14강

변수의 선언

var 이름;
let 나이;
const 성별;

이렇게 var, let, const 키워드를 이용해 변수를 만들겠다고 선언할 수 있다. (등호는 안써도 변수는 만들어집니다)
그런데 var 키워드는 재선언가능하고

let, const 키워드는 재선언불가능하다.

let 나이;
let 나이;           //에러

const 성별 = '여자';
const 성별 = '남자'; //에러

let, const로 만들면 이렇게 같은 이름의 변수를 두번 이상 재선언할 수 없다. 에러가 난다.
나중에 변수 이름을 실수로 중복해서 만드는 실수를 방지해주는 고마운 기능이다.



변수의 값 할당

변수에 값을 할당한다는게 뭔소리냐면

var 이름;
이름 = 'Kim';

▲ 둘째줄에서 이렇게 만들어놓은 변수에 'Kim' 이라는 값을 집어넣는걸 할당이라고 한다.
할당도 선언과 동시에 할 수 있다.

var 이름 = 'Kim';

▲ 선언과 할당을 동시에 하는 모습이다.

변수를 var, let으로 만들면 재할당가능하고
const로 만들면 값 재할당불가능하다.
const로 변수 만들면 나중에 등호를 이용해 값 변경하는게 안된다는 소리이다.

let 이름 = 'Kim';
이름 = 'Park'; //가능

const 나이 = 30;
나이 = 40;     //에러

const는 애초에 constant의 약자로 바뀌지 않는 일정한 값을 뜻한다.
바뀌면 큰일날 값을 저장하고 싶을 때 사용하면 좋다.


  • const 변수object를 담으면 object 내의 데이터는 변경 가능하다.
const 오브젝트 = { 이름 : 'Kim' }
오브젝트.이름 = 'Park';//가능

위의 예제는 엄밀히 말하면 변수를 재할당한게 아니기 때문에 가능하다.
완전 변경불가능한 오브젝트를 만들고 싶다면
Object.freeze()라는 자바스크립트 기본함수가 있다.
Object.freeze() 소괄호에 오브젝트를 담으면 불변의 Object가 완성된다.
(하지만 오브젝트 내의 오브젝트까지 freeze해주진 않는다.)



변수의 범위

변수를 만들면 존재범위가 있다.
var 변수는 존재범위가 function이다.
let, const 변수는 존재범위가 거의 모든 {중괄호} 이다. (for, if, function 등)

function 함수(){
  var 이름 = 'Kim';
  console.log(이름); //가능
}

console.log(이름);   //에러

▲ 위의 예제처럼 var 변수는 function 내에서 만들면 function 내에서만 쓸 수 있다.
function 바깥에서 부르면 없다고 나온다.


if ( 1 == 1 ){
  let 이름 = 'Kim';
  console.log(이름); //가능
}

console.log(이름);   //에러

▲ 위의 예제처럼 let 변수는 {} 중괄호 내에서 만들면 중괄호 내에서만 쓸 수 있다.
중괄호 바깥에서 부르면 없다고 나온다.



0개의 댓글