JavaScript | 기초

JavaScript의 첫걸음 > 필요한 사전 지식: 기본적인 컴퓨터 이해 능력, HTML과 CSS 기초. 목표: JavaScript가 뭔지, 어떤 일을 할 수 있는지, 웹 사이트에 어떻게 적용하는지 알아보기 알기.

JavaScript를 처음 배울 때, 가장 기초적인 코드를 작성해 보면서 JavaScript가 어떻게 작동하는지 이해하는 게 중요한 것 같다. 이번에는 JavaScript의 기본 구조를 살펴보고, 간단한 코드를 작성해서 브라우저에서 실행해 보려고 한다.

JavaScript에서 세미콜론(;)은 코드에서 중요한 역할을 한다. 세미콜론은 코드의 각 문장이 끝났음을 알리는 기호로, JavaScript뿐만 아니라 C, C++, Java 등 여러 프로그래밍 언어에서 문장을 구분하는 방법으로 사용한다.

프로그래밍을 시작하기에 앞서 자료형을 이해하는 것은 굉장히 중요한 부분이라고 할 수 있다. 자료형이란 컴퓨터에서 사용되는 값의 유형을 의미한다.

"인간은 사회적 동물이다." - 아리스토텔레스 > 그리스 철학자 아리스토텔레스가 한 말이다. 우리 인간은 혼자 살아가는 존재가 아니라, 여러 사람들과 함께 사회를 이루며 살아간다. 이 과정에서 중요한 것이 바로 소통(Communication)이다. 프로그래밍에서도

프로그래밍에서 값에 이름을 부여하기 위해 변수(variable)라는 개념을 활용한다. 변수는 어떤 값을 담기 위한 이름이 붙은 상자라고 생각하면 된다.

변수를 만들 때 이름을 아무렇게나 짓지 않고, 몇 가지 규칙을 따라야 한다. 변수명은 프로그램의 가독성과 유지보수에 영향을 주기 때문에, 의미 있는 이름을 사용하는 것이 중요하다.

함수는 다양한 명령들을 저장하는 것이라고 생각하면 된다. 변수가 값을 저장하는 것처럼, 함수는 여러 명령들을 저장하는 역할을 한다. 함수를 사용하면 복잡한 명령을 간결하게 묶어서 관리할 수 있으며, 나중에 반복적으로 사용할 때 특히 유용하다.

파라미터는 함수에 입력으로 전달되는 값을 받기 위한 변수다. 함수를 선언할 때 소괄호 안에 작성되는 것이 바로 파라미터다. 이 파라미터는 함수가 호출될 때 전달되는 값을 받아, 함수 내부에서 그 값을 변수처럼 사용할 수 있다.

함수? 수학 시간에 봤던 복잡한 좌표나 숫자 떠오르지만, 사실 함수는 생각보다 단순하다. 함수는 일종의 상자로 생각하면 편하다.

자바스크립트 숫자형 기본 연산 정리 > 자바스크립트에서 숫자형 값을 다루는 기본적인 연산자부터 특수한 연산자, 그리고 주의할 점까지 정리. > 자바스크립트에서는 숫자 계산을 위해 기본 사칙 연산 외에도 나머지 연산, 거듭제곱 연산 등을 지원한다. 코드를 실행하면 예

숫자는 간단하게 7이나 3.14처럼 원하는 숫자를 그대로 쓰면 되지만, 문자를 표현할 땐 조금 다르다. 자바스크립트에서는 문자 데이터를 문자열 형태로 다뤄야 하고, 이 문자열을 표현할 땐 특정 기호(큰따옴표("), 작은따옴표('), 등)가 필요하다.

불대수는 수학자 조지 불의 이름을 딴 논리 체계로, 논리적인 상황을 수학처럼 다룰 수 있게 해주는 체계이다. 이 체계의 핵심은 우리가 평소 수학에서 다루는 숫자 대신, 참(True)과 거짓(False)이라는 진리 값을 다룬다는 점이다.

자바스크립트를 배우다 보면 참(true)과 거짓(false)을 다루는 일이 자주 등장하는데, 이를 표현하는 자료형을 불린(Boolean)이라고 한다.

자바스크립트를 다루다 보면 내가 사용하는 값이나 변수의 자료형이 무엇인지 확인해야 할 때가 많다. typeof 연산자를 사용하면 이 값이 어떤 자료형인지 쉽게 확인할 수 있다.

자바스크립트에서는 자료형을 다른 자료형으로 바꾸는 형변환(Type Conversion)이 가능하다. 이를 통해 특정 상황에서 값의 자료형을 원하는 형태로 바꿔 연산하거나 활용할 수 있다.

자바스크립트에서는 직접 형변환 함수를 쓰지 않더라도, 연산을 할 때 자동으로 형변환이 이루어진다. 이 자동 형변환은 자바스크립트가 일정한 규칙에 따라 수행하는데, 덕분에 다른 자료형끼리도 연산이 가능해진다.

템플릿 문자열은 변수나 연산 결과를 문자열 안에 자연스럽게 삽입할 수 있는 특별한 형태의 문자열이다. 템플릿이라는 말 그대로 일정한 틀을 가진 문자열이라고 생각하면 된다.

자바스크립트에서는 기본적인 자료형 외에도 null과 undefined라는 특별한 자료형이 존재한다. 이 둘은 모두 "값이 없다"는 의미를 가지지만, 각각 다른 상황에서 사용되며 그 의미와 사용 목적이 다르다.

자바스크립트에서 변수를 선언하고 값을 넣을 때 사용하는 할당 연산자(=)는 수학의 등호와는 다르게 동작한다. 수학에서의 등호는 양쪽이 같다는 의미지만, 자바스크립트에서는 오른쪽 값을 계산한 후 왼쪽 변수에 할당한다는 의미다.

이 글에서는 자바스크립트 함수의 실행 순서, 리턴문의 역할, 그리고 console.log()와의 차이를 다루고. 함수가 호출되면 코드가 어떻게 실행되고, 리턴문이 값을 돌려주면서 실행을 중단하는지, 그리고 console.log()와 리턴문의 차이를 알아본다.

함수를 호출할 때 파라미터를 활용하면, 입력받은 값에 따라 다양한 결괏값을 얻을 수 있다. 함수에 전달하는 값은 상황에 따라 달라질 수 있기 때문에, 파라미터를 통해 유동적으로 처리할 수 있다. 그렇다면, 파라미터가 있는 함수에 아무 값도 전달하지 않으면 어떻게 될까?

자바스크립트에서 스코프(Scope)는 변수가 어디까지 유효한지, 즉 변수를 사용할 수 있는 범위를 말한다. 변수를 선언하고 값을 할당하면 어디에서든 그 변수를 사용할 수 있을 것 같지만, 실제로는 변수가 유효한 범위가 정해져 있다.

자바스크립트에서 상수(Constant)는 한번 할당된 값이 절대로 변하지 않는 값을 의미한다. 변하는 값을 저장하는 변수와는 달리, 상수는 고정된 값을 저장하기 때문에 프로그램의 안정성을 높이는 데 유용하다.

자바스크립트의 조건문은 특정 조건에 따라 실행할 코드를 선택할 수 있게 해주는 문법이다. 기본 코드 흐름과 달리 조건문을 활용하면 조건이 만족할 때만 실행되도록 설정할 수 있다. 자바스크립트에서는 이를 조건문 또는 if statement라고 한다.

자바스크립트에서 스위치문(Switch Statement)은 특정 값에 따라 코드의 실행 흐름을 다르게 제어할 때 사용한다. 주로 선택지에 따라 결과가 달라져야 하는 경우에 활용할 수 있다.

자바스크립트에서 switch 문과 if 문은 조건에 따라 서로 다른 동작을 수행할 수 있도록 하는 중요한 제어문이다. 이번 글에서는 switch 문과 if 문을 비교하며, 각각의 특징과 사용 시 유의할 점을 정리했다.

프로그래밍에서 반복문은 반복적인 작업을 자동으로 처리할 수 있게 해준다. 우리가 반복적으로 작업해야 할 일이 있다면, 이를 단순하게 반복문으로 구현할 수 있다. 특히 for문은 자바스크립트에서 가장 많이 사용되는 반복문으로, 일정 횟수만큼 반복하는 데 유용하다.

자바스크립트에서 반복 작업을 수행하기 위해 사용할 수 있는 두 가지 주요 반복문이 있는데, 바로 for 문과 while 문이다.이전에 배운 for 문은 반복 횟수가 정해져 있는 경우에 적합하지만, 반복을 멈출 시점이 명확하지 않을 때는 while 문이 유리하다.

자바스크립트의 break와 continue 문은 반복문의 흐름을 조정하는 데 유용하게 사용할 수 있다. break는 반복문을 즉시 종료하고, continue는 특정 조건을 건너뛰며 다음 반복으로 넘어가게 해준다.

자바스크립트에서 객체(Object)는 여러 개의 데이터를 하나의 그룹으로 묶어서 관리할 수 있는 중요한 데이터 구조다.

자바스크립트에서 객체는 값들을 여러 개 묶어 관리할 수 있는 강력한 데이터 구조다.

객체의 프로퍼티는 어떤 자료형이든 저장할 수 있기 때문에 함수 역시 객체의 프로퍼티 값으로 저장할 수 있는데, 이때 객체 내부에 함수가 포함된 프로퍼티를 메서드(Method)라고 부른다.

for...in 반복문은 객체의 프로퍼티들을 순회하면서 프로퍼티 이름(키)을 가져오는 반복문이다. 이 반복문은 배열이 아닌 객체의 프로퍼티에 접근할 때 유용하다.

자바스크립트에서 console.log 같은 함수도 사실은 내장 객체인 console의 한 기능이다. 이렇게 자바스크립트는 특정 기능을 수행하기 위한 다양한 내장 객체들을 제공한다.왜냐하면 자바스크립트는 거의 모든 것이 객체로 이루어져 있기 때문이다. 이러한 내장 객체들

자바스크립트에서 배열은 여러 값들을 하나의 묶음으로 표현할 때 사용하는 데이터 구조다. 객체와 비슷하지만, 배열은 순서가 중요할 때 주로 사용된다. 배열의 각 값들은 요소(Element)라고 하며, 각 요소는 인덱스(Index)라는 숫자를 통해 접근할 수 있다.객체는

배열은 순서가 중요한 데이터를 저장할 때 사용하는 자바스크립트의 데이터 구조다.하지만 배열은 단순히 여러 데이터를 묶는 데 그치지 않고, 다양한 프로퍼티와 메서드를 제공해 데이터를 유연하게 다룰 수 있다.먼저 배열이 자바스크립트에서 어떤 종류의 데이터인지 살펴보자.배열

자바스크립트에서 배열을 안전하고 효과적으로 다루려면 배열 메서드를 잘 활용해야 한다. 이번 글에서는 배열을 다룰 때 자주 사용하는 메서드들을 정리해본다. 특히, splice, shift, pop, unshift, push와 같이 배열의 요소를 추가, 삭제, 수정할 때

자바스크립트에서 배열은 순서대로 인덱스를 가지고 있는 자료구조다. 배열의 이런 특징 덕분에 반복문으로 각 요소를 순회하며 작업하기가 쉽다. 가장 기본적인 반복문인 for문부터, 보다 간결하고 직관적인 for...of까지 다양한 반복문을 활용할 수 있다.배열을 순회하는

배열의 요소는 자료형에 제한이 없어서 어떤 값이든 할당할 수 있다. 그래서 배열 안에 배열이 들어갈 수도 있는데, 이를 다차원 배열이라고 부른다. 예를 들어 배열 안에 배열이 들어가 있으면 2차원 배열, 그 안에 또 배열이 들어가면 3차원 배열이라고 한다. 기본 배열과

자바스크립트에는 생각보다 다양한 숫자 표현 방법이 있다. 일반적으로 숫자를 그대로 입력하면 가장 직관적이지만, 상황에 따라 지수 표기법이나 다양한 진법을 활용할 수 있다. 특히 큰 수나 작은 수를 다룰 때 지수 표기법이 유용하다. 또한, 16진수, 8진수, 2진수 같은

자바스크립트의 숫자는 객체로 다뤄지기 때문에 다양한 메서드를 사용할 수 있다. 이 중에서도 실무에서 자주 사용되는 두 가지 메서드를 정리했다: toFixed와 toString. toFixed 메서드 기능 toFixed는 숫자의 소수점 아래 자릿수를 고정하는 데 사용된다. 파라미터로 원하는 자릿수(0~100)를 전달하면, 해당 자릿수까지 표시하고 남는...

Math 객체는 자바스크립트의 내장 객체 중 하나로, 수학에서 사용하는 다양한 연산을 간단하게 처리할 수 있도록 도와준다. 절댓값, 최댓값, 제곱근, 거듭제곱 등의 기본적인 연산은 물론이고, 삼각 함수와 로그 계산 같은 고급 연산도 가능하다. 이 글에서는 자주 사용되는

프로그래밍 언어를 사용하다 보면 간단한 소수 계산조차 기대와 다른 결과가 나오는 경우를 마주할 수 있다. 예를 들어, 0.1 + 0.2를 더했을 때 우리가 기대하는 0.3 대신 0.30000000000000004 같은 값이 출력된다. 이 현상은 자바스크립트만의 문제가

자바스크립트에서는 문자열(String)을 객체처럼 다룰 수 있다. 문자열은 배열과 유사한 기능을 제공하며, 각 문자에 접근하거나 조작할 수 있는 다양한 메서드를 제공한다. 이번 글에서는 문자열을 다루는 여러 가지 방법과 주요 메서드들을 구체적인 예제와 함께 정리한다.l

자바스크립트에서 데이터를 다룰 때, 기본형(Primitive Type)과 참조형(Reference Type)으로 나뉜다.기본형은 값 자체를 변수에 할당하고, 참조형은 값의 주소를 변수에 할당한다.이번 글에서는 기본형과 참조형의 차이점과 동작 원리를 코드 예제를 통해 살

자바스크립트에서 참조형 값(객체, 배열 등)을 변수에 할당하면 값이 아니라 메모리 주소가 할당된다는 걸 배웠다. 그래서 참조형 값을 복사하거나 수정할 때 원본 데이터도 영향을 받을 수 있다는 특징이 있다. 이번에는 배열과 객체를 복사하는 다양한 방법과 이를 활용한 코드

프로그래밍에 익숙해질수록 const 키워드가 점점 더 자주 등장하는 걸 느낄 수 있을 것이다. 몇몇 스타일 가이드에서는 변수 선언에 기본적으로 const를 사용하라고 권장하기도 한다. 그런데, 분명히 const는 "상수"를 위해 만들어진 키워드로 배웠는데, 왜 변수를