💻 자바스크립트(기초)
코딩앙마님의 자바스크립트 기초 강좌를 통해 공부한 내용입니다.
<변수>
-
코드 작성이 다 끝나면 끝에 세미클론(;)은 꼭 넣기!
-
문자열에는 꼭 따옴표(' ', " ") 넣어주기!
-
let, const
- let: 재할당이 가능(재할당을 할 시 let을 생략하고 변경할 값을 넣어주면 됨)
- const: 절대로 바뀌지 않는 상수(수정 불가능) -> 대문자로 선언하는게 좋음.
ex) π, 최대 값, 생일 등
-
변수 참고사항
-
변수는 문자와 숫자, $와 만 사용
ex) const MY_HOME = "...", let = 1;, let $ = 3; -
첫 글자는 숫자가 될 수 없음.
-
예약어는 사용할 수 없음.
ex) let let = 3; (X) -
가급적 상수는 대문자로
-
변수명은 읽기 쉽고 이해할 수 있게 선언
-
<자료형>
- 문자형
const name = 'Mike'; -> 문자형- 작은 따옴표로만 작성하고 싶을 때는 역슬래시를 넣어주면 됨.(역슬래시를 넣어야지 특수문자로 인식)
const message = 'I\'m a girl.' - 벡틱(``)은 문자열 변수를 나타낼 줄 때 사용하면 좋다.
- 숫자형
const age = 30; -> 숫자형- 숫자형은 사칙연산이 가능하며 소숫점도 나타낼 수 있다.
- 숫자를 0으로 나누면 Infinity(무한대)가 나온다.
- 문자열을 숫자로 나누면 NaN(Not a Number)이 나온다.
- 불린
true와 false로 나뉜다.
const age = 30;
console.log(age == 30); -> true가 나옴.-
null & undefined
- null: 값이 존재하지 않다는 것을 의미.
- undefined: 값이 할당되지 않았음을 의미.
-
type of 연산자
변수의 자료형을 알 수 있다.
console.log(type of 3); ->number(숫자형)
console.log(type of null); -> object(객체형)
console.log(type of 'xxx'); -> string(문자형)- 문자형과 숫자형을 합하면 문자형으로 변환되서 출력된다.
<alert(), prompt(), confirm()>
- alert(): 메세지를 보여준다, 확인 버튼을 누르면 닫힘.
- prompt(): 사용자에게 메세지를 보여주고, 어떤 값을 입력할 수 있는 field를 준다. 취소를 누르면 null로 반환한다. 두번쨰 값을 넣어주면 Default 값을 준다.
- confirm(): 사용자에게 확인을 받기 위해 사용한다. 확인을 누르면 true로 취소를 누르면 false로 반환된다.
- 단점
- 스크립트가 일시정지된다.
- 스타일링을 할 수 없다.
<형변환>
- String(): 문자형으로 변환할 때 사용.
- Number(): 숫자형으로 변환할 때 사용.
- true 또는 false를 넣으면 true=1, false=0으로 나온다.
- Number(null) -> 0
- Number(undefined) -> NaN
- Boolean(): 불린형으로 변환할 때 사용.
- false로 나오는 것들
- 숫자 0
- 빈 문자열
- null
- undefined
- NaN
- 이외에는 다 true로 나온다.
- false로 나오는 것들
- prompt에 입력하는 값은 다 문자형으로 변환된다.
- 형변환을 할 때는 첫 글자는 무조건 대문자로 쓰기.
<기본 연산자>
- 기본 연산자에는 +, -, *, /, %(나머지) 등이 있다.
- 우선순위는 *, / > +, - 이다.
- 거듭제곱
- const num = 2 ** 3; -> console.log(num); // 8
- let result = num++;은 증가시키기 전에 값을 반환하기 때문에 증가시키고 싶으면 ++num으로 작성해줘야한다.
<비교 연산자, 조건문>
- ==(동등 연산자), !=(부정 연산자), ===(일치 연산자, 타입까지 비교)
- if, else, else if
- if
if ( 조건식 )
{
실행문 A; //조건식이 참이면 실행
}
... - else
if ( 조건식 ) {
실행문 A;
} else {
실행문 B;
} - else if
if ( 조건식1 ) {
실행문 A;
} else if ( 조건식2 ) {
실행문 B;
} else {
실행문 C;
}
- if
<논리 연산자>
- || (OR): 여러개 중 하나라도 true면 true -> 즉, 모든 값이 false일 때만 false를 반환, 첫번째 true를 발견하는 즉시 평가를 멈춤
- && (AND): 모든 값이 true면 true -> 하나라도 false면 false를 반환, 첫번째 false를 발견하면 즉시 평가를 멈춤
- ! (NOT): true면 false를, false면 true로 반환.
<반복문>
- for문
for (초기값, 조건, 코드 실행 후 작업) {
// 반복할 코드
} - while문
let i = 0;
while (i < 10) {
// 코드
} - do... while문
let i = 0;
do {
// 코드
i++;
} while (i < 10)
-> 명확한 횟수가 정해져 있으면 for, 아니면 while을 사용하는게 좋으며, do... while은 잘 사용하지 않음.
- break: 멈추고 반복을 끝냄
- continue: 멈추고 다음 반복으로 진행.
<switch문>
두 개이상의 조건을 비교할 때 사용, case에는 상수값만 올 수 있어 변수, 비교식 등에는 사용할 수 없다.
if(평가 == A) {
// A일때 코드
} else if {
// B일때 코드
}
↓ if문으로도 쓸 수 있지만 switch문이 조금 더 간결함.
switch (평가) {
case A;
// A일때 코드
case B;
// B일때 코드
}
<함수 (function)>
하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미한다.
// 함수 선언식 -> 어디서든 호출가능
function(함수) sayHello(함수명) (name -> 매개변수){
console.log(`Hello, ${name}`);
}
sayHello(); -> 함수호출- 호이스팅: 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다.
- 주의할 점
- 한번에 한 작업에 집중하기
- 읽기 쉽고 어떤 동작인지 알 수 있게 네이밍하기
<함수 표현식>
정의한 function을 별도의 변수에 할당하는 것을 말함. 함수를 생성(초기화) 한 코드 아래에서만 호출 가능하다.
let 함수명 = function() {
구현 로직
};- 화살표 함수: 함수 표현식과 호이스팅이 동일하며 function 키워드를 제거하고 사용한다.
const square = (x) => { return x*x };<객체 (object)>
- 접근
- 000.name
- 000['age']
- 추가
- 000.gender - 'female';
- 000['hairColor'] = 'black';
- 삭제
- delete 000.hairColor;
- 단축 프로퍼티
const name = 'clark';
const age = 33;
↓
const superman = {
name,
age,
gender: 'female',
} - 프로퍼티 존재여부
000.birthDay; // undefined
'birthDay' in superman; // false
'age' in superman; // true - for in 반복문
객체의 프로퍼티 키 열거 전용
const obj = {
name: 'curryyou',
job: 'engineer'
}
for (const key in obj){
console.log(`${key} : ${obj[key]}`);
}<method, this>
- method: 객체 프로퍼티로 할당 된 함수를 뜻한다. -> 화살표 함수로도 표현할 수 있다.
const superman = {
name: 'clark',
age: 33,
fly: function(){
console.log('날아갑니다.')
}
}
superman fly();- this: 단독으로 쓰일 때는 'global object'를 뜻하며, 함수 안에는 함수의 주인(window객체)에게 바인딩 된다.
<배열 (array)>
순서가 있는 리스트를 뜻한다.
- 특징
- 배열은 문자뿐만 아니라 숫자, 객체, 함수 등도 포함된다.
- length: 배열의 길이를 의미한다.
- pugh(): 배열 끝에 추가
- pop(): 배열 끝 요소 제거
- shift, unhift: 배열 앞에 제거/추가
- 반복문
- for
- for... of(중요): 배열의 요소 개수만큼 반복하고, 반복 때마다 각 요소들을 사용할 수 있는 변수가 주어지는 반복문을 이야기 한다.
for (변수 of 배열) { 반복동작부분 }
