[JAVASCRIPT 공부일지] 1주차 - 2 (자바스크립트 기초 문법)

이번 일지에서는 자바스크립트의 기초 문법에 대해 공부한 내용을 기록하였습니다.
기존 공부하던 자바 언어와 비슷한 점이 많은 문법이었습니다.

---

 

<변수 선언>

let num = 250

let = 변수를 선언하는 문법
num = 변수의 이름
250 = 변수에 넣을 값

<출력>

console.log(num)

>> 250 출력
여기서 num = 1000 으로 재할당해주면 재할당된 값이 출력됩니다.

<연산>

let a = 1
let b = 2
let c = a + b
console.log(c)

>> 3

console.log(a * b) 처럼 곱셈도 가능합니다.

<문자열 선언>

let first = 'gnob'
let last = 'ong'

console.log(first + last)
// 문자열 더하기 가능
// gnobong

console.log(first + " " + last)
// 공백도 넣을 수 있다.
// gnob ong

<카멜케이스>

let firstName 

f는 소문자 N은 대문자로 '낙타의 등이 굽은 것'과 같은 형태여서 '카멜케이스'라고 부릅니다.

<스네이크 케이스>

let first_name

언더바(_) 로 연결된 형태를 말합니다.

>> 일관된 케이스로 변수선언 하는 습관을 들이는 것이 중요합니다.

<const>

let a = 500
const b = 1000

b = 2000
// 오류
// const는 재할당이 불가능한 변수선언이다.

 

<리스트(배열)>

let a_list = [1,2,3,4,'gnob',6,7,'bong']

let으로 선언하며, [ ] 대괄호로 값을 넣으며 중간에 'gnob', 'bong'과 같은 문자열을 넣을 수도 있습니다.
인덱스가 0부터 시작하는 것은 다른 언어와 동일합니다.

예를들어

console.log(a_list[4])

 는 인덱스 4번째값인 gnob이 출력됩니다.

<리스트(배열) - 값 추가>

a_list.push('kong')

리스트의 뒤에다가 push() 함수를 이용해 kong 이라는 문자열을 넣어줍니다.

<리스트(배열) - 리스트 길이 출력>

a_list.length

<딕셔너리(객체)> 

= 사전이나 전화번호부 방식

let a_dict = {"name" : "bong", "age":27}

첫번째 name은 key라고 부르며, 두번째 bong은 value라고 부릅니다.
이처럼 : (콜론)으로 연결되어있는 것은 딕셔너리라고 합니다.
name이라는 키 값에 bong이라는 값이 들어있는 딕셔너리의 형태라고 보시면 됩니다.

콤마로 복수 값을 입력해줄 수도 있습니다.

console.log(a_dict["name"])

대괄호로 키를 사용해 값을 꺼내야합니다.
name이라는 키로 bong라는 값을 출력시키는 것입니다.
>> bong

<딕셔너리(객체) - 값 추가>

a_dict["height"] = 500

새로운 키를 추가해준 후 값을 넣어주면 원래의 딕셔너리에 키값이 추가되는 것을 확인할 수 있습니다.

<리스트와 딕셔너리의 동시사용>

let names = [{"name" : "bong", "age" : 27}, {"name" : "bong2", "age" : 28]

리스트 안에 딕셔너리 두개가 들어가있는 형태로 리스트와 딕셔너리를 같이 활용하면
사람들마다 가진 정보가 많은데 여러사람의 정보를 입력하고자할때 활용할 수 있다. (= 전화번호부의 형태)

name.push({"name":"bong3", "age":29}) 로 리스트에 딕셔너리를 추가할 수 있습니다.

names[1]["age"]
>> 28
// 리스트의 딕셔너리를 접근하는 방법
// 리스트에서의 1번째는 bong2이며 age라는 키 값의 값을 꺼내오므로 28이 출력됩니다.  

*** 바로 이렇게 리스트와 딕셔너리가 복합적으로 존재하는 데이터구조가 JSON데이터 구조입니다.
예로 서울시 Open API JSON데이터 구조로 서울시 미세먼지 값 등이 있습니다.

<나눗셈의 나머지 알기>

let a = 30
let b = 11

console.log(a % b)
// 8

<나눗셈의 몫 알기>

console.log( a / b )
// 2.727272727272727

<문자열을 대문자로 변환>

let myname = "gnob"
console.log(myname.toUpperCase())
// GNOB

<이메일 (@)을 기준으로 문자열을 나누는 것>

let email = gnob@gmail.com
console.log(email.split('@'))

// ["gnob", "gmail.com"] 처럼 구분된 리스트로 출력이 됨

console.log(email.split('@')[1])
>> 이 이메일의 도메인값만 알고싶을때 리스트의 1번째값에 주소가 담기므로 활용이 가능합니다.

console.log(email.split('@')[1].split('.'))
>> ["gmail", "com"]
>> . 으로 구분하여 출력이 가능합니다.

console.log(email.split('@')[1].split('.')[1])
>> com
>> split된 요소에도 접근이 가능합니다.

이처럼 split함수로 다양하게 활용할 수 있습니다.

<문자열 주소 나누기>

let txt = "서울시-서초구-잠원동"
let names = txt.split("-")
console.log(names)
// ["서울시", "서초구", "잠원동"]

<문자열 주소 합치기 - join함수>

concat 함수도 있지만 join함수를 이용해보면

console.log(names.join('>'))
>> 서울시>서초구>잠원동

<문자열 주소 합치기 - concat함수>

- concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다.
기존배열을 변경하지 않고 추가된 새로운 배열을 반환하는 것입니다.

let array1 = ['a', 'b', 'c']
let array2 = ['d', 'e', 'f'] 

let array3 = array1.concat(array2)

console.log(array3)
// ["a", "b", "c", "d", "e", "f"]

<함수선언>

function funName(){
    console.log("함수")
}

funcName() 으로 함수의 로직을 실행시킬 수 있습니다.

<함수 연산> 

function funcNum(num1, num2){
     console.log(num1 + num2)
}

funcNum(10, 20)
// 30

 

<함수 반환 사용 (return)>

function minus(num1, num2){
	return num1 - num2
}

let result = minus(50, 30)
console.log(result)
// 20

<리터럴 함수 방식 정의>

let a = function(){
	console.log("리터럴 함수 방식")
}

// a() 로 접근하는 것이 리터럴 함수 방식

<조건문>

function is_adult(age){
	if(age > 20){
		console.log("성인")
	}else if(age > 10){
		console.log("청소년")
	}else{
		console.log("어린이")
	}
}

is_adult(27) 
// 성인

자바스크립트에서도 && (and)연산자 (앞 뒤 조건이 모두 참), || (or) 연산자(앞 이나 뒤 중에 참 하나), == 동일 연산자도 모두 자바와 동일하게 쓰입니다.

* 팝업창 출력 
console.log()로 개발자 콘솔창에 출력을 시킬 수도 있지만 alert('안녕하세요') 를 주게 되면 
인터넷 창에 '안녕하세요'라는 팝업창이 출력되게된다.

<반복문>

for(let i = 0; i < 10; i ++){
	console.log(i)
}
// 1부터 9까지 줄바꿈되어 차례대로 출력됨

 

<반복문 - 리스트(문자열)>

let people = ['철수', '영희', '민수' '형준', '기남', '동희']

for (let i = 0 ; i < people.length ; i++){
	console.log(people[i])
}
// 차례대로 문자열이 출력됨

<반복문 - 리스트 + 딕셔너리>

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++) {
	console.log(scores[i]);
}

// 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력가능

<리스트의 인덱스 접근으로 반복문 활용>

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]);    
    } // 70점 미만인 학생만 출력
}

---

자바스크립트의 기초문법을 공부해보며 자바와 상당히 비슷하다고 느꼈습니다.
다음 공부일지에서는 자바스크립트를 활용한 간단한 예제를 다뤄보도록 하겠습니다.

'스파르타 코딩 클럽' 온라인 교육 플랫폼에서 배운 내용을 토대로 작성하였습니다.