es66 [Javascript] optional chainning ?. 1. optional channing 옵셔널 체이닝은 프로토타입 체인으로 묶인 객체들의 프로퍼티에 안전하게 접근할 수 있게 됩니다. 안전하게 접근한다는 말은 접근하려던 프로퍼티가 존재하지 않는다면 기존에는 그냥 오류를 뱉어버렸지만, 옵셔널 체이닝을 이용하면 존재하지 않아도 오류를 뱉지 않고 스크립트를 계속 실행하게 됩니다. 다음과 같은 코드에서는 당연하게도 결과로 TypeError를 뱉어냅니다. obj 객체 아래 name.address가 존재하지 않기 때문이죠. const obj = {}; console.log(obj.name.address); 이렇게 에러를 뱉는 순간 스크립트를 정지하게 됩니다. 하지만 실제 상황에서는 이런경우에도 에러는 따로 처리하고 스크립트 읽기를 계속해야합니다. 사용자가 사용하다 .. 2021. 11. 24. [Javascript] shorthand property names 객체를 정의하다보면 꽤 자주 key와 value를 같은 이름으로 사용하게 되는 경우가 발생하는데, 같은 단어를 두 번 사용하는게 은근히 귀찮죠. 이런 문제를 해결하는 새로운 표기법이 shorthand property names입니다. 1. shorthand property names shorthand property names은 객체에서 key와 value명이 같은 경우 축약해서 사용할 수 있게 만들어주는 문법입니다. //기존 객체 코드 const obj = { name: name, color: color, x: x, y: , }; //shorthand property names를 이용한 코드 const obj = { name, color, x, y, }; 2. shorthand method names .. 2021. 11. 24. [Javascript] 전개 연산자 이번에는 ES2015에서 추가된 전개 연산자를 다룹니다. 전개 연산자는 마침표(.)를 세 개 입력하는 연산자입니다.(...) 사용은 배열([]), 객체({}), 함수 인자(())에서만 사용이 가능합니다. 1. apply() 메소드의 대체 전개 연산자의 첫 의의는 apply() 메소드의 대체입니다. apply() 메소드는 함수에 인자로 배열과 같은 요소를 전달하기 위해 사용하는 메소드입니다. 지금은 전개 연산자만을 다루기도 하고, 이 메소드를 전개연산자로 대체하여 사용하는 것이 편리하기 때문에 apply() 메소드에 대한 자세한 설명은 넘기도록 하겠습니다. 기존에 apply()를 이용하면 다음과 같이 사용했었습니다. let sum = (a, b, c, d, e) => { return a + b + c + .. 2021. 5. 7. [Javascript] 구조 분해 할당 ES2015에서 등장한 구조 분해 할당에 대해 다룹니다. 구조 분해는 배열이나 객체의 특정한 자료를 이용할 때 사용하는 방식입니다. 1. 배열의 구조 분해 할당 1-1. 변수에 배열의 값 할당 기존에 배열의 요소를 변수에 할당하기 위해서 다음과 같이 이용했었습니다. let arr = [1, 2, 3]; let num1 = arr[0]; 구조 분해 할당을 이용하면 대괄호를 이용하여 인덱스 위치에 변수를 삽입하는 방식으로 편하고 직관적이게 변수에 배열 요소 값을 할당할 수 있습니다. let arr = [1, 2, 3]; let [num1, num2, num3] = arr; 1-2. 존재하지 않는 요소의 기본값 할당 위의 경우에서 배열에 존재하지 않는 인덱스의 요소를 변수에 할당하려고 하면 오류가 발생하거나,.. 2021. 5. 7. [Javascript] 객체 확장 표현식 ES2015가 도입되며 객체의 표현에서 간결한 문법들을 많이 지원하게 되었습니다. 1.키 이름과 값이 같은 경우 기존에 키 이름과 키 값이 동일한 경우에도 {키 이름: 키 값}으로 묶어서 표현했었습니다. let a = 1; let b = 1; let obj = { a: a, b: b }; 이런 경우에 ES2015에서는 다음과 같이 표현할 수 있게 되었습니다. let a = 1; let b = 1; let obj = { a, b }; 위의 경우처럼 키 값을 생략하게 되면 키의 이름을 통해 키 값을 지정하게 됩니다. 즉, 객체 변수 obj에 대입된 a와 b는 키의 이름이고, 이 이름을 통해 키 값 a=1 , b=1을 지정해 줍니다. 2. 계산된 키 값 넣기 계산된 키 값을 넣을 때 이전 버전에서는 키 값을 .. 2021. 5. 7. [Javascript] 템플릿 문자열 (ES2015) 앞으로 몇 포스트간에 걸쳐 ES2015에서 등장한 문법을 몇가지 소개하려고 합니다. 앞선 포스트들에서 이미 소개한 것도 있을 것이고, 소개하지 않은 것들도 있을 것 입니다. 왜 이 문법들을 다시 혹은 새롭게 소개하냐면, 자바스크립트 기초 이후 Node.js나 리액트와 같은 프레임워크 등에서 ES2015(ES6)의 문법들을 이용해서 계속 사용하고 있기 때문에 저도 정리의 필요성을 느끼고, 독자분들에게도 알고 넘어가면 좋겠다고 생각했기에 이렇게 포스트를 다시 빼서 작성하게 되었습니다. 템플릿 문자열의 존재는 기존 자바스크립트에서는 문자열의 표현이 복잡했기 때문입니다. let str = '막대사탕'; let price = 1000; let msg = str + '의 가격은 ' + price + '원 입니다.'.. 2021. 5. 4. 이전 1 다음 300x250
