오늘 한 일
- [내배캠] Javascript 문법 1주차 강의 완강
- 화살표 함수, 조건문, 객체, 배열, for문, while문
- 1주차 숙제(코딩테스트)
배운 것
스코프 및 화살표함수
1. 스코프/전역변수/지역변수
- 스코프 : 변수가 어디까지 영향을 끼칠 수 있는가?
- 전역변수/지역변수
2. 화살표 함수
- 기본적인 화살표 함수 사용
let arrow2 = (x, y) => {
return x + y;
}
let result2 = arrow2(3, 4);
console.log(result2); // 7☑️ 리턴문이 한 줄인 경우 한 줄로 사용 가능, 여러 줄일 때에는 {} 생략 불가
문
1. 조건문
-
if문/if-else문
if (true 또는 false가 나올 수 있는 조건) {}
-
if - else if - else문:
&&(and 연산자 활용)
let x = 10;
if (x < 0) {
console.log("1");
} else if (x >= 0 && x < 10) {
console.log("2");
} else {
console.log("3");
}- switch: 여러 개의 경우 중 하나 선택
let fruit = "사과"
switch (fruit) {
case "사과":
console.log("사과입니다.");
break;
case "바나나":
console.log("바나나입니다.");
break;
case "키위":
console.log("키위입니다.");
break;
default:
console.log("아무것도 아닙니다.");
}☑️ case 다음에는 ‘콜론(:)’이 올 것
☑️ case 끝에 break 넣어줄 것
-
조건문 중첩: 조건문 안에 또 다른 조건문 사용 가능
-
&&and 조건: 조건부 실행 (if문과 동일한 효과)
(x > 0) && console.log("양수입니다.");||or 조건: y가 undefined일 때 20을 출력해줘!
let y;
let z = y || 20;
console.log(z); // 202. 반복문
- for문
for(초기값; 조건식; 증감식) {}~동안(반복문)
for (let i = 0; i < 10; i++) {
console.log(i);
} // 0부터 9까지 출력- for~in문: 객체의 속성을 출력
객체이름[key]: 객체의 value에 접근하는 방법
let person = {
name: "John",
age: 30,
gender: "male"
};
for (let key in person) {
console.log(key + ": " + person[key]);
}- while문
let i = 0;
while (i < 10) {
console.log(i);
i++;
}- do~while문
let i = 0;
do {
console.log(i);
i++;
} while (i < 10);- break: for문을 깨고 밖으로 나옴
- continue: 밑으로 흐르지 않고 바로 처음으로 돌아감
객체
1. 객체 생성
- 생성자 함수를 통한 객체 생성
function Person(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
let person1 = new Person("홍길동", 30, "남자");
let person2 = new Person("홍길순", 25, "여자");2. 객체 메소드
Object.keys( )key를 가져오는 메소드Object.values( )value를 가져오는 메소드Object.entries( )key와 value를 묶어서 배열로 만든 배열Object.assign(새로운이름, 복사대상)객체 복사
let person = {
name: "홍길동",
age: 30,
gender: "여자"
}
//복사하기
let newPerson = {};
Object.assign(newPerson, person, {age: 31}); // 나이만 31로 수정하여 복사
console.log(newPerson); // { name: '홍길동', age: 30, gender: '남자' }3. 객체 병합
... spread operator, 객체 해체
let person1 = {
name: "홍길동",
age: 30
}
let person2 = {
gender: "남자"
}
// 두 개 객체 해체 후 합치기
let perfectMan = {...person1, ...person2};
console.log(perfectMan);배열
배열 메소드
push배열에 값 추가pop배열에 있던 마지막 요소 삭제shift배열에 있던 첫번째 요소 삭제unshift배열에 있던 첫번째 요소 추가splice(삭제 시작위치, 삭제 개수, 해당 위치에 삽입할 값)삭제 후 삽입
let fruit = ["사과", "바나나", "키위"];
fruit.splice(1, 2, "포도");
console.log(fruit); // [ '사과', '포도' ]slice(남길 시작위치, 끝위치)
let fruit = ["사과", "바나나", "키위"];
let slicefriut = fruit.slice(1, 2);
console.log(slicefriut); // [ '바나나' ]forEach: 콜백함수(매개변수 자리에 함수를 넣는 것)
let numbers = [1, 2, 3, 4, 5]
numbers.forEach(function (items) {
console.log(items);
})
// 1부터 5까지 출력map: 기존 배열을 가공해서 새로운 배열 생성, return이 꼭 필요
let numbers = [1, 2, 3, 4, 5]
let newNumbers = numbers.map(function (item) {
return item * 2;
})
console.log(newNumbers); // [ 2, 4, 6, 8, 10 ]filter: 조건을 설정하여 뽑아냄
let numbers = [1, 5, 3, 4, 5]
let filterNumbers = numbers.filter(function (item) {
return item === 5;
})
console.log(filterNumbers.length); // 2 (5인것의 갯수 구하기)find: 조건에 맞는 첫번째 값만 출력
let numbers = [1, 2, 3, 4, 5];
let foundNumber = numbers.find(function(number) {
return number > 3;
});
console.log(foundNumber); // 4오늘의 회고
오늘 강의 1주차를 모두 끝내고 숙제(코딩테스트)를 확인했는데, 숙제를 보고 조금 멘붕... 나 잘하고 있는 것일까? 문제를 보자마자 머리가 백지 상태가 되었다. 2주차 강의를 듣기 위해 어쩔 수 없이...답안을 봤고, 두 문제 중 한 문제는 사실 답변을 봐도 모르겠... 안배운 내용도 있고 ㅠㅠ 나 잘 하고 있는걸까??
두 번째 문제는 어제 내가 궁금해서 튜터님께 질문했던 if문과 삼항 연산자 내용이었다. 나는 당연히 if문으로 풀었는데, 답변에는 삼항 연산자로 풀이되어 있었다. 물론 둘 다 답은 같았다. 조건문 관련 문제가 나오면 if부터 생각나는건... 생각의 전환이 필요하다. 내가 봐도 삼항 연산자로 푸는게 더 간단하거든...
부트캠프를 하고 있는데, 팀원분들이 너무 좋아서 아직 프로젝트를 같이 진행한 것은 아니지만, 든든하고 의지가 많이 된다. 비전공자에 코딩을 처음 접하는 분들이 많아서 서로 느끼는 점도 공유하고 의지할 수 있어서 좋다. 다같이 화이팅!!
내일 할 일
- [내배캠] Javascript 문법 2주차 강의 완강
Frontend Engineers