Console.log, Variable
✔️ Console.log
📌Console.log?
- JavaScript의 가장 대표적인 디버깅 방법.
- JavaScript가 출력을 할 수 있게 도와주는 기능.
- console에 log를 남긴다 라는 뜻.
- browser 안에 console 창이 존재한다.
( browser에서 우클릭, 검사(inspect) 혹은 키보드 F12 로 사용 가능 )
📌How to use?
console.log(100); // 100
console.log("Hello World!"); // Hello World!
console.log(true); // ture
- JavaScript의 가장 대표적인 디버깅 방법.
- JavaScript가 출력을 할 수 있게 도와주는 기능.
- console에 log를 남긴다 라는 뜻.
- browser 안에 console 창이 존재한다.
( browser에서 우클릭, 검사(inspect) 혹은 키보드 F12 로 사용 가능 )
console.log(100); // 100
console.log("Hello World!"); // Hello World!
console.log(true); // ture
console 찍어보세요~
✔️ Variable
📌Variable?
- 하나의 값(데이터)을 저장하기 위해 확보한 메모리 공간 자체, 또는 그 메모리 공간을 식별하기 위해 붙인 이름.
- 프로그램에서 일시적으로 값(데이터)을 저장하는 공간
- 자바스크립트에서 변수는 대부분 선언과 할당이 한번에 이루어진다.
📌Why should we use?
- 입력된 값(데이터)을 재사용 하기 위해서 변수가 필요하다.
- 코드의 재활용성과 가독성을 높여주고, 중복을 제거하여 유지보수가 용이하게 해준다.
📌How to use?
- 데이터를 변수에 담아서 사용하려면 크게 2가지의 단계를 거친다.
- 선언 ( Declare )
변수를 사용하겠다고 변수의 이름을 선언.
- 할당 ( Assign )
선언한 변수에 내가 담고자하는 데이터를 담는다.
- 대입 연산자 ( = )
: 오른쪽 항에 있는 값을 왼쪽에 있는 변수에 대입하는 역할.
: 선언된 변수가 특정한 값을 갖기 위해서는 대입 연산자를 사용해 값을 대입해 주어야 한다.
let myNumber = 100;
console.log(myNumber); // 100
/*
myNumber = 변수의 이름
100 = 변수의 값
1. 선언
let = myNumber
2. 할당
myNumber = 100;
*/
// 값을 할당하지 않고 선언만 할 경우
let a;
console.log(a); // undefined
a = 'shorry' // 한 번 선언된 변수는 다시 선언해줄 필요 없음. 값만 대입해주면 됨.
console.log(a); // 'shorry'
📌Variable Names
- 변수이름, 함수이름, 연산자 모두 대소문자를 구분.
(myName과 MyName은 다른 변수)
- 변수 이름을 정할 때, 첫 번째 문자는 반드시 글자나 밑줄(_), 달러기호($)중 하나.
- 두 번째 문자부터는 글자, 밑줄, 달러, 숫자 중에서 자유롭게 쓸 수 있다.
- 변수이름, 함수이름 등 camelCase(카멜케이스) 방식으로 쓸 것.
- snake_case 표현법도 있지만 잘 사용하지 않음.
camelCase - Example:
let someVariable;
let anotherVariableName;
let thisVariableNameIsSoLong;
snake_case - Example:
let first_second;
let my_profile_img;
let to_do_list_array;
📌Variable Declaration
- 변수명을 자바스크립트 엔진에 알리는 것 ⇒ 선언(declaration)
- 변수에 값을 저장 ⇒ 할당(assignment, 대입, 저장)
- 변수에 저장된 값을 읽어 들이는 것 ⇒ 참조(reference)
- 자바스크립트의 변수 선언은 “ 선언 → 초기화 ” 단계를 거쳐 수행된다.
- 선언 단계 : 변수명을 등록하여 자바스크립트 엔진에 변수의 존재를 알림.
- 초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화한다.
📌Details
1. Scope
식별자(변수명, 함수명, 클래스명 등)의 유효 범위를 뜻한다.
선언된 위치에 따라 유효 범위가 달라진다.
( 전역에 선언된 변수 => 전역 레벨 스코프 / 지역에 선언된 변수 => 지역 레벨 스코프 )
- var
자바스크립트에서 모든 코드블록(if, for, while 등)이 지역 스코프를 만들며, 이를 " 블록 레벨 스코프 " 라고 한다.
const, let 은 " 블록 레벨 스코프 " 이지만,
var의 경우에는 함수의 코드 블록만을 지역 스코프로 인정하는 " 함수 레벨 스코프 " 이다.
// var
var a = 1;
if (true) { // if문을 지역 스코프로 인정하지 않는다.
var a = 3;
};
console.log(a); // 3
// let
let b = 1;
if (true) {
let b = 3;
};
console.log(b); // 1
2. Hoisting
자바스크립트 엔진이 소스코드를 한 줄씩 순차적으로 실행하기에 앞서, 모든 선언문 (변수 선언문, 함수 선언문 등...)을 찾아내 다른 코드보다 먼저 실행하는 특징.
- var
Hoisting이 되면 스코프의 선두에서 선언 단계와 초기화 단계가 함께 실행이 되므로 변수 선언문 이전에 변수를 참조할 수 있다.
- let
Hoisting이 되면 스코프의 선두에서 선언 단계만 실행이 되고, 변수의 선언전까지 일시적 사각지대(TDZ)에 빠지게 된다.
// var : 스코프의 선두에서 선언 단계와 초기화 단계가 실행된다.
console.log(variable2); // undefined
var variable2;
// let : 스코프의 선두에서 선언 단계가 실행된다.
// 아직 변수가 초기화(메모리 공간 확보와 undefined로 초기화)되지 않았다.
console.log(variable3); // Error: Uncaught ReferenceError: variable3 is not defined
let variable3;
3. var , let , const 비교
변수는 “ 선언 → 초기화 → 할당 “ 단계를 거쳐 수행된다.
- var
- 선언 단계와 초기화 단계가 동시에 진행 된다.
- 변수 선언문 이전에 변수를 참조할 수 있다.
- 중복선언, 재할당이 가능하다.
- 함수레벨 스코프
- let
- 선언 단계와 초기화 단계가 분리되어 진행된다.
- 스코프의 시작에서 변수의 선언까지 일시적 사각지대(Temporal Dead Zone: TDZ)에 빠지게 된다.
- 재할당이 가능하다. ( 중복선언 불가능 )
- 블록 레벨 스코프
- const
- 선언 단계와 초기화 단계가 동시에 진행된다.
- 선언과 할당을 한번에 해줘야 한다. ( 분리 시킬 수 없다. )
- 선언과 초기화가 동시에 진행되지만, 런타임 이전에는 실행이 될 수 없다.
- 재할당이 불가능하다. ( 상수 )
//var
console.log(variable2); // undefined
var variable2;
//let
console.log(variable3); // Error: Uncaught ReferenceError: variable3 is not defined
let variable3;
//const
console.log(variable4); // Error: Uncaught ReferenceError: Cannot access 'variable4'
const variable4 = 'abc';
as a result
- 재할당이 필요없는 상수와 객체에서는 기본적으로 const 사용
- 재할당이 필요한 경우 한정해서 let 사용
- 변수의 스코프는 최대한 좁게 만든다.
Reference
- 하나의 값(데이터)을 저장하기 위해 확보한 메모리 공간 자체, 또는 그 메모리 공간을 식별하기 위해 붙인 이름.
- 프로그램에서 일시적으로 값(데이터)을 저장하는 공간
- 자바스크립트에서 변수는 대부분 선언과 할당이 한번에 이루어진다.
- 입력된 값(데이터)을 재사용 하기 위해서 변수가 필요하다.
- 코드의 재활용성과 가독성을 높여주고, 중복을 제거하여 유지보수가 용이하게 해준다.
- 데이터를 변수에 담아서 사용하려면 크게 2가지의 단계를 거친다.
- 선언 ( Declare )
변수를 사용하겠다고 변수의 이름을 선언.
- 할당 ( Assign )
선언한 변수에 내가 담고자하는 데이터를 담는다.
- 선언 ( Declare )
- 대입 연산자 ( = )
: 오른쪽 항에 있는 값을 왼쪽에 있는 변수에 대입하는 역할.
: 선언된 변수가 특정한 값을 갖기 위해서는 대입 연산자를 사용해 값을 대입해 주어야 한다.
let myNumber = 100;
console.log(myNumber); // 100
/*
myNumber = 변수의 이름
100 = 변수의 값
1. 선언
let = myNumber
2. 할당
myNumber = 100;
*/
// 값을 할당하지 않고 선언만 할 경우
let a;
console.log(a); // undefined
a = 'shorry' // 한 번 선언된 변수는 다시 선언해줄 필요 없음. 값만 대입해주면 됨.
console.log(a); // 'shorry'
- 변수이름, 함수이름, 연산자 모두 대소문자를 구분.
(myName과 MyName은 다른 변수) - 변수 이름을 정할 때, 첫 번째 문자는 반드시 글자나 밑줄(_), 달러기호($)중 하나.
- 두 번째 문자부터는 글자, 밑줄, 달러, 숫자 중에서 자유롭게 쓸 수 있다.
- 변수이름, 함수이름 등 camelCase(카멜케이스) 방식으로 쓸 것.
- snake_case 표현법도 있지만 잘 사용하지 않음.
let someVariable;
let anotherVariableName;
let thisVariableNameIsSoLong;
let first_second;
let my_profile_img;
let to_do_list_array;
- 변수명을 자바스크립트 엔진에 알리는 것 ⇒ 선언(declaration)
- 변수에 값을 저장 ⇒ 할당(assignment, 대입, 저장)
- 변수에 저장된 값을 읽어 들이는 것 ⇒ 참조(reference)
- 자바스크립트의 변수 선언은 “ 선언 → 초기화 ” 단계를 거쳐 수행된다.
- 선언 단계 : 변수명을 등록하여 자바스크립트 엔진에 변수의 존재를 알림.
- 초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화한다.
식별자(변수명, 함수명, 클래스명 등)의 유효 범위를 뜻한다.
선언된 위치에 따라 유효 범위가 달라진다.
( 전역에 선언된 변수 => 전역 레벨 스코프 / 지역에 선언된 변수 => 지역 레벨 스코프 )
- var
자바스크립트에서 모든 코드블록(if, for, while 등)이 지역 스코프를 만들며, 이를 " 블록 레벨 스코프 " 라고 한다.
const, let 은 " 블록 레벨 스코프 " 이지만,
var의 경우에는 함수의 코드 블록만을 지역 스코프로 인정하는 " 함수 레벨 스코프 " 이다.
// var
var a = 1;
if (true) { // if문을 지역 스코프로 인정하지 않는다.
var a = 3;
};
console.log(a); // 3
// let
let b = 1;
if (true) {
let b = 3;
};
console.log(b); // 1
자바스크립트 엔진이 소스코드를 한 줄씩 순차적으로 실행하기에 앞서, 모든 선언문 (변수 선언문, 함수 선언문 등...)을 찾아내 다른 코드보다 먼저 실행하는 특징.
- var
Hoisting이 되면 스코프의 선두에서 선언 단계와 초기화 단계가 함께 실행이 되므로 변수 선언문 이전에 변수를 참조할 수 있다. - let
Hoisting이 되면 스코프의 선두에서 선언 단계만 실행이 되고, 변수의 선언전까지 일시적 사각지대(TDZ)에 빠지게 된다.
// var : 스코프의 선두에서 선언 단계와 초기화 단계가 실행된다.
console.log(variable2); // undefined
var variable2;
// let : 스코프의 선두에서 선언 단계가 실행된다.
// 아직 변수가 초기화(메모리 공간 확보와 undefined로 초기화)되지 않았다.
console.log(variable3); // Error: Uncaught ReferenceError: variable3 is not defined
let variable3;
변수는 “ 선언 → 초기화 → 할당 “ 단계를 거쳐 수행된다.
- var
- 선언 단계와 초기화 단계가 동시에 진행 된다.
- 변수 선언문 이전에 변수를 참조할 수 있다.
- 중복선언, 재할당이 가능하다.
- 함수레벨 스코프 - let
- 선언 단계와 초기화 단계가 분리되어 진행된다.
- 스코프의 시작에서 변수의 선언까지 일시적 사각지대(Temporal Dead Zone: TDZ)에 빠지게 된다.
- 재할당이 가능하다. ( 중복선언 불가능 )
- 블록 레벨 스코프 - const
- 선언 단계와 초기화 단계가 동시에 진행된다.
- 선언과 할당을 한번에 해줘야 한다. ( 분리 시킬 수 없다. )
- 선언과 초기화가 동시에 진행되지만, 런타임 이전에는 실행이 될 수 없다.
- 재할당이 불가능하다. ( 상수 )
//var
console.log(variable2); // undefined
var variable2;
//let
console.log(variable3); // Error: Uncaught ReferenceError: variable3 is not defined
let variable3;
//const
console.log(variable4); // Error: Uncaught ReferenceError: Cannot access 'variable4'
const variable4 = 'abc';
as a result
- 재할당이 필요없는 상수와 객체에서는 기본적으로 const 사용
- 재할당이 필요한 경우 한정해서 let 사용
- 변수의 스코프는 최대한 좁게 만든다.
Reference
Word of the day
Just code it.
End.
Author And Source
이 문제에 관하여(Console.log, Variable), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@shorrysorry/variable저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)