TIL

베이스 캠프 11일차

버밀이 2023. 3. 2. 12:19

자바 스크립트(JS)

자바스크립트란, 몇줄의 코드만으로 웹 페이지를 동적으로 동작할 수 있도록 만들어주는 프로그래밍 언어입니다.
웹 페이지가 동적으로 동작한다는 말이 지금은 잘 와닿지 않을 수 있지만,
이 강의를 통해 함께 학습하시면 어떤 능력을 가진 프로그래밍 언어인지 이해하게 될 것 입니다.

변수와 상수

변수와 상수는 데이터를 다루기 위해 사용하는 것으로 데이터를 저장하고 호출하며 데이터를 정제하는 수단입니다.

변수와 상수 만들기

1. 선언선언은 변수의 이름을 알려주는 행위

2. 할당할당은 변수에 데이터를 담아주는 행위

선언과 할당은 동시에 할 수도 있다.ex)

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

변수와 상수의 종류와 특징

	var	let	const
변수명 중복(재선언) 여부	가능⭕️	불가❌	불가❌
데이터 수정(재할당) 여부	가능⭕️	가능⭕️	불가❌

데이터 타입

String(문자열)

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

문자열의 연산
 →  문자열에서도 연산 기호 [ `+` ] 를 사용할 수 있습니다.
숫자와는 다르게 문자열의 연산은 단어와 단어를 이어붙여줍니다.

Number(숫자)

1,2,10 과 같은 흔한 숫자 데이터 입니다.
또한 숫자타입 답게 여러가지 연산이 가능한 산술 연산자의 사용이 가능합니다.

산술연산자
1. 덧셈 : 1 + 2
2. 뺄셈 : 2 - 1
3. 곱셈 : 2 * 1
4. 나눗셈 : 2 / 1
5. 나머지 : 2 % 1
산술연산자 는 숫자타입의 데이터로 연산을 시도했을경우만 정상적인 값을 반환하며, 만일 숫자가 아닌 값으로 연산 을 시도했을 경우엔 NaN (Not a Number)를 반환합니다.

문자와 숫자 혼합연산

문자 타입과 숫자타입에서 공통으로 사용할 수 있는 산술연산자가 있었습니다.
바로 더하기 연산자, + 였습니다.
그럼, 문자 타입과 숫자타입을 혼합해서 연산하게되면 어떤일이 벌어지게 될까요?

결과는 위와 같습니다. 숫자타입이 문자타입으로 변환되어 문자열의 연산처럼 됩니다.
그럼 다른 연산들은 어떨까요?
아래에서 함께 알아보도록하겠습니다.

"a" * 12  // NaN
"a" - 12  // NaN
"a" / 12  // NaN
"a" % 12  // NaN

이외의 데이터 타입

Boolean
undefined
null
symbol
Bigint
Object

배열(Array)

우리는 전 시간에 데이터를 담아두고 접근하는 상자로 변수와 상수에 대해서 알아보았습니다.
그런데 담아야 하는 데이터들이 여러개가 된다면 어떻게 해야 할까요?
여러개의 데이터를 순서와 함께 저장하고 싶을때 사용 하는 기다란 저장 창고 라고 생각하시면 됩니다.

배열 만들기

배열을 만들어주실 때는 대괄호: [] 를 이용해주시면 됩니다.

let makeArr = ["이것","하나하나를","요소라고","합니다"]

대괄호 안에 원하는 데이터를 모아서 넣어주시면 배열을 만들어 주신 것 입니다.
그리고, 배열 안의 데이터들 하나하나를 요소(element) 라고 합니다.

배열의 index

위에서 배열은 데이터를 순서와 함께 저장 한다고 말씀 드렸습니다.
배열의 index 는 각 요소에 순서를 부여 할 뿐만 아니라 해당 요소에 접근이 가능 하도록 해줍니다.
index 번호는 특이하게 0번 부터 시작하며, 아래에서 자세히 알아보도록 하겠습니다.

let makeArr = ["이것","하나하나를","요소라고","합니다"]

중요 ! : index는 0부터 시작한다.

makerArr[0] === "이것"

makerArr[1] === "하나하나를"

makerArr[2] === "요소라고"

makerArr[4] === "합니다."

객체(object)

const people = ["이정훈", 180, 85, "코드공장"]

위에 people 이라는 배열이 있습니다.
아마, “이정훈” 이라는 사람에 대한 정보를 모아둔 배열인 것 같습니다.
그런데, 180 이라는 숫자는 무엇에 대한 숫자이며 85라는 숫자는 무엇에 대한 숫자일까요?
키가 될 수도 있고, 몸무게나 나이가 될수도 있습니다.
이처럼 배열은 안에 있는 데이터들이 무엇에 대한 데이터인지 명시할 수 없습니다.
하지만, 객체는 key를 통해 해당 데이터가 무엇에 대한 데이터인지 명시해줄 수 있습니다.

객체 만들기

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

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

중괄호 안에 원하는 데이터를 모아서 넣어주시면 객체를 만들어 주신 것 입니다.
그리고, 객체 안의 데이터들 하나하나를 프로퍼티(property) 라고 합니다.
이런 객체를 자세히 살펴 보면 아래와 같은 구조가 됩니다.

위의 사진을 보시는 것 과 같이 왼쪽에는 key 가 오른쪽에는 value 가 있습니다.
그리고 key와 value를 묶은 것을 property 라고 합니다.

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

객체의 프로퍼티에 접근할 때는 기본적으로 key값에 접근해서 value를 가지고 옵니다.
또한 프로퍼티에 접근할 수 있는 방법에는 두가지 방법이 있습니다.

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에 접근을 원하신다면 반드시 “”를 붙여주세요