본문 바로가기

Coding Language/JavaScript

 (13)
[JavaScript] var & let 유효범위 [해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다. 따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.] ES6전 모든 변수에 타입 지정은 var Type을 사용했다. ES6에서부턴 let, const Type이 추가가 되어 var은 주로 사용하지 않고 let을 사용하게 되었다. 이번엔 var과 let의 유효 범위에 대해 알아보고자 한다. var var 키워드는 변수 선언 시 변수의 유효 범위를 함수 단위로 지정한다. 다음의 예제를 보도록 하자. var value = 10; console.log(value); // 10 if (true) { var value = 20; console.log(value); // 20 } console.log(value)..
[JavaScript] Symbol 이용하기 [해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다. 따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.] 이번 시간엔 ES6에서 새로 추가된 Type인 Symbol에 대해 알아보자. Symbol? Symbol은 객체의 고유한 멤버를 생성하는 방법을 고안하기 위해 만들어졌다. for in 반복문이나 Object.keys와 같은 기존 메서드를 변경 과정 없이 새로이 객체에 멤버를 추가하는 작업이 필요했다. ES6부터 Symbol이 추가되면서 기존 객체에 변동이 없이 객체가 Priavete Key and Value를 가질 수 있게 되었다. 특성 Symbol은 다음가 같은 특성을 가진다. Symbol은 항상 고유한 값을 가진다. Symbol은 new를 통해 ..
[JavaScript] foreach, for in, for of 반복문 [해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다. 따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.] 1. Array.prototype.forEach() forEach()는 주어진 callback을 배열에 있는 각 요소에 대해 오름차순으로 한 번씩 실행한다. 오직 Array 타입에서만 사용 가능하지만 ES6부터는 Map, Set 같은 Collection에서도 사용이 가능하다. var ar = [52, 273, 103, 32]; ar.forEach((value) => { console.log(value); }) //결과 : 52, 273, 103, 32 2. for...in for in은 모든 객체를 반복하여 사용가능하다. Object에 있는 항목들..
[JavaScript] sort 메서드 [해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다. 따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.] JavaScript의 내장 함수 중 sort() 메서드가 존재한다. 해당 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환한다. 새로운 배열이 생성되는 것이 아니라, 기존의 배열에 정렬되는 것이다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트에 따르기 때문에 숫자를 정렬한다고 해서 숫자가 오름차순으로 정렬되는것이 아니라는 것에 주목하자. 다음의 예제는 문자열 배열을 sort()를 통해 정렬했을 때 결과다. var ar = ['Orange', 'Banana', 'Apple']; ar.sort(); console.log(ar); //..
[JavaScript] Promise - 비동기처리를 동기방식으로 처리 [해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다. 따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.] JavaScript는 대부분 비동기 방식으로, 처리 요청을 받으면 알려만 주고 바로 다음으로 넘어간다. 주로 통신 쪽 처리할 때 많이 겪는 문제가 있는데, 서버 쪽으로 요청을 보내고 결과 값을 받아온 후 화면에 출력을 해야 하는 작업이 있다. 하지만, 비동기 처리방식 때문에 처리 결과가 오기도 전에 화면에 출력을 해버리기 때문에 빈 화면을 보게 되는 경우가 발생한다. 때문에 Callback 방식으로 어떤 작업을 요청하면 함수에 등록하고, 작업이 수행된 결과를 나중에 Callback 함수를 통해 알려주는 구조가 흔하다. 문제는 Callback 함수가..
[JavaScript] ES6 기능 - 단축 속성명, 속성 계산명, 비구조화 할당 [해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다. 따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.] ES6부터 추가된 기능으로 여러 가지 있겠지만, 이번엔 객체 문법의 기능인 '단축 속성명', '속성 계산명', '비구조화 할당' 에 대해서 정리하고자 한다. 단축 속성명 만약 회원 정보를 추가하는 객체 programmer객체가 있다고 가정하자. 여기엔 프로그래머 정보를 관리하는 member 객체, 새로운 Programmer를 추가하는 함수가 존재한다. const programmer = { member : {}, addProgrammer : function (age, name, role) { this.member[role] = { age : age,..
[JavaScript] 자료형 변환 [해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다. 따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.] 앞 시간에서 Number를 String으로 바꾸거나 String을 Number를 바꾸는 형 변환에 대해 포스팅하였다. 이번 시간엔 다양한 방법으로 자료형 변환을 할 수 있는 예시에 대해 알아보자. 자료형을 변환하기 위한 방법으로 2가지가 존재한다. 직접 명시적으로 자료형을 변환 JavaScript Engine에 의해 자동으로 자료형이 변환 2번째 항목인 Engine에 의해서 자동으로 자료형이 변환되는 것은 JavaScript가 동적 자료형 언어라는 특징 덕분에 가능한 문법이다. 따라서 JavaScript가 미리 정해놓은 규칙에 따라 자료형이 변환된..
[JavaScript] JavaScript 함수 다루기 [해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다. 따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.] 이번 시간엔 함수를 다루는 방법과, 이것을 호출하는 방법, Lambda방식 등 JavaScript 함수 처리에 대해 기본적으로 다뤄볼 것이다. - 함수의 기본 형식 함수를 생성하는 방법은 3가지 존재한다. 첫 번째로 function을 선언하고 함수를 정의하는 방법이다. function f1(){ console.log("Hello World!"); } 이러한 방식을 이용했을 때 Hoisting개념을 적용시킬 수 있다. Hoisting은 선언과 사용을 순서에 상관없이 사용할 수 있다. 간단하게 설명하자면 다음의 코드를 보자. f1(); function..

티스토리툴바