JS(JavaScript) 문법

JS(JavaScript)

JS(JavaScript)는 주로 웹 개발에서 사용되는 프로그래밍 언어

 

HTML, CSS와 함께 WWW(World Wide Web)의 핵심 기술로, JavaScript를 사용하며 동적 및 대화형 웹 페이지를 생성할 수 있으므로 개발자는 사용자 경험을 향상하는 클라이언트 측의 기능을 구축할 수 있다.

---

JS 변수

JavaScript에서 변수는 데이터 값을 저장하는 컨테이너로, var, let, const 등의 키워드를 사용하여 선언할 수 있다.

 

JS 변수 같은 경우에는 다른 프로그래밍 언어와 다르게 데이터 타입을 가지지 않아서 숫자와 문자열, 불리언, 배열 등 대입 연산자를 통해 변수에 값을 넣을 수 있다.

var x = 10;
var y = "10";
let y = "hello";
const PI = 3.14;

 

데이터 타입은 지정하지 않아도 위처럼 변수를 선언하고 그 변수의 값을 따옴표(" ")로 묶으면, 해당 값을 브라우저가 문자열로 인식하게 된다.

 

그렇다면 왜 변수 선언 키워드에 var, let, const 3종류가 존재 하느냐를 궁금해 할 수 있다.

각각의 변수 선언 키워드의 차이를 변수의 범위와 함께 설명하자면,

 

var

var hello = "hello"; //전역 범위

function func() {
	var world = "world"; //함수 범위
}

console.log(hello); //console에 hello 출력
console.log(world); //오류 발생

 

var 같은 경우 다른 프로그래밍의 변수들과 동일한 범위를 가진다고 생각하면 된다. hello 같은 경우 함수 밖에 존재하므로 함수 밖과 내부 모두에서 자유롭게 사용할 수 있는 전역 범위를 가지지만, world 같은 경우에는 선언된 블록을 내에서만 사용할 수 있는 함수 범위를 가진다.

 

var 변수는 재선언이 가능 업데이트가 가능하고 호이스팅된다.

호스팅이란 변수와 함수 선언이 맨 위로 이동되는 JS 메커니즘이다. 이해를 돕기 위한 코드를 보자면,

console.log(hello);
var hello = "hello";

 

이러한 코드를 작성한다고 할 때, JavaScript는 다음과 같이 해석한다.

var hello;
console.log(hello);
hello = "hello";

 

변수 선언하는 var는 맨 위로 올려지고 값은 undefined로 초기화되어, console.log(hello);에서는 undefined라는 결과가 출력된다.

 

이러한 var의 문제점은 선언을 중복해서 할 수 있다는 문제점이 발견되었다. 그리하여 이러한 문제를 개선한 블록 단위 let과 const가 새롭게 등장하였다.

 

let

var year = 2022;
var year = 2023;

console.log(year); //2023 출력

let age = 10;
let age = 20; //오류

 

let과 var를 비교해 보면 var 같은 경우에는 중복 선언이 가능했지만, let의 경우에는 중복 선언을 할 경우 오류가 생기게 된다. let으로 선언된 변수 값을 바꾸기 위해서는 우리가 잘 아는 재할당을 사용해야 하는 것이다.

let age = 10;
age = 20;

console.log(age); // 20 출력

 

let은 블록 단위의 범위이기에 선언된 블록 위치를 기준으로 변수가 선언된 해당 범위 내에서만 업데이트만 될 수 있다. let은 중복 선언이 불가하다고 했는데, 동일한 변수가 다른 범위 내에서 정의된다면 에러는 발생하지 않는다.

 

let age = 10;

function func() {
	let age = 20; //오류 발생 안함
	console.log(age); //20 출력
}

func(); 

console.log(age); // 10 출력

 

위 코드처럼 age가 선언된 블록 범위가 다르다면 코드 내에서 중복 이름으로 선언되어도 오류가 발생하지 않는다. 오류가 발생하지 않는 이유는 서로 다른 범위를 가지므로 서로 다른 변수로 취급하기 때문이다. 

 

const

const는 상수의 역할로 선언과 동시에 할당이 되어야 하며, 중복 선언 및 재할당 모두 불가능하다는 것이 특징이다.

const default = 10;
default = 20; //오류 발생

---

조건문

JavaScript의 조건문을 사용하면 다양한 조건 따른 프로그램의 흐름을 제어 가능

이러한 조건문의 기본은 if-else if-else이고, 추가로 switch문과 삼항 연산자도 존재한다.

조건문은 조건을 주고 해당 조건이 true이면 해당 조건 블록 내의 코드를 실행하고, false이면 실행하지 않는 것이 특징이다.

 

if문: 조건에 만족하면 블록 내 코드 실행

let a = 10;

if(a == 10) {
	console.log("a is 10");
}

 

if-else문: if 조건에 만족하지 않으면 else문 실행

let a = 10;

if(a != 10) {
	console.log("a is not 10");
} else {
	console.log("a is 10");
}

 

else if문: if문에 만족하지 않으면 else-if문 조건 판별, 모두 만족되지 않으면 else문 실행

let a = 0;

if(a > 0) {
	console.log("a is positive.");
} else if (a < 0) {
	console.log("a is negative.");
} else {
	console.log("a is zero");
}

 

if, if else, else if문 모두 중첩 조건문으로 사용할 수 있고, 중첩 조건문으로 사용 시 더 복잡한 논리로 구현할 수 있다.

 

switch문

switch문은 if문과 동일하게 조건에 따라 동작을 수행시킬 수 있는데, 어떠한 값을 가진 변수를 가지고 case 조건에 일치하면 동작을 수행하는 방식이다. switch문 같은 경우에는 case 뒤에 상수만 올 수 있어, 이 상수를 비교하여 실행하게 된다.

let a = 3;

switch(a) {
    case 1:
    	console.log("a is 1");
        break;
    case 2:
    	console.log("a is 2");
    	break;
    case 3:
    	console.log("a is 3");
        break;
    default:
    	console.log("a is 4");
    	break;
}

 

삼항 연산자

삼항연산자는 if-else문을 한 줄로 간결하게 작성하는 방법이다.

let a = 10;
let result = (a == 10) ? "true" : "false";

console.log(result);

 

---

반복문

반복문은 프로그램 내에서 똑같은 명령을 일정 횟수만큼 반복하여 수행하도록 하는 실행문

 

while: 조건을 만족하면 블록 내의 코드 false가 될 때까지 반복

while(조건) {
	반복할 코드
}

 

for: 초기화를 하고 반복조건에 만족할 때까지 반복될 때마다 실행되는 코드 실행하면서 반복

for(초기화; 반복조건; 반복 될 때마다 실행되는 코드) {
	반복할 코드
}

 

break: 반복작업을 중간에 중단시킬 때 사용

for(var i=0; i<4; i++) {
    if(i == 2) {
    	break; //i가 2가 되면 종료
    }
    document.write(i+'<br />');
}

 

continue: 즉시 중단되지만 반복은 지속되게 하고 싶을 때 사용

for(var i=0; i<4; i++) {
    if(i == 2) {
    	continue; //i가 2가 되면 건너뛰기
    }
    document.write(i+'<br />');
}

---

함수

함수는 특정 작업을 수행하거나 값을 계산하는 재사용 가능한 코드 블록을 의미한다.

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

 

일반적인 함수 선언과 표현은 위와 같은 방법을 쓰는데, 한 줄짜리 함수를 작성하기에 좋은 화살표 함수는 다음과 같다.

const square = (num) => num * num;

 

함수 호출 및 반환: return이 없으면 undefined 반환

function sum(a, b) {
	return a+b; //return이 없으면 undefined 반환
}

sum(1,2); //함수 호출(3 반환 받음)

 

함수에서 중요한 개념으로는 매개변수와 인수가 존재하는데 위에 코드에서 보이듯, 함수 정의 시 소괄호 안에 선언되는 게 매개변수이고, 함수 호출 시 매개변수에 맞추어 값을 넣어 함수에 전달되는 값이 인자를 뜻한다.

---

데이터 타입

쉽게 말해 데이터의 형태

 

데이터 타입은 크게 객체와 그 외로 구분할 수 있다. 그 외라는 건 다음과 같다.

typeof 10;		//number
typeof "hello";		//string
typeof true;		//boolean
typeof undefined;	//undefined
typeof null;		/

 

위와 같은 객체가 아닌 데이터 타입을 원시 데이터 타입이라고 한다.

반대로 객체 타입은 다음과 같다.

//객체
let person = {
    name: "min",
    age: 20,
    isStudent: true,
    nickname: "minmin"
}

//배열
let numbers = [1,2,3,4,5];

//함수
function add(a, b) {
	reuturn a+b;
}

 

위와 같은 객체, 배열, 함수를 객체 타입이라고 한다.