베이스캠프 11일차_22년 12월 26일

학습 언어

JavaScript

 

학습 내용

자바스크립트란? / 변수와 상수 / 데이터타입의 종류 / 산술연산자 / 배열, 객체의 method

 

자바스크립트(JavaScropt)란?

자바스크립트란, 몇줄의 코드만으로 웹 페이지를 동적으로 동작할 수 있도록 만들어주는 프로그래밍 언어입니다.

 

변수와 상수란 무엇일까?

변수는 프로그래밍 세계에서 특정 데이터를 변수에 저장하고 호출하며 호출된 데이터를 정제할 수 있는 뜻입니다.

변수와 상수는 데이터를 담고, 꺼내 쓰는 '상자'라고 생각할 수 있습니다.

변수와 상수 자세히 알아보기 (키워드)

• 변수 (값이 변할 수 있음) : var , let
• 상수 (값이 변할 수 없음) : const

var : 재선언 O 재할당 O

let : 재선언X 재할당O

const : 재선언 X 재할당 X

 

1. 선언(declaration)

선언 은 변수의 이름을 알려주는 행위 라고 이해하시면 되며,

2. 할당(definition)

할당 이란 변수에 데이터를 담아주는 행위 입니다.

 

선언과 할당을 한번에!
선언과 할당을 한번에 할 수 있는 아주 편리한 방법이 있습니다.

       선언 + 할당
let result = 10+20
   선언부      할당부

‼️  자바스크립트의 등호(=)는 같다의 의미가 아닌 할당의 의미 입니다. ‼️

 

주의사항 :

1 ) 변수명은 동사가 아닌 명사, 첫글자는 숫자 사용 불가능

2 ) 자바스크립트의 예약어를 변수명으로 선언시 에러가 발생할 수 있습니다. (mdn 참고)

 

데이터 타입의 종류

String(문자열)

“” , ‘’ 안에 입력된 데이터는 문자열 데이터로 표시 됩니다.

Number(숫자)

1,2,10 과 같은 흔한 숫자 데이터 입니다.

 

산술연산자

1. 덧셈 : 1 + 2
2. 뺄셈 : 2 - 1
3. 곱셈 : 2 * 1
4. 나눗셈 : 2 / 1
5. 나머지 : 2 % 1

+ 를 제외한 나머지 산술연산자를 문자열과 사용했을때는 NaN으로 반환됩니다.

+ 를 문자열과 숫자타입으로 사용할 경우 혼용되어 반환됩니다. ex) console.log("100" + 100) = 100100

이외의 데이터 타입

• Boolean
• undefined
• null
• symbol
• Bigint
• Object

배열(Array) 

여러개의 데이터를 순서와 함께 저장하고 싶을때 사용 하는 기다란 저장 창고입니다.

let arr = ["여기는","우주","최강","코드","캠프"]
// index     0      1     2     3     4
// length    1      2     3     4     5   ->  따라서 arr.length = 5

// 인덱스 번호로 요소에 접근하기
makeArr[2] = "요소라고"
makeArr[3] = "합니다"

 

배열의 Method(메서드)

메서드는 어떠한 기능을 가지고 있는 명령어 이며, 배열에 내장되어 있는 기능이라고 보시면 됩니다.

 

array.push() : 배열의 가장 뒤의 데이터를 추가

let ranking = ["정훈","주은","시윤"]
ranking.push("원두")

// 결과
ranking = ["정훈","주은","시윤","원두"]

array.pop() : 배열의 가장 뒤의 데이터를 삭제

let ranking = ["정훈","주은","시윤"]
ranking.pop()

// 결과
ranking = ["정훈","주은"]

array.includes() : 특정 배열에 주어진 데이터가 포함되어있는지 확인

let ranking = ["정훈","주은","시윤"]
ranking.includes("정훈")

// 결과
true

array.indexOf() : 특정 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환 

*만일 찾을 수 없으면 -1을 반환 합니다.

let ranking = ["정훈","주은","시윤"]
ranking.indexOf("정훈")

// 결과
0

 

객체(object)

키(key)값을 통해 해당 데이터가 무엇에 대한 데이터인지 명시해줄 수 있습니다.

객체를 만들때는 중괄호: {} 를 이용해주시면 됩니다.

let userData = {
	name:"이정훈",
	age:85,
	height:180,
	company:"코드공장"
}

객체 프로퍼티(property)에 접근하기

Dot notation(점 표기법)

이 방법은 key값에 접근시, 점을 이용해서 접근 하는 방법입니다.

let userData = {
	name:"이정훈",
	age:85,
	height:180,
	company:"코드공장"
}

//Dot notation(점 표기법) 접근
userData.name = "이정훈"
userData.age = 85

Bracket notation(괄호 표기법)

이 방법은 key값에 접근시, 괄호[]를 이용해서 접근 하는 방법입니다.

let userData = {
	name:"이정훈",
	age:85,
	height:180,
	company:"코드공장"
}

//Bracket notation(괄호 표기법) 접근
userData["name"] = "이정훈"
userData["age"] = 85

❗️주의❗️
Bracket notation을 사용하실 때 “”를 붙여주시지 않으시면, 안의 key값이 아닌 변수로 인식됩니다.
key 값에 접근을 원하신다면 반드시 “”를 붙여주세요

 

객체(object) Method

Object.keys()

let userData = {
	name:"이정훈",
	age:85,
	height:180,
	company:"코드공장"
}

Object.keys(userData)
// 결과 
[ "name", "age", "hight", "company"]

Object.values()

let userData = {
	name:"이정훈",
	age:85,
	height:180,
	company:"코드공장"
}

Object.values(userData)
// 결과 
[ "이정훈", 85, 180, "코드공장"]

 

 

소감

베이스캠프 3주차가 시작되어 자바스크립트를 학습하였습니다.

아직 HTML CSS와는 다르게 홈페이지를 직접 디자인 하지는 않았지만, 선언, 할당 등 자바스크립트언어를 이용하여 컴퓨터에게 명령 하는 방법을 알게 되었습니다. 차후 심화된 부분도 활용하고 이해할 수 있게 기초를 잘 만들겠습니다.