console 탭: 개발자들이 쉽게 자바스크립트 테스트 해볼 수 있도록 만든 것. (새로고침하면 어차피 없어짐)
- 방법: "마우스 오른쪽 클릭 → 검사 → console"
console.log(변수) 는, 콘솔 창에 괄호 안의 값을 출력! 이건 코드 짜면서 계속 맞는 방향으로 가는지 체크하기 좋음.
<Console 활용>
let a = 1
let b = 2
a+b // 3
a/b // 0.5
let first = 'Bob'
let last = 'Lee'
first+last // 'BobLee'
first+' '+last // 'Bob Lee'
first+a // Bob1 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.
변수명 (let ____ = )의 경우 쉽게 알아볼 수 있는 걸로 설정!
단, snake case 형태 또는 camel case 형태로 쓰기.
let first_name = 'bob' // snake case라고 합니다.
또는,
let firstName = 'bob' // camel case라고 합니다. 회사마다 규칙이 있죠.
과 같이, 쉽게 알아볼 수 있게 쓰는 게 중요합니다.
다른 특수문자 또는 띄워쓰기는 불가능합니다!
List 선언하는 법!
let b_list = [1,2,'hey',3]
Dictionary 선언하는 법!
let b_dict = {'name':'Bob','age':21}
List + Dictionary 합친 버전:
names = [{'name':'bob','age':20},{'name':'carry','age':38}]
// names[0]['name']의 값은? 'bob'
// names[1]['name']의 값은? 'carry'
new_name = {'name':'john','age':7}
names.push(new_name)
// names의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
// names[2]['name']의 값은? 'john'
참고로 list에 새로운 걸 추가하고 싶을 경우, .push (____) 를 써보자.
예시)
👉딕셔너리를 활용하면 이렇게 고객 별로 정보를 묶을 수 있음
let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'};
let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};
👉그리고 순서를 나타내기 위해 리스트를 사용하면 이렇게 깔끔해짐.
let customer = [
{'name': '김스파', 'phone': '010-1234-1234'},
{'name': '박르탄', 'phone': '010-4321-4321'}
]
*고객이 새로 한 명 더 오더라도 .push 함수를 이용해 간단하게 대응 가능!
이메일 주소를 split 하고 싶을 땐?
**또, 특정 문자로 문자열을 나누고 싶은 경우**
let myemail = 'sparta@gmail.com'
let result = myemail.split('@') // ['sparta','gmail.com']
result[0] // sparta
result[1] // gmail.com
let result2 = result[1].split('.') // ['gmail','com']
result2[0] // gmail -> 우리가 알고 싶었던 것!
result2[1] // com
myemail.split('@')[1].split('.')[0] // gmail -> 간단하게 쓸 수도 있다!
<function 함수 만들기>
기본틀:
// 만들기
function 함수이름(필요한 변수들) {
내릴 명령들을 순차적으로 작성
}
// 사용하기
함수이름(필요한 변수들);
if, else if, else if, else if else:
function is_adult(age){
if(age > 20){
alert('성인이에요')
} else if (age > 10) {
alert('청소년이에요')
} else {
alert('10살 이하!')
}
}
is_adult(12)
AND 조건과 OR 조건:
// AND 조건은 이렇게
function is_adult(age, sex){
if(age > 20 && sex == '여'){
alert('성인 여성')
} else if (age > 20 && sex == '남') {
alert('성인 남성')
} else {
alert('청소년이에요')
}
}
// 참고: OR 조건은 이렇게
function is_adult(age, sex){
if (age > 65 || age < 10) {
alert('탑승하실 수 없습니다')
} else if(age > 20 && sex == '여'){
alert('성인 여성')
} else if (age > 20 && sex == '남') {
alert('성인 남성')
} else {
alert('청소년이에요')
}
}
is_adult(25,'남')
<반복문 (for문)>
for (let i = 0; i < 100; i++) {
consol.log(i) ;
}
반복문의 원리:
for (1. 시작조건; 2. 반복조건; 3. 더하기) {
4. 매번실행
}
1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
와 같은 순서로 실행됩니다.
i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.
반복문은 보통 딕셔너리가 들어간 리스트와 함께한다. :)
let ___ = [ { 어쩌구 저쩌구} ]
for (let i = 0 ; i < ____.length ; i++) {
console.log(_____[i]) ;
}
예시)
(딕셔너리 열 위치가 이상한 점은 복사오류임)
let scores = [
{'name':'철수', 'score':90},
{'name':'영희', 'score':85},
{'name':'민수', 'score':70},
{'name':'형준', 'score':50},
{'name':'기남', 'score':68},
{'name':'동희', 'score':30},
]
for (let i = 0 ; i < scores.length ; i++) {
console.log(scores[i]);
}
// 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,
서울시 따릉이 현황 : 자전거(parkingBikeTotCnt)가 5개 이하인 정류장의 이름 출력하기
for (let i = 0; i < bikes.length; i++) {
if (bikes[i]['parkingBikeTotCnt'] <= 5) {
let station = bikes[i]['stationName'];
console.log(station);
}
}
위 내용을 유용하게 쓸 수 있도록 함수로 만들면?
function show_names(num){
for (let i = 0; i < bikes.length; i++) {
if (bikes[i]['parkingBikeTotCnt'] <= num) {
let station = bikes[i]['stationName'];
console.log(num + "대 이하 정류장 : " + station);
}
}
}
// 이러면 아래와 같은 것이 가능!
show_names(10) // 10개 이하 주차된 정류소만 출력!
show_names(5) // 5개 이하 주차된 정류소만 출력!