[2024 여름방학 React.js 스터디] 김태일 #1주차 - 자바스크립트 입문

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()	배열의 첫번째 인덱스의 값을 삭제

 

07. 최신 문법

07-1 템플릿 리터럴 (Template Literal)

- 자바스크립트에서 문자열을 입력하는 방식

- 백틱(`)이라는 기호를 사용하여 정의

let a = 'hi';

let message = a + ' 윙크';

//백틱을 이용하여 표현
let message = `${a} 윙크`;

 

07-2 구조 분해 문법 (Destructuring)

- 구조화된 배열 또는 객체를 비구조화하여 개별적인 변수에 할당

- 배열 또는 객체 리터럴에서 필요한 값만을 추출하여 변수에 할당하거나 반환할 때 유용

//배열
let arr = ['apple', 10];

let myFruit = arr[0];
let myNumber = arr[1];

//디스트럭처링을 사용하여 코드 간단화
let [myFruit, myNumber] = arr;

//객체
let josh = {
	skill : 'js',
	age : 21
}
//mySkill에 'js' , myAge에 21 선언
let mySkill = josh.skill;
let myAge = josh.age;

//디스트럭처링을 사용하여 코드 간단화
let {skill : mySkill, age : myAge} = josh;

 

07-3 스프레드 오퍼레이터 (Spread Operator)

 - 값을 복사하거나 이동할 때 주로 사용

//배열
let arr = ['a', 'b'];
let newArr = [arr[0], arr[1]];

//연산자(...)을 사용하여 스프레드 오퍼레이터 활용
let newArr = [...arr];

//객체
let obj= {
	a: 10,
	b: 20
}

let user = {
	a: obj.a,
	b: obj.b
	c: 30
}

//스프레드 오퍼레이터를 활용하여 간단화
let user = {
	...obj,
	c: 30
}