JS 변수

JavaScript
  • () : 소괄호 - 연산에서 우선순위, 함수에서 인자값을 담는 곳, if, for, …, 명령 (메서드)
  • {} : 중괄호 - 함수의 실행문을 담는 영역(블록 스코프), if, for, …, 객체 선언
  • [] : 대괄호 - 배열
  • <> : 각괄호

var, let, const 비교

  • { } : 스코프(scope) - 하나의 메모리 공간 + 실행 공간
  • if(조건식){실행문}
  • function(){실행문}
  • 객체 = {key1:value1, key2:value2, key3:value3, …}

변수 var

  • {} 스코프(블록 메모리)과 위치 선언마다 변수값을 일정하게 갖고 오지 못함 (ES5) ==> let, const의 발생 원인
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 조건식에서 변수선언
var msg1 = "hello"; // 전역 변수
if(true) {
    var msg1 = "Good Luck"; // 지역 변수
    console.log(msg1); // Good Luck
}
console.log(msg1); // Good Luck

// 함수에서 변수 선언
var msg2 ="nice"; // 전역변수
function printOut() {
    var msg2 ="thank you"; // 지역변수
    console.log(msg2); // thank you
}

printOut();
console.log(msg2); // nice
// 확실한 전역 공간의 값과 지역 공간의 값이 구분되어짐

변수 let

  • 변수 let으로 선언했을 때 스코프의 위치 및 함수 실행문에 상관없이 동일한 전역공간에서는 전역변수 값을 출력하고, 지역공간에서는 지역변수값을 출력한다.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    // 조건식에서 변수 선언
    let msg3 = "hello"; // 전역 변수
    if(true) {
        let msg3 = "Good Luck"; // 지역 변수
        console.log(msg3); // Good Luck
    }
    console.log(msg3); // hello

    // 함수에서 변수 선언
    let msg4 ="nice"; // 전역변수
    function printOut2() {
        let msg4 ="thank you"; // 지역변수
        console.log(msg4); // thank you
    }

    printOut2();
    console.log(msg4); // nice

변수 const

  • 변수 const으로 선언했을 때 스코프의 위치 및 함수 실행문에 상관없이 동일한 전역공간에서는 전역변수 값을 출력하고, 지역공간에서는 지역변수값을 출력한다.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    // 조건식에서 변수 선언
    const msg5 = "hello"; // 전역 변수
    if(true) {
        const msg5 = "Good Luck"; // 지역 변수
        console.log(msg5); // Good Luck
    }
    console.log(msg5); // hello

    // 함수에서 변수 선언
    const msg6 ="nice"; // 전역변수
    function printOut3() {
        const msg6 ="thank you"; // 지역변수
        console.log(msg6); // thank you
    }

    printOut2();
    console.log(msg6); // nice

var와 let의 상세 비교

1
2
3
4
5
if(true) {
    var age1 = 20;
    console.log(`1. 당신의 나이 : ${age1}`); // 20 (1차출력)
}
console.log(`2. 당신의 나이 : ${age1}`); // 20 (2차출력)
1
2
3
4
5
if(true) {
    let age2 = 21;
    console.log(`1. 당신의 나이 : ${age2}`); // 21 (1차출력)
}
// console.log(`2. 당신의 나이 : ${age2}`); // age2 is not defined
  • 에러 발생 이유 : 스코프 내부에서 var로 선언된 변수는 스코프의 외부로 전달이 가능(조건: 함수구문 내부의 실행문이 아니라는 조건) <-> let으로 선언된 변수는 스코프 외부로 전달될 수 없음. 내부에서만 유효함.
1
2
3
4
5
6
7
if(true) {
    let age3 = 20;
    console.log(`1. 당신의 나이 : ${age3}`); // 20 (1차출력)
}

let age3 = 24;
console.log(`1. 당신의 나이 : ${age3}`); // 24 (2차출력)

var와 let의 혼합

1
2
3
4
5
6
7
if(true){
    var age4 = 20;
    console.log(`1. 당신의 나이(혼합1 - var) : ${age4}`); // 20 (1차출력)
}

let age4 = 24;
console.log(`1. 당신의 나이(혼합1 - var) : ${age4}`); // Identifier 'age4' has already been declared
  • 스코프 내부에서 var를 선언했다면 스코프 외부까지 영향을 미치기 때문에 SyntaxError가 발생. 동일한 변수명에 대한 명확한 정의가 존재하지 않기 때문에 이러한 현생이 발생
  • let의 특성은 동일한 변수명을 동일 레벨 선상에서 인정하지 않음.
1
2
3
let cart = "아이비";
let cart = "참크래커";
console.log(cart); // Identifier 'age4' has already been declared
1
2
3
let cart = "아이비";
cart = "참크래커";
console.log(cart); // 참크래커
  • let의 특성은 내부 데이터의 갱신은 가능하나, 동일한 변수명으로 let으로 동시에 선언 불가.
1
2
3
4
5
6
7
var age5 = 24;
if(true) {
    // console.log(`0.  당신의 나이(혼합2 - ?) : ${age5}`); // 선언 전
    let age5 = 20;
    console.log(`1.  당신의 나이(혼합2 - let) : ${age5}`); // 20
}
console.log(`1.  당신의 나이(혼합2 - var) : ${age5}`); // 24

const의 상세 비교

  • const는 가족이라는 테두리가 존재하는데, (홍길동의 가족 - 홍길동, 홍길영, 홍길삼) 구성원이 통째로 바뀌어버림 (홍길동의 가족 - 김철수, 이하나, 김민정) => 홍길동의 가족이라고 부를 수 없음

  • 하숙집([], {})에서 일부 구성원은 변경 가능하다.

  • 가변변수 let : 변수 데이터 자체를 갱신(또는 교체)할 수 있음.

  • 불변변수 const : 변수 데이터 자체를 갱신(또는 교체)할 수 없음.

1
2
3
4
5
6
7
8
9
10
11
12
13
const number1 = 20;
const string1 = "아이언맨";
console.log(`number 1 : ${number1}`);
console.log(`number 1 : ${string1}`);

const number2 = 20;
const string2 = "아이언맨";

number2 = 32;
console.log(`number 1 : ${number2}`); // TypeError: Assignment to constant variable.

string2 ="앤트맨";
console.log(`number 1 : ${string2}`);
  • const로 선언된 변수는 최초의 선언값으로부터 새로운 값을 받아들일 수가 없음 (const 특징 : 상수라는 개념)
  • 배열 데이터의 경우, 내부 데이터의 추가 또는 삭제했을 때 에러 발생은 없음
  • 건물이 존재하면 그 내부에서 이사가 가능
1
2
3
const num_arr = [25, 30, 35];
num_arr.push(40); // 마지막 인덱스에 추가 // 이동(sort), 
console.log(num_arr); // [25, 30, 35, 40]

  • 배열 데이터 자체를 신규 갱신했을 경우, 에러 발생

    1
    2
    3
    const str_arr = ["img_01.jpg", "Photo1"];
    str_arr = ["img_02.jpg", "Photo2"]; // 변수 명에 또다른 배열 데이터로 정의 -> 데이터의 갱신과 동일 == 에러발생(데이터 교체 불가)
    console.log(`배열 데이터 자체를 갱신한 결과 : ${str_arr}`); // TypeError: Assignment to constant variable.

  • 객체 데이터 {key1: value1, key2: value2, key3: value3, …}의 경우

    1
    2
    3
    4
    const dessert = {
        keyword : "빙그레 바나나 우유",
        category : "간식"
    }

  • keyword의 value 값을 “빙그레 메로나”로 변경한다면

    1
    2
    dessert.keyword = "빙그레 메로나";
    console.log(`오늘의 간식 : ${dessert.keyword}`); // 빙그레 메로나

  • 객체 데이터로 객체를 지정하는 스코프 자체를 교체할 수 있다.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    const fav_obj = {
        keyword : "빙그레 바나나 우유",
        category : "간식"
    }

    fav_obj = {
        product : "육개장 사발면",
        meal : "야식"
    }
    console.log(fav_obj); // TypeError: Assignment to constant variable.
    1
    2
    3
    let fav_obj2 = { }
    fav_obj = fav_obj;
    console.log(fav_obj); // TypeError: Assignment to constant variable.

불변변수 const + 자바스크립트의 내장함수의 사용

  • unshift, shift, pop, push, sort, splice, slice, reserve, concat

첫번째 자리에 1을 넣고, 출력

1
2
3
const arr2 = [2, 3, 4, 5];
arr2.unshift(1);
console.log(arr2); // [1, 2, 3, 4, 5]

마지막 요소 제거

1
2
arr2.pop();
console.log(arr2); // [1, 2, 3, 4]
  • assign(객체변수, {신규 key1: 신규 value1}, {신규 key2: 신규 value2}, …) 내장함수 : 객체 내부에 새로운 값 할당 가능
  • assign(객체변수, {기존 key1: 신규 value1} …) 기존에 존제하는 key1의 새로운 value1로 교체도 가능
1
2
3
4
5
6
const obj2 = {};
Object.assign(obj2, {new0 : "BTS"}, {new1 : "아이유"});
console.log(obj2); // {new0 : "BTS"}, {new1 : "아이유"}

Object.assign(obj2, {new0 : "트와이스"});
console.log(obj2); // {new0 : "트와이스"}, {new1 : "아이유"}

실습문제: assign()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const hero = {
    name : "토마토재배자",
    device : "호미",
    cloth : "일반 가죽옷"
}
// assign() 내장 함수를 활용하여 객체(hero)의 속성 device를 "곡괭이"로, cloth를 "린넨 옷"으로 변경하고 level을 2로 추가한다.

Object.assign(hero, {device: "곡괭이"}, {cloth: "린넨 옷"}, {level: "2"})
console.log(hero); // {name: '토마토재배자', device: '곡괭이', cloth: '린넨 옷', level: '2'}

hero["hp"] = 100;
console.log(hero); // {name: '토마토재배자', device: '곡괭이', cloth: '린넨 옷', level: '2', hp: 100}

hero.ep = 50;
console.log(hero); // {name: '토마토재배자', device: '곡괭이', cloth: '린넨 옷', level: '2', hp: 100, ep: 50}

// 객체 제거
delete hero.cloth;
console.log(hero); // {name: '토마토재배자', device: '곡괭이', level: '2', hp: 100, ep: 50}

불변 변수 const + 전개연산자(나열형 자료(배열, 객체)를 추출하거나 또는 연결시 사용)

  • 기본적으로 const 사용을 추천

  • 재할당이 필요한 곳에만 let 사용( for(let i) )
    ※ for in 문에서 i는 문자형 데이터이기 때문에 숫자형으로 변경해야 함
    ※ 숫자형 - 문자형 : 숫자형 / 문자형 - 숫자형 : 문자형

  • var는 ES6문법 상에서 혼용하지 말 것

  • 재할당을 막을 경우에만 const로 적용

  • 외부 모듈의 경우에는 const로 가져오는데 성격상 class 개념, 함수라는 개념이 적용 (자바스크립트끼리 서로 통신이 된다)

1
2
3
4
5
6
7
8
9
const arr3 = [0];
const arr4 = arr3.concat(1);
console.log(arr4); // [0, 1]

const arr5 = [...arr4, 2, 3];
console.log(arr5); // [0, 1, 2, 3]

const arr5_1 = arr4.concat([2, 3]);
console.log(arr5_1); // [0, 1, 2, 3]
1
2
3
const arr6 = arr5.slice(1, 2); // 배열변수명.slice(index1, index2) : 배열변수명에 담긴 데이터중에서 지정된 index1로부터 지정된 index2의 이전까지 잘라서 반환
console.log(arr6); // [1]
console.log(arr5); // [0, 1, 2, 3]
1
2
3
4
5
const [a1, b1, c1, d1] = arr5; // [0, 1, 2, 3] // 이렇게 쓸 수도 있다. const 무조건 써주어야 함.
console.log(a1); // 0(number)
console.log(b1); // 1(number)
console.log(c1); // 2(number)
console.log(d1); // 3(number)
1
2
3
const [add_first, ...arr7] = arr5; // [0, 1, 2, 3] 
console.log(add_first); // 0
console.log(arr7);
  • [1, 2, 3] 전개연산자(내용을 가져오겠다는 나열 방식의 적용)를 이용했기 때문에 adD_first에 첫번째 위치한 0번 인덱스의 값을 저장하고 나머지를 가져와서 arr7에 저장한다.

  • 전개 연산자를 활용하여 마지막 인덱스에 위치한 [3]으로 값을 출력하시오. (기준 데이터는 arr5)

    1
    2
    const [first, second, third, ...arr8] = arr5;
    console.log(arr8); // [3]
    1
    2
    3
    4
    5
    6
    const obj3 = {name: "홍길동", age: 20, region: "서울"};
    const obj4 = {...obj3, context: "아버지를 아버지라.."};
    console.log(obj4); // {name: "홍길동", age: 20, region: "서울", context: "아버지를 아버지라.."};

    const obj4_1 = {...obj4, age: 21};
    console.log(obj4_1); // {name: "홍길동", age: 21, region: "서울", context: "아버지를 아버지라.."};

  • age라는 동일한 key 속성이 존재하기 때문에 신규로 들어온 age:21이 객체 내부 데이터로 생성되는 것이 아닌 내부 교체를 할 수 있음

  • 실습문제: 전개연산자를 활용하여 내부 데이터 변경

    1
    2
    3
    4
    5
    6
    7
    const marvel1 = {name: "헐크-변신전", power: 500, region:"뉴욕"};
    const marvel2 = {...marvel1, name: "헐크-변신후", power: 1000};
    console.log(marvel2); // {name: "헐크-변신후", power: 1000, region: "뉴욕"}

    const {power, ...marvel3} = marvel2; // {name: "헐크-변신후", power: 1000, region: "뉴욕"}
    console.log(power); // 1000(number)
    console.log(marvel3); // {name: "헐크-변신후", region: "뉴욕"}

  • 객체를 다른 객체 대입하였을 때, 객체에 대한 key 값이 먼저 지목되어야 함. 나머지는 전개 연산자를 통해서 처리하면 나중에 지목을 해야 함.

REFERENCE
뷰(Vue.js) 프로그래밍 과정 _ 하이미디어 아카데미

  • © 2020-2025 404 Not Found
  • Powered by Hexo Theme Ayer