본 과정은 내일배움캠프 웹개발 사전캠프로 지급받은 강의의 내용을 바탕으로 정리한 글입니다.
특정 조건이 해당하는 경우 하위의 로직을 제어 할수 있음
1. if문
let x = 10;
if(true 또는 false)){
//실행할 코드
}
let y = "hello world"
if(y.length >= 5){
console.log(y.length);
}
let z = 10;
if(z > 0){
console.log('x는 양수입니다.');
} else{
console.log('x는 음수입니다.');
}
☞ 참인 경우 윗줄이 출력되고 참이 아닌경우 아래줄이 출력됨
if(조건1){
}
else if(조건2){
}
else{
}
let fruit = "사과";
switch (fruit) {
case "사과":
console.log("사과입니다.");
break;
case "바나나":
console.log("바나나입니다.");
break;
case "키위":
console.log("키위입니다.");
break;
default:
console.log("아무것도 아닙니다.");
break;
}
☞ 변수의 값에 따라 여러개의 경우(case) 중 하나를 선택하는 조건문
☞ case문을 쓸때 꼭 break를 명시해줘야한다. (하지않으면 다 실행됨)
☞ defalut는 아무것도 해당이 안될때 출력됨
let age = 20;
let gender = '여성';
//미성년자 구분
if(age >= 18){
//console.log('성인입니다.');
if(gender = '여성'){
console.log('성인 여성입니다.');
}
else{
console.log('성인 남성입니다.');
}
}
else{
if(gender = '여성'){
console.log('미성년 여성입니다.');
}
else{
console.log('미성년 남성입니다.');
}
//console.log('미성년입니다.');
}
let x = 10;
(x > 0) && console.log('x는 양수입니다.'); // if문을 축약할 수도 있음
let y; //선언은 되었으나 할당 안됨
let z = y || 20; //y에 할당이 되어있지않으면 20을 기본값으로 세팅해줘.
console.log(z);
true에 가까운지 false에 가까운지 알 수 있음.
if (0) {
console.log("hello");
}
if ("") {
console.log("hello");
}
if (null) {
console.log("hello");
}
if (undefined) {
console.log("hello");
}
if (NaN) {
console.log("hello");
}
if (false) {
console.log("hello");
}
if (true) {
console.log("hello"); //이것만 true
}
☞ true를 제외하고는 모두 false라서 실행이 안됨
key value pair로 이루어져있음.
하나의 변수에 여러개의 값을 넣을 수 있음.
let person = {
name : '홍길동',
age : 30,
gender : '남자',
}
function Person(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
let person1 = new Person("홍길동", 30, "남자");
let person2 = new Person("홍길순", 25, "여자");
☞ 객체를 한번에 많이 생성할 수 있는 장점이 있음.
console.log(person.name);
☞ 이런식으로 이름 출력이 됨.
let keys = Object.keys(person);
console.log(keys);
☞ ["name", "age", "gender"]으로 출력됨
let values = Object.values(person);
console.log(values);
☞ ["홍길동", 30, "남자"]로 출력됨
let entries = Object.entries(person);
console.log(entries);
let newPerson = {};
Object.assign(newPerson ,person);
console.log("newPerson =>", newPerson);
☞ newPerson => { name: '홍길동', age: 30, gender: '남자' } 로 출력됨
let newPerson2 = {};
Object.assign(newPerson2 ,person, **{age : 31}** );
console.log("newPerson =>", newPerson2);
// { name: "홍길동", age: 35, gender: "남자" }
☞ newPerson => { name: '홍길동', age: 31, gender: '남자' } 로 출력됨
let person1 = {
name: "홍길동",
age: 30,
gender: "남자"
};
let person2 = {
name: "홍길동",
age: 30,
gender: "남자"
};
console.log(person1 === person2); // false
☞ true가 아닌 false가 나온느 이유는 객체는 별도의 메모리에 저장하고 별도 공간에 대한 주소를 저장하기 때문에 불일치가 뜸, value를 저장하는것이 아님
그럼에도 불구하고, 꼭 비교를 하고싶다면 문자열화를 시키는 방법이 있음
console.log(JSON.stringify(person1) === JSON.stringify(person2)); // true
☞ 문자열로 변환을 시키기 때문에 동일(true)하다고 나올수 있음.
각각 key가 다를때 모두 해체해서 합치는 방법이 있음.
...(스프레드 오퍼레이터)을 이용하면 됨.
let person1 = {
name: "홍길동",
age: 30
};
let person2 = {
gender: "남자"
};
let mergedPerson = {...person1, ...person2};
console.log(mergedPerson); // { name: "홍길동", age: 30, gender: "남자" }
let fruits = ["사과", "바나나", "오렌지"];
let numbers = new Array(5);
☞ 배열의 크기를 지정할 수 있음.
console.log(fruits[0]); // "사과"
console.log(fruits[1]); // "바나나"
console.log(fruits[2]); // "오렌지"
☞ 인덱스번호를 입력하면 해당하는 순서에 있는 요소가 출력됨
let fruits = ["사과", "바나나"];
fruits.push("오렌지");
console.log(fruits);
☞ [ '사과', '바나나', '오렌지' ]로 출력됨
let fruits3 = ["사과", "바나나", "오렌지"];
fruits.pop();
console.log(fruits3); // ["사과", "바나나"]
☞ 마지막 요소가 삭제됨
javascriptCopy code
let fruits = ["사과", "바나나", "오렌지"];
fruits.shift();
console.log(fruits); // ["바나나", "오렌지"]
☞ 맨처음 요소가 삭제됨
let fruits = ["바나나", "오렌지"];
fruits.unshift("사과");
console.log(fruits); // ["사과", "바나나", "오렌지"]
☞ 맨처음 부분에 추가됨
let fruits = ["사과", "바나나", "오렌지"];
fruits.splice(1, 1, "포도");
console.log(fruits); // ["사과", "포도", "오렌지"]
☞ 시작하는 범위부터 끝나는 범위까지 지정하고 바꿀 데이터를 입력한다. 그러면 바나나라는 데이터 대신 포도로 교체됨
let fruits6 = ["사과", "바나나", "오렌지"];
let slicedFruits = fruits6.slice(1, 2);
console.log(slicedFruits); // ["바나나"]
☞ 시작범위랑 끝나는 범위만 지정하면 그 지정된 데이터가 출력됨
let numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
console.log(number);
});
매개변수에 함수를 넣는 것을 콜백함수라 부름
numbers.forEach(function(item){
console.log()})
forEach는 배열numbers의 모든 요소를 출력함
let numbers = [1, 2, 3, 4, 5];
let squaredNumbers = numbers.map(function(number) {
return number * number;
});
console.log(squaredNumbers); // [1, 4, 9, 16, 25]
☞ 기존배열을 가공해서 새로운 배열로 생산해내는 역할임, 반드시 return이 필요함.
☞ 항상 원본 배열의 길이만큼 return 됨
let numbers2 = [1, 2, 3, 4, 5];
let filteredNumbers = numbers2.filter(function(item) {
return item === 5;
});
console.log(filteredNumbers);
☞ 필터링할 조건에 해당하는 것만 출력함, 5만 출력됨
let numbers5 = [1, 2, 3, 4, 5];
let result = numbers5.find(function(item) {
return item > 3;
});
console.log(result);
☞ 리턴문을 통해 조건에 맞는것만 출력함
// 0부터 10까지 수 중에서 2의 배수만 출력하기
for (let i = 0; i < 11; i++) {
if (i >= 2) {
if (i % 2 == 0) {
console.log(i);
}
}
}
let person = { name: "John", age: 30, gender: "male" };
for (let key in person) {
console.log(key + ": " + person[key]);
}
☞ person 안의 key에 접근이 가능함
let a = 3;
while (a < 100){
if(a % 5 === 0 && a >= 5){
console.log(a);
}
a++;
}
☞ 조건이 참이면 반복한다.
do {
console.log(b);
b++;
} while (b < 10);
☞ do while문은 일단 한 번은 코드를 실행하고, 그 후에 조건식이 맞으면 반복한다.
for (let i = 0; i < 10; i++) {
if (i === 5) {
break;
}
console.log(i);
}
☞ break는 반복을 종료한다. 그래서 4까지 출력되고 종료된다.
for (let i = 0; i < 10; i++) {
if (i === 5) {
continue;
}
console.log(i);
}
☞ for문과 함께 continue문을 사용하여 5를 제외한 0부터 9까지의 숫자를 출력함
오늘의 한줄평 : 배열의 메소드 부분이 조금 어려웠지만 어느정도 개념은 잡은 것 같다.