본문 바로가기

47

JS Object.assign() 객체 복사, spread operator( ...) 차이점 Object.assign (ECMAScripy 2015) 얕은 복사(shallow copy)로 두 오브젝트를 병합할 수 있다. 정적 메소드로 인수(argument)로 받은 객체들의 모든 열거 가능한 속성(property)을 대상 객체에 복사한다. 첫 번째로 들어오는 인자(argument)로 들어오는 객체에 두 번째 인자로 들어오는 객체의 프로퍼티들을 차례대로 덮어쓰기하여 반환하는 메소드이다. 출처값이 객체에 대한 참조인 경우 참조값만 복사한다. 구문 Object.assign(target, ...sources) * @param target 복사 할 대상 개체 * @param source 속성을 복사 할 원본 개체 spread operator와 object.assign 차이점 //spread operator.. 2021. 1. 20.
ES6. Class 클래스 자바스크립트 Class ES6이전에는 class 대신 함수(function)으로 생성자를 만든 후 프로토타입(prototyp)으로 메서드를 할당하는 방식으로 사용해왔다. ES6에서는 class 키워드(keyword)가 추가됐다. class를 만드는 방법 class Person{//class 선언 constructor(name, age, gender){//constructor 생성자 메서드 this.name = name; this.age = age; this.gender = gender; } showName(){//클래서 Person에서 정의한 메서드 alert(this.name); } } let person = new Person('hun', 20, 'male'); person.showName(); co.. 2021. 1. 19.
ES6. rest parameter, spread operator 차이 spread operator(펼침연산자) const arr = [1, 2, 3, 4]; console.log(arr);//[1,2,3,4] console.log(...arr); //1,2,3,4 console.log([...arr]); // [1,2,3,4] spread 연산자를 사용하면 배열이 아니라 개별 요소로 결과값이 나온다. [...spread operator]의 형태로 쓴다면 결과는 배열이 된다. rest parameter(나머지 매개변수) function restParam(param1, param2, ...rest) { console.log(param1); //1 console.log(param2); //2 console.log(rest); //[3,4,5,"rest!";] } restPara.. 2021. 1. 18.
ES6. 화살표 함수 (Arrow Function) 화살표 함수(Arrow Function) // es6 이전 function(){ } // es6 이후 () => {} function(){}; 이렇게 생긴 함수를 () => ; 화살표로 구문을 짧게 표현할 수 있다. //es6 이전 var add = function (x, y) { return x + y; } console.log(add(2, 10)); //es6 이후 const add2 = (x, y) => x + y; console.log(add2(2, 10)); 화살표 함수는 함수 이름을 쓸 수 없다. 핸들링 하기 위해 변수에 넣어서 사용하면 된다. //es6 이전 var newArr = [1, 2, 3, 4, 5].map(function (value) { return value * 2; }); c.. 2021. 1. 17.
인수 매개변수 파라미터(parameter) 아규먼트(argument) 차이 인수, 파라미터 모두 매개변수이지만 엄밀히 따지면 의미하는 뜻은 다르다. 파라미터(parameter) : 함수 선언에서 정의한 변수 인수(argument) : 함수를 호출할 때 넘겨주는 값 function addNum(x, y) { // (x, y) : parameter 파라미터 return x + y; } addNum(1, 2); // (1,2) : argument 아규먼트 function restParam(param1, param2, ...rest) { // parameter console.log(param1); //1 console.log(param2); //2 console.log(rest); //[3,4,5,"rest!";] } restParam(1, 2, 3, 4, 5, 'rest!'); //.. 2021. 1. 16.
ES6. Template(`) 백틱 tagged template literals 템플릿 리터럴 ` 백틱을 이용해 표현식을 넣을 수 있다. muilti-line string 표현이 쉬움 \n을 사용하지 않아도 엔터로 개행이 인식됨 따옴표와 이중 따옴표를 문자열로 표현하기 쉬움 문자열과 변수를 함께 쓰기 쉬움 json과 같은 문자열을 dom과 함께 섞어 쓸 때 편함 형태 `${표현식}` 문자열과 변수를 같이 사용할 때 편리 const hello = 'hello'; //es6 이전 console.log(hello + ' world'); //es6 이후 console.log(`${hello} world`); var str = "'hello js'" + ' "안녕 자바스크립트!"'; let str2 = `'hello js' "안녕 자바스크립트!"`; console.log(str);//'hel.. 2021. 1. 16.