[JavaScript] 자바스크립트 기초 다지기. 변수 선언과 할당, Hoisting, 데이터 타입 종류

 

#1. 로그 출력 함수

 

console.log('Hello World');
console.log('Hello', 'World');

 

가장 기본적인 로그 출력 함수로 console.log() 가 있다.

 

console.log() 함수는 console 이라는 객체 안에 log라는 메서드를 불러서 쓴 것이라고 보면 된다.

함수 안에 문자열이나 변수값 등 이미 정의된 값을 출력하는데 쓰인다.

 

위처럼 'Hello World' 를 넣어도, 'Hello', 'World' 분리해서 넣어도 결과 값은 똑같다.

 

 

 

 

#2. 주석 처리

 

// 한줄 주석처리

// 250126 주석 테스트
console.log('Hello World');  // Hello World 문자 출력


/*
* 블록 주석처리
* 테스트 테스트
*
*/

 

 

주석 처리는 프로그래밍 언어의 코멘트용으로 쓰이는 목적으로 쓰인다.

 

해당 소스코드의 목적이 무엇인지, 언제 작성했는지 등

간략하게 다른 개발자가 보기에도 한 눈에 이해하기 쉽다.

 

 

위와 같이 한줄용으로 간편하게 쓸 수 있고

블록을 두어 여러 줄로 작성할 수 있다.

 

 

 

 

#3. 변수 선언과 할당

 

/*
* 변수 선언
* [키워드] [변수명];
*/
var name1;
let name2;
const name3;

name1 = '갈릭';   // 변수 할당

/*
* 변수 선언 및 할당
* [키워드] [변수명] = [변수 값];
*/
var fruit1 = '딸기';
let fruit2 = '바나나';
const fruit3 = '수박';

console.log(fruit1);  // 콘솔에 fruit1 변수에 담긴 데이터 '딸기'가 정상 출력

 

변수는 데이터를 임시로 담는 공간으로, 선언과 할당이 있다.

 

선언 변수를 선언해주는 것

할당 변수에 값을 넣어주는 것

 

근데 위와 같이 선언과 할당만 해주면 데이터가 담기는 것으로 끝납니다.

console.log(변수명); 으로 변수값이 잘 들어갔는지 직접 확인해볼 수 있어요.

 

 

 

 

변수를 선언하는 방식으로는 var, let, const 3가지가 있어요 !

 

셋 다 기본적으로 기능은 동일하게 하지만

var은 재선언이 가능하고, let과 const는 재선언을 할 수 없습니다.

 

let, const는 실수로 같은 변수를 선언하는 일이 없게끔 할 수 있어요.

 

 

 

 

 

let 은 변수 할당을 다시 할 수 있습니다.

사진처럼 변수값이 변경된 것을 확인할 수 있어요.

 

 

 

 

 

반면에 const는 변수 재할당이 불가능합니다.

재할당 해보니, 사진처럼 에러가 뜨네요ㅎㅎ

 

 

변수 선언자	변수 재선언	변수 재할당
var	O	O
let	X	O
const	X	X

 

위와 같이 정리해볼 수 있을 것 같습니다.

절대 변경되면 안되는 데이터에 대해서는 const를 사용하면 됩니다.

 

let, const는 코드에 따라 분배해서 사용하면 되고 var은 실무에서 잘 쓰이지 않습니다.

 

 

 

 

 

var을 잘 사용하지 않는 이유는?

var 키워드는 Hosting (호이스팅)이라는 현상이 발생하기 때문입니다.

 

Hosting 인터프리터가 변수와 함수의 메모리 공간을 선언하기 전에 미리 할당하는 것

쉽게 말해, 모든 변수 선언문이 코드의 최상단으로 이동되는 것처럼 느껴지는 현상입니다.

 

 

// let 키워드
console.log(test1);  // before initialization 출력
let test1 = '파크뷰';
console.log(test1);  // 파크뷰 정상 출력

// const 키워드
console.log(test2);  // before initialization 출력
const test2 = '라세느';
console.log(test2);  // 라세느 정상 출력

// var 키워드
console.log(test3);  // undefined 출력. 롸?
var test3 = '아리아';
console.log(test3);  // 아리아 정상 출력

 

위 소스코드와 같이, 변수 선언/할당 전후에 출력을 각각 키워드 기준으로 해보았습니다.

 

let, const는 console.log() 출력 다음에 변수를 선언/할당 했으니

변수 초기화가 되지 않았다는 에러 메시지가 정상적으로 발생합니다.

 

하지만 var은 마치 변수 선언까지 된 것처럼 'undefined'를 출력합니다.

 

 

오잉? var 키워드도 위에 선언을 한 적이 없는데.. 사실 이건 초기 개발 당시의 버그라고 합니다.

마치 변수 선언을 사용자가 코드 상단에 작성한 것처럼 느껴지는거예요.

 

이처럼 자칫 혼란을 초래할 수 있기에 var 선언자는 사용하지 않는다고 보시면 됩니다.

 

 

 

 

 

 

#4. 변수명 규칙

 

· 일반적으로 변수명은 영어로 사용. 숫자도 가능 (한국어 불가)

· 특수문자도 가능하지만, _(언더 스코어)와 $(달러)만 사용할 수 있음

· 숫자는 변수명의 첫 글자 사용 불가 (ex. 1bread, 2coffee 불가)

· 키워드는 변수명으로 사용 불가 (ex. var let, vat const 불가)

 

 

· camelCase 대부분 언어에서 사용, 첫 글자를 소문자로 시작해서 다음 단어는 대문자로 사용하는 방식

(ex. cheesePizza, garlicPizza)

 

· snake_case 단어끼리는 언더스코어로 묶는 방식. Python에서 주로 사용

(ex. cheese_pizza, garlic_pizza)

 

· PascalCase 첫 글자로 대문자로 시작. C#, MS 계열 언어에서 주로 사용

(ex. CheesePizza, GarlicPizza)

 

 

 

 

 

#5. 데이터 타입

 

데이터 타입은 기본형으로 7개가 존재합니다.

console.log() 함수 안에 typeof 을 함께 호출해서 데이터 타입을 확인할 수 있어요.

 

const age = 32;  // 숫자는 실수, 정수 모두 가능
const luxury = '발냄시아가';  // 문자열은 따옴표(') 안에 넣어두기
const luxuryTrue = false;  // true, false 값을 넣을 수 있음
let noData;  // 변수 선언까지, 할당은 하지 않은 경우
let noData1 = null;  // 사용자가 명시적으로 null 값을 넣어준 경우
const symbol1 = Symbol('1');  // 유일한 값이 필요한 경우 사용. symbol 함수를 호출해야 함.


console.log(typeof age);  // Number
console.log(typeof luxury);  // String
console.log(typeof luxuryTrue);  // Boolean
console.log(typeof noData);  // 정의되지 않은 데이터 타입 v1 - undefined. 지양하기
console.log(typeof noData1);  // 정의되지 않은 데이터 타입 v2 - object(null). 사용자가 명시한 경우.
console.log(typeof symbol1);  // Symbol

 

7가지가 있는데, 위에는 6가지이죠?

남은 1개도 object 이지만, null과는 구분이 필요하므로 나누었습니다.

 

object는 더 세분화해서 확인할 필요가 있어요.

 

 

 

const cafeOrder = {
    cafe:'스타벅스',
    menu:'아메리카노',
    option:'ice',
    size:'venti'
};

console.log(typeof dictionary);  // Object

console.log(cafeOrder);  // {cafe: '스타벅스', menu: '아메리카노', option: 'ice', size: 'venti' }
console.log(dictionary['cafe']);  // 스타벅스

 

위는 Map 방식이라고 합니다.

 

데이터마다 Key 와 값들로 구분해서 변수를 선언/할당할 수 있어요.

 

해당 포스팅에서는 처음 언급하는건데,

중괄호 {, } 을 통해 하나의 변수에 여러 데이터를 할당할 수 있습니다.

 

 

 

const colorArray = [
    'red',
    'yellow',
    'blue',
    'green'
];

console.log(colorArray);  // ['red', 'yellow', 'blue', 'green']


console.log(colorArray[0]);  // red
console.log(colorArray[3]);  // green
console.log(colorArray[6]);  // undefined

colorArray[0]='black';  // index[0] 값인 red를 black으로 변경
console.log(colorArray[0]);  // black

 

이렇게 여러 변수값을 나열하는 Array 타입도 있습니다.

각 변수값은 index로 구분되고, index는 숫자 0부터 시작해요.

 

주석처리로 실제 값을 달아두었는데,

실제로 없는 index 값을 조회하면 undefined로 떨어집니다ㅎㅎ

 

 

red를 black로 바꾼 것처럼 변수값을 변경할 수도 있는데, 

아까 위에 const 는 변수값이 변경되지 않는다고 했었죠?

 

const도 object 안의 변수값은 변경이 가능합니다.