Basic JavaScript

변수, 호이스팅, 조건문, 제어문, 논리 연산자, 함수

Posted by iheese on February 04, 2022 · 11 mins read

JavaScript 변수

  • var: 같은 이름의 변수로 선언하여도 에러 발생하지 않고 생성
    • 간단한 테스트 시 편리할 수 있으나 실제 업무에서는 문제 발생 여지가 많아진다.
    • ES6 이후 문제점 보완을 위해 let, const 가 추가됨
  • let: 변수 재선언이 불가능하지만 재할당(immutable)은 가능하다.
  • const: 변수 재선언, 변수 재할당 모두 불가능하다.
var a = 'hungry';
console.log(a); //hungry

var a = 'thirsty';
console.log(a); //thirsty   아무 에러가 발생하지 않는다.

let b = 'one';
console.log(b); // one

let b = 'two';
console.log(b); // Uncaught SyntaxError: Identifier 'b' has already been declared  
// 에러가 뜬다. 

b='three';
console.log(b); //three 재할당은 가능하다.

const c = 'red';
console.log(c); // red

const c = 'green';
console.log(c); 
// Uncaught SyntaxError: Identifier 'c' has already been declared

c = 'blue'
console.log(c) 
//Uncaught TypeError: Assignment to constant variable.


호이스팅(Hoisting)

  • 변수, 함수 선언을 모두 맨 위로 올려서 변수와 함수가 적용되게 하는 것 같은 현상
  • JS 엔진은 코드 실행 전 모든 선언을 스코프에 등록한다.(즉 모든 선언에는 호이스팅이 일어난다.)
  • var 변수, 함수 선언문에서만 호이스팅이 발생하는 것처럼 보인다.(할당은 적용되지 않는다.)

  • var 키워드는 선언과 함께 undefined로 초기화되어 메모리에 저장되고, let, const는 초기화없이 선언만 메모리에 저장된다.

  • 변수 생성 단계: 선언(Declaration phase) - 초기화(Initialization phase) - 할당(Assignment phase)
console.log(a);
var a = 2; //undifined //선언, 초기화까지 진행, 할당은 진행되지 않았다.
 
console.log(b);
let b = 2; // ReferenceError //선언까지만 진행

console.log(c);
const c = 2; // ReferenceError //선언까지만 진행

d(); //Hello //함수선언문에서는 호이스팅 일어난다.
console.log(e); //undefined // 함수 표현식도 선언까지만 진행

function d() {
  console.log('Hello');
}
var e = function() {
  console.log('Hi');
}


if, switch, for, while

//if
if (condition1) {
  statement1;
} else  if(condition2){
  statement2;
} else {
  statement3;
}

//switch
switch (expression) {
  case label1:
    statements1
    [break;]
  case label2: //콜론을 넣는다. 
    statements2
    [break;]  //case가 하나 선택되면 멈춘다. 
    ...
  default: //기본값
    statements_def
    [break;]
}

//for
for ([initialization]; [condition]; [final-expression]){
   statement
} //초기값, 반복 조건, 반복 후 평가할 식

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

//while
while (condition){
      statement;
}

var n = 0;
var x = 0;

while (n < 3){ //참일때 실행
  n++;
  x += n;
}

자세한 내용, MDN 검색


논리 연산자

  • 논리 AND , && 연산자
a1 = true  && true          // t && t returns true
a2 = true  && false         // t && f returns false
a3 = false && true          // f && t returns false
a4 = false && (3 == 4)      // f && f returns false
a5 = 'Cat' && 'Dog'         // t && t returns "Dog"
a6 = false && 'Cat'         // f && t returns false
a7 = 'Cat' && false         // t && f returns false
a8 = ''    && false         // f && f returns ""
a9 = false && ''            // f && f returns false
  • 논리 OR ,   연산자 
o1 = true  || true       // t || t returns true
o2 = false || true       // f || t returns true
o3 = true  || false      // t || f returns true
o4 = false || (3 == 4)   // f || f returns false
o5 = 'Cat' || 'Dog'      // t || t returns "Cat"
o6 = false || 'Cat'      // f || t returns "Cat"
o7 = 'Cat' || false      // t || f returns "Cat"
o8 = ''    || false      // f || f returns false
o9 = false || ''         // f || f returns ""
o10 = false || varObject // f || object returns varObject
  • 논리 NOT, ! 연산자
n1 = !true               // !t returns false
n2 = !false              // !f returns true
n3 = !''                 // !f returns true
n4 = !'Cat'              // !t returns false


JavaScript 함수

  • 함수 선언문
function print(name){
	var lastname="Lee";
    return lastname+" "+name;
}
  • 함수 표현식
var print = function(){
	return 'hi'
}
  • 선언과 호출 순서에 따라 정상적인 함수가 실행되지 않을 수 있다.

arguments 객체

  • 함수 실행되면 그 안에 자동으로 arguments 지역변수가 생성된다.
  • arguments는 배열 타입은 아니지만 넘어온 인자를 배열에 접근하듯 하나씩 접근 가능하다.
function a() {
 console.log(arguments);
}
a(1,2,3);  //[Arguments] { '0': 1, '1': 2, '2': 3 }

function a() {
 console.log(arguments[2]);
}
a(1,2,3); //3

//arguments를 이용해 합 구하기
function sum(){
	var result=0;
	for (var i=0;i<arguments.length; i++){
    result+=arguments[i];
    }
    console.log(result);
}

sum(1,2,3,4,5); //15


함수 호출 스택

function foo(b){
    var a = 5;
    return a * b + 10;
} 

function bar(x){
    var y = 3;
    return foo(x * y);
}

console.log(bar(6));  //100
  • bar() 함수가 호출되고 bar()가 foo()를 호출하면서 bar()는 Call stack에 대기
  • foo()가 호출되고 실행이 끝난 뒤 return문이 실행되면 메모리공간에서 사라진다. Call stack에서 사라진다.
  • 함수를 연속적으로 계속 호출하면 Call stack이 꽉 찰 수도 있다. Maximum call stack size exceeded가 발생할 수도 있다.

Reference:

← Previous Post Next Post →