JavaScript (2) : Java와 Javascript의 차이, 문자열 parsing, Arrow function, this 정리

Java vs JavaScript

Java와 Javascript은 두 개의 다른 프로그래밍 언어

 

 

Java:

• 정적 타입의 객체 지향 언어
• 서버와 데스크탑 애플리케이션 개발에 사용
• JVM(Java Virtual Machine)에서 실행

 

Javascript:

• 동적 타입의 스크립팅 언어
• 웹 브라우저에서 실행되어 웹 페이지의 동적인 요소 구현에 주로 사용
• 서버 사이드(Node.js)와 클라이언트 사이드 모두에서 사용 가능

 

JSON:

• 자바스크립트 객체 표기법이라는 의미
• 웹 어플리케이션 간에 데이터를 주고받을 때 사용하는 가벼운 데이터 교환 형식

 

 

❓ 서버 사이드와 클라이언트 사이드란?

 

서버 사이드와 클라이언트 사이드는 웹 개발에서 사용되는 개념

 

 

서버 사이드(Server-side):

• 웹 서버에서 실행되는 코드
• 웹 페이지의 HTML, CSS, JavaScript를 생성하고, 데이터베이스와의 통신 등의 로직을 처리

 

클라이언트 사이드(Client-side):

• 웹 브라우저에서 실행되는 코드
• 웹 페이지의 동적인 표현, 사용자 입력 처리 등의 로직을 처리

 

서버 사이드와 클라이언트 사이드는 서로 통신하여 웹 페이지를 생성하고 동작

 

 

문자열 Parsing

 

indexOf

요소가 배열에 존재하는 지 판단해주는 메서드

• 요소가 배열에 존재한다면, 배열에 있는 첫 번째 요소의 index를 반환
• 요소가 배열에 존재하지 않는다면, -1을 반환

// [탐색당할 문자열].indexOf(찾고자 하는 요소, 탐색 시작 인덱스)

const a = "HELLOWORLD"
const g1 = a.indexOf("HELLO");
const g2 = a.indexOf("HELLO", 2);

console.log(g1);  // 0 출력
console.log(g2);  // -1 출력

---

Arrow Function

간단한 함수 표현식을 제공하는 JavaScript의 문법

• function 대신 ⇒를 사용하여 정의
• 호이스팅 적용 안됨 - 함수 표현식이기 때문 (익명 함수로만 호출 가능해서, 표현식으로 씀)
• ‘this’ 바인딩이 지연되기 때문에 객체 내에서 특정 속성을 가지고 있는 함수를 생성할 때 유용

// 일반 함수의 함수 표현식

const a = function(){
	console.log("aa");
}

-------------------------------------------------------------
// 화살표 함수의 함수 표현식

// 변수 선언 = (매개 변수) => { 실행 내용 }
const b = () => { console.log("bb") };    // bb

// 1. 중괄호 생략 가능 (1줄만 수행하는 경우)
const b = () => console.log("bb");    // bb

// 2. Return이 생략된 형태로도 가능
const sum1 = (a, b) => { return a + b };
const sum2 = (a, b) => a + b;   

sum(3, 4);    // 7
sum2(3, 4);    // 7

// 3. 매개 변수가 1개일 때, 괄호 생략 가능
const a = v1 => alert(v1);
a(15);    // 15

Arrow Function 활용 예제

const run = (func1, func2) => func1(1,2) * func2(3,4);

const result = run( (a,b) => a+b, (a,b) => a*b );

console.log(result);    // 36

---

백틱 (`)

const myName = "이건";

// 문자열과 자바스크립트 혼합이 된다
const introduce = "제 이름은 " + myName + " 입니다";

// 1. 백틱을 이용한 문자열 합 -> ${} 이용
const introduce = `제 이름은 ${myName} 입니다`;

// 2. 백틱은 Enter를 허용한다.

const hello = "안녕하세요" +
	"저는"
	+ "치킨입니다";
// 위 코드는 에러

const hello2 = `
안녕하세요
저는
치킨입니다
`;

console.log(hello2);    // 안녕하세요
												// 저는
												// 치킨입니다

백틱 활용 - insertAdjacentHtml() 을 이용해 document에 태그 삽입

// insertAdjacentHtml : 문자열로 된 html 태그를 집어넣기

const a = '
<div class="a">
	안녕하세요
</div>
`

document.querySelector("body").insertAdjacentHtml("beforeend", a);

 

 

객체 정의

객체는 0개 이상의 property & method로 구성된 집합을 의미

• Property (속성): 객체의 정보, 특성을 나타내는 값
  • 객체가 가지는 색, 크기, 위치 등의 정보가 속성
• Method (메서드): 객체의 기능을 나타내는 함수입니다.
  • 객체가 수행할 수 있는 작업 (이동, 크기 조절, 색 변경 등)

const b = {
	
	// Property
	teamName: "hello",
	
	// Method
	run : function(){
		alert("Hi")
	}
}

 

Object를 생성하는 2가지 방식

// 1. 리터럴 방식 (literal notation) : 바로 객체를 선언

const ssafy = {
	name: "임베디드",
	study: function(){
		console.log("study");
		}
}

// 2. 생성자 함수 (constructor function)

const ssafy2 = new Object();

ssafy2.name = "임베디드",
ssafy2.study = function(){
	console.log("공부하기");
}

// Javascript에서 **,**는 객체의 프로퍼티나 메서드를 추가할 때 사용하는 구분자
// 객체의 프로퍼티와 메서드를 구분하기 위해 ;보다 **,**를 사용하는 것이 일반적

 

절차 지향 프로그래밍 vs 객체 지향 프로그래밍

• 절차 지향 프로그래밍(Procedural Programming) : 프로그램을 순차적으로 처리하는 방식
  • 장점
    • 쉽게 구현할 수 있다: 절차 지향 프로그래밍은 각 기능을 단계별로 정의하는 방식로, 구현하기 쉽다.
    • 명확한 구조: 절차 지향 프로그래밍은 각 기능을 명확하게 구조화하여 코드의 가독성을 높일 수 있다.
  • 단점
    • 재사용성이 떨어진다: 절차 지향 프로그래밍은 기능을 구조화하는 방식으로 구현하기 때문에, 같은 기능을 여러 곳에서 재사용하기 어렵다.
• 객체 지향 프로그래밍(Object Oriented Programming) : 프로그램을 객체(Object)의 집합으로 구성하는 방식
  • 장점
    1. 추상화: 객체를 생성하여 복잡성을 숨기고 프로그램의 나머지 부분에 대한 간단한 인터페이스를 제공할 수 있음
    2. 캡슐화: 관련된 데이터와 함수를 객체로 그룹화하여 구현의 세부 사항을 프로그램의 나머지 부분에서 감출 수 있음
    3. 모듈성: OOP를 사용하면 객체를 독립적으로 개발하고 테스트할 수 있어서 코드 관리와 수정이 쉬워짐
    4. 재사용성: OOP를 사용하면 객체와 그 행동을 프로그램의 다른 부분에서 재사용할 수 있어서 코드 중복을 줄이고 개발 효율을 향상시킬 수 있음
  • 단점
    1. 복잡성 증가: OOP는 여러 객체를 관리하기 때문에 프로그램의 전체적인 구조가 복잡해질 수 있음
    2. 성능 저하: OOP 구조에서 객체 생성과 관리에 드는 오버헤드는 프로그램의 성능에 영향을 줄 수 있음
    3. 개발 시간 증가: OOP의 객체 생성, 관계 정의, 상속 구현 등의 단계가 많아지면 프로그램 개발 시간이 증가할 수 있음.

 

 

절대 경로 vs 상대 경로

절대 경로(Absolute Path)와 상대 경로(Relative Path)는 파일 또는 디렉토리의 위치를 가리키는 경로를 말한다.

• 절대 경로: 전체 파일 시스템의 루트 디렉토리부터 경로가 시작되는 경로이다. 예를 들어, **C:\\Windows\\System32\\cmd.exe**와 같이 경로를 표시한 것이 절대 경로이다.
• 상대 경로: 현재 디렉토리를 기준으로 파일 또는 디렉토리의 위치를 표시한 경로이다. 예를 들어, **./images/logo.png**와 같이 경로를 표시한 것이 상대 경로이다.

절대 경로는 파일의 정확한 위치를 보장하며, 상대 경로는 상대적인 위치를 보장한다.

상대 경로를 사용하면 프로젝트의 구조 변경에 따라 경로를 수정할 필요가 없지만, 절대 경로를 사용하면 프로젝트의 구조 변경에 따른 경로 수정이 필요할 수 있다.

 

 

객체 내에서의 this

• this : 현재 함수를 실행하는 객체를 의미 / python Class 에서 self랑 비슷하게 쓰임

const ssafy = {
	speed: 90,
	run(){
		// this
		// 자기 객체 내부의 값을 참조할 때 사용
		// 화살표 함수를 사용하면 다르게 동작 -> 추후 공부 예정
		console.log(this);
	},
	run2: () => console.log(this),

	run3(){
		this.speed = this.speed -5;
	},

	showSpeed(){
		console.log(this.speed);
	},
} 

-------------------------------------------------------------------------
ssafy.run();
ssafy.run2();

ssafy.run3();
ssafy.run3();
ssafy.showSpeed();    // 80;