WEB-STUDY

JavaScript-1

비숑주인 2023. 5. 15. 15:19

'JavaScript란'

HTML은 구조, CSS는 디자인, 그리고 자바스크립트(JavaScript)는 동작을 담당한다.

자바스크립트는 웹 개발뿐만 아니라 서버 사이드, 데스크탑 애플리케이션, 모바일 앱, 게임, IoT(사물인터넷) 등 다양한 분야에서 사용될 수 있는 범용 프로그래밍 언어이다

<html>

<head>
<script>자바스크립트는 head안 script태그로 감싼 부분에 기술</script>
</head>

<body></body>

</html>

HTML 외부에 자바스크립트를 기술하고 싶을 때는 다음과 같이 불러온다

<script src="자바스크립트파일명.js" defer></script>
변수 let과 상수 const

 

let은 데이터 값 변경이 가능한 변수이며, const는 데이터 값의 수정이 불가능한 상수이다.

둘 다 데이터 값에 이름을 지정하여 사용하고 싶고 데이터 값을 반복해서 사용하기 위해서 사용한다.

// 변수 초기화는 변수 let만 가능하며 상수 const는 불가능하다
let value; // (O) 가능
const value; // (X) 불가

let name = '히소'; //대입
name = '자바 스크립트'; // 다른 값 대입이 가능

const name = '히소'; //대입
name = '자바 스크립트'; // const는 값 변경 불가능

숫자 타입 변수 간에 계산이 가능하며, 문자열 타입 변수 간 결합이 가능하다.

// 콤마(,)로 구분하면 한꺼번에 변수와 상수 선언 가능
let a = 1, b = 2;
const a = 1, b = 2;

// 숫자 계산, 문자열 결합은 둘다 가능
let number1 = 100;
let number2 = 200;
let sum = number1 + number2;

console.log(sum); // 결과 : 300
// console.log는 브라우저의 개발자 도구 콘솔에 결과를 보여주는 역할을 한다(다른 언어의 print 언어와 비슷)

let name = '히소';
let birth = '03';
let nickname = name + birth;
console.log(nickname); // 결과 : '히소03'

// 변수 let과 마찬가지로 상수 const도 위와 동일하다

상수(const) 로 선언된 배열도 객체 내부의 값은 변경이 가능하다.

const array = ['피카츄', '라이츄', '파이리'];
array[2] = '꼬부기';
// 결과 array = ['피카츄', '라이츄', '꼬부기'];

const object = { nickname: '히소', age: 21 };
object.age = 30;
// 객체 내부의 age값이 30으로 변경된다

값 변경이 필요한 데이터에만 let을 쓰고, 이외에는 const를 쓰자!!

const를 적극 이용함으로써 변경이 필요한 데이터와 그렇지 않은 데이터의 구분이 쉬워져 가독성이 높아지는 메리트를 얻게된다.

 

 연산자

 

비교 연산자 (두 개의 값 비교)
구문 의미
A == B A, B의 값이 같은가
A === B A, B의 값과 데이터 타입이 같은가
A != B A, B의 값이 다른가
A !== B A, B의 값과 데이터 타입이 다른가
A < B A가 B보다 작은가
A <= B A가 B보다 작거나 같은가
A > B A가 B보다 큰가
A >= B A가 B보다 크거나 같은가 
// 두 데이터의 값을 비교한 비교 연산자의 반환값은 참(true) 또는 거짓(false)
console.log('카카오' == '카카오'); // true 반환
console.log('카카오' != '네이버'); // true 반환

// 배열과 객체 타입 비교는 같은 곳을 참조해야 참이 반환된다
const array1 = [1, 2, 3];
const array2 = [1, 2, 3];
console.log(array1 == array2); // false 반환. 참조하는 곳이 다르다.

const array3 = [1, 2, 3];
const array4 = array3;
console.log(array3 == array4); // true 반환. 참조하는 곳이 같다.
==, != 와 ===, !== 의 차이점

 

숫자와 문자열 등의 타입들이 서로 다른 타입일 경우

==, !=는 동일한 타입으로 간주하지만,

===, !==는 다른 타입으로 간주한다.

console.log(1 == '1'); // true 같은 데이터 타입 간주
console.log(1 === '1'); // false 다른 데이터 타입 간주
console.log(1 != '1'); // false 같은 데이터 타입 간주
console.log(1 !== '1'); // true 다른 데이터 타입 간주
대입 연산자 (복합형 대입 연산자 : 좌변과 우변의 연산 결과를 좌변의 변수에 대입하는 것)

 

구문 의미
x = y x = y (대입)
x += y x = x + y (더하기)
x -= y x = x - y (뺄셈)
x *= y x = x * y (곱셈)
x **= y x = x ** y (제곱)
x /= y x = x / y (나눗셈)
x %= y x = x % y (나머지)

기본적으로 C언어의 연산자와 문법이 동일하다

 함수

// 함수 기본구조
function 함수명(파라미터) {
	처리내용
    return 값;
}
// 함수 실행
함수명();

// 예시
function Function(a) {
	const result = a + 2;
    return result;
}
const Result = Function(1);
consoloe.log(Result); // 결과 : 3
// 파라미터 개수는 제한이 없으며 콤마(,)로 구분한다
function taxFunction(price, tax){
	const result = price + price * tax;
    return result; // 결과 반환값은 return으로 처리
}

// 함수를 실행하고 반환값을 myTax에 대입
const myTax = taxFunction(100, 0.1);
console.log(myTax); // 결과: 110

// 파라미터가 없는 함수도 있다 => 함수 실행 시 ()에 아무것도 입력하지 않는다
function Function() {
	console.log('반가워요');
    return 100; // 반환값 없는 경우에 자체 생략 가능
}
Function(); // 결과: 반가워요

// return 구문으로 함수가 종료된다
function Function(){
	return 100;
    
    // return으로 함수 종료되서 아래는 실행 안됨
    console.log('안녕하세요');
}

// 하나의 함수 내에서 return 구문 몇 번이라도 사용 가능
function Function(a, b){
	// a가 100 이상이면 a 반환
    if (a >= 100) {
    	return a;
    }
    // a가 100 미만이라면 b 반환
    return b;
}

기본적으로 다른 C, 파이썬과 문법 구조가 동일하다!

 

화살표 함수(Arrow Function)

 

함수를 간략히 기술하고 싶거나 this로 묶고 싶을 때 화살표 함수를 사용한다. 함수를 선언할 때 function 키워드 대신 화살표(=>)를 사용하여 간결하게 함수를 정의할 수 있다. 

// 화살표 함수 기본 구조
const numberSum = (a, b, c) => {
	const result = a + b + c;
    return result;
};

// 함수의 실행 방식은 일반 함수와 동일
numberSum(1, 2, 3); // 결과: 6

// 화살표 함수는 일반 함수와 달리 파라미터가 하나인 경우는 () 생략 가능
// 파라미터가 없거나 2개 이상인 경우는 () 생략 불가능
const Function1 = (a) => {
	return a + 1;
};
const Function2 = a => {
	return a + 1;
};

// 화살표 함수의 정의가 한 줄인 경우 {}와 return 생략 가능
const Function3 = (a) => a + 2;
함수의 파라미터 초깃값 설정

 

초깃값이 설정된 파라미터는 값을 전달받지 않으면 '디폴트 파라미터(Default Parameter)'를 사용한다.

function taxFunction(price, tax = 0.1){ // 파라미터 = 초깃값 설정
	const result = price + price * tax;
    return result;
}
// tax의 인수 생략하면 초깃값 0.1이 사용된다
const result1 = taxFunction(100);
console.log(result1); // 결과: 110
// tax의 전달 값 지정하면 해당 값 사용된다
const result2 = taxFunction(100, 0.13);
console.log(result2); // 결과: 113

자바의 생성자와 비슷한 개념이지만, 자바의 생성자는 클래스의 인스턴스를 생성할 때 인수를 받는 특수한 종류의 메서드(함수) 이고, 자바스크립트의 디폴트 파라미터는 함수의 인수에 대한 기본값을 설정하는 것이다. 

다수의 파라미터를 가지는 함수

 

임의의 파라미터를 가지는 함수를 정의하고 싶을 때 '...파라미터'를 이용한다.

function numberSum(...prices){ // 임의의 다수 파라미터
	let result = 0;
    for (const value of prices) {
    	result += value;
    }
}
const result1 = numberSum(1, 2);
console.log(result1); // 결과: 3
const result2 = numberSum(1, 2, 3, 4, 5);
console.log(result2); // 결과: 15