[JavaScript] 문법(1) 변수 선언과 자료형

변수 선언

1. let : 변수 선언시 사용

수정이 가능한 변수를 선언할 때 사용한다. let 을 사용하면 동일한 변수명으로 두번 이상 let으로 정의할 수 없다.

 

// 예시)

// let 변수 선언
let test = "value";
console.log(test);
> "value"

// 변수 수정
test = "update";
console.log(test);
> "update"

// let 변수 동일 이름 선언: 위에서 선언했기 때문에 error
let test = "value";
> "Identifier 'test' has already been declared"

 

2. const : 상수 선언시 사용

수정이 불가한 상수를 선언할 때 사용한다.

// 예시)

// const 변수 선언
const test = "value";

// 변수 수정: error
test = "update";
> "Assignment to constant variable."

 

3. var: ES6 이전에 변수 선언시 사용

앞으로는 변수 선언에는 let 만 사용하면 되지만, 레거시 코드를 이해하기 위해 var를 살펴본다.

 

3.1. var 변수 선언

var는 let 과 달리 동일한 이름으로 중복 선언해도 에러가 발생하지 않는다

// 예시)

// var 변수 선언
var test = "value";
console.log(test);
> "value"

// let 변수 동일 이름 선언: error 발생 안함
var test = "repeat";
console.log(test);
> "repeat"

 

3.2. var 변수 호이스팅

var는 함수처럼 변수 선언문이 어디에 위치하든 사용할 수 있다(*단, 변수에 값을 할당하는 위치는 코드 순서에 영향을 받는다). 변수 선언을 어디에 작성하든 사용할 수 있는 것은 Compile할 때 함수와 같이 var로 선언된 내용만을 찾아 코드 최상단으로 끌어올리기(=Hoisting) 때문이다. 마찬가지로 함수(function) 역시 Hoisting 하기 때문에 어디에 선언하든 사용할 수 있는 것이다.

 

1) 작성한 코드

// 예시)

// 선) var 변수 test 사용
console.log(test);

// 후) var 변수 선언
var test = "value";

 

2) Compiler가 해석하는 코드

// 예시)

// 선) var 변수 선언(Hoisting)
var test = "value";

// 후) var 변수 test 사용
console.log(test);

 

[참고] let, const 변수 Hoisting

let과 const도 Hoisting 된다. 하지만 선언문 위쪽에서 사용되면 ReferenceError가 발생하게 된다. 이때 선언문 위쪽을 TDZ(Temporal Dead Zone)이라 하는데 let과 const는 TDZ의 영향을 받기 때문에 에러가 발생하는 것이다.

 

 

[참고] var, let, const 변수의 스코프

1) var: 함수 스코프(function-scoped)

함수 내에서 선언된 var 변수는 함수 내에서만 유효하며, 외부에서 접근할 수 없다

function fx(){
    // Function-level scope
    var test = "value";
}

console.log(test);
> "Uncaught ReferenceError: test is not defined"

 

2) let, const: 블록 스코프(block-scoped)

블록 내에서 선언된 let, const 변수는 블록 내에서만 유효하며, 외부에서 접근할 수 없다( 함수, if문, for/while문, try/catch문 등)

function test() {
  // Block-level scope
}

if (true) {
  // Block-level scope
}

for (let i=0; i<2; i++) {
  // Block-level scope
}

 

3.3. var 변수가 갖는 단점

1) 재정의 가능

재정의 가능한 점은 시스템이 커지고 코드량이 많아질수록 의도치 않게 사용되어 버그로 이어지기 쉽다. 수 많은 코드 중 앞서 정의했던 변수인지 매번 정확히 체크하는 것은 불가능하다. 

 

2) var 키워드는 함수 스코프(function-scoped)를 갖는다

javascript의 문서가 함수가 둘러싸여 있다고 생각해야 한다. 이는 다음과 같은 문제를 발생시킨다.

for (var i = 0; i < 2; i++) {
	console.log(i);
}

console.log('last i:' + i); // for문이 끝났음에도 i를 읽을 수 있음

 

3) var 키워드 미사용시 전역변수로 사용됨

'use strict'; 를 사용하면 전역변수로 사용되는 것을 피할수 있으나 사용하지 않을 경우 문제가 생길 수 있다.

function fx1() {
    test = "value"; //test는 전역변수가 됨
}
function fx2() {
    console.log(test); // fx1에서 선언한 값을 fx2에서 사용할 수 있음
}

fx1(); // test 변수 선언됨
fx2(); // test 변수 출력 가능. fx1()를 호출하지 않을 경우 ReferenceError 발생

 

---

자료형

1. 문자열 타입

", ', ` 를 이용해서 선언 가능

 

특히, `와 ${}를 이용하면 문자열 내 변수를 넣을 수 있다.

// 예시)
let world = "World!";
let printHW = `Hello ${world}`;

console.log(printHW);

> "Hello World!"

 

2. Nan 타입: Not a Number

// 예시)
console.log("string"/5);

> NaN

 

3. Null, Undefined 타입

Null: 값이 없다

 

// 예시)
let hello = null;
console.log(hello);

> null

 

Undefined: 값이 할당되지 않았다

// 예시)
let hello;
console.log(hello);

> undefined

 

4. Object(객체) 타입

JSON과 유사한 타입.

 

4.1. 값(Value) CRUD

Java와 같은 Class 기반 객체지향 언어와 달리 자바스크립트는 Prototype 객체지향 기반 언어로 부르며 객체 리터럴, 생성자 함수, Object.create 메서드, Class(ES6)와 같은 다양한 객체 생성 방법이 있다.

본편에서는 아래 예시와 같이 중괄호 {}를 이용해서 선언하는 객체 리터럴 방식을 살펴보고, 생성자 함수, Class를 이용해 객체를 생성하는 방법은 각각 함수편과 Class 편에서 알아본다.

 

// 예시)

// 1.선언
let country = 'korea';

// 객체 리터럴 방식으로 생성
const person = {
    name: '유자바나나',
    age: 20,
    country // country: country와 동일
}

// 2.접근
console.log(person.name);
> "유자바나나"
console.log(person['age']);
> 20

// 3.추가
person.sex = 'male';
person['city'] = 'seoul';

// 4.수정
person.name = '유자맛 바나나';
person['age'] = 30;

// 5.삭제
delete person.address;
console.log(person)

 

4.2. Object에 function을 선언하는 3가지 방법

// 예시)

// Object 내 함수 선언 방법
const person = {
    name: '유자바나나',
    
    // 방법1
    sayHello: function() {
      console.log("Hello");
    },
  
    // 방법2
    sayName(){
      // this는 person을 가리키며, this 대신 person을 사용할 경우 
      // person을 copy할 때 copy 대상의 name이 달라 문제가 생길 수 있다.
      console.log(`My name is ${this.name}`); 
    }
    
    // 방법3: 화살표 함수 사용
    sayBye: () => {
    	console.log("Bye");
    }
}

person.sayHello();
> "Hello"
person.sayName();
> "My name is 유자바나나"

// 방법2에서 this 대신 person을 사용했을 경우 발생할 수 있는 문제
let other = person;
person = null;
other.sayName();
> "Assignment to constant variable."

주의) 방법3: 화살표 함수 사용 에서 this를 사용할 경우 this 는 person이 아닌 전역객체를 가리키게 된다. 

참고로, 전역객체는 브라우저 환경에서 window를 가리키고, Node.js 환경에서 global을 가리킨다. 따라서 메서드에서 this를 통해 객체에 접근해야 한다면 화살표 함수는 사용하지 않는 것이 좋다.

 

4.3. Object와 in, for 사용

// 예시)

let country = 'korea';
const person = {
    name: '유자바나나',
    age: 20,
    country
}

// 1.프로퍼티 존재여부 확인
console.log('name' in person); 
> true
console.log('hobby' in person);
> false

// 2.for문과 함께 사용
for(let key in person) {
  console.log(key + ": " + person[key]);
}

중요) Object와 for문을 사용할 때는 'of'가 아닌 'in'을 사용한다. array에는 of를 사용하기 때문에 헷갈릴 수 있다.

 

5. Array 타입

5.1. Array 선언과 사용

배열에는 문자, 숫자와 같은 값 타입 뿐만 아니라 Object, function 등도 포함할 수 있다

// 예시)

//1.선언
let array = ['name', // String
             20, // Number
             true, // Boolean
            { // Object
              'Country': 'Korea',
              'City': 'Seoul'
            },
             function() {
               console.log("Hello")
             }
            ]

console.log(array[0]);

//2.배열의 길이
array.length;

//3.배열 끝에 추가:push
array.push('hobby1');
array.push('hobby2', 'hobby3');

//4.배열 끝 제거:pop
array.pop();

//5.배열 가장 앞에 추가:unshift
array.unshift(98);
array.unshift(99, 100);
console.log(array);
> 99,100,98, ...

//5.배열 가장 앞에 추가:shift
array.shift();

 

5.2. Array와 for 사용

// 예시)
let array = [1,2,3]

//방법1: for
for (let i = 0; i < array.length; i++){
  console.log(array[i]);
}
> 1
> 2
> 3

//방법2: for ... of
for(let no of array){
  console.log(no);
}
> 1
> 2
> 3

//방법3: for ... in
for(let no in array){
  console.log(no);
}
> "1"
> "2"
> "3"

주의) array는 for문에 Object와 달리 of 와 in 둘 다 사용 가능하지만 array 내에 있는 자료형 그대로 접근하기 위해서는 of를 사용해야 한다. 따라서 of를 기본적으로 사용한다고 보면 된다.

 

6. typeof 연산자

객체의 타입을 확인할 때 사용한다

// 예시)

console.log(typeof 1);
> "number"

console.log(typeof "string");
> "string"

console.log(typeof true);
> "boolean"

console.log(typeof null);
> "object"

console.log(typeof undefined);
> "undefined"

 

 

 

 

 

 

 

 

 

출처: 유튜브 코딩앙마 왕 초보 자바스크립트