Programming/Javascript91 [Javascript] 예외 처리 try~catch~finally 이 구문은 ES2015이후의 내용은 아닙니다만 왜 지금 튀어나오냐면, 그 동안 작성했던 포스트들을 읽어내는 과정에서 예외 처리에 대한 부분이 빠져서 뒤늦게나마 보충하게 되었습니다. 0. 예외 처리가 사용되는 이유 모든 사용자가 프로그래머가 의도한 대로 프로그램을 사용할 수는 없습니다. 이런 상황들을 예외라고 부르는데, 코드 작성 과정에서 이런 예외를 막을 수 있는 것도 있지만, 외부 요인에 의해서 발생하는 예외들은 코드 작성 과정에서 이를 방지하기가 어렵습니다. 그래서 등장한 것이 예외 처리 구문입니다. 자바스크립트 코드는 코드를 읽어오다가 스크립트 상에서 예외가 발생하면 스크립트가 정지해버리는 상황이 생기게 됩니다. 이때 예외 구문을 이용한다면, 스크립트가 정지하는 상황은 피하면서 예외에 대한 상황에 .. 2021. 5. 20. [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. [Javascript] 브라우저 객체 모델 BOM 브라우저 객체란, 브라우저에 내장되어있는 브라우저 조작을 위한 객체입니다. 더욱 간단히 설명하자면 브라우저에서 뒤로가기나 새로고침, 새 창 열기 등과 같은 조작을 위해 제공하는 객체입니다. 0. 계층 구조 브라우저 객체는 window라는 최상위 객체 아래에 자식 객체로 존재하고 있습니다. 물론 window가 최상위 객체이므로 여하에 수 많은 자식 객체들을 데리고 있지만 여기서는 간단하게 표시했습니다. 그리고 채용률이 높은 네 가지 정도의 객체들만 간단히 소개해보려고 합니다. 여기서 document 객체는 지난 시간까지 다룬 문서 객체입니다. 1. window 객체 window 객체는 위에서 언급했듯이 모든 객체의 최상위 객체 입니다. 다른 객체들과는 달리 메소드 앞에 이름을 따로 명시하지 않아도 되는 객.. 2021. 4. 30. 이전 1 2 3 4 5 6 7 8 ··· 16 다음 300x250
