프론트앤드 8

[자바스크립트] 배열 - 메서드

메서드 배열의 특징을 알았다면 이제 메서드를 알아봐야 할 차례이다. [자바스크립트] 배열 (tistory.com) [자바스크립트] 배열 배열의 특징 가장 먼저, 자바스크립트에서는 배열 타입이 없다! 이게 무슨 뚱딴지같은 소리냐 한 번 배열의 타입을 출력해 보자. export default function App() { const arr = []; const handleClickButton = () => { con forswdev.tistory.com 배열 타입에 기본적으로 지원하는 메서드들이 있다. 필요한 방식을 검색해서 쓰는 것이 좋을 것이다. Array의 메서드도 있고, prototype의 메소드도 있다. 원본을 건들지 않고 새로운 배열을 만드는 메서드는 *로 표시한다. ES6 이후 전부 사용 가능 ..

프론트앤드 2023.03.17

[자바스크립트] 배열

배열의 특징 가장 먼저, 자바스크립트에서는 배열 타입이 없다! 이게 무슨 뚱딴지같은 소리냐 한 번 배열의 타입을 출력해 보자. export default function App() { const arr = []; const handleClickButton = () => { console.log('typeof Array: ', typeof arr); } return ( 타입버튼! ); } 큰 틀에서의 object가 아니라 진짜 타입이 object다. 하지만! prototype 언어의 특성상 내부 동작은 다를 수 있다. 실제로 객체는 property Key : property Value로 구성되어 있지만 배열은 Index와 value로 구성되어 있다. 그래서 값을 참조할 때 객체는 property Key로 ..

프론트앤드 2023.03.17

자바스크립트 ES6 함수 구분 - 일반 함수, 메서드, 화살표 함수

ES6 이전에 함수는 모두 일반 함수로도 사용할 수 있고 생성자 함수로 호출할 수도 있었다. 그렇기에 사용에 따라 구분하기 힘들었을 뿐만 아니라 성능에도 그리 좋지 않았다. 왜냐하면 어떤 경우건 함수를 선언하면 항상 생성자와 prototype 이 따라오기 때문이었다. 따라서 ES6 이후 자바스크립트는 일반 함수와 분리되는 2가지 함수 유형을 추가하였고, 그것이 메서드와 화살표 함수이다. 이번에는 문법은 생략하고 메서드를 왜 사용하는지와 화살표 함수를 왜 사용하는지에 대해서 알아보자. 메서드 메서드는 본래 객체에 묶여서 사용되는 함수를 뜻하는 말이었지만 이제 메서드 표현으로 정의된 함수를 뜻하는 말로 바뀌었다. 메서드 표현은 다음과 같다. foo() { return 0 } function이나 화살표 함수를..

프론트앤드 2023.03.09

[자바스크립트] 클로저를 이용하여 속성값을 은닉하여 사용하기

클로저(CLOSURE)란 무엇일까? 자바스크립트는 렉시컬 스코프를 사용한다. 렉시컬 스코프(정적 스코프)란, 외부 렉시컬 환경(상위 스코프)에 대한 참조를 뜻하고, 상위 스코프에 대한 참조는 함수가 정의된 위치에 의해 결정되는 것을 뜻한다. 즉, 특정 스코프 A에서 함수를 정의할 경우 그 함수의 렉시컬 스코프는 A가 된다. 자바스크립트에서 함수는 객체의 한 종류이고, 내부 슬롯 [[Environment]]에 렉시컬 스코프를 저장한다. 따라서 Environment 를 따라가면 실행 콘텍스트를 알 수 있고, 자연스럽게 this 바인딩과 상위 스코프를 알 수 있다. 위의 관점에서 보면, 상위 함수보다 중첩 함수가 더 오래 유지되는 경우에도 중첩 함수는 이미 생명 주기가 끝난 상위 함수 내부의 값들에 접근할 수..

프론트앤드 2023.03.08

쉽게 배우는 컴퓨터 프로그래밍 자바스크립트 제어문 편

제어문이란? 제어문(Control Flow Statement)은 자신이 원하는 조건에 따라서 특정 코드를 실행하거나 반복할 때 사용합니다. 순차적으로 코드가 실행되는 일반적인 상황과 다르게 코드 실행 흐름(Flow)이 뒤죽박죽이 되기 때문에 코드를 복잡하게 만들 위험이 커지기 때문에 필시 숙달하여 조심히 사용해야 합니다. 블록문 블록문은 문을 중괄호{}로 묶은 것을 말합니다. 자바스크립트는 단독으로 사용할 수도 있지만 보통 제어문이나 반복문, 함수를 정의할 때 주로 사용합니다. cf) 문(statement)이란 표현식(expression)의 상위집합입니다. 명령문이라고도 불리며 코드의 가장 기본적인 실행 단위입니다. 예시) function foo(a, b){ Return a + b; } 조건문 조건문은 ..

프론트앤드 2023.02.05

컴퓨터 프로그래밍 자바스크립트 데이터 타입과 연산자

데이터 타입 데이터 타입은 왜 필요할까? 가장 먼저 데이터를 메모리에 저장하기 위해 공간의 크기를 계산해야 한다. 그리고 데이터를 읽어올 때 필요한 데이터의 크기만큼 읽어와야 한다. 데이터를 크기만큼 읽어오고 어떻게 해석해야 할지 정해야 한다. (이를 위해 심벌 테이블에 식별자를 키로 만들어서 메모리 주소와 타입, 스코프를 관리한다.) 위 세 가지 이유 때문에 데이터 타입이 필요한 것이다. 자바스크립트 7개의 데이터 타입을 가진다.(ES6 ~ ) 기본적으로 C언어에서 출발했기 때문에 비슷한 면도 있지만 사뭇 다른 타입들도 등장했다. 종류는 두 가지로 나뉜다. 원시 타입(Primitive type)과 객체 타입(object type)이다. 원시 타입에 다음 6가지가 속한다. 숫자(Number) 타입 C와 ..

프론트앤드 2023.02.01

쉽게 정리한 컴퓨터 프로그래밍 자바스크립트 변수

1. 변수의 개념과 기초 변수(Variable)란 하나의 값을 저장하기 위해 확보한 메모리 공간 혹은 메모리 공간을 지칭하는 이름을 말한다. 모든 데이터는 메모리에 저장이 되고, 메모리는 메모리 셀이 모여서 만들어진다. 상용화된 현대 메모리는 셀 하나에 1Byte의 크기를 갖고 있으며, 컴퓨터는 셀 단위로 데이터를 저장하고 읽는다. 셀 단위로 접근하기 위해 셀은 고유의 메모리 주소를 가진다. 자바스크립트는 C에서 파생된 언어지만 C와 다르게 메모리에 직접 접근할 수 없다. 그러므로 자바스크립트에서 컴퓨터는 변수를 통해 메모리 위치를 알 수밖에 없으므로, 우리는 메모리 주소를 신경 쓸 필요가 없다. 예를 들어, let a = 1 + 2; 가 있을 경우, 1을 할당한 메모리 (0x000000)와 2를 할당한..

프론트앤드 2023.01.31

자바스크립트에 대한 간단한 역사와 배경지식

모카에서 라이브스크립트 그리고 자바스크립트로 95년 넷스케이프 커뮤니케이션즈에서 웹의 보조적인 동작을 위해 가벼운 브라우저 언어를 만들었고 이것이 자바스크립트의 시초다. JScript 등 파생 버전과의 크로스 브라우징 이슈를 해결하기 위해 ECMA에 표준화된 자바스크립트를 요청했고, 표준화된 자바스크립트는 상표권 문제 때문에 ECMAscript로 이름이 바뀌었으나, 포괄적인 범위에서 여전히 자바스크립트로 불린다. (표준화되지 않은 것을 포함) 99년 서버와 브라우저가 자바스크립트를 이용한 비동기 통신 기능인 Ajax(Asynchronous Javascript and XML)가 등장하였다. 이로 인해 서버로부터 완전한 HTML을 받아 지속적으로 재랜더링을 하던 것이 필요한 부분만 한정적으로 랜더링하는 방식..

프론트앤드 2023.01.31