본문 바로가기

Coding Language

 (21)
[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..
[JavaScript] 동등 연산자, 일치 연산자의 차이점 [해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다. 따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.] JavaScript에선 값이 일치하는지에 대해 비교하는 일치 연산자 중 동등 연산자, 일치 연산자가 존재한다. == (동등 연산자) : 비교 대상 값의 자료형이 서로 다르면 강제로 Type을 바꾼 뒤에 비교를 한다. === (일치 연산자) : 값의 내용을 비교하며, 동시에 자료형까지 일치하는지 비교한다. 일치 연산자가 동등 연산자보다 엄격하다고 볼 수 있다. 비교 값뿐만 아니라, Type까지 확인을 하기 때문에 실제적으로 일치하는 값들은 줄어들게 된다. 그러나 대부분 JavaScript를 사용하는 사람들이 동등 연산자보다 일치 연사자를 이용하라고 ..
[JavaScript] ES6 Template String 사용하기 [해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다. 따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.] ES6에 추가된 기능으로 템플릿 문자열(Template String)이 있다. 문자열에서 변수를 추가하려면 + 를 이용하여 붙여줘야 했다. 가독성도 떨어지며 타이핑하기에도 불편한 게 많았다. 템플릿 문자열을 사용하면 정말 편하게 변수를 붙여서 문자열을 생성할 수 있다. 한 마디로, 문자열안에 결과값을 같이 붙여 쓴다고 생각하면 된다. 사용법 템플릿 문자열의 시작은 `(Grave accent)로 시작한다. '(콤마)와 다르므로 주의하자! Grave accent는 키보드 숫자 1 왼쪽에 있다. 문자열에 변수를 넣을 때 ${표현식}을 이용하여 삽입 처리..
[JavaScript] Null과 Undefined의 차이점 [해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다. 따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.] JavaScript를 사용하다 보면 null과 undefined라는 키워드를 볼 수 있다. null이랑 undefined는 둘 다 값이 없다?라는 개념인 것 같지만 엄연히 차이점이 존재한다. null null은 비어 있거나 존재하지 않는 값을 의미한다. 변수에 값이 비어있다는 것을 의미하며, 원시 자료형인 null로 분류된다. 그러나 신기하게도 null이 들어있는 변수를 typeof로 Type을 확인하면 Object로 반환한다. 현재 JavaScript 기존 이슈로 인해 나온 결과라 하므로 신경 쓰지 말고 넘어가도록 하자. !주의 typeof를 통..

티스토리툴바