자바스크립트 기초
그새 정신이 좀 해이해졌다..
다시 마음을 다잡고 열심히 해보자
우선은 부스트코스의 생활코딩님 강의로 시작해보자
script tag는 head 말고 body에 넣자!
head에 넣으면 자바스크립트 태그를 먼저 읽느라 페이지의 로딩속도가 느려질 수 있다.
음..
부스트코스를 보기 전에 다른 유튜버분의 자바스크립트 입문강좌를 먼저 보는 게 낫겠다..
늘 이런식으로 어떤 개념을 이해하려고 구글링했다가 거기서 파생된 것에 대해 또 구글링하고 구글링하고.. 이렇게 꼬리의 꼬리를 물어 결국 생각보다 매우 많은 시간이 소요된다 흑 ㅠㅠ
이렇게 배우는 거겠지 !!
화이팅하자 ~..~
let & const
(var의 경우 버그 발생과 메모리 누수의 위험 등이 있기 때문에 var말고 let, const를 사용하는 것이 좋다)
name = "molly"; 로 지정했지만
(특히 여러사람과 큰 프로젝트 작업을 할 때)
document 뒤에
name = "sunny" 가 오게 된다면 나중에 온 정보로 덮어쓰기가 되어버린다
이럴 땐 정보 앞에 let을 붙이자
let name = "molly" .
.
.
let name = "sunny"
를 입력하면 에러가 뜨게 된다. 이미 앞에 지정된 name이 있다는 뜻 !
막무가내로 바꾸고 싶으면 그냥 name = "sunny" 입력해버리면 된다.
반대로 변하지 않는, 수정할일 없는 값(상수)를 지정할 때는 let 대신 const를 붙여준다.
const SPPED_LIMIT= 50;
const BIRTH_DAY= '1998-05-29';
등과 같이
상수의 경우는 변수명을 가급적 대문자로 표기
(name과 let 모두) 변수는
문자, 숫자, $와 _만 사용가능
첫글자 숫자 불가
예약어(class, id 등..)는 사용불가
문자형
문자형은 "" , '', `` (backtick)
세가지로 지정가능
let name = "I'm a boy."
이경우엔 문자열 안에 '가 포함되니까 큰따움표로 감싸주는 게 좋다. 에러가 나기때문..
근데 굳~이 작은따옴표를 쓰고싶다면
let name = 'i\'m a boy.' 로 입력해주면 된다(작은따움표 앞에 백슬래시)
여기서 backtick을 유용하게 쓸 수 있는 템플릿 리터럴은 편리한 문자열처리 기능을 제공한다.
*템플릿 리터럴*
1. Expression interpolation 표현식 삽입
ES6이전엔 위와같이 번거롭게 표현식을 문자열안에 넣어야했다.
그러나 탬플릿리터럴에서는
이렇게 ``(backtick) 안에만 넣어주면 ${}으로 간단히 해결된다.
2. 여러줄에 걸쳐 문자열 삽입
줄바꿈을 주고싶을 때,
let intro ="안녕하세요" +
"반갑습니다";
등의 방식은 통하지 않는다. 이는 ES6이전엔
위와같이 '블라블라\n' + '어쩌구\n' + '저쩌구' 의 방식으로 줄바꿈을 했다.
하지만 이도 탬플릿 리터럴로
간단히 해결가능하다. 그저 ``로 감싸주기만 하면 그 안에서 일어나는 줄바꿈은 자동처리된다.
숫자열
1/0 을 하면 infinity가 출력된다.
g/2 등 문자를 숫자로 나누면 NaN(Not A Number)가 출력
boolean
true, false 값만 출력되는 객체이다
일단은 이런 개념이 있다~는 것만 알고 넘어가자!
undefined & null
위와같이 변수를 선언만 하고 값을 할당하지 않으면 undefined를 출력
null은 어떤값이 의도적으로 비워있음을 표현하기 위함이다.
(객체형과 심볼형이 있다)
typeof 연산자
typeof 연산자는 자바스크립트의 7가지 변수타입 undefined, null, boolean, number, string, symbol, object, function을 구분하는 용도로 사용된다.
다른 개발자가 작성한 변수의 타입을 알아하거나, API통신 등을 통해 받아온 데이터를 타입에 따라 다른방식으로 처리해야할 때 씀
pay<10은 왜 boolean으로 출력이 안 될까..? false로 나올 거면 굳이 typeof를 쓸 이유가 없는데..
하긴 pay<10 자체가 딱봐도 boolean인데 tpeof를 쓰는 거 자체가 이상하긴하군
여기서 object는 객체형이라는 뜻. 뒤에서 따로 다룰 거지만~ 일단 null은 객체가 아니다
이는 자바스크립트 초기버전의 오류이다 하위호환성을 유지하기 위해 수정하지 않는다고 한다
대화상자
alert prompt confirm
alert()
확인을 눌러야 없어지는 팝업창이 뜬다!
alert('공지사항을 확인해주세요'); 로 입력해도 똑같이 나옴
prompt()
prompt('좋아하는 영화제목은?'); 도 똑같이 출력되긴함
이 둘을 잘 활용하면
이렇게 사용가능하다
또한 prompt에서
이렇게 쉼표를 두고 두 값을 입력하면
뒤의 값은 입력창에 디폴트값으로 뜬다.
confirm()
alert와 다른 점은 취소 버튼이 있다는 것.
확인 = true
취소 = false 로 출력된다
대화상자의 단점은
1. 창이 떠있는 동안 기존의 스크립트는 일시정지된다
2. 창의 위치와 모양을 정할 수 없음(스타일링x 그냥 브라우저의 스타일대로)
->그래서 html과 css로 많이들 만듦, 그러나 대화상자가 빠르고 간단한 장점 덕분에 많이 쓰임
형변환(Type conversion)
짠
이렇게도 활용해 보았다 수학100점 영어80점을 입력하고 나니
오 생각보다 점수가 높게 나왔다 하버드 정도는 갈 수 있을 거 같다
왜 이런 터무니없는 결과값이 나왔을까?
이는 점수로 입력한 "100"과 "80"을 문자로 인식했기 때문이다
그렇기 때문에 math + eng = 10080이 되었고 2로 나누고 나니 5040이 된 것..
근데 문자형이라면서 왜 나누기 2는 정상적으로 작동되었을까
이는 자동형변환 때문이다.
자바스크립트는 컴파일 과정없이 실행과 동시에 해석을 하는 인터프리터 언어이기 때문에 코드가 실행되는 과정에서 상황에 따라 값의 타입이 유연하게 바뀔 수도 있는 것이다
그래서 위와같은 경우에는 자동형변환을 해주어야한다!
String()
문자형으로 변환
String 대문자로 !
number()
숫자형으로 변환. 보통 문자형인 값에 많이 쓰인다
true = 1 , false = 0 임을 알아두자
Boolean()
false로 나오는 값을 알아두면 된다
위에서 보았듯이 0 = false이다 그리고 그 외에 부정적인 느낌의(?) 빈문자열("") null undefined NaN 등이 false로 출력된다.
이렇게 세가지의 형변환(type conversion)을 알아보았다.
처음의 문제는 이렇게 해결할 수 있다
그리고 주의할 점 몇가지 !
Number(null) // 0
Number(undefined) // NaN
이건 그냥 외우자
Boolean(0) // false
Boolean('0') // true
Boolean("") // false
Boolean(" ") // true
연산자(Operators)
+ _ * / %
여기서 %를 잘 활용하면 유용하게 쓰일 수 있다.
홀수: X%2= 1
짝수: Y%2= 0
여기서 더 나아가,
어떤 값을 넣어도 5미만의 결과를 얻고 싶다?
X%5 = 0~4 사이의 값만 출력
마찬가지로
Y%6= 0~5
Z%7= 0~6
...
거듭제곱은 **로
2**3 = 8
date = date +5; 는 간단하게 date += 5; 로 쓰면 된다.
- / * % 도 똑같이 활용할 수 있다.
증가연산자, 감소연산자
++변수를 해주면 1씩증가
순서 바뀌면 안 된다. num++로 쓸 경우 결과는 똑같이 5가 나온다. 이렇게 되면 증가하기 전 값을 result에 넣어버리기 때문
반대로, --를 해주면 1씩 감소하게 된다
비교 연산자, 조건문
우리가 자주 쓰는 부등호는 자바스크립트에서, 아래 노란색과 같이 쓰인다.
a = 2 // a에 2라는 값을 할당
a == 2 // a는 2와 같다
위와 같이 결과값은 true or false로 출력된다.
이때, 동등연산자(==)에서 특이한 점이 발견된다.
문자와 숫자를 구분하지 않는 다는 것
여기서 일치연산자(===)를 써주면 타입까지 구분을 해준다.
if문
코드가 한줄 뿐이면 중괄호{} 없이도 잘 작동하지만, 코드의 가독성과 통일성을 위해 꼭 써주는 것이 좋다.
이는 좀 더 간단하게 아래와 같이 작성할 수 있다.
그런데 선택지를 더 주고 싶을 수 있다. 그럴 땐 if , else if, else 의 순서를 기억하자
논리연산자
- || (or)
하나라도 true면 true 모두 false 일때만 false를 출력 - && (and)
모든 값이 true면 true, 하나라도 false면 false - ! (not)
true면 false, false면 true. 즉, 반대값을 출력
or와 and의 차이는 예문을 들어보면 이해가 쉽다.
화사는 여성이거나(or) 미국가수이다. // true
화사는 여성이고(and) 미국가수이다. // false
or는 첫번째 true를 발견하면 평가를 멈춘다.
화사는 여성이거나, 미국가수이거나, 아이돌이거나 .. ..
and는 첫번째 false를 발견하면 평가를 멈춘다.
화사는 여성이고, 미국가수이며, 아이돌인 동시에..
그래서 평가문을 작성할 때는, 가장 좁은 범위를 포함하는 조건을 먼저 배치하는 순서로 작성하는 것이 좋다.
<채용문>
고졸이상이고 운전면허가 있으며 토익 850이상인 사람.
이는
-> 토익850점이상이며, 운전면허를 가진 고졸학력자. 라고 작성하는 게 효율적이다.
첫번째 조건에서 대부분의 지원자를 걸러낼 수 있으니 시간절약과 성능최적화에 좋다.
이제 어떻게 쓰이는지 보자
|| (or)도 같은 방법으로 쓸 수 있다.
! (not)을 사용해 보자
조건을 제시한 뒤 그게 아닌 경우에만 정보를 출력한다.
!(not)도 역시 else를 사용할 수 있지만 그럼 굳이 not 조건문을 쓸 필요가 없는 경우가 많다.
어떤 조건문에 어떤 연산자가 효율적일지 생각하고 쓰자 !
우선순위
and가 or보다 높다.
괄호를 이용해 맥락에 따라 묶어주도록 하자
처음엔 자꾸 TypeError: Assignment to constant variable. 가 떠서 당황했는데
이는 변경되는 값을 const로 선언해서였다..
const -> let 오류해결 !
반복문
for, while, do while
for
for(begin, condition, step) {body); 로 구분된다.
위의 예문으로 살펴보면
- begin : i = 0 : 반복문에 진입할 때 한 번만 실행된다.
- condition : i < 5 : 반복할 때마다 제일 첫번째로 확인. false면 반복문을 멈춘다.
- body : condition이 truthy인 동안엔 계속 실행된다.
- step : body가 실행된 후에 실행
위의 예문에 console.log(i);를 대입하면
0 1 2 3 4 가 출력된다. (5번에 나눠서)
while
let 반복을 위한 초기값 설정;
while(condition){body; step;}
위의 경우 i=0=false가 되어 자동으로 반복이 끝나게 된다.
do .. while
while 반복문에서 conditon을 맨 아래로 옮기고 싶을 때 씀.
대다수의 상황에선 while을 쓴다.
do while 문법은 조건이 truthy인지 아닌지 상관없이 최소한 한번이라도 실행하고 싶을 때만 쓴다
그 예로 아래에 극단적인 예문이 있다.
let 반복을 위한 초기값 설정;
do{body; step;} while (condition)
위의 예시를 보면 condition엔 애초에 부합할 수 없는 값으로 시작을 한다. 하지만 while 전에 먼저 do가 실행되기 때문에 0이란 값이 나온다.
break & continue
break: 반복문을 멈추고 나옴
continue: 멈추고 다음 반복으로 점프
예문을 통해 알아보자
while(true)를 쓸땐 영원히.. 무한한.. 반복 속에 갇힐 수도 있으니 조심해야한다.
'계속할까요?'를 묻는 confirm 창이 뜬다. 확인을 누르면 계속 뜨고 !answer, 즉 취소를 누르게 되면 반복이 멈춘다.
continue를 보기전에 아래 예문을 먼저보자
이 조건문을 실행하면 아무것도 출력되지 않는다. 처음부터 false가 나와버리기 때문
이제 여기에 {continue;}를 넣어보자
왜 이런 결과값이 출력될까?
우선 continue는 if문이 true일때는 continue를 실행하고, false일 땐 다음에 오는 콘솔을 찍게된다.
즉, i%2에 홀수를 대입하면 if(1), 즉 true가 되어 continue만 찍고 다음 step으로 넘어가게 되는 것
만약 홀수값만 얻고싶다면 console.log(i+1)을 대입해주면 된다.
switch
if else문으로도 충분히 작성할 수 있긴하다.
그러나 케이스가 다양할 경우엔 간결하게 작성할 수 있는 장점이 있다.
예시를 들어보자
펭귄이라고 대답해보았는데...
펭귄과 펭귄 아래의 모든 결과값을 출력해버렸다
switch는 break를 만나기 전까지의 모든 케이스를 실행하기 때문이다
이렇게 해결 !
만약 입력값이 case 중에 없다면?
if문일 땐 else를 넣어주겠지만, 여기서는 default를 쓸 수 있다
간단합니다.
또 만약, 위와 같이 case에 대한 결과값이 같다면
이렇게 묶어서 쓸 수 있다.
함수(function)
하나의 로직을 재실행 할 수 있도록 하며, 유지보수에도 효율적이다.
매개변수가 여러개면 (name1, name2, name3) 처럼 ,로 추가할 수 있다.
매개변수는 있을수도, 없을 수도 있다. 아래의 예문을 보자
여기서 (today)는 매개변수고, 그 자리에 대입된 'Monday'는 인자이다.
앞에서 배운 if문으로 매개변수가 있을 때와 없을 때 모두 정상출력이 되도록 만들어보았다
if 트루의 body는 이렇게도 쓸수 있다
function 속에서 만들어진 변수는 중괄호 밖에선 쓸 수 없다
위의 씨몽키 예문의 msg를
console.log(msg); 로 출력하려했지만 에러가 났다.. 이를 지역변수(<->전역변수)라고 한다
function 속의 let msg가 함수 밖에서는 전혀 영향을 미치지 않는 걸 볼 수 있다.
전역변수인 msg는 함수밖에서 쓰여졌어도 , 함수에 적용될 수 있다.
전역변수가 많아지면 관리가 힘들어지므로, 가능하면 함수에 특화된 지역변수를 쓰도록 한다.
이제 function에 if를 지우고 or을 한 번 써보자 !
let newName = name or(=name값을 받지 않았을 때, 즉 name이 false일 때 ->) "friend";
쉽죠? 혹은 !
default value를 주는 방법도 있다.
(name = 'default value') 로 설정하여, name이 없을 땐 디폴트값이 반환된다.
return
돌아다니는 예문들마다 죄다 function add(num1, num2) 이런 식으로 해놔서 처음엔 함수명이 꼭 add여야만 되는 건줄 알았다
함수에서 return 명령문에 도달하면 함수의 실행은 그 지점에서 중단되고,
값을 제공한 경우는 함수를 호출한 곳에 그 값을 반환한다. 이때 값을 명시하지 않으면 undefined를 반환합니다.
함수표현식(function expressions), 화살표함수
우리가 앞서 만들던 함수는 일반적인 프로그래밍 언어에서의 함수 선언과 비슷한 형식인
함수 선언문(function declarations)이다. 이번에 알아볼 함수표현식은 유연한 자바스크립트 언어의 특징을 활용한 선언 방식이다.
함수 표현식을 만들어 보자
우선, 이름이없는 함수선언문을 만들어보자
여기에 변수를 선언해서 함수를 할당해준다.
이것이 함수표현식이다. 함수를 호출하는 방법은 똑같다.
sayHello();
작성하는 방법 외에도 차이점이 있다.
함수선언문은 아래와 같이 함수를 어디서든 호출 가능하다
자바스크립트는 위에서 아래로 한줄씩 차례로 읽고, 즉시 결과를 반환하는 인터프리터언어이다.
어떻게 저 코드가 실행됐을까?
이는 자바스크립트 내부 알고리즘이 실행 전 초기화단계에서 모든 함수선언문을 찾아서 생성해놓기 때문이다.
그래서 함수의 사용가능 범위가 코드위치보다 위로 올라갈 수 있는 것이다. 이를 호이스팅이라고 한다.
호이스팅(hoisting)은 코드를 실행하기 전 변수선언/함수선언을 해당 스코프의 최상단으로 끌어올리는 것이 아니라 끌어올려진 것같은 현상을 말한다
함수 표현식은 코드에 도달하면 생성된다. 그렇기 때문에 그 이후에만 호출해서 사용할 수 있다.
언뜻 들으면 함수선언식을 쓰는 게 유용해보이지만 함수표현식엔
- 클로져로 사용
- 콜백으로 사용 (다른 함수의 인자로 넘길 수 있음)
위와같은 장점이 있다. 자세한 건 이후에 알아보자!
+
위와같이 이름없는 함수를 만들고 그 함수자체를 ()로 감싸서 바로 호출까지하는, (함수)(); <<이런 형태의 함수를 익명함수라고 한다. 이런 게 있다 정도만 기억
화살표함수(arrow function)
함수를 보다 간결하게 작성하는 방법
바로 예시를 들어 알아보자
1. 함수선언식이 있다.
2. 우선 function은 그냥 날려준다.
3. 함수명에 변수를 선언한다. 그리고 매개변수와 body는 화살표로 이어주면 끝
4. return 또한 생략가능하다. return생략후 {}를 ()로 바꿔준다. ( 만약 코드가 여러줄이면 {} )
그리고 코드 본문이 한 줄일때는 ()까지도 생략할 수 있다. 그럼 완성!
위와같이 매개변수가 한개면 매개변수를 감싼 ()도 생략할 수 있다.
만약, 매개변수가 없는 함수라면 괄호를 생략할 수 없다!
ex) let showError = () => alert('error');
객체(Object)
배열과 함께 참조 자료형에 속하는 자료형.하나의 데이터 형태에 여러개의 데이터를 표현하기 위해 사용
키(key)에 띄어쓰기가 있을 땐 문자열로 감싸주면 된다 ex) "science score"
각 프로퍼티는 쉼표로 구분. 마지막 프로퍼티엔 쉼표가 없어도 되지만 붙여주는 게 수정 이동 삭제에 용이하다.
객체는 {} 마지막에 ;을 생략하는 경우가 많지만 문법적 일관성을 위해 붙여주는 게 좋다.
이제 객체에 접근, 추가, 삭제하는 방법을 알아보자.
접근에는 두가지 방법이 있다. 점 연산자와 대괄호 연산자.
key에 띄어쓰기가 있을땐 대괄호 연산자만 가능
프로퍼티의 존재 여부를 확인하는 방법은 아래와 같다
무조건 따옴표 안에 넣어줘야한다는 점! 그렇지 않으면 무조건 false로 나온다
function으로 객체를 생성한는 방법도 있다
여기서 name: name 과같이 key와 value가 같으면
name 이라고만 써도 된다. hobby:football은 고정값
이렇게 나온다는데 내가 하면 첫줄부터 에러만 뜬다.. 계속 붙잡고 있을 순 없으니 일단 넘어가자
for in
객체의 key와 value정보도 불러와서 확인할 수 있다.
객체(Object) - method/this
앞서 보았듯 객체는 property(key+value)들의 집합니다. 프로퍼티 값이 함수인 경우, 일반함수와 구분하기 위해 method라고 부른다
: function은 생략해서 아래와같이 사용이 가능하다
객체와 메서드의 관계
우선, 객체 내의 다른 프로퍼티를 나타내는 메서드를 만들어보자
여기서 ${user.name}대신 ${this.name}이라고 쓰는 게 안전하다. 여기서 this는 그 프로퍼티가 속한 객체를 의미한다.
this를 안 쓰고 객체명을 쓰면 어떤 문제가 발생할까? 다음의 경우를 보자
이렇게 에러가 발생한다. user가 null이 되어서 user.name 자체가 읽혀질 수 없게 된 것이다.
여기서 user.name 대신 this.name을 써주면 문제없이 "Hello I'm Jane"이 출력된다.
화살표함수로 작성하면 this는 윈도우전역객체를 가리키게 되기때문에 this는 화살표함수로 쓰지 않도록 한다.
배열(Array)
순서가 있는 리스트
주의할 점은 [0]부터 시작한다는 것이다. 또한, 배열은 문자뿐만 아니라 숫자, 객체, 함수 등도 포함될 수 있다.
배열은 아래와 같이 수정이 가능하다.
배열의 길이도 알 수 있다
push() : 배열 뒷부분에 추가
pop() : 배열의 마지막 요소만 제거
배열 앞부분에서의 제거/추가는 shift/unshift
배열을 쓰는 가장 큰 이유 중 하나는 반복을 위해서이다 배열의 길이만큼 반복하려면?
첫째로는 for문이 있다. 아직 잘 모르겠으니 강의예문을 일단 첨부한다..
두번째는 for of 이다. for in 과 헷갈리지 않도록 한다. for in도 쓸 순 있지만 for of가 효율적
여기까지 아~주 간단히 자바스크립트를 공부해보았다 핫
이제부턴 깊게 공부해보자 !
(수정)
고민해본 결과 난 웹이 아닌 앱개발을 목표로 하기에 html, css, javascript는 여기까지만 하는 걸로 !