March 21, 2024 28 min to read

자바스크립트 기본

자바스크립트

자바스크립트의 데이터 유형

아래는 Primitive 혹은 object 데이터 타입들임.

number: 정수, 부동 소수점
String: 문자열
Boolean: 참 또는 거짓
Undefined: 값이 할당되지 않은 변수 상태
Null: 값이 없음
Symbol: 객체 속성의 식별자로서 변경불가능한 데이터 유형
BigInt: 약 9경보다 큰 정수를 나타는 JS 내장 객체(일부 환경 사용불가)

위의 데이터 유형외에도 JS에서는 ‘Object’ 타입의 데이터 유형이 있음. 허나 이것은 원시 데이터 유형이 아님. 이것은 데이터의 컬렉션 또는 더 복잡한 객체를 저장하는데 사용할 수 있으며, 배열, 함수, 날짜 등은 기술적으로 ‘Object’유형임.

JS의 원시값은 객체가 아니며 메서드를 가지고 있지않지만, 필요한 경우 JS는 자동으로 원시값을 임시 객체에 “Boxes”혹은 “Wraps”하여 메서드를 제공함. 이를 통해 원시값에 대한 메서드와 속성을 사용할 수 있음.

let str = "hello";
console.log(str.length); // outputs 5 to the console

위의 예시에서 JS는 문자열 원시값 ‘hello’를 임시로 string 객체로 래핑해서 .length 속성에 엑세스함. 그러나 원시값 자체는 변경할 수 없고, 실제로 자체 속성이나 메서드를 갖고 있지않음에 주목해야함.

커뮤니케이션

개발자들이 코드를 작성할 때 사용하는 방식을 이해해야 함. 특정한 용어와 개념 등이 있고 이는 프로그래밍이 어떻게 작동하는지 파악하는데 필수적임. 코딩의 문맥을 효과적인 개발자 간 커뮤니케이션의 중요한 방식으로 이해하는 것이 중요함.

이해 촉진: 특정 코드 논의 시, 개발자들은 코드가 작동하는 더 넓은 문맥을 파악해야 하는데, 이는 시스템의 전반적인 아키텍처, 코드가 속한 특정 모듈 또는 기능, 사용된 알고리즘 및 데이터 구조, 프로그래밍 언어 및 버전, 관련된 프레임워크나 라이브러리 등을 포함함.
의존성과 부작용 식별: 코드는 대부분 독립적으로 작동하지 않으며 코드 조각은 종종 시스템의 다른 부분과 상호 작용함, 이런 상호 작용은 중요한 영향을 미칠수 있음. 컨텍스트를 이해하고 전달하여 서로 상호 의존성과 부작용을 예측 및 관리하는데 도움을 줄 수 있음.
복잡성 관리: 소트트웨어 시스템은 복잡하며, 세부 사항에 빠져들기 쉬움, 컨텍스트를 명확하게 이해함으로서 개발자들은 서로가 현재 작업에 가장 관련있는 시스템 부분에 집중하고 이 복잡성을 탐색하는데 도움을 줄 수 있음.
일관된 코딩 관행 보장: 코딩 규칙, 스타일 가이드 및 아키텍처 패턴은 시스템의 서로 다른 부분, 다른 프로젝트 혹은 다른 조직 간에 다를 수 있기에, 컨텍스트를 이햏람으로서 개발자들은 기존의 관행과 패턴에 맞는 코드를 작성해 읽기 및 유지보수를 쉽게할 수 있음.
효과적인 협업 수행: 팀 환경에서 개발자들이 노력을 조율 및 지식을 공유함으로서 서로의 작업을 발전시켜야 하, 작업 컨텍스트를 이해하고 전달해 개발자들은 동일 목표를 향해 중복을 방지할 수 있음.

개발자가 사용하는 중요한 용어와 구문 리스트

선언(Declare): 변수 선언은 변수에 이름을 지정하는 것을 의미. 내부적으로 이는 컴퓨터 시스템이 해당 변수에 메모리 공간 예약을 의미. 변수가 선언될 때는 아직 값이 할당되지 않았으며 해당 변수에 엑세스 하려하면 문제가 발생하거나 “정의되지 않음” 결과가 발생할 수 있음.
초기화(Initialize): 변수에 처음 값을 할당할 때 발생함. 이 시점 이전에 변수가 선언 되었지만 이제 특정값을 할당받음.
함수(Function): 특정 작업을 수행하는 재사용가능한 코드 블록. 그 작업을 수행하려고 할때 그 함수를 호출 혹은 실행함.
인자(Argument)/ 매개변수(Parameter): 함수를 호출할 때 값을 전달할 수 있음, 이런 값들을 인자라고 하며 함수 내에서 이런 값들을 받는 변수들을 매개변수라 함.
반환(Return): 함수는 결과를 반환할 수 있음. 이를 return이라 함.
루프(Loop): 루프는 일정한 횟수로 반복되거나 특정 조건이 충족될 때까지 반복되는 코드 블록입니다.
조건문(Conditionals): 조건문은 특정 조건이 충족될 때만 코드가 실행되도록 하는 구조입니다. “if” 문이 가장 일반적인 조건문의 예임.
배열(Array): 배열은 여러값을 저장할 수 있는 데이터 구조로 인덱스를 통해 값에 접근가능.
객체(Object): JS와 같은 객체 지향 프로그래밍 언어에서 객체는 속성과 메서드를 포함하는 객체(Entity)임.
라이브러리/프레임워크: 개발자가 일반적인 문제를 더 빠르게 해결 가능하도록 사전에 작성된 코드 모음. 프레임워크는 비슷하지만 일반적으로 더 포괄적이며 응용프로그램을 구축하기 위한 구조화된 기반을 제공함.

원시 데이터 유형

Number Integers, Floating-point Numbers, Scientific Notation, Special Number Values.
- 과학적 표기법은 매우 크거나 작은 숫자가 필요한 경우 문자’e’를 사용하는 과학적 표기법을 지원함. 소수점을 사용하거나 사용하지 않고 쓸 수 있음.
```
let worldPopulation = 8.09e9 // 과학적 표기법으로 80억9천만
```
  이 경우 ‘e9’이라는 숫자는 10^9 또는 확장 시 8070000000이 되어야 함.

특수 숫자값이라는 Number 유형에 대한 특수값이 있음.
- Infinity: 수학적으로 무한대를 나타내며, 어떤 숫자보다도 큼.
- -Infinity: 무한대와 동일하지만 음의 방향임.
- NaN: 숫자가 아님을 나타내며 연산 오류를 표현함. 결과가 숫자여야하지만 그렇지 않은 경우.

// 양수를 0으로 나눈 경우
console.log(10 / 0);  // output: Infinity

// 음수를 0으로 나눈 경우
console.log(-10 / 0); // output: -Infinity

// 숫자에서 문자열을 빼려고 한 경우
console.log(10 - "something of the string data type") // output: NaN

String 작은 따옴표, 큰 따옴표, 백틱

let singleQuoteString = 'Hello';
let doubleQuoteString = "World";
let backtickString = `Hello, World!`;

첫번째 줄은 문자열, 두번째 줄도 문자열, 세번째 줄은 문자열이지만 백틱을 사용한 문자열이므로 추가 기능이 있고, 템플릿 리터럴 이라고도 함.

사용자 상호작용, 데이터 처리, 네트워크 통신, 코드 평가, 웹 API, HTML 및 CSS 조작 등.

Boolean 참 또는 거짓의 논리적 데이터 유형. ```js let myBoolean = true; // This boolean variable was created explicitly

// Creating a boolean value from checking equality console.log(5 === 3); // output: false // This is false because 5 is not equal to 3

// Creating a boolean value with a comparison operator (greater than) console.log(5 > 3); // output: true // This is true because 5 is greater than 3

>true에는 백틱이나 따옴표를 사용하지 않음.

4. Undefined
JS에서 Undefined는 존재하지 않는 값을 참조하라는 JS의 방법임.
* 선언되었지만 아직 값이 없는 변수의 값. 시스템이 값에대한 공간을 예약했지만 아직 아무 값도 없는 경우.
* 사용되지 않은 인덱스 배열 값에 엑세스하려는 경우
* 객체의 존재하지 않는 속성에 엑세스하려고 시도한 경우

```js
let noValue; // variable has been declared but not assigned a value
console.log(noValue); // output: undefined

const myArray = [ 'one', 'two', 'three' ];
console.log(myArray[55]); // output: undefined

const myObject = { name: "John", age: 20 };
console.log(myObject.height); // output: undefined

Undefined는 실제값이므로 아래와 같이 테스트할수도 있음.

let noValue; // variable has been declared but not assigned a value
console.log(noValue); // output: undefined

console.log(noValue == undefined); // output: true

Null ‘Undefined’와 마찬가지로 Null은 값이 없음을 의미하지만 코드에서 명시적으로 Null로 설정하지 않는 한 JS에서는 아무것도 Null이 되지않음.

let nullVariable = null; // The variable is explicitly set as null
console.log(nullVariable); // output: null

동등성 확인 시 Null은 Undefined 와 동일한 것으로 간주됨.

let myNull = null; // The variable is explicitly set as null
let myUndefined; // The variable is automatically undefined

console.log(myNull == myUndefined); // output: true

Symbol 개체 속성 이름으로 사용할 수 있는 고유 식별자를 생성하는데 사용함. 심볼값을 속성 이름으로 사용함으로서 개발자는 속성이 고유함을 보장하며 심볼값은 수정할 수 없음.
BigInt Number 유형의 최대값은 2^53-1(약 9조)이지만 BigInt에는 제한이 없음. ```JS // We can use BigInt to hold one estimate of stars in the universe and grains of sand on earth let stars = BigInt(“70000000000000000000000”); // 70 sextillion stars

console.log(stars); // output: 70000000000000000000000n

## JS는 동적으로 유형이 저장됨.
프로그래밍 언어는 정적 혹은 동적 타이핑으로 분류되는데 아래의 예를 보면
```js
let someValue1 = 6;
let someValue2 = "test";
let someValue3 = true;
let someValue4 = 5.5;

위의 코드는 각 변수가 어떤 종류의 데이터를 저장하는지에 대한 특정 표시가 없음. 1번은 Int, 2번은 String 이라고 생각하지만 구체적인 표시가 없기 때문에 JS가 동적으로 타입을 지정하는 프로그래밍 언어라는 증거임. JS에서는 변수 자체가 아닌 값이 데이터유형을 가지고 있고, 따라서 숫자를 변수에 저장할 수 있고, 그것을 문자열에 넣을 수 있음.

let toyBox = "toy car"; // toyBox is storing a String type value
toyBox = 10; // toyBox is now storing a Number type value
toyBox = true; // toyBox is now storing a Boolean type value
toyBox = { toy:"dinosaur", name:"rex" }; // toyBox is now storing an Object type value

위에서는 toyBox 변수가 처음 생성시 문자열 값이 주어졌는데, 동일 벼수가 숫자값을 저장하도록 밑에서 변경되었고, 다음은 부울값, 마지막으로 객체를 받았음. 이는 값의 유형에 대해 유연하며 변수는 한 유형에서 다른 유형으로 전환할 수 있는 동적 타이핑의 증거임.

정적타이핑

동적 타이핑의 반대로서 특정 장난감만 담을 수 있는 장난감 상자와도 같음. 예로 자바가 있음.

int myNumber = 6; // "int" indicates that myNumber can ONLY be an integer
String myText = "six"; // "String" indicates that myText can ONLY be a String
int myInteger = "six"; // This will throw errors that will break the code

위의 두줄은 잘 작동하나 마지막 줄은 자바에서 허용되지 않음.

JS가 Weakly-Type의 언어로 간주된다는 말이 있는데, 이것은 동적 타입과 동일한 뜻이 아님.

자바의 경우 정확히 원하는 것을 얻지 못하면 바로 불평하며 올바른 설정이 올라올 때까지 아무것도 하지않으나 JS는 주어진 데이터로 작업을 시도함. 이는 데이터를 약간 조정 혹은 데이터 유형을 변경해야할 수 있다는 것을 의미함. 장단점이 있음. 일반적으로 자바가 더 신뢰성이 높음.

Syntax

구문은 코딩언어가 구성되는 일련의 규칙임. 컴퓨터가 사용자와 인터페이스할 수 있는 다양한 스크립트나 명령을 통해 내부적으로 통신하는 방법임.

정확성과 명확성
- 코드 구문: 규칙 집합에 따라 매우 정확하고 구조화됨. 이는 모호하지 않고 해석의 여지가 거의 없으나 오류가 발생하거나 예기치 못한 동작이 발생할 수 있음.
- 영어: 유연하고 표현의 폭이 넓으며 해석과 모호함의 여지가 있음.
문법 및 어휘
- 코드 구문: 정의된 문법과 어휘가 있음. 문법은 명령문과 표현식이 어떻게 구성되어야하는지 규정 하고, 어휘는 언어 내 특정 의미를 갖는 키워드, 함수, 변수 등으로 구성.
- 영어: 언어의 유연성 덕분에 창의적인 표현 및 글쓰기가 가능.
추상화 및 간결성
- 코드 구문: 추상화화 간결성을 목표로 함. 모듈식 코드가 가능해 중복을 줄이고 유지관리가 향상됨.
- 영어: 추상화와 간결성이 있지만 아이디어와 개념 표현에 중점을 둠.
맥락과 해석
- 코드 구문: 컨텍스트에 크게 의존하고 논리적 흐름을 따름. 문의 순서, 변수값, 함수 실행에 따라 동작이 결정됨. 코드의 의미를 해석하려면 코드의 맥락과 목적을 이해하는 것이 필수.
- 영어: 해석의 폭이 더 넓으며 화자와 청자의 상황, 어조, 문화적 배경등에 달라짐.

JavaScript Syntax Rules and Expressions

key characters: //

JS에서는 ‘//’기호를 써서 주석을 표현.

Values

JS에서 값은 조작 및 처리할 수 있는 기본 데이터 단위로서 값은 변수에 할당되고 함수에 인수로 전달되며 연산을 수행하는데 사용됨.

원시값: Numbers, String, Boolean, Null, Undifiend, Symbol
객체: 복잡한 값이자 키-값 쌍을 포함할 수 있고 속성과 메서드를 가질 수 있음. 객체는 ‘new’ 키워드나 객체 리터럴 ‘{}’을 사용해 생성될 수 있음.
함수: 함수는 특정 작업을 수행하기 위해 호출될 수 있는 특별한 유형의 객체, ‘function’ 키워드를 사용해 정의하거나 화살표 함수구문(‘()=>{}’)를 사용해 생성할 수 있음.
- parenthesis = ():
- equal ==:
- greater than =>:
- curly brackets = {}:
특별값: Infinity, -Infinity, -NaN

ex)

var numberValue = 42;
var stringValue = "Hello, world!";
var booleanValue = true;
var nullValue = null;
var undefinedValue = undefined;
var objectVale = { name: "john", age: 25 };
var functionValue = function(){
  console.log("Hello from a function!");
};

console.log(numberValue);
console.log(stringValue);
console.log(booleanValue);
console.log(nullValue);
console.log(undefinedValue);
console.log(objectVale);
console.log(functionValue);

Characters/Attributes

“Curly Bracket” 혹은 “Squirrely brackets” 간단히 말해 “braces” 라고 알려진 중괄호를 사용함.

Object Literals: 중괄호는 JS에서 객체를 정의하고 초기화 하는데 사용됩니다. 오브젝트 리터럴은 중괄호로 묶인 키-값 쌍으로 객체를 생성하는 방법입니다.
```
var person = { name: "John", age: 25};
```
block statements: 중괄호는 블록 문이라고 알려진 코드 블록을 정의하는데 사용됩니다. 블록 문은 제어 흐름 문(if, for, while 등) 및 여러 문을 그룹화 하는 함수와 함께 사용됩니다.
```
if(condition){
  // code block
}
function myFunction(){
  // code block
}
```
Function Declations and Experessions: 중괄호는 함수 본문을 정의하는데 사용되며 함수 코드를 구성하는 문을 묶습니다.
```
function myFunction(){
  // code block
}
var myFunction = function(){
  // code block
}
```
Object Destructuring: 중괄호는 객체 구조분해에서 객체값을 추출하고 해당 이름을 가진 변수에 할당하는데 사용합니다.
```
var { name, age } = person;
```
Templete Literals: 중괄호는 템플릿 리터럴에서 실제값으로 보간되는 자리 표시자를 감싸는데 사용됩니다. 이 자리 표시자들은 ‘${}’ 구문으로 표시됩니다.
```
var name = "John"
var message = 'Hello, ${name}!';
```
중괄호 사용은 JS코드내 컨텍스트에 따라 달라질 수 있음. 일반적인 용도로는 객체 정의, 코드 블록 생성 및 함수 본문 포함. JS의 중괄호는 항목 그룹화 용도가 있습니다.
함수 클럽: 함수를 만들 때 함수를 구성하는 코드를 중괄호 안에 넣습니다.
```
function sayHello(){console.log("Hello, world!")};
```
조건 클럽: 조건이 있는경우(특정 조건이 True 인 경우 작업을 수행하는 if문)중괄호는 조건이 충족될 경우 실행되어야하는 모드 코드를 함께 유지함.
```
if(isRaining){
  takeUmbrella();
  wearRaincoat();
}
```
비가 오면 isRaining이 True인 경우 중괄호는 takeUmbrella 및 wearRaincoat 명령을 파티에 포함시킵니다.
루프클럽 : 루프를 생성할 때 중괄호는 루프의 코드를 함께 유지함.
```
for (let i = 0; i < 5; i++){
  console.log(i);
}
```
Basics

JS는 대소문자를 구분함

var d = 5;
console.log(d); // 5
console.log(D); // 정의되지않음.

Whitespace

공백은 코드에 존재하는 일련의 whitespace, 탭 또는 줄바꿈을 뜻함.

Comment

주석은 실행되지 않는 설명 코드임. //로 시작하는 1줄 주석 혹은 /* 로 시작 */ 로 끝나는 여러줄 주석일 수 있음.

Operators

연산자는 코드 값을 조작 및 계산하는데 사용됨. =는 결과 표시도 되지만 JS에서는 결과를 할당하는데 쓰기도 함. 이는 재사용성이 있음.

1 + 2; // shows 3
1 - 1; // shows 0
3 * 3; // shows 9
20 / 4; // shows 5

var result = 1 * 2;
result; // shows 2

Comparing Two Different Values

두 개의 값을 서로 비교하려면 === 삼중 등호 연산자를 사용. 피연산자의 값과 유형이 동일시 true 를 반환함. 두 값이 같지 않은지 비교하려면 !==를 사용하고 다른 경우 true를 반환. !는 Not 연산자이며 !true는 false 이며 !false는 true 임

console.log(2 === 2);
console.log(3 === 3);
console.log(0 === 0);

값은 모두 true임.

if(2 === 2 && 3 === 3 && 0 === 0){
  console.log("All conditions are true!");  
} else {
  console.log("Not all conditions are true!");
}

JS에서는 값 간의 일치 또는 불일치 비교를 할 때 써야함.

값 및 유형비교
유형 강제 방지
조건문
객체 참조 비교

Parenthesis

서로 다른 작업 순서를 그룹화 할 때 사용. 무엇이 먼저 계산되는지 고려할때 사용.

Brackets

브라킷은 {} 와 [] 를 사용해 객체를 생성함. 대괄호는 배열을 만드는데 사용함.

구문 규칙

명령문은 세미콜론(;)으로 끝나야함.
변수는 사용하기 전에 선언해야함.
함수와 변수 이름은 문자, 숫자, 달러 기호 또는 밑줄로 지정해야하지만 숫자로 시작할 수 없음.
문자열은 작은 따옴표나 큰 따옴표로 묶음.
주석 앞에는 한줄 주석은 // 여러줄은 /* */로 사용.
변수 선언은 var, let, const와 같은 키워드를 사용
제어 구조(if/else, for 루프, while 루프)의 구문을 올바르게 사용해야 함.
객체 리터럴은 {} curly brace 를 사용하며 키-값 쌍은 콜론으로 구분함.
배열 리터럴은 [] square bracket을 사용함.

Declaration

JS에서 선언은 프로그램에 새 변수나 함수를 도입하는데 사용함.

변수선언: var, let, const같은 키워드는 변수를 선언하는데 사용함. var, let 선언 변수는 새 값에 재할당될 수 있지만 const 는 불변이라 안됨. var 선언 변수는 전역 엑세스가 가능하나 let과 const 선언 변수는 블록 범위임.
함수선언: function 키워드를 사용해 선언하며 뒤에 이름과 괄호() 쌍이 옴. 함수 scope가 있으며 정의된 범위 내에서 엑세스 할 수 있음.
```
function greet(){
  console.log("Hello");
}
```
클래스선언: class 키워드 뒤에 클래스 이름과 {} 중괄호 쌍을 사용해 선언함. 이는 속성과 메서드를 포함한 객체를 생성하기 위해 청사진을 정의 클래스 선언에는 객체 인스턴스를 초기화 하는 생성자 메서드가 포함될 수 있으며 클래스 선언은 new 키워드를 사용해 객체를 생성하는데 사용할 수 있음.
```
class Rectangle{
  constructor(width, height){
 this.width = width;
 this.height = height;
  }
  calculateArea(){
 return this.width * this.height;
  }
}
```
이런 엔터티를 선언하면 엔터티 범위내에서 해당 엔터티에 엑세스하고 사용할 수 있게됨.

var

JS에서는 var를 사용해 변수를 선언함. var 선언 함수는 정의된 위치에 따라 함수 범위function scope 또는 전역 범위global scope가 있음.

function example(){
  if(true){
    var x = 10;
    console.log(x); // Output : 10
  }
  console.log(x); // Output : 10
}
example();

여기서는 var를 사용해 변수 x를 선언했지만 블록 내부 선언임에도 불구하고 x는 내외부 모두 엑세스가 가능함. 이는 var에 function scope가 있고 변수 x가 함수의 맨 위로 끌어올려져 함수 전체에서 엑세스 가능하게 하는 것.

var 변수는 let 및 const 변수처럼 블록 범위에만 속하지 않기 때문이고 외부에서 엑세스하는 경우 이를 변수 호이스팅이라고 함.

var로 선언된 변수는 해당 범위내 재할당이 가능하며 function scope 적용을 받으나 요즘에는 혼란을 방지하기 위해 let 또는 const를 사용하는 추세임.

let

JS에서는 let을 사용해 블록 범위 변수를 선언함. 이는 해당 블록과 중첩된 블록내에서만 엑세스할 수 있음. 블록이 종료되면 더 이상 엑세스 할 수 없으며 일반적으로 가비지 콜렉팅됨.

function example(){
  if(true){
    let x = 10;
    console.log(x); // Output : 10
  }
  console.log(x); // Error: x is not defined
}
example();

위에서는 if 블록내에 변수 x를 선언했음. 하지만 외부에서 엑세스하려면 오류가 발생함. 이는 변수 호이스팅이 불가능한 것을 의미. let 변수는 해당 범위 내에서 재할당이 가능함. 주로 var 대신 사용하는 것이 좋음.

Const

const 키워드로 상수값 변수를 선언함.

const pi = 3.14159;
console.log(pi); // Output: 3.14159
pi = 3.14; // Error: Assignment to constant variable.

const person = { name: 'John', age = 30 };
console.log(person.name); // Output: John

person.name = 'Jane';
console.log(person.name); // Output: Jane

person = { name: 'Mike', age: 25 }; //Error: Assignment to constant variable.

const 변수 값은 변경할 수 없지만 변수 자체가 일정하다는 의미는 아니며, 변수는 여전히 변경 가능한 객체에 대한 참조를 보유할 수 있음. 위에서 person 변수는 const 이며 객체를 보유했으니 새 객체를 할당할 순 없지만 기존 객체의 속성을 수정할 수 있음

const 변수에 객체나 배열이 포함된 경우에도 속성이나 요소를 수정할 수 있음.

Object

객체는 JS에서 속성이나 특성 혹은 속성에 대해 작동하는 함수인 메서드를 저장하는 복합 데이터 유형임.

</head>
<body>
  <script>
    const person={
      firstname:"John",
      lastName:"Doe",
      age:50,
      eyeColor:"blue"
    };
    </script>
</body>

변수에 대한 규칙:

문자, 밑줄, (), $로 시작해야함.
이외 특수문자는 불허
대소문자를 구분함
var, let, const 라는 3가지 옵션이 있고 var는 function scope, let/const는 block scope임.
var 는 변수 호이스팅을 방지하기 위해 기피할 것.
let, const 사용시 선언 당시 값으로 변수 초기화 필요.
const 변수에는 새 값을 재할당 할 수 없지만 할당 객체의 속성은 변경할 수 있음.

Exponentiation

지수 연산자 **를 사용해 거듭제곱으로 올릴 수 있음. Math.pow() 함수를 간단히 만든 것으로 2 ** 3은 8이며 2^3 임.

console.log( 3 ** 4 ); // 3^4 3의 4승

Modulo

모듈로 연산자 % 는 나눈 후 나머지를 나타냄.

console.log( 11 % 3); // 2

Increment

증가 연산자 ++는 1씩 올리는 연산자임.

Decrement

감소 연산자 --는 변수 숫자값을 1씩 감소하는 연산자임.

산술 연산자 규칙

+연산자는 더하기 및 문자열 연결에 사용 가능.
-연산자는 빼기에 사용.
* 곱셈용
/ 나누기용
% 연산의 나머지
JS 는 PEMDAS라고 알려진 연산순서를 따름
숫자가 아닌 값에 산술 연산자 사용 시 유형 강제에 유의할 것.
++ 및 --은 1씩 증가 및 감소.
단항 부정 연산자 (-)를 사용해야 숫자의 부호를 변경할 수 있음.
단항 긍정 연산자 (+)는 숫자가 아닌 값을 숫자로 변환 하는데 쓸 수 있음.

산술 연산자

속성

JS의 속성은 데이터를 쉽게 조작할 수 있도록 객체와 연결된 키-값 쌍임. 속성은 메서드라고 불리는 JS함수를 보유할 수 있음.

속성 접근법

Dot Notation 점/마침표를 사용해 속성에 액세스 할 수 있음.

const person = { name: "Mike", age: 12};
console.log(person.name); // output: Mike
console.log(person.age); // output: 12

const person = { name: "Sam", age: 45 };
person.age = 35; // 나이변경

console.log(person.name);// output: Sam
console.log(person.age); // output: 35

Bracket Notation 괄호를 써서 접근 가능. ```js const person = { name: “Sam”, age: 45}; person[“age”] = 35;

console.log(person[“name”]); // output: Sam console.log(person[“age”]); // output: 35

괄호 표기법의 이점은 변수 값을 기반으로 속성에 엑세스 하려는 경우에 나타남.

## 속성 추가
위 표기법 중 하나를 사용해 기존 객체에 속성을 추가할 수 있음.
```js
const person = { name: "Ananth", age : 43 };
person.job = "software dev";

console.log(person.job); // output: software dev

속성 제거

객체에 따라 속성을 제거해야 하는 경우, 혹은 제거하고 싶지 않아도 저장된 데이터를 지우려는 경우 속성 값을 0 또는 null, 빈 문자열, undefined 등으로 설정함.

const person = { name: "Anath", age : 43, location: "Reno, Nevada", accountBalance: 12500 };
person.name = ""; // set to an empty string
person.accountBalance = 0; // set to 0 
person.location = null;
person.age = undefined;

console.table(person); // run the code to see how this displays the object as a table!

완전히 속성을 제거하고 싶은 경우에는 delete연산자를 사용함.

const person = { name: "Ananth", age: 43, ssn:"264-00-2315"};

delete person.ssn;
console.log(person.ssn); // output: undefined

공통 속성

.name 함수의 이름을 반환하는 .name 속성임. 변수에 숨겨진 함수가 있고 그 이름이 필요한 경우 엑세스 가능함.

// Function stored in a variable
let myFunction = function sayHello(){
console.log("Hello");
}
// I can access the name property of the stored function
console.log(myFunction.name); // output : sayHello

.length 문자열과 배열 모두 문자열의 문자 수나 배열의 길이를 알려주는 .length 속성이 있음.

// Actual town name is Wales
let welshTown = "Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch";
console.log(welshTown.length) // output : 58
const myArray = [42, 58, 65, 52, 47, 62];
console.log(myArray.length); // output : 6

.push() and .pop() .push()와 .pop()은 배열 객체에만 있는 속성으로 배열 끝에서 각각 새요소를 추가 및 제거하는 메서드임.

const myArray = [ 8, 7, 6, 5];
myArray.pop(); // Remove the last value.
console.log(myArray) // output: (3) [8, 7, 6]
myArray.push(4); // add 4 to the end
console.log(myArray) // output: (4) [8,7,6,4]

JS의 객체 속성 규칙

속성은 객체네 저장된 데이터와 메서드에 엑세스하는 수단으로 사용됨.
점 표기법(objectName.property) 또는 괄호표기법(objectName[“property”])를 통해 이런 속성에 접근가능함.
속성은 문자열, 부울, 숫자, 객체, 함수 및 배열을 포함한 모든 유효한 데이터유형을 보유할 수 있음.
점 또는 괄호 표기법을 사용해 엑세스 시 할당 연산자를 써서 새 속성을 추가하거나 기존 속성을 수정할 수 있음.
변수와 마찬가지로 속성 이름도 대소문자를 구분하며 동일 명명규칙을 따름.
점 또는 괄호 표기법으로 엑세스하면 delete 연산자로 속성을 완전 제거 가능
객체에 존재하지 않는 속성에 엑세스 하려면 undefined 가 반환됨.

JS의 함수 및 메서드 규칙

JS에서 함수 선언은 function 키워드를 사용하고 그 뒤에 함수이름, 괄호, 중괄호 를 씀.
함수는 함수 호출 시 ‘괄호’를 통해 전달된 매개변수를 받음.
return 키워드를 사용해 값을 반환 받으며, 이를 통해 출력을 코드의 다른 부분에서 사용할 수 있음.
메서드는 ‘객체’에서 호출되는 특정 ‘객체’와 연관된 함수임.
함수와 메서드를 ‘변수’ 에 할당하고 다른 함수에 ‘인수’로 전달 가능.
함수 선언을 위한 단축 표기법인 화살표 함수도 있음.
함수는 ‘변수’에 할당된 ‘함수표현식’을 사용해 정의할 수 있음.
함수에는 함수 내에서 엑세스 가능한 ‘변수’ 세트인 자체 스코프가 있음.
함수는 ‘익명’ 일수 있음; 즉 이름이 없음.
함수는 재귀적일 수 있으며 함수가 스스로를 호출할 수 있음.

Object

JS에서 객체

관련 정보와 작업을 함께 보관하는 컨테이너임. 속성과 메서드를 가진 실제 객체임.

객체는 어떻게 작동하나

객체는 키-값 쌍을 사용해 작동함. 객체 리터럴 구문인 {}를 사용해 객체와 그 속성을 직접 정의함. 다른 방법은 생성자 함수나 클래스를 사용해 청사진 혹은 템플릿 기반으로 객체를 생성함. 프로토타입 객체를 기반으로 생성하기 위해 Object.create()메서드를 사용할 수도 있음.

5W

What: 객체는 관련 데이터와 기능을 함께 저장하고 구성할 수 있는 복잡한 데이터 유형
Why: 구조화된 데이터를 생성하고 단일 엔터티 내 관련 동작을 캡슐화함.
When: 복잡한 엔터티나 구조를 표현할때 사용함.
Where: 함수, 블록, 전역 범위에서 객체를 정의할 수 있고 사용가능함.
Who/How: 개발자

이름 규칙

const trainSchedule = { 
  departure time: "invalid", // space not allowed
  departureTime: "valid", // possible fix without space

  40 - 10 + 2 : "invalid", // keys cannot be expressions

  +compartment: "invalid" // The plus symbol is not a valid character unless part of a string

}

const obj = { 
  1key: "invalid",
  key-name: "invalid",
  function: "invalid"
}
const obj2 = {
  key1: "valid",
  key_name: "valid",
  func: "valid"
}

자바스크립트 기본

자바스크립트

자바스크립트의 데이터 유형

커뮤니케이션

원시 데이터 유형

정적타이핑

Syntax

JavaScript Syntax Rules and Expressions

Values

Characters/Attributes

Basics

Whitespace

Comment

Operators

Comparing Two Different Values

Parenthesis

Brackets

구문 규칙

Declaration

var

let

Const

Object

Exponentiation

Modulo

Increment

Decrement

산술 연산자 규칙

산술 연산자

속성

속성 접근법

속성 제거

공통 속성

JS의 객체 속성 규칙

JS의 함수 및 메서드 규칙

Object

JS에서 객체

객체는 어떻게 작동하나

5W

이름 규칙

[스프링부트 시리즈30] 앵커기능 추가하기

Share