웹 개발 종합반 2주차 - 자바스크립트 개요와 기초 문법

Javascript 에 대해 

 

 

✅ 자바스크립트 : 프로그래밍 언어 중 하나로 브라우저가 알아들을 수 있는 언어

 

⁉️ 왜 브라우저를 움직이게 하려면 Javascript 를 사용해야 하는지? 

A.  브라우저가 Javascript를 사용하는 이유는 역사적으로 Javascript가 웹 브라우저에서 실행되는 스크립트 언어 표준으로 사용되어 왔기 때문. 웹페이지의 동적 기능을 구현하기 위해 Javascript가 개발되었으며 지금까지 브라우저에게 명령을 내리는 표준 언어로 사용되어 왔다.

⁉️ 자바와 자바스크립트는 왠지 이름에서 상관이 있을 것 같은데 차이가 있는지?
A.  전혀 관련이 없음. 이름이 비슷해도 완전히 다른 언어이다. Javascript는 Java Script가 아니다..

⁉️ 자바스크립트를 배우면 어떤 점이 좋은지 ?
A.  자바스크립트 하나로 프론트엔드, 백엔드 개발, 앱 개발 등이 다 가능함. 

 

 

 

Javascript 기초문법 1 : 변수 

 

✅ 변수 : 값을 담는 상자. ' = ' 로 오른쪽의 값을 왼쪽에 넣으라는 의미로 해석 ( a = 3 ) 

 

 

변수의 종류 : var, let, const

 

✓  let : 중복 선언 불가능, 값을 다시 재할당 가능

let a = 10;
console.log(a);

a = 11; //변수 재할당
console.log(a); //11

let a = '15'; //변수 재선언시
console.log(a); //Error발생 - Uncaught SyntaxError: Identifier 'a' has already been declared

   

✓  var : 권장하지 않는 변수 선언 방식. 중복 선언 가능, 값 재할당 가능 => 언젠가 에러가 발생하기 쉬움

var a = 10;
console.log(a);

a = 11; //변수 재할당
console.log(a); //11

var a = '15'; //변수 재선언시
console.log(a); // 아무 문제 없음

 

✓  const : 중복 선언 불가능, 재 할당 불가능. 즉시 값을 할당하는 초기화가 되어야함. 상수를 할당할 때 사용

const a = 1;
console.log(a); //1

a = 3; //변수 재할당시
console.log(a); //Error-Uncaught TypeError: Assignment to constant variable.

const a = 3; //변수 재선언시
console.log(a); //Error-Uncaught SyntaxError: Identifier 'a' has already been declared

 

변수 명명 규칙 

1. 변수는 문자와 숫자, $와 _만 사용
2. 첫글자는 숫자가 될 수 없다 (abc와 ABC는 다름)
3. 영어 소문자와 대문자는 구별됨
4. 예약어는 사용할 수 없다 (예약어 ex. let, const …)
5. 가급적 상수는 대문자를 사용
6. 이름에 공백은 허용되지 않음(카멜케이스, 스네이크 케이스 표기법 사용)
   • 카멜 케이스와 스네이크 케이스
     1. Camel Case 표기 : 공백 대신 다음 문자를 대문자로 표기하여 연결
     2. ex) who am i ⇒ whoAmI
     3. Snake Case 표기 : 공백 대신 언더바(_)를 사용하여 연결
     4. ex) who am i ⇒ who_am_i
7. 변수명은 읽기 쉽고 이해할 수 있게 선언

✓  변수 선언 시 기본적으로 const ( 상수 ) 를 사용하고 니중에 값 변경이 필요한 경우만 let으로 수정할 것을 권장 

 

 

 

Javascript 기초문법 2 : 리스트와 딕셔너리 

 

 

리스트

 

리스트 : 순서를 지켜서 가지고 있는 형태

 

✓ 주의 : 컴퓨터는 0부터 세기 때문에 배열의 첫번째 값은 [0]으로 불러옴

let a_list = []  // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!

// 또는,

let a = ['사과','수박','딸기','감'] // 로 선언 가능

console.log(a[1]) // 수박
console.log(a[0]) // 사과

//리스트 길이 구하기
console.log(a.length) //4

 

딕셔너리 

 

딕셔너리 : 키 - 밸류 값의 묶음

let a_dict = {}  // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!

// 또는,

let a = {'name':'영수','age':27} // 로 선언 가능

console.log(a)
console.log(a['name']) // 영수
console.log(b_dict['age']) // 27

 

리스트와 딕셔너리의 조합

let a = [
	{'name':'영수','age':27},
	{'name':'철수','age':15},
	{'name':'영희','age':20}
]
console.log(a[0]['name']) //영수
console.log(a[1]['age']) //15

 

⁉️ 리스트와 딕셔너리가 필요한 이유
딕셔너리를 활용한다면 정보를 통합할 수 있음. 그리고 순서를 나타내기 위해 리스트를 사용하면 깔끔해짐
보기에도 깔끔해지고 다루기도 쉬워지고 데이터가 한 개 추가되더라도 push 함수를 이용해 쉽게 추가 가능

 

 

 

Javascript 기초문법 3 : 반복문과 조건문

반복문

let fruits = ['사과','배','감', ... ,'귤']
console.log('사과')
console.log('배')
console.log('감')
...
console.log('귤')

// 이렇게 100개 씩 쓴다면..? 정말 노답일것 같음

 

✓  foreach 라는 친구로 반복해서 요소를 출력할 수 있다 

fruits.forEach((a) => {
	console.log(a)
})

// 반복문을 사용하면 리스트 안에 들어있는 값의 개수만큼 요소를 출력 가능

 

 

조건문

if (조건) {
	// 조건에 맞다면~
} else {
	// ~가 아니라면~
}

 

• 만약 20살보다 크면 성인입니다 작으면 청소년입니다 를 출력하려면?

let age = 24

if (age > 20) {
	console.log('성인입니다')
} else {
	console.log('청소년입니다')
}

 

• 반복문+조건문 합치기 !

let ages = [12,15,20,25,17,37,24]

ages.forEach((a)=> {
	if (a > 20) {
		console.log('성인입니다')
	} else {
		console.log('청소년입니다')
	}
})