[JS] 자바스크립트 입문

디지몬진화 2024. 7. 10. 01:37

00. 자바스크립트란

- 웹 페이지를 동작시키기 위해 필요한 프로그래밍 언어(html, css, JavaScript)

- 클릭 등과 같이 사용자의 인터랙션에 의해 반응하게 만들어주는 것 (-화면을 동작시키기 위한 언어)

- 모든 웹페이지에서 자바스크립트가 지배적으로 사용되고 있음

- 웹개발 뿐만 아니라 서버, 게임, 머신러닝 등등 다양하게 사용됨

※모든 브라우저에는 자바스크립트를 실행할 수 있는 환경이 마련되어 있으므로 별도의 툴을 설치하지 않고도 콘솔 메뉴에서 자바스크립트 코드 실행 가능

01. 변수

- 숫자, 문자열 등 어떤 값을 저장하기 위해 사용

01-1 변수의 종류

1. var

- 초창기 자바스크립트 문법

var message = 'hi';

2. const

- 값을 정의한 이후에 변경 불가 (상수)

const a = 10;

3. let

- 변수의 값 변경 가능 (변수)

let b = 20;

01-2 변수에 담을 수 있는 데이터 종류

- 숫자, 문자열, 진입값, 배열, 객체 등 다양한 데이터 유형이 변수로 선언 가능

let a = 10;     //숫자
let b = 'hi';   //문자열
let c = true;   //진입값
let d = [];     //배열
let e = {};     //객체

01-3 변수관련 유의사항 및 컨벤션

1. 유의사항

let 1a = 'hi';   // 첫글자 숫자 불가능
let a-b - 'hi';  // 하이픈(-) 사용 불가능
let var = 'hi'   // 예약어 사용 불가능

2. 컨벤션

- 카멜 케이스(Camel Case): 여러 단어로 이름을 지을 때 두번째 단어부터 첫 글자를 대문자로 작성하는 규칙

let appleBanana = 'hi';

- 변수가 어떤 의미인지 정확히 적어주는 것이 좋음

const loginId = '1';
const paymentDate = '2024.07.08';

02. 함수

- 특정 기능을 수행하는 코드의 단위

- 재사용 혹은 수월한 디버깅을 위해 사용

function logText() {
	console.log('hi');
}
// 'hi'를 출력하는 logText함수 생성

logText(); // 함수 실행

02-1 함수 파라미터와 반환값

1. 파라미터

- 함수를 정의할 때 함수 안에 넘길 값

function logText(message) {
	console.log(message);
}

logText('hi'); //message자리에 'hi'가 들어가 'hi'가 출력됨

2. 반환값(리턴)

- 함수가 값을 반환하도록 하는 값

function logText(message) {
	return message;   //return을 사용하여 값을 반환
}

let a = logText('hi');

console.log(a);

02-2 함수 선언 방식

1. 함수 선언문

function logText() {
	console.log('hi');
}

2. 함수 표현식

let logText = function() {
	console.log('hi');
}

02-3 자바스크립트의 특이한 성질

- 일급 함수 : 함수가 변수처럼 어디든 할당되는 성질

function logText(message) {
	message();
}

//함수를 인자로 사용
logText(function() {
	console.log('hi');
});

02-4 화살표 함수

- ES6의 새로운 함수 정의 방식

let logText = () => {
	console.log('hi');
}

//리턴문만 있을때
let logMessage = () => 'a';

//전달인자(parameter)가 하나인 경우
let logNumeber = num => {   //전달인자에 괄호가 없어도 됨
	return num;
}

03. 조건문과 반복문

03-1 조건문

- 주어진 조건을 만족할 때만 코드를 실행하게 하는 문법

if (age > 20) {
	console.log('만원');
    //만약 age가 20보다 크다면 '만원'을 출력하라
} else {
	  console.log('오천원');
      // 그 외에는 '오천원'을 출력하라
}

03-2 반복문

- 특정 로직을 반복할 때 사용하는 문법

let total = 0;
for (let i = 0; i < 6; i++) {
	total = total + i;  //i가 0부터 5까지 1씩 증가하면서 total에 더해짐
}

04. 객체

- 키(key) : 값(value) 형태로 이루어져 있음

- 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입

let obj = {
	a : 10  //키 = a, 값 = 10
}

obj.b = 20  // obj에 b:20 추가

04-1 객체 축약 문법

let obj = {
	a : a
};

// 키와 값이 같을 때 축약 가능 
let obj = {
	a
};

let josh = {
	coding : function() {
    	console.log('코딩');
    }
}

//function 예약어 생략 가능
let capt = {
	coding() {
    	console.log('코딩');
    }
}

05. 배열

- 웹을 구현할 때 가장 많이 쓰이는 변수 타입 중 하나

- 순서가 있는 목록을 나타낼 때 쓰는 데이터 유형

let arr = [];  //빈 배열을 생성
arr[0] = 10; // 첫번째 요소에 10을 추가
arr[1] = 20; // 두번째 요소에 20을 추가

05-1 내장 API

- 자바스크립트에서 미리 만들어 놓은 기능 (개발자들이 사용할 수 있게 미리 만들어진 기능)

1. length

- 배열의 길이 확인

arr.length   //.length를 활용하여 arr배열의 길이 확인

2. push(), pop()

- 배열에 요소 추가/삭제

arr.push(10);  // .push를 활용하여 요소 추가
arr.pop();  // 맨 마지막 요소 삭제

3. map()

- 배열의 길이를 유지하며 데이터를 변형

var arr = [10,20,30]

// 데이터에 10을 곱하여 100,200,300 으로 변형
arr.map(function(item) {
	return item * 10;
})

4. filter()

- 배열에서 원하는 요소만 꺼냄

arr = [10,20.30];

//데이터가 10일때만(true일때만) 반환
arr.filter(function(item) {
	if (item == 10) {
    	return true;
    }
})

5. forEach()

- 반복 실행이 필요할 때 사용

let arr = ['a', 'b', 'c'];

//'a', 'b', 'c' 를 각각 출력
arr.forEach(function(value) {
	console.log(value);
    //배열의 길이만큼 반복 실행
})

6. 이외에 자주 사용하는 배열 API

slice()	배열의 특정 인덱스에 있는 값을 반환
splice()	배열의 특정 인덱스에 있는 값을 변경 또는 삭제
shift()	배열의 첫번째 인덱스의 값을 삭제