전역변수
let x = 10; // 함수 밖에서 선언
function printX(){
console.log(x); // 10
}
console.log(x)
printX();지역변수
function printY(){
let y = 10; // 함수 안에서 선언
console.log(y); //정상 작동
}
console.log(y) //함수 외부 error
printY();화살표 함수
ES6 신문법임!
기본적인 화살표 함수
let arrowFunc01 = (x,y) => {
return x+y
}내부 로직이나 매개 변수가 한 줄 일 때 가능한 화살표 함수
function testFunc(x){
return x;
}let arrowFunc02 = (x,y) => x + y //함수 내부 로직이 한 줄 일 때만 사용 가능let arrowFunc03 = x => x //매개변수가 1개이고 내부 로직이 한 줄이면 괄호도 생략 가능.조건문
if 문
기본 구조
let x = 5;
if (x < 10){
console.log('x는 10보다 작습니다.') // x는 10보다 작습니다.
}ex) y의 길이가 5보다 크거나 같으면 길이를 반환해주자.
let y = 'hello world';
if (y.length >=5){
console.log(y.length); // 11
}if-else문
let x = 10;
if (x>0) { //조 건에 부합하면
console.log('x는 양수입니다')
} else{ // 그렇지 않으면
console.log('x는 음수입니다')
}if-else if-else문
let x = 10;
if(x<0){
console.log('1')
}else if(x>=0 && x<10){ // 논리곱. 두 개 다 만족할 시.
console.log('2')
}else {
console.log('3')
}switch 문: 변수의 값에 따라, 여러 개의 경우 중 하나를 선택
default => if 문의 else 같은 기능
break문이나 continue 꼭 쓰기!
let fruit = '바나나';
switch(fruit){
case "사과":
console.log('사과')
break;
case "포도":
console.log('포도')
break;
case "배":
console.log('배')
break;
default:
console.log('아무것도 아닙니다.') //아무것도 아닙니다
break;
}조건문 중첩
let age = 20;
let gender = '여성';미성년자 구분
if(age >= 18){ //18세 이상 조건 만족 시
if(gender === '여성'){
console.log('성인 여성입니다')
} else {
console.log('성인 남성입니다')
}
} else { // 18세 이상 조건 불만족 시
if (gender === '여성'){
console.log('미성년 여성입니다')
} else{
console.log('미성년 남성입니다')
}
}조건부 실행
and(&&) 조건
let x = 10;
x > 0 && console.log('x는 양수입니다.') //앞 조건이 만족이 되면 뒷문장 실행삼항 연산자와 단축평가
or (||)조건
let y; // undefined
let z = y || 20; // y가 undefined이면 20으로 할당
console.log(z);falsy, truthy
명시적으로 true/false는 아니지만 조건식에서 true/false로 간주되는 결과가 나오는 값들.
falsy
falsy, false (논리적 거짓), 0, 문자열, null, undefined, NaN
truthy
truthy, true (논리적 참), 0을 제외한 모든 숫자, 빈 문자열을 제외한 모든 문자열, 모든 객체, 배열과 같은 자료구조, 함수
object(객체) key:value
하나의 변수에 여러개의 값을 넣을 수 있음
객체 생성 방법
기본적인 객체 생성 방법
let person = {
name : '홍길동',
age : 20
gender: '남자'
};생성자 함수를 이용한 객체 생성 방법 (찍먹)
function person(name, age, gender){
this.name = name;
this.age = age;
this.gender = gender;
}
let person1 = new person("홍길순", 30, '여자');
let person2 = new person("홍길동", 20, '남자');
// 객체접근방법
console.log(person2.name); // 홍길동객체 메소드
let person = {
name : '홍길동',
age : 20,
gender: '남자'
};Object.keys() : key를 가져오는 메소드
let keys = Object.keys(person);
console.log(keys); // [ 'name', 'age', 'gender' ]Object.values() : values를 가져오는 메소드
let values = Object.values(person);
console.log(values); //[ '홍길동', 20, '남자' ]Object.entries() : key와 values를 묶어 배열로 만든 배열
let entries = Object.entries(person);
console.log(entries); //[ [ 'name', '홍길동' ], [ 'age', 20 ], [ 'gender', '남자' ] ]Object.assign(붙여넣기 할 객체, 복사할 개체) : 객체 복사
let newPerson = {};
Object.assign(newPerson, person, {age:31}); // {}안에 있는 값을 기존값에서 {}내용으로 바꿔줘
console.log(newPerson); // { name: '홍길동', age: 31, gender: '남자' }객체는 내용이 같아도 같지 않기 때문에 JSON.stringify() 함수를 사용하여 객체를 문자열로 변환한 후, 문자열로 변경하면 같게 됨.
##### 객체 병합 (...)
let person1 = {
name: "홍길동",
age: 30
};
let person2 = {
gender: "남자"
};
let mergedPerson = {...person1, ...person2};
console.log(mergedPerson); // { name: "홍길동", age: 30, gender: "남자" }array (배열) : 여러 개의 데이터를 저장하는 시퀸스 타입
생성
기본 지정 []로 감싸 선언
let number = [5, 4, 2, 3, 1];크기 지정
let number1 = new Array(5);
console.log(number1); // [ <5 empty items> ]
console.log(number1.length); // 5요소접근 index로 접근
console.log(fruits[2]); //오렌지배열 메소드 (쉬팝! 제거)
push : 마지막 요소 추가
let fruits = ['사과', '바나나', '오렌지'];
fruits.push("포도");
console.log(fruits); // ['사과', '바나나', '오렌지', '포도']pop : 마지막 요소 제거
let fruits = ['사과', '바나나', '오렌지'];
console.log(fruits);
fruits.pop();
console.log(fruits); // ['사과', '바나나']shift : 맨 앞 요소 제거
let fruits = ['사과', '바나나', '오렌지'];
fruits.shift();
console.log(fruits); //['바나나', '오렌지'];unshift : 맨 앞 요소 추가
let fruits = ['사과', '바나나', '오렌지'];
fruits.unshift('포도');
console.log(fruits); //['포도', '사과', '바나나', '오렌지']splice : 시작점부터 n개 제거 후 요소 추가
let fruits = ['사과', '바나나', '오렌지'];
fruits.splice(1, 1, "포도");
console.log(fruits); //['사과', '포도', '오렌지']slice : n부터 n-1까지 잘라서 보여줌
let fruits = ['사과', '바나나', '오렌지'];
let slicedFruits = fruits.slice(1, 2);
console.log(slicedFruits); // ['바나나']배열
콜백 함수 : 매개변수 자리에 함수를 넣음.
forEach
let numbers = [2, 4, 3, 1, 5];
numbers.forEach(function(item){
console.log(item) // 2 \ 4 \ 3 \ 1 \ 5
});map : 배열을 가공해서 새로운 배열을 생성.
return이 있어야 함. 원본 배열의 길이만큼이 return.
let numbers = [2, 4, 3, 1, 5];
let newNumbers = numbers.map(function(item){
return item * 2;
});
console.log(newNumbers); //[ 4, 8, 6, 2, 10 ]filter : 조건을 주어 필터링함.
return이 있어야 함.
let numbers = [2, 4, 3, 1, 5] ;
let filteredNumbers = numbers.filter(function(item){
return item === 4;
});
console.log(filteredNumbers); // [ 4 ]
find : 조건 만족하는 것중 처음 요소만 찾아 줌.
let numbers = [2, 4, 3, 1, 5];
let resultNumbers = numbers.find(function(item){
return item > 3;
})
console.log(resultNumbers); // [4]반복문
배열과 for문은 세트임
for문 기본 구조
for(초기값; 조건식; 증감식)
for (i=0; i<10; i++){ //9까지 출력 되지만 10까지 증감하고 끝.
console.log(i);
}const arr = ['일', '이', '삼', '사', '오'];
for (let i = 0; i < arr.length; i++){
console.log(i);
console.log(arr[i]);
}ex) 0부터 10까지 수 중에서 2의 배수만 console.logfh 출력하는 예시
for (i=1; i<11; i++){
if(i % 2 === 0){
console.log(i);
}
}for ~in문: 객체 속성을 출력하는 문법
let person = {
name : 'choi',
age : 27,
gender : 'male'
}
person[key]
for (let key in person){
console.log(key +' : '+ person[key]);
}while : 증감식은 while 문 안에.
let i = 0;
while (i<10){
console.log(i)
i++;
}ex) 3 초과 100미만 숫자 중 5의 배수인 것만 출력하는 문제
let i = 3;
while ( i<100){
if(i % 5 === 0){
console.log(i) // 5, 10, 15, ... , 95
}
i++;
}do ~ while :조건에 만족하지 않아도 한 번은 실행이 됨.
let i = 0;
do {
console.log(i); // 0
i++;
} while(i>10)continue: : 아래 문장들은 건너띄고 반복문으로 돌아감.
for (let i = 0; i<=10; i++){
if (i === 5){
continue;
}
console.log(i); // 0, 1, 2, 3, 4, 6, 7, 8, 9, 10
}break : 반복문을 탈출.
for (let i = 0; i<=10; i++){
if (i === 5){
break;
}
console.log(i); // 0, 1, 2, 3, 4
}Realization
남은 공부를 마저 하고 23시 40분 쯤 출간하기를 눌렀는데 velog 오류로 날아가버렸다.
산책 다녀와서 다시 작성하고 지금은 3시..
배운게 너무 많아 재미는 있는데 죽을 거 같다. 내용은 그럭저럭 이해가 되는데 숙제를 하나도 모르겠어서 멘붕이 왔다.
2배속으로 한 번, 정속으로 타이핑 하면서 두 번, 블로그 정리하면서 답만 내가 적어가며 세 번.
내일은 뭔가 숙제를 풀 수 있을 거 같은 느낌이 든다.. 나.. 성장했을지도.
내일은 약속이 있어 2주차 배속으로 듣고 개인과제 구상 정도만 해봐야겠다.
