자바스크립트 기초 문법2

화살표 함수

//기존의 함수 선언
function add(x, y) {
    return x + y;
}

//기본적인 화살표 함수
let arrowFunc01 = (x, y) => {
    return x + y
}

//한 줄로 
let arrowFunc02 = (x, y) => x + y;

 

 

조건부 실행

let x = 10;

 if (x > 0) {
     console.log("x는 양수입니다.");
 }

//and 조건(&&)
(x > 0) && console.log("x는 양수입니다.");
//위 두 코드는 같은 뜻이다.

//or 조건(||)
//삼항 연산자와 단축평가

let y;// y는 undefinde
let z = y ||20; //y가 undefinde라면 20을 넣어라

console.log(z);

falsy한 값, truthy한 값

if (0) {
    //main logic
    console.log("Hello world")
}

if ("") {
    //main logic
    console.log("Hello world")
}

if (null) { //아니 NULL이라 치면 안되네..?
    //main logic
    console.log("Hello world")
}

if (undefined) {
    //main logic
    console.log("Hello world")
}

if (NaN) {
    //main logic
    console.log("Hello world")
}

if (false) {
    //main logic
    console.log("Hello world")
}
//위에 것들은 모두 false다.


if (true) {
    //main logic
    console.log("Hello world")
}

//그래서 마지막 if문만 실행되어 Hello world가한줄만 출력된다.

객체

//1.객체 생성 방법
//1-1. 기본적인 객체 생성 방법
let person = {
    name:"홍길동",
    age:30,
    gender: "남자",
    key: true
}

//1-2.생성자 함수를 이용한 객체 생성 방법
function Person(name,age,gender){
    this.name = name;
    this.age=age;
    this.gender=gender;
}
//후자가 여러개 찍어내기 좋아보인다.

//2.접근하는 방법
console.log("1",person.name);
console.log("2",person.age);
console.log("3",person.gender);

//3.객체 메소드 (객체가 가진 여러가지 기능: Object.~~)
//3-1.Object.key() : key를 가져오는 메소드

let keys = Object.keys(person);
console.log("keys =>", keys);

let values = Object.values(person);
console.log("values =>", values);

//3-3. entries
//key와 value를 묶어서 배열로 만든 배열(2차원 배열)
let entries = Object.entries(person);
console.log("person =>", person);

//3-4.assign
//객체 복사
let newPerson ={};
Object.assign(newPerson,person,{age:31});
console.log("newPersopn =>",newPerson);

// 3-5.객체 비교
//객체의 크기는 상당히 크다->메모리에 저장할 때 별도의 공간에 저장

//person2 별도 공간에 대한 주소
let person2 = {
    name:"홍길동",
    age:30,
    gender: "남자",
    key: true
}

//person3 별도 공간에 대한 주소
let person3 = {
    name:"홍길동",
    age:30,
    gender: "남자",
    key: true
}

console.log(person2===person3);//둘은 다름  false

//stringify는 문자열화 시키다. 문자열로 바꿔서 비교하니 같다
console.log(JSON.stringify(person2)) === (JSON.stringify(person3)); //true


let person4 = {
    name:"홍길동",
    age:30,
}


let person5 = {
    gender: "남자",
}

//...:spread operator
let perfectMan={...person4,...person5};
console.log(perfectMan);
//출력:{ name: '홍길동', age: 30, gender: '남자' }

 

배열

//1.생성
//1-1. 기본 생성
let fruits=["사과","바나나","오렌지"];

//1-2. 크기 지정
let number = new Array(5);

console.log(fruits.length); //3
console.log(number.length); //5

//2.요소 접근
console.log(fruits[0]); //사과

//3.배열 메소드
//3-1.push
console.log(fruits);
fruits.push("배");
console.log("push후=>",fruits); //push후=> [ '사과', '바나나', '오렌지', '배' ]

//3-2.pop
fruits.pop();
console.log("pop후=>",fruits); //pop후=> [ '사과', '바나나', '오렌지' ]

//3-3. shift
fruits.shift();
console.log("shift후=>",fruits); //shift후=> [ '바나나', '오렌지' ]

//3-4. unshift
fruits.unshift("포도");
console.log("unshift후=>",fruits); //unshift후=> [ '포도', '바나나', '오렌지' ]

//3-5. splice
fruits.splice(1,1,"자몽"); //1번 인덱스부터 1개를 지우고 자몽을 넣어라
console.log("splice후=>",fruits); //splice후=> [ '포도', '자몽', '오렌지' ]

//3-6.slice
let slicedFruits = fruits.slice(1,2); //1번인덱스부터 2번인덱스전까지잘라서 배열을 반환해줘
console.log("slice로 가져온 배열=>",slicedFruits);//slice로 가져온 배열=> [ '자몽' ]

ForEach,map,filter,find,for~in

//1.forEach
let numbers=[1,2,3,4,5];

//매개변수 자리에 함수를 넣는 것: 콜백 함수
numbers.forEach(function(item){
    console.log('item입니다 =>'+item);
});

//2.map 
//배열의 각 요소에 대해 제공된 함수를 호출하고, 그 결과로 새로운 배열을 반환합니다.
//원래 배열은 변하지 않습니다. 항상 원본 배열의 길이만큼이 return 됩니다. 
let newNumbers = numbers.map(function(item){
    return item*2;
});

console.log(newNumbers); //[ 2, 4, 6, 8, 10 ]

//3.filter
//배열의 각 요소에 대해 제공된 함수를 호출하여, 그 결과가 true인 요소들로만 구성된 새로운 배열을 반환합니다.

let filterednumbers = numbers.filter(function(item){
    return item ===5;
})

console.log(filterednumbers); //[ 5 ]

//find
//배열의 각 요소에 대해 제공된 함수를 호출하여, 그 결과가 true인 첫 번째 요소를 반환합니다.
// 해당 요소가 없으면 undefined를 반환합니다.

let result=numbers.find(function(item){
    return item >3;
});
console.log(result);//4

//for ~ in 문
//객체의 속성을  출력하는 문법
let person = {
    name:"Jhon",
    age:30,
    gender: "male",
};

//person['key']
for(let key in person) {
    console.log(key + ":" + person[key]);
}
//name:Jhon
//age:30
//gender:male

 

오늘은 예시가 많아 주석을 달아 설명했다. c와 다르게 화살표 함수라던가 ForEach,map,filter,find,for~in 같은

처음 보는 예약어들이 많아서 생소했는데 기능자체는 파이썬에서 보던거라 모양만 기억하면 괜찮을거 같다.