변수와 상수
- 기본적으로 변수와 상수로 구성
변수 = 어떤 관계, 범위 내에서 여러 값으로 변할 수 있는 수
상수 = 변하지 않는 일정한 값을 가진 수
- 선언과 할당
변수명을 지정하여 [선언]하고, 해당 변수에 데이터값을 [할당] 가능
| let(변수를 담음) | var(실무에서 안쓰임) | const(상수를 담음) | |
|---|---|---|---|
| 이름중복(재선언) | X | O | X |
| 데이터수정(재할당) | O | O | X |
+a) 선언 + 할당 => ex) let name = "송현섭"
+a) 변수명을 작성 시에는 [myMoney] 식으로 중간에 대문자를 넣어 가독성 높임
배열, 객체
- 배열 => 많은 데이터들을 대괄호 안에 넣어 각 데이터를 구분지은 것
*배열, 객체는 보통 const로 선언 (주머니 안의 물건은 바꿔도 주머니 자체를 바꾸진 않는다)
ex) let name1 = "현섭", let name2 = "민섭" let name3 = "창호"
=> let students = ["현섭", "민섭", "창호"]
- [index]와 [length]
배열 내 데이터를 첫 번째부터 카운트 할 때 index는 0,1,2 ..., length는 1,2,3..., 순으로 셈
- 배열의 기능
ex) let array = ["
~"]
길이 구하기=> array.length 해당 값 불러오기=> array[숫자(index)]
배열 맨 뒤 값 추가=> array.push( ) 배열 마지막 값 삭제=> array.pop( )
배열 내 데이터 확인=> array.includes(데이터 값) 배열 합치기 => array.concat(array2)
배열 간격 사이마다 삽입=> array.join( ) 배열 내 Index값 찾기 => array.indexOf( )
배열 맨 앞에 요소 추가=> array.unshift( ) 배열 맨 앞의 요소 1개 제거=> array.shift( )
*unshift는 요소 여러 개 추가 가능
배열 기능 map(), filter()
map()
currValue = 배열의 현재 요소
index = 요소의 인덱스
array = map()을 호출한 원본 배열
newValue = callBackFunction에서 사용될 값
*Value, index, array는 매개변수 (index, array는 필수입력사항 X )
map()은 배열 각 요소에 대해 주어진 함수를 수행한 결과를 모아서 새로운 배열을 반환하는 메서드이다
배열의 모든 각 요소들에 함수를 적용하고 싶을 때 이용한다
- map() 예시
- map()의 모든 매개변수를 입력한 경우
filter()
currValue = 배열의 현재 요소
index = 요소의 인덱스
array = map()을 호출한 원본 배열
newValue = callBackFunction에서 사용될 값
*Value, index, array는 매개변수 (index, array는 필수입력사항 X )
filter()은 배열 각 요소에 주어진 함수의 결과값이 true인 요소를 모아 새로운 배열을 반환하는 메서드이다
조건에 맞는 특정 요소들만 새 배열에 넣고자 할 때 이용한다
- filter() 예시
- filter()의 모든 매개변수를 입력한 경우
문자열(배열)
문자열도 배열처럼 다룰 수 있음
classmates1[0] // "철"
classmates1[1] // "수"
[문자열 쪼개기]
const classmates2 = "철수&영희"
classmates2.split("&") // ["철수", "영희"]
[문자열 양쪽 공백 제거하기]
const classmates3 = " 철수 & Milk "
classmates3.trim() // "철수 & Milk"
[문자열 대소문자 변환하기]
classmates3.toUpperCase() // "철수 & MILK"
classmates3.toLowerCase() // "철수 & milk"
- 문자열(배열) - padStart, padEnd
-
Slice, Splice
Splice
-splice는 배열 원본을 건드리기에 원본자체에서 분리함
-문자열 분리 안됨 (X)
Slice
-Slice는 배열 원본은 건드리지 않기에 분리 이후에도 원본은 유지됨
-문자열 분리 가능 (O)
-
substr()
특정 인덱스에서 원하는 길이(length)만큼 잘라서 문자열로 리턴substr(start Index, length)
+a) 각 값을 음수로 두면 문자열을 뒤에서부터 셈
객체
카테고리에 맞게 구분하여 각 데이터를 한 번에 담음, 속성을 바로 구분 가능
기본적으로 Key와 값(Value)으로 이루어져 있음
ex const profile = { name : "송현섭", age : 27, school : "코드학교" }
값 가져오기(2가지 방법) =======> 1. profile.name => "송현섭"
2. profile["school"] => "송현섭"
값 삭제 ==> delete profile.name (name이라는 key를 가진 값 삭제)
ex.profile.Key = Value
=> 이런 식으로 존재하는 객체 내에 새로운 key값과 Value를 할당도 가능
*(이미 같은 key가 존재한다면 해당 key의 value 값을 바꿈)
-
배열에 담긴 객체
let students = [
{name:
, pet:, house:~~}, <= 객체1{name:
, pet:, house:~~}, <= 객체2{name:
, pet:, house:~~} <= 객체3]
+a) 배열에 담긴 객체에서 데이터 가져오기 ===> students[0].name
(students 배열의 0번째 항목에서 name의 데이터를 조회)
object.keys( ), object.values( )
object.keys( ) => 객체 내의 key값만 골라 배열로 다시 반환
object.values( ) => 객체 내의 value값만 골라 배열로 다시 반환
HTML에 Javascript 연결
<script src="./~~~~~~"></script>
