(JavaScript)개념 정리

준비과제를 하며 JavaScript를 복습했다.  간단하게 정리해보려 한다.

 

 

 

JavaScript란?

 

JavaScript는 웹 프로그래밍 언어로, 동적으로 웹 페이지를 만들고 사용자와 상호작용할 수 있도록 해 준다. HTML과 CSS와 함께 웹 페이지를 만들기 위한 필수적인 언어 중 하나이다. JavaScript는 이 두 언어를 보완하여 웹 페이지를 동적이고 상호작용적으로 만들어준다.

 

 

JavaScript의 타입

 

JavaScript의 자료형은 Primitive Type과 Reference Type이 있다.

 

Primitive Type은 기본 자료형으로 Primitive Type에 속하는 자료형은 다음과 같다.

1. Number : 정수, 실수를 가진다.
2. String : 문자나 문자열을 가진다. 큰따옴표와 작은따옴표 모두 사용가능하다.
3. Boolean : 진리값(true, false)을 가진다.
4. undefined : 값이 할당되지 않았음을 의미한다. 변수를 선언하고 console.log()를 해 보면 undefined 가 나온다.
5. null : 값이 할당되지 않았음을 의미하지만, 의도적으로 값이 없음을 나타낼 때 사용한다. 
6. Symbol : 객체 프로퍼티에 대한 식별자로 사용된다. 고유하고 중복이 되지 않으며 한번 생성되면 그 값은 변경되지 않는다.

 

Reference Type은 Primitive Type과 달리 변수에 값을 직접 저장하는 것이 아니라, 메모리 상에서 할당된 공간의 주소를 저장한다. Reference Type변수가 참조형 값을 가리키게 되면, 해당 값은 메모리 상의 고정된 위치에 저장되어 있으며, 변수는 그 위치를 가리키게 된다. C언어의 포인터와 유사한 개념이지만, 메모리 주소를 직접 조작할 수 없다는 차이가 있다.

Reference Type에 속하는 자료형은 다음과 같다.

1. Array: 여러 개의 값들을 하나의 변수에 저장할 수 있다. 인덱스(Index)를 사용하여 변수[0]과 같이 각각의 값에 접근할 수 있다. 

2. Object: 여러 개의 속성(Property)을 포함할 수 있는 자료형이다. 속성은 이름(key)과 값(value)을 가지고 있고, 모든 형태의 자료값을 가질 수 있다(function도 가질 수 있다).

 

 

 

변수, 상수 선언 방법

 

JavaScript는 변수와 상수를 통해 데이터를 저장할 수 있다. 변수는 선언 시 초기화를 하지 않아도 되고 중간에 값을 바꿀 수 있지만, 상수는 선언할 때 반드시 초기화를 해야 하고 중간에 값을 바꿀 수 없다.

 

 변수와 상수를 선언하는 키워드는 다음과 같다. 

1. let: let을 이용하여 변수를 선언할 수 있다. 블록 단위(block-scoped) 변수로, 블록 내에서만 유효하다.

2. const: const를 이용하여 상수를 선언할 수 있다. 블록 단위(block-scoped) 변수로, 블록 내에서만 유효하다.

3. var: var로 선언된 변수는 호이스팅(hoisting)이 발생하여, 변수가 선언되기 전에도 참조할 수 있다. 이를 해결하기 위해 let과 const가 나왔다.

 

 

기본 조건 문법

 

 기본 조건 문법에는 if~else와 switch~case가 있다.

 

1. if~else

let a = 8;
if(a > 10)
{
	console.log("a>10");
}
else
{
	console.log("a<10");
}

 다른 프로그래밍 언어의 조건 문법과 같다. if() 안의 조건문이 참이면 중괄호 안의 코드를 실행하고, if() 안의 조건문이 거짓이면 else의 코드를 실행한다.

 

 

2. switch~case

let a = 3;
let b;
switch(a)
{
    case 1:
    {
    	b = 20;
        break;
    }
    case 2:
    {
    	b = 30;
        break;
    }
    case 3:
    {
    	b = 40;
        break;
    }
    default:
    {
    	b = 0;
    }
}

 다른 프로그래밍 언어의 switch~case 문법과 같다. switch() 안에 조건을 따질 값을 넣고, case A: 의 A를 넣으면 switch() 안에 넣은  값이 A일 때 case A: 의 코드가 실행된다. case A: 를 하고 break;를 하지 않으면 아래에 있는 case들 까지 검사하게 된다. default: 는 위의 case들에 전부 해당하지 않을 때 default: 의 코드가 실행되게 하기 위해 사용한다. 위에서 break;를 사용하지 않으면 default까지 가게 될 것이다.

 

 

 

기본 반복문

 

 기본 반복문에는 for, for...of, for...in, while이 있다.

 

1. for

let sum = 0;

for(let i = 1; i<11; i++)
{
    sum += i;
}

 다른 프로그래밍 언어의 for문과 같다. for() 안에는 initialization; condition; expression이 들어간다. 

initialization은 반복문 시작 전 초기화 코드이다. 일반적으로 반복 횟수를 추적하는 변수를 선언한다.

condition은 반복문을 계속 실행할지 여부를 결정하는 조건식이다. 조건식이 true인 동안 반복문이 실행된다.

expression은 각 반복의 끝에 실행되는 코드이다. 일반적으로 반복 횟수를 증가시키는 코드를 작성한다.

 

 

2. for...of

const array = [1,2,3,4,5]
let sum = 0;
for(let i of array)
{
    sum+=i;
}

  for...of는 배열, 문자열, 맵(Map), 셋(Set), 제너레이터(Generator) 객체 등 순회 가능한(iterable) 객체를 반복할 수 있다. for... of 안에는 variable of iterable이 들어간다.

variable은 각 반복에서 값이 할당될 변수이다.

iterable은 반복 대상이 되는 순회 가능한(iterable) 객체이다. 배열, 문자열, 맵(Map), 셋(Set), 제너레이터(Generator) 객체 등이 가능하다.

 

 

3. for...in

const person = 
{
    name: 'name',
    age: 25,
    email: 'aaa@aaa.com'
};

for (let i in person) 
{
    console.log(`${i}: ${person[i]}`);
}

 for...in문은 객체의 속성을 반복할 때 사용한다. 객체의 속성을 순회하면서 객체의 속성 이름을 반복변수에 할당한다. for...of 안에는 variable in object가 들어간다.

variable은 각 반복에서 객체의 속성 이름이 할당될 변수이다.

object는 속성을 순회할 객체이다.

 

 

4. while

let n = 3;
while(n>0)
{
    console.log("hello");
    n--;
}

 다른 프로그래밍 언어의 while문과 같다. while() 안에는 조건이 들어가며, 해당 조건이 true 이면 코드를 실행한다. 

 

 

 

 

기본 함수 선언

 

JavaScript는 function과 arrowfunction을 통해 함수를 선언할 수 있다.

 

 

1.function

function sum(a, b)
{
    return a+b;
}

console.log(sum(1,2));

 다른 프로그래밍 언어의 함수와 같다. function 함수명(매개변수명)으로 선언하고, 함수명(매개변수)로 부를 수 있다.

 

 

2. arrowfunction

const sum = (a, b) =>
{
    let c = a + b;
    return c;
}
console.log(sum(1,2));


const sub = (a, b) => a - b;
console.log(sub(2,1));

 arrowfunction은 새로운 함수 정의 방식으로, (매개변수) =>{} 혹은 (매개변수) => 리턴값; 과 같은 형식으로 사용할 수 있고, 변수를 선언하는 것처럼 선언한다.

 

 

 

 

주석

 

 

JavaScript는 //와 /**/로 주석을 달 수 있다.

//한줄 주석

/*
여
러
줄

주
석
*/

//는 한 줄 주석이고, /**/는 /* 부터 */까지 주석처리된다.

 

 

 

 

 

== 비교와 === 비교의 차이점

 

 

JavaScript는 == 비교와 === 비교를 제공한다. 비교하는 값의 자료형과 값을 비교하는 방식에서 차이가 있다.

 

 

console.log(1 == "1");//true
console.log(false == 0);//true
console.log(undefined == null);//true

==는 값을 비교할 때 형변환이 자동으로 일어나서 비교된다.

 

 

 

console.log(1 === "1");//false
console.log(false === 0);//false
console.log(undefined === null);//false

===는 값을 비교할 때 형변환을 하지 않고 자료형까지 비교한다.

 

 

 

 

 

 

 

 Java만 하다가 JavaScript를 공부하려니 문법 적응이 많이 힘들었다. 아직도 적응되지 않았지만, 열심히 공부해서 적응해 봐야겠다.