Javascript - 변수 및 함수의 기초, 배열

자바스크립트에서는 변수 타입이 없으므로 변수 선언자는 var 하나만 존재합니다.

그렇기에 var 변수 선언자에 모든 데이터 타입의 값을 저장할 수 있습니다. 이때, 쉼표(,)를 사용하면 변수 여러 개를 1개의 문장으로 선언할 수 있습니다.

var a,b,c,d,e,f,...a;

var a=1,b=2,c=3;

 

※ 변수 선언 생략 : var 문으로 선언하지 않는 변수 값을 읽으려고 시도하면 참조 오류가 발생하게 됩니다. 그렇기에 꼭 변수 선언(초기화)를 필수로 설정해야 합니다.

console.log(X);

// RefereneceError : is not defined

 

변수를 선언(초기화)를 하지 않으면 오류가 발생하게 됩니다.

x = 2; // 변수 선언

console.log(x); // 2

 

변수를 선언(초기화)하면은 정상적으로 콘솔 창에 2라고 출력이 됩니다.

 변수 끌어올림과 중복 선언

---

변수 선언은 프로그램 작성 순서(윗줄 -> 아랫줄)과는 다르게 이 원칙을 따르지 않습니다.

console.group(x);

var x;

이렇게 작성하면 변수를 선언하지 않아 오류가 뜰 것 같지만 실제로는 x의 값이 지정되지 않았기에 콘솔 창에 undefined라고 뜨게 됩니다.

 

※ 단, 선언과 동시에 대입하는 코드는 끌어오지 않습니다. 아래의 경우와 같이 선언과 동시에 대입하는 변수를 작성하면

console.log(X); // undefined

var x = 5;

console.log(x); // 5

 

위와 같이 첫 번째 콘솔에는 값이 없는 undefined가 출력이 되고 두 번째 콘솔에는 숫자 5가 출력이 됩니다.

 

변수의 명명 규칙

---

변수, 함수 등 사용자가 정의하는 이름을 식별자라고 합니다. 이때, 식별자를 작성할 때는 다음과 같은 규칙을 준수해야 합니다.

1. 사용할 수 있는 문자는 알파벳(a~z,A~Z), 숫자(0~9),밑줄(_),달러기호($)

2. 첫 글자로는 숫자를 사용할 수 없고 첫 글자는 위 4가지 형식 중 하나이어야 합니다.

3. 예약어를 식별자로 사용할 수 없습니다.

1statusbar(첫 글자가 숫자)

sum-AbortController(하이픈은 사용할 수 없음)

new(예약어)

 변수의 동적 타이핑 

---

var pi = 3.14;

console.log(pi);

pi = "원주율";

console.log(pi);

 

이처럼 같은 변수 선언자에 값이 다른 데이터 타입을 선언할 수 있습니다. 이처럼 자바스크립트는 변수에 저장된 데이터 타입을 동적으로 바꿀 수 있는 동적 타입 언어입니다.

 

데이터 타입

---

자바스크립트가 처리할 수 있는 데이터 타입은 크게 2가지로 나눌 수 있는데, 원시타입과 객체 타입입니다.

 

원시 타입 - 숫자(number), 문자열(String), 논리값(Boolean), 특수한 값(undefined, null) , 심벌(Symbol)

객체 타입 - 원시 타입에 속하지 않는 값 / 변수 여러 개가 모여서 만들어진 복합 데이터 타입을 말합니다. 대표적인 예시로는 배열, 함수, 정규 표현식과 같은 다양한 요소들이 객체 타입에 속합니다.

return 문 다음에 줄 바꿈 문자를 넣지 말 것
return과 값 사이에 줄 바꿈 문자를 넣게 되면 자바스크립트 엔진이 자동으로 세미콜론을 추가하여 해석합니다.

return
x*x;
로 작성하게 되면 자바스크립트 엔진이
return;
x*x;
로 작성하게 되므로 값이 없는 return문으로 해석하게 됩니다.

 

전역 변수 - 함수 바깥에서 선언된 변수 / 코드 전체가 유효 범위입니다.

지역 변수 - 함수 내부에서 선언된 변수로 선언된 함수의 내부가 유효 범위입니다.

var a = "global";

function f() {

  var b = "local";

  console.log(a);

  return b;

}

f();

console.log(b);

 

여기서 변수 a는 함수 바깥에서 선언되었으므로 전역 변수이고 변수 b는 함수 내부에서 선언되었으므로 지역 변수에 해당합니다.

=> 이렇듯, 변수에 유효 범위가 존재하는 이유는 프로그램 내부에서 선언된 이름이 같은 변수와의 충돌을 방지하기 위함입니다. 그러나, 전역 변수 이름과 지역 변수 이름이 같아지게 되면 두 변수가 충돌하게 됩니다. 이때는 전역 변수를 숨기고 함수 내부의 지역 변수를 사용하게 됩니다.

var a = "global";

function f() {

  var a = "local";

  console.log(a); //local

  return a;

}

f();

console.log(a); //global

 

함수 내부의 지역 변수 a는 local로 출력이 되고 함수 내부를 벗어난 영역에서는 지역 변수가 참조가 되지 않기에 전역 변수인 global이 출력이 됩니다.

 

객체의 메서드 - 함수 객체의 참조를 값으로 담고 있는 프로퍼티를 말합니다.

var circle = {

  center: {x:1.0, y:2.0},

  radius: 2.5,

  area: function () {

    return Math.PI * this.radius * this.radius;

  }

}

 이처럼 원의 넓이를 구하는 메서드 area를 추가할 수 있습니다.

 

생성자 - new 연산자로 객체를 생성할 것이라 기대하고 만든 함수

생성자 내부에 this.프로퍼티 이름에 값을 대입하면 그 이름을 가진 프로퍼티에 값이 할당된 객체가 생성됩니다.

 

내장 생성자

---

사용자가 직접 정의하는 생성자 외에 자바스크립트에 처음부터 내장되어 있는 내장 생성자가 존재합니다.

 

Date ()  생성자 : 날짜와 시간을 표현하는 내장 생성자

// Date 생성자

var now = new Date();

console.log(now); // Wed Jul 03 2024 15:17:51 GMT+0900 (한국 표준시)

now.getFullYear() // 2024 (연도를 뜻하는 숫자 값)

now.getMonth() // Jul (월을 뜻하는 숫자 값)

now.getDate() // 03 (날짜를 뜻하는 숫자 값)

now.getDay() // Wed (요일을 뜻하는 숫자 값)

now.getHours() // 15 (시각의 시간을 뜻하는 숫자 값)

now.getMinutes() // 17 (시간의 분을 뜻하는 숫자 값)

now.getSeconds() // 51(시각의 초를 뜻하는 숫자 값)

 

Function () 생성자 : 함수를 생성하는 내장 생성자

 

배열

---

배열 리터럴은 쉼표로 구분한 값을 대괄호([])로 묶어서 표현합니다.

이때, 배열 요소에서 왼쪽부터 차례대로 0,1,2... 라는 순서가 할당이 되는데 각 요소에 매긴 번호는 요소 번호 또는 인덱스라고 합니다.

 

length 프로퍼티 : length 프로퍼티 값을 가치켜 배열 길이라고 부릅니다. /  배열 요소의 최대 인덱스 값 + 1 이 내포되어 있습니다. 

 

Array 생성자로 배열을 생성하기

var evens = new Array(2, 4, 6, 8); // [2,4,6,8] 을 생성

var empty = new Array(); // 빈 배열 []을 생성

var a = new Array(2, 4); // 배열 리터럴 [2,4]를 생성

 

여기서 Array 생성자의 인수가 1개이고 그 값이 양의 정수이면 배열 길이를 뜻하고 반대로 인수가 1개이고 양의 정수가아니면 오류가 발생합니다.

var x = new Array(3);

console.log(x.length); // 3

 

※ 배열 요소의 참조 - 특정 인덱스의 요소를 대괄호([]) 연산자를 사용하여 읽거나 쓸 수 있습니다.

evens[2] // 6(인덱스가 2인 요소)

 

배열에 값이 존재하지 않는 값을 입력하면 콘솔 창에 undefined로 출력됩니다.

evens[7] // undefined(배열에 값이 존재하지 않음)

 

배열 요소의 추가와 삭제

var a =["A","B","C"];

a[3] = "D";

console.log(a); // ["A","B","C","D"];

push 메서드를 사용하여 요소를 배열의 끝에 추가할 수 있습니다.

var a =["A","B","C"];

a.push("D");

console.log(a); // ["A","B","C","D"]

delete 연산자를 사용하면 특정 배열 요소를 삭제할 수 있습니다.

delete a[1];

console.log(a); // ["A",undefined, "C", "D"]

 

 

이때, delete 연산자를 사용하여 배열의 요소를 삭제하여도 그 배열의 length 프로퍼티 값은 바뀌지 않고 삭제한 요소만 사라지게 됩니다.

 

희소 배열

배열에 요소를 추가하거나 제거하면 인덱스가 0부터 시작되지 않는 배열이 만들어집니다. 이러한 배열을 희소 배열이라고 합니다.

var a = ["A", "B", "C"];

a[4] = "E";

console.log(a); // ["A","B","C",undefined,"E"]

 

이때, 희소 배열의 길이는 배열 요소의 길이보다 크고 배열 요소의 개수는 같게 됩니다.

작성한 내용과 같이 값을 하나 추가하면 배열의 인덱스가 4인 요소가 추가되었으므로 인덱스의 길이는 5로 늘어나기에 4번째 값이 없으므로 undefined로 출력되게 되는 것입니다.