1강
자바스크립트.기초적인 웹프로그래밍 언어.웹페이지를 동적으로 조작하기 위해 만들어진 프로그래밍 언어.
프로그래밍? -->데이터를 조작하는 작업
웹페이지:html(구조화),css(디자인),JavaScript(동적조작)
구글 개발자도구 console창에서자바스크립트 사용
명령어:console.log().
괄호 안의것을 콘솔창에 출력, 기본적인 연산도 가능
변수: 데이터를 담아주는 상자.연산의 결과, 문자, 숫자 등을 담아줄 수 있음.
변수를 선언해주고 데이터를 할당해주는 과정이 필요.
한줄로 한꺼번에 선언 가능.
2강
변수 선언 키워드
var , let , const
이 중 var은 자주 사용X(사용하지 않기로 하기)
선언 키워드 선언하고자하는 변수 명(상자의 이름);
==>let box;
선언 키워드로 지금부터 변수를 선언하겠다고 하고, 뒤에 변수이름으로 사용할 것을 붙여줌
let a;
let name;
==>변수명은 반드시 명시적이어야함. 이름만으로도 어떠한 변수인지 알 수 있게.
어떠한 변수에 데이터 담기=>할당
할당연산자는 =
let box;라고 변수를 선언 했고, 이 박스라는 변수에 어떠한 데이터를 할당 한다면
box = 123;이런식으로 작성한다.
가장앞에 변수명 그다음 할당연산자 할당할 데이터
==>변수명 = 할당할 데이터
변수의 참조:선언 한 변수명을 그대로 입력
console.log(box)
선언과 할당을 한줄로 입력가능==>let box = 123;
3강
할당: 변수명 = 데이터
재할당: 이미 데이터가 할당되어있는 변수에 다시 할당해주는 것
let키워드는 재할당 가능
재선언: 이미 선언되어있는 변수명으로 다시 선언
let키워드는 재선언은 불가. 재할당은 가능
const==>상수 변수를 의미
==>상수는 변하지 않는 값을 의미. 따라서 let 과 다르게 재할당 안됨,그리고 const 키워드는 반드시 선언과 할당이 동시에 일어나야함.
const는 재할당, 재선언 불가.
var는 재할당, 재선언 가능.
어디서 문제가 발생했는지 예상하지 못하기에 미연의 에러 방지 어렵.
절대 사용하지 않도록 하기.
변수명 정할시 주의해야할 것
동사를 변수명으로 사용하지 않을것. 되도록 명사로,
숫자보다는 알파벳으로
자바스크립트 예약어는 변수사용할때 사용하ㅏ지 않을것.
첫단어는 소문자 띄어쓰기가 들어가야하는 부분에 는 대문자로 구분하는 camelCase,
첫글자도 대문자 띄어쓰기도 대문자인 PascalCase,
띄어쓰기대신 언더바로 구분하는 snake_case등의 표기법이 있다.
이 외에도 더 있다. 보통은 camelCase를 사용한다.
변수선언 키워드로 원하는 이름으로 변수를 선언-->
그때 사용하는 이름을 변수명이라고하고,---> 키워드는 var let const가 있다. ---> 변수 선언 한 뒤에는 데이터를 할당하는데, 이때는 할당 연산자인 =을 사용한다.
4강
변수에는 어떠한데이터도 담길 수 있다.
자바스크립트의 모든 데이터는 특정한 데이터 타입에 속하게 된다.
데이터 타입
:String(문자), Number, Boolean, undifined, null, symbol, Bigint, Object
String:문자열. ===>텍스트 데이터 라고 함.
큰따옴표(""), 작은따옴표('') 안에 사용.
변수도 따옴표로 감싸면 텍스트 데이터가됨. 주의.
숫자, 알파벳, 특수문자, 숫자등이 따옴표 안쪽에 들어가게되면 텍스트 데이터화가 됨.
+ 기호로 문자열 두개를 더해 줄 수도 있음.
Number==> 따옴표로 감싸있지 않은 숫자. +뿐만아니라 모든 연산 가능
'문자'+숫자 OR 숫자+'문자'==>문자타입데이터로 합쳐짐
문자와 숫자의 다른 연산==>NaN(not a number)
'숫자' * 숫자 ==>숫자로 연산해 나옴
NaN이 나오는 조건:
문자열이 포함된 연산에서 더하기가 아닌 연산을 시도할 경우. 단,숫자로 변환이 가능하다면 연산하여 반환함.
사칙연산시 사용하는 기호==> 산술연산자.(+ , - , * , /)
'100' 20 ==>문자열을 숫자로 변환시도==> 가능==>2000
'abc' 20 ==>// ==>불가 ==>NaN
5강
배열과 객체
배열?
순서가 있는 데이터 컬렉션을 저장할때 사용하며, 데이터 컬렉션이 논리적으로 정의된 규칙에 의해 나열된것...
논리적으로 정의????읭?
==>순서가 존재하는 여러개의 데이터를 담아두는 창고
배열 정의할때는 [] 이런 대괄호 사용, 이 안에 데이터들 넣고 콤마로 각각을 구분.
순서중요.
변수는 어떠한 데이터 이든지 할당가능==>so,배열을 변수에 담을 수 있음.
여러개의 데이터를 묶음으로 관리가능
배열의 특성?
배열에 속해있는 데이터 하나하나는 해당 배열의 요소라고 함. 다르게 말하면 자바스크립트의 모든 데이터는 배열의 요소로써 존재할 수 있음. 심지어 배열도 배열의 요소가 될 수 있음.
그리고 배열의 각 요소는 인덱스라는 값을 가지는데,
이 인덱스는 해당 배열의 위치값으로 항상 0부터 시작
그 뒤의 요소들은 1씩증가.따라서 순서로써 관리 가능
인덱스를 통해 순서에 맞게 데이터에 접근.
각 요소에 접근 하는 방법
: 배열 이름[접근하고자하는 요소의 인덱스 값]
property=>데이터 타입마다 가지고있는 고유한 속성
Array.length=>특정 배열의 길이를 나타냄
단, 인덱스는 0부터 시작함, length는 1부터 시작함. 둘의 개념을 잘 알기를.
6강
메소드(Method)
:데이터를 추가하거나 삭제하거나 분류하는 등의 다양한 기능을 담은 명령어
-->어떠한 기능을 가지고있는 명령어
Array.push()-->push메서드
배열의 가장뒤에 추가할 수 있는 매서드
배열을 담아준 변수 입력 다시말하면 메서드를 사용할 배열명.push()
==>let ranking = ["Jason","Alice","Chris"]
-->ranking.push()
자바스크립트에서 어떠한 기능을 동작시킬때는 뒤에 소괄호!!
어떤 데이터를 사용하고자 할때 즉,push할 데이터는 소괄호 안에 추가
ranking.push("Jane")
push메서드를 사용하면
반환값으로 그 배열의 길이를 반환해줌
Array.pop()
:주어진 배열에서 가장 마지막에 위치한 데이터를 제거
적용할 배열명.pop()
pop메소드는 어떠한 데이터로 동작을 취할 것인지 내부적으로 정의되어있기에 소괄호 안에 데이터 안넣어도 됨.가장 끝에있는 데이터만 삭제하는것이 역할 이기에
pop메서드를 사용하면 삭제해준 데이터가 어떤 것인지를 반환해줌.
Array.includes()
:어떠한 데이터가 특정배열에 존재하는지를 알 수 있음.
여부에따라 true나 false로 반환==>boolean형반환
적용할 배열명.includes(찾고자하는 데이터)
Array.indexOf()
:특정배열에서 데이터의 인덱스 값을 반환
적용할배열명.indexOf(찾고자하는 데이터)
이렇게하면 찾으려는 데이터의 인덱스 값이 나옴.
7강
객체?
:여러개의 property(=속성)를 갖는 데이터 타입.
각 property는 key와 value로 이루어진다.
키와 값은 콜론으로 나뉨
key: value ==>property
각 속성(property)의 값은 어떠한 데이터든 할당될 수 있음. 문자와 숫자는 물론, 배열과 새로운 객체 또한 가능.
각 속성들은 콤마로 나누어짐
객체의 데이터 타입에 접근하는 방법
1.Dot notation
=>접근하고자하는 객체의 이름.원하는 property의 키
===> 이렇게하면 그에 대응해있는 값 가져옴.
property추가하기.
추가하고자하는 객체.존재하지 않아 추가해줄property의 키 = 값
=====>
let userData = {
name: 'Jason',
age:25,
gender: 'Male'
}
===>userData.name --->'Jason'이 나옴
userData.job = 'gamer'--->
객체 userData에 job이라는 키를 가진 속성(property)가 추가됨
- Bracket notation
접근할 객체명['접근하고자하는 property의key']
이때 대괄호 안은 꼭 문자열 형태로(따옴표 붙이기)
문자열이 아닌 키로 입력하면 변수로 인식함.
property추가하기
==>접근할 객체명["추가할 키"] = 값(=>문자면 따옴표 붙이고 숫자면 그냥쓰기)
8강
Object.keys()
:주어진 객체의 키 만을 가져와 배열에 담아줌.
==>Object.keys(키를 뽑아내고싶은 객체이름)
이렇게하면 키들이 배열안에 문자열 형태로 요소로 들어가있음.
Object.values()
: 객체의 값들을 배열에 담아 돌려주는 데 이때는 문자열 형태가 아님. 그 데이터 그대로 가져옴.
Object.values(객체이름) ==>입력된 객체의 값만을
뽑아 배열에 담아 돌려줌.
const jasonData = {
name: "Jason",
age: 23,
gender: "Male"
}
jasonData.favoriteFood = ["rice","pizza",'chicken']
console.log(jasonData)
{name: 'Jason', age: 23, gender: 'Male', favoriteFood: Array(3)}
age: 23
favoriteFood: (3) ['rice', 'pizza', 'chicken']
gender: "Male"
name: "Jason"
[[Prototype]]: Object
jasonData["favorite"] = "orange"
'orange'
console.log(jasonData)
{name: 'Jason', age: 23, gender: 'Male', favoriteFood: Array(3), favorite: 'orange'}
age: 23
favorite: "orange"
favoriteFood: (3) ['rice', 'pizza', 'chicken']
gender: "Male"
name: "Jason"
[[Prototype]]: Object
