Javascript 기초 문법 1 (feat. 변수, 자료형 + 번외 기본함수)

변수란?

값을 담는 것이라고 간단히 생각하면 된다.

 

개발자 도구를 키고 console창을 활용해서 학습해볼꺼다.

 

여기서 let a = 2 라는 코드를 적었다. 즉, a에다가 2라는 변수를 담은 것이다.

그럼 a+4=? 6이겠지?

 

이번에는 5라는 숫자를 담아보자. 그리고 a+4를 다시 계산해보면?

 

 

숫자가 아니라 문자열도 담을 수 있다.

(문자열이기에 따옴표가 필요하다. '...' or "...")

 

그림과 같이 담았다면, first_name + last_name = ? 음 SpellKim이라고 나오겠지?

Good!

 

그럼 First_name + a = ? 아마 Spell5?

Nice!

 

여기서 우리는 알 수 있다.

let text = x 라는 문구를 사용하면 text 에 x 라는 변수를 담는 것!

(단 여기서 문자열을 담을 때에는 따옴표가 안에 text를 감싸줘야 한다. 잊지말자)

 

추가로 변수명을 정해줄 때 남들도 알아볼 수 있게, 남이 봤을 때도 그럴싸하게 작성해줘야 한다. 분명 자기멋대로 작성을 하다 혼쭐이 날 것이다. "이 코드 짠놈 누구냐! 대체 변수명을 왜 이따위로 작성했어!"

예를들면.. 변수가 watermelon, apple이런식인데 변수명이 pants라면 좀.. 말이 안되지않아?.. 

(정말 주니어들에게 자주 있는 일이라고 하니.. 명심하고 또 명심하자)

(코드짤때 줄맞춤도 물론이다!!)

 

---

자료형?

자료형에는 크게 두가지가 있다. 리스트(List)형과 딕셔너리(Dictionary)형

 

리스트형?

순서가 중요한 담기라고 보면 된다.

대괄호 안에 저런 모양으로 들어가야 한다. 그러면 저 순서대로 변수가 담긴 것이다.

확인해보자.

 

담기긴 했는데.. 어? a_list[1]이 불이고, a_list[2]가 물이여야 하고, a_list[3]이 바람이어야 하지 않아?

 

그건! 0부터 시작하기 때문이다!

음 그럼 이 a_list에 추가로 4번째, 5번째 변수도 추가하고 싶다면?

구글링! 구글링! 여러 글 중에 마음에 드는 곳으로 들어갔다.

출처 https://stonefree.tistory.com/50

오.. 끄덕끄덕.. 작성해주신 글 감사합니다.. Push()라는 것을 활용하면 되는구나?

(추가로 나중에 나도 이런식으로 정리도 해놓으면 좋겠다!)

 

해보자!

보는 것 처럼, a_list.push('땅')이라고 문구를 쳤고, 4번째 즉 a_list[3]을 확인했을때 '땅'이라는 값이 출력되는 걸 볼 수 있다.

 

추후에 배열에 끝에, 처음에, 혹은 지정한 특정 위치에 추가를 하는 것도 학습 해야겠지? 이런 걸 동적으로 추가된다고 표현하는데, 자주 쓰이는 표현이라고 한다.

 

딕셔너리형?

일상 생활에서 많이 쓰는거다. 예를들어 보면 "너 태어난 날이 언제니?" 했을때 그 생일이라는 단어에 대응되는 날짜를 말해달라는 뜻이지 않은가? 즉, "생일"이라는 key 값에 대응되는 value(값)을 얘기해 달라는 것이다.

 

예시를 들어보면서 직접 해보는게 좋겠지?

해당 사진과 같이 작성한 뒤 입력을 했다.

리스트형에는 대괄호를 사용하는데, 딕셔너리형에는 중괄호 안에 저런 모양으로 들어가야 한다.

 

풀이해보자면, a_dict자료에 'name'이라는 key값에 'spell'이라는 value를, 'age'라는 key 값에 90이라는 value를 넣은 것이다. (90은 문자열이 아니므로 따옴표가 필요하지 않다.)

 

리스트형에는 순서가 중요했는데 여기서는 순서가 중요할까? 그렇지 않다. 각각 key값에 대응하는 특정 value가 있기에, 순서가 꼬여도 상관이 없다.

즉,

let a dic = {'age':90, 'name'='spell'}

이라고 작성하여도 문제가 없다는 것 이다.

 

해당 그림처럼 key값에 대응되는 value가 도출되었다.

(★여기서 값을 출력 할 때는 대괄호를 사용해야 한다.)

 

딕셔너리형에서는 추가하는 방법이 엄청 직관적이다.

a_dict['key'] = 'value'

라고 적어주면 바로 추가가 된다. 순서가 상관없기에 가능하다.

 

짜잔

 

이제 a_dict이라는 변수는 place까지 가지고 있는 변수가 되었다.

 

 

좀 더 깊게 파고들어가 보자!

방금 작성한 a_dict이라는 변수에 'elemen'이라는(element라고 적으려다가 오타가 나버렸다) key값으로 a_list를 넣으면?

오 담겻어!

 

a_dict을 불러와 볼까?

이제 여기에 'name' 'age' 'place'에 추가로 'elemen'이라는 key값까지 들어갔다.

끝에 보면 elemen: array(4)라고 나와 있는데, 'elemen'안에 4개의 배열이 존재한다는 말이다.

 

펼쳐보기를 하면 좀 더 자세히 볼 수 있다.

 

 

 

현재 그럼 딕셔너리형 a_dict안에는 'elemen'이라는 변수가 있는데, 그 안에는 리스트형인 a_list가 담겨있고, a_list의 값은 순서대로 '불', '물', '바람', '땅'이다.

 

그러면 a_dict['elemen'][1]은?

'물'이라는 값이 되겠으며!

 

그러면 a_dict['elemen'][3]은?

'땅'이라는 값이 된다!

이런식으로 딕셔너리형, 리스트형은 서로서로의 요소로써 사용할 수 있다.

 

---

번외. 추가적인 기본함수들

프로그래밍 언어들은 기본적인 함수들이 이미 포함되어 있다. 예를들면 덧셈, 뺄셈, 곱셈, 나눗셈 등이 있다.

여기서 나눗셈의 나머지를 구하는 것 또한 존재한다.

 

a에 300이란 값을 주고, 이것을 9로 나눈 나머지의 값을 구하려면?

변수 % 나누기값 = 나누기밧을 ㅗ나눈 후의 나머지 값

이라는 것을 알 수 있다.

 

이런건 언제 쓰일까? 무언가 트래픽이 막 들어온다, 이걸 균등하게 나눌 때 쓰면 좋겠지?

짝수나 홀수를 구분할때도 사용할 수 있겠지?

 

 

등호도 존재한다.

a라는 변수에 300을 담았었다.

a < 100

a > 200

a = 300

이런 값들은 어떨까?

false와 true ㄱ밧으로 나오게 된다. 여기서 조심해야 할게 있다. '='이라는 등호를 쓸때 '=='이라고 입력해줘야 한다. 등호 '='는 let a = 300 이라는 문구를 사용하면서 오른쪽값을 왼쪽에 넣을 때 썻기 때문이다.

 

같지 않다는 어떻게 표현할까?

SQL 공부할때 같지 않다를 '!='으로 표현한다고 했었는데 역시나 같은 모양이다.

 

 

값을 두가지로 나눠지게 하는것도 할 수 있다.

무슨말이냐? 직접보고 해보자!

myemail에 값을 주고 그것을 '@'을 기점으로 쪼개보았따.

그럼 myemail.split(@')[1] = ?

 

0부터 시작하니까 1이면 두번째, 즉 coding.com 이겠지?

 

 

이걸 또 쪼갤 수 있다. 무엇을 기점으로? '.'을 기점으로!

신비롭군.

 

그러면 coding이라는 값을 도출하고 싶다, 한번에! 어떻게 쳐야 나올 수 있을까?

 

바로!

myemail.split(‘@’)[1].split(‘.’)[0]

이렇게 차근차근 하나씩 쳐보면서 하는 습관을 지금부터라도 노력하자!!

 

 

 

---