TIL JAVASCRIPT#1

진짜 오늘은 너무 힘들었다...나같은 비전공자에게는 JAVASCRIPT 첫발이 정말 힘들거 같다. (나만 그러면 너무 다행이다 😥) 수업듣는동안 잠깐이라도 방심하면 "아니 이게 왜...? 왜 이렇게 된다고?? 무슨 로직?? 머선 매직이고??"하는 나를 발견할 수 있다.

그래서 오늘 배운것은 어쨌든 JAVASCRIPT와 AJAX(JASON불러오기)!!를 했으니 기록으로 또 남겨보아야지.

JaveScript란 무엇인가??

.JavaScript: 정적인 언어인 html 위에서 동작하여 웹페이지를 사용자와 상호작용할 수 있도록 도와주는 언어이다. 그럼 JAVASCRIPT에서 가장 중요하고 기본인 것은 무엇인가? 바로 변수라고 할 수 있겠다. 진짜 중요하다.(가장 기본인 변수 선언까지) 아래는 구글링하면 쉽게 찾을 수 있는 변수의 표준 규칙같은것들.

표준작성법
① 한 파일에서 같은 변수 이름을 중복해서 사용할 수 없다.
② 변수이름, 함수이름, 연산자 모두 대소문자를 구분한다. (myName!==MyName)
③ 첫 번째 문자는 반드시 글자나 밑줄(), 달러기호($)중 하나이다. 두 번째 문자 부터는 글자, 밑줄, 달러, 숫자 중에서 자유롭게 쓸 수 있다.
④ 변수이름, 함수이름 등 *camelCase 방식으로 쓸 것._

*camelCase: 첫번째 단어는 소문자로 쓰고 그 뒤에 붙는 단어들은 첫번째 alphabet을 대문자로 시작하는 방식

변수 이름 설명

var: variable의 약자로 JavaScript 안에서 새로운 변수를 생성하거나 선언할 때 사용한다.
동일한 이름으로 변수 선언을 여러번해도 각기 다른 값을 출력할 수 있다.
let: 새로운 변수를 생성하거나 선언할 때 사용한다. var와 다른점은 이미 할당된 변수에
새로운 변수 선언없이 자동으로 다른 값을 재할당할 수 있다는 점이며
선언되지 않은 변수는 미리 사용할 수 없다. 대신 변수를 재선언하는 것은 불가능하다.(오늘 수업에서는 가장 많이 사용했다.)
const: constant의 약자로 var/let과 같이 변수를 생성하거나 선언할 때 사용한다.
하지만 상수의 특성을 갖는 변수이기 때문에 한 번 선언된 변수는
새로 선언되거나 할당할 수 없다.(새로 선언시 TypeError 발생)
✨ tip. 변수의 값을 재할당할 필요가 없는 경우에 const를 사용하고 그렇지 않은 경우에는 let을 사용하는게 좋다.

조건문

if, else, else if 등의 형태로 사용하여 특정 조건 만족시, 내가 지정한 작업을 수행하고 싶을 때 사용하는데 else문은 if문이 false일 때 실행된다. (if - else if - else 순서로 작업을 지정해야 한다.)

// 조건을 여러 개 수행하고 싶을 때
function is_adult(age){
	if(age > 20){
		alert('성인이에요')
	} else if (age > 10) {
		alert('청소년이에요')
	} else {
		alert('10살 이하!')
	}
}
is_adult(12)

논리연산자

조건문 작성시 2개 이상의 자세한 조건을 추가할 때 사용하는 연산자이다. and 혹은 or 연산자는 앞에서 true라고 인식되는 조건이 있으면 그 뒤 condition까지는 실행되지 않으므로 코드를 작성할 때는 heavy한 condition은 뒤쪽으로 배치하는 것이 효율적인 코드 작성 방식이다.

// AND 조건 
function is_adult(age, sex){
	if(age > 20 && sex == '여'){
		alert('성인 여성')
	} else if (age > 20 && sex == '남') {
		alert('성인 남성')
	} else {
		alert('청소년이에요')
	}
}
// OR 조건 
function is_adult(age, sex){
	if (age > 65 || age < 10) {
		alert('탑승하실 수 없습니다')
	} else if(age > 20 && sex == '여'){
		alert('성인 여성')
	} else if (age > 20 && sex == '남') {
		alert('성인 남성')
	} else {
		alert('청소년이에요')
	}
}
is_adult(25,'남')

반복문(정말 너무 중요!!)

정말 너무 중요해서 두말하면 입이 아픈 반복문. 이해하기도 가장 힘들었지만, 이해하고나면 정말 유용하게 쓰이는 기능이다. 오늘 수업이나 과제에서도 많이 쓴 기능.

for문을 상기의 코드값을 예시로 들었을때 1번 블록) 변수 초기화 및 선언 2번 블록) loop 정지 조건 체크 3번 블록) 각 loop의 iterator(반복자) 변수를 업데이트 하는 내용으로 구성되어 있다. 각각의 내용은 ;으로 구분되며 false가 나올때까지 코드를 반복하고 출력하고 싶을 때 사용한다.

let scores = [
	{'name':'철수', 'score':90},
	{'name':'영희', 'score':85},
	{'name':'민수', 'score':70},
  {'name':'형준', 'score':50},
  {'name':'기남', 'score':68},
  {'name':'동희', 'score':30},
]
for (let i = 0 ; i < scores.length ; i++) {
	if (scores[i]['score'] < 70) {
    	   console.log(scores[i]['name']);
}

위와 같은 코드 작성시에 2번 블록)에 변수의 길이(length)를 선언하면, 변수의 길이의 끝까지(==리스트 값들이 끝날때까지) 과정을 반복한다. 정말 중요한 반복문이니 복습을 꾸준히 해야겠다. JAVASCRIPT를 배우기전까지는 프로그래밍을 배워야겠다고 구글링해보면 쉽게 보이는게 아래 명령문이었는데, 처음에는 이해를 하나도 하지 못했었는데 이제야 got it...😥😥
튜터님도 이 반복문은 정말 중요한거니까 어디 메모장에라도 복사해서 두고두고 사용하라고 하시더라 ㅎㅎ

function calculateSum(n) {
    let sum = 0
    for (let i = 0; i < n; i++) {
        sum += i;         // sum을 i만큼 증가시켜라. sum = sum + i 와 동일!
    }
    return sum
}
let result = calculateSum(10); // return 결과인 sum이 result에 저장
console.log(result)       // 45를 출력

jquery ajax 실습까지 정리하고픈데...머리가 아파오니 내일의 TIL로 써야겠다!
그럼 오늘도 모두에게 친절한 백엔드엔지니어가 되기위해 힘낸 나 고생했다(토닥토닥)😎😎