[JavaScript]javascript중간 정리(koans)

 

객체 선언 

    const obj = { x: 1 };

    delete obj.x;
    //const로 선언된 객체의 경우 속성을 삭제 할수 잇다
    obj.occupation = 'SW Engineer';
    //const로 선언된 객체의 경우 속성을 추가 할수 잇다

※const 키워드를 사용하면 의도치 않은 재할당을 방지해 주기 때 문에 보다 안전하다

 

함수 호이 스팅

호이 스팅 이란 변수의 선언과 초기화를 분리한 후 선언만 코드의 최상단으로 올리는 것

(함수가 어디서 호출되더라도 출력은 같다)

function catName(name) {//함수보다 하단에 함수를 호출한 경우
  console.log("제 고양이의 이름은 " + name + "입니다");
}

catName("호랑이");

/*
결과: "제 고양이의 이름은 호랑이입니다"
*/
catName("클로이");//함수보다 상단에 함수를 호출한 경우

function catName(name) {
  console.log("제 고양이의 이름은 " + name + "입니다");
}

/*
결과: "제 고양이의 이름은 클로이입니다"
*/

 

화살표 함수

function 키워드를 생략하고 화살표=>를 붙입니다

    const add = (x, y) => {
      return x + y
    }
add(10, 20)//출력 30

 

배열

arr.slice함수의 사용법

  it('Array 메소드 slice를 확인합니다.', function () {
    const arr = ['peanut', 'butter', 'and', 'jelly'];

	arr.slice(1)).to.deep.equal(['butter', 'and', 'jelly']);
    expect(arr.slice(0, 1)).to.deep.equal(['peanut']);
    expect(arr.slice(0, 2)).to.deep.equal(['peanut','butter']);
    expect(arr.slice(2, 2)).to.deep.equal([]);
    expect(arr.slice(2, 20)).to.deep.equal(['and', 'jelly']);
    expect(arr.slice(3, 0)).to.deep.equal([]);
    expect(arr.slice(3, 100)).to.deep.equal(['jelly']);
    expect(arr.slice(5, 1)).to.deep.equal([]);

    expect(arr.slice(0)).to.deep.equal(['peanut', 'butter', 'and', 'jelly']);
  });

 

object

this 함수 사용법

//단독으로 사용한 경우 global object를 가르킵니다
var x = this;
console.log(x); //Window

//함수한에서 사용한 경우 함수의 주인에게 바인딩됩니다
 function myFunction() {
  return this;
}
console.log(myFunction()); //Window //함수의 주인인 window객체

//메서드 코드 내에서 사용된 경우는 해당 메서드를 호출한 객체로 바인딩됩니다
var person = {
  firstName: 'John',
  lastName: 'Doe',
  fullName: function () {
    return this.firstName + ' ' + this.lastName;
  },
};
 
person.fullName(); //"John Doe"

//이벤트 핸들러 안에서 사용된 경우 이벤트를 받는요소를 가르킵니다.
var btn = document.querySelector('#btn')
btn.addEventListener('click', function () {
  console.log(this); //#btn
});

//생성자 안에서 쓴 경우 함수가 생성하는 객체로 this가 바인딩 됩니다.
function Person(name) {
  this.name = name;
}
 
var kim = new Person('kim');
var lee = new Person('lee');
 
console.log(kim.name); //kim
console.log(lee.name); //lee

// 출처 https://nykim.work/71

 

Spread 

전개 문법을 사용하면 배열을 더 쉽게 나타낼 수 있습니다.

//배열을 전개하여 나타낼수 있습니다.
const spread = [1, 2, 3];
const arr = [0, ...spread, 4];
console.log(arr) //[0, 1, 2, 3, 4

//배열을 이어 붙일수 있습니다.
const arr1 = [0, 1, 2];
const arr2 = [3, 4, 5];
const concatenated = [...arr1, ...arr2];
console.log(concatenated)//[0, 1, 2, 3, 4, 5]

//spread 문법은 전달 값은 value이다
const arr1 = [0, 1, 2];
const arr=[...arr1]
arr === arr1 //false

https://github.com/codestates-seb/fe-sprint-javascript-koans

직접 케언즈 과제를 풀어보며 내가 부족했던 부분을 채우고 잘못 알고 있던 지식들을 고치는 좋은 시간이었다 여러분들도 환번 코언즈 과제를 풀어 보세요~~