자바스크립트를 사용하면서 객체와 배열을 다루는 기술을 사용할 일이 잦은데, 어느 순간 부터 내가 제대로 알고 쓰는 것이 아니라 요령을 부리면서 쓴다는 생각이 들었다. 그래서 정리해본 객체와 배열을 다루는 기술! 🎶
ECMAScript 2015 was the second major revision to JavaScript. ECMAScript 2015 is also known as ES6 and ECMAScript 6.
Destructuring
구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별적인 변수에 담을 수 있도록 해주는 표현식이다.
구조 분해를 사용한 객체 대입
const yuki = {
name: "hyesoo",
age: "5",
interest: ["kitty", "computer", "ribbon"]
};
let {name, age} = yuki;
console.log(name, age) // hyesoo 5
name = "yukirin";
age = "45";
console.log(name, age) // yukirin 45
console.log(yuki.name, yuki.age) // hyesoo 5위 예제는 yuki 객체를 분해하여 name, age 필드를 같은 이름의 변수에 넣어주는 예제이다. 두 변수의 값은 해당하는 필드의 값으로 초기화되지만 변수의 값을 변경해도 원래 필드의 값은 바뀌지 않는다.
분리한 객체의 파라미터화
분리한 객체는 함수의 파라미터로 넘길 수도 있다. 그리고 당연히, 객체 안에 있는 객체 또한 파라미터로 넘길 수 있다.
const yuki = {
name: "hyesoo",
age: "5",
favorite: {color: "pink", character: "kitty"}
};
const yukiis = ({name}) => {
console.log(`Yuki is... ${name}`); // Yuki is... hyesoo
}
yukiis(yuki);위 예제는 특정 객체의 필드에 접근하기 위해 .을 사용하는 대신, yuki 객체에서 필요한 값을 구조 분해로 갖고 오는 예제이다.
const yukiis = ({favorite: {color}}) => {
console.log(`yuki likes... ${color}`); // yuki likes... pink
}
yukiis(yuki);그리고 위와 같이 하면, 객체안에 favorite을 키로 하는 객체 또한 파라미터로 넘겨줄 수 있다. 앞선 예제에서 yukiis 함수만 수정해주면 콜론과 내포된 중괄호로 color를 favorite 객체로부터 구조 분해할 수 있다.
구조 분해를 사용한 배열 대입
const favorite = ["pink", "computer", "kitty"];
const [color] = favorite;
console.log(color); // pink
const [,, character] = favorite;
console.log(character); // kitty배열을 구조 분해하여 필요한 값을 변수에 대입할 땐, ,를 사용하는 리스트 매칭 기법을 사용한다. ,를 사용하면 배열에서 원하는 위치의 원소를 대치할 수 있다.
Object Literal Enhancement
객체 리터럴 개선은 구조 분해의 반대라고 생각하면 쉽다. 즉, 이는 구조를 다시 만들어낼 수 있는데 이는 다시 말하면 변수들을 모아 객체의 필드로 묶을 수 있는 기법이다.
변수들 객체의 필드로 만들기
const name = 'hyesoo';
const say = function () {
console.log(`Yuki is... ${this.name}`);
}
const yuki = {name, say};
yuki.say(); // Yuki is... hyesoo위 예제를 보면 객체의 키에 접근하기 위해 this 키워드를 쓰고 있다. 그리고 이는 화살표 함수가 아닌 일반적인 function() 형태의 함수를 쓰는 이유이다. 화살표 함수에서 this는 전역 객체이기 때문에 키에 접근하지 못하기 때문!
Spread Operator
스프레드 연산자는 3개의 점 ...으로 이뤄진 연산자인데, 몇 가지 다른 역할을 수행한다. 우선 배열의 내용을 조합하는 예제이다.
두 배열의 원소 조합하기
const rgbs = ["red", "blue", "green"];
const blacks = ["white", "grey", "black"];
const colors = [...rgbs, ...blacks];
console.log(colors); // ['red', 'blue', 'green', 'white', 'grey', 'black']위 예제는 rgbs와 blacks에 포한된 모든 원소를 colors라는 새로운 배열에 넣는 예제이다.
rest 파라미터로 나머지 원소 얻기
const rgbs = ["red", "blue", "green"];
const [first, ...rest] = rgbs;
console.log(rest); // ['blue', 'green']3개의 점 ... 구문을 사용해서 rgbs에서 첫번째 원소를 제외한 나머지 원소들을 얻었다. (참고로 rest 파라미터가 앞에 오는 건 안됨) rest 파라미터는 객체에서도 유용하게 쓰이므로 기억해두자.
레퍼런스
