[1]  변수

let? var?
이전 자바스크립트를 공부할때는 var로 변수 선언을 했지만 요즘 보니 let을 쓰는거 같다.
var = 구식, let = 신식으로 생각 하면 될꺼같다.
변수 선언은 데이터를 담을 박스를 선언하는것과 같다.

박스에 숫자를 넣든 문자를 넣든 데이터를 넣는데는 변수 선언이 필요하다.
간단한 예시를 통해 알아보자.

let num = 1004 // num이라는 변수를 선언함과 동시에 숫자 1004를 집어넣는다.

여기서 num은 변수 이름이다.

=(등호) 기준으로 오른쪽의 데이터를 왼쪽 변수에 넣는다. 라고 이해하면 된다.

 

문자도 넣어보자

let text = 'apple'

text란 변수에 apple이란 글자 데이터를 넣었다.

 

각 변수들을 출력해보자

let num = 1004
let text = 'apple'
console.log(num)
console.log(text)

아래처럼 출력되는것을 확인할 수 있다.

1004
apple

좀더 만들어보자

let num = 1004
let num2 = 1004
let text = 'apple'
let text2 = 'love'

숫자끼리 글자끼리 각각 더하면 어떻게 될까

let num = 1004
let num2 = 1004
let text = 'apple'
let text2 = 'love'
console.log(num+num2)
console.log(text+text2)

아래와 같다.

2008
applelove

그렇다면 숫자 + 문자는?

let num = 1004
let num2 = 1004
let text = 'apple'
let text2 = 'love'
console.log(num+text)
console.log(num2+text2)
1004apple
1004love

이처럼 숫자가 글자로 자동 변환되어 출력된다.

 

[2] 리스트(배열)

간단한 예시를 보자

let list = []

리스트는 [ ] 로 선언한다.
리스트에 데이터를 넣어보자

let list = [1,2,3,4,'apple']

리스트에 데이터를 추가해보자

let list = [1,2,3,4,'apple']
list.push('love')

출력값은

[1, 2, 3, 4, 'apple', 'love']

각 자리의 순번은

0: 1
1: 2
2: 3
3: 4
4: "apple"
5: "love"

원하는 자리 1과 2사이에 'black'이라는 글자를 넣어보자
1번 자리에 추가하면 된다.

let list = [1,2,3,4,'apple']
list.splice(1,0,'black') 1번 자리에 넣기
[1, 'black', 2, 3, 4, 'apple']
0: 1
1: "black"
2: 2
3: 3
4: 4
5: "apple"

원하는 자리의 데이터을 바꿔보자

2번 데이터를 black로 바꿔보자

let list = [1,2,3,4,'apple']
list.splice(2,1,'black')
[1, 2, 'black', 4, 'apple']
0: 1
1: 2
2: "black"
3: 4
4: "apple"

 

[3] 딕셔너리(객체)

리스트와 비슷하다.

let dict = {'name':'Bob','age':21}

dict라는 딕셔너리 변수 선언
오른쪽 데이터는 딕셔너리에 들어가는 데이터들이며 'name' 과 'Bob' 그리고 'age' : 21은 각각 매칭되어있다.
매칭된 값을 출력해보자

let dict = {'name':'Bob','age':21}
dict.name
'Bob'

위와 같이 출력된다. 같은 원리로 dict.age 하면 21이 출력된다.
그렇다면 새로운 데이터를 넣어보자

let dict = {'name':'Bob','age':21}
dict['height'] = 188 // heigt 데이터 넣기
{name: 'Bob', age: 21, height: 188}

위와 같이 출력된다.

 

리스트 & 딕셔너리를 같이 써보자

names = [{'name':'bob','age':20},{'name':'carry','age':38}]
0: {name: 'bob', age: 20}
1: {name: 'carry', age: 38}

위와 같이 출력되며 방대한 데이터를 정리하기에는 필연적인 문법인것같다.
나중에 심화로 들어가면 어려워질것같다.

[4]  함수

 함수는 특정 기능을 하는 변수같은 것이다.

function 함수이름(안에 쓰일 변수들) {
   함수 기능
}
함수이름(함수로 보낼 데이터);

숫자 2개를 더해주는 함수를 만들고 이용해보자

function sum(num1, num2) {
	console.log('num1: ', num1, ', num2: ', num2);
	return num1 + num2;
}
let result = sum(10,10)
console.log(result)

result란 변수를 선언하였고 여기엔 sum(10,10)을 넣는다.
sum(10,10)은 sum이란 함수에 10,10데이터를 넣고
데이터를 리턴받는다.

함수를 살펴보면 받은 2개의 데이터를 각각 num1, num2로 선언하고
두개를 각각 출력한뒤 더한값을 return 해준다. 

'코딩 > 기타' 카테고리의 다른 글

[HTML] 1. html 기본 구조에 대해...  (1) 2022.08.30
[Start] Day-1 첫 시작...  (1) 2022.08.29

+ Recent posts